​

​

function setup() {

  createCanvas(400, 400);

  textSize(18);

}

​

function draw() {

  // Gradient background from green to black

  setGradient(0, 0, width, height, color(0, 255, 0), color(0));

​

  fill("white");

​

  if (!serialActive) {

    text("Press space bar to select port", 60, 60);

  } else {

    // text("Connected", 20, 30);

    // Print the current values

    // text('mouseY = ' + mouseY, 20, 50);

    // text('Brightness = ' + brightness, 20, 70);

  }

​

  // Adjust brightness of LED based on mouse position

  brightness = map(mouseY, 0, height, 255, 0);

​

  // Write the brightness value to Arduino

  if (serialActive) {

    let sendToArduino = brightness + "\n";

    writeSerial(sendToArduino);

  }

}

​

// Function to draw a gradient background

function setGradient(x, y, w, h, c1, c2) {

  noFill();

  for (let i = y; i <= y + h; i++) {

    let inter = map(i, y, y + h, 0, 1);

    let c = lerpColor(c1, c2, inter);

    stroke(c);

    line(x, i, x + w, i);

  }

}

​

function keyPressed() {

  if (key == " ") {

    // important to have in order to start the serial connection!!

    setUpSerial();

  }

}

​

// This function will be called by the web-serial library

// with each new *line* of data. The serial library reads

// the data until the newline and then gives it to us through

// this callback function

function readSerial(data) {

  if (data != null) {

  }

}

​