const serial = new p5.WebSerial();

// HTML button object:

let portButton;

let outByte = 0;              // for outgoing data

let c; 

let morningColor; 

let nightColor; 

let bgRed; 

let bgGreen;

let bgBlue; 

​

function setup() {

  createCanvas(600, 400);          // make the canvas

  // check to see if serial is available:

  if (!navigator.serial) {

    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");

  }

  // if serial is available, add connect/disconnect listeners:

  navigator.serial.addEventListener("connect", portConnect);

  navigator.serial.addEventListener("disconnect", portDisconnect);

  // check for any ports that are available:

  serial.getPorts();

  // if there's no port chosen, choose one:

  serial.on("noport", makePortButton);

  // open whatever port is available:

  serial.on("portavailable", openPort);

  // handle serial errors:

  serial.on("requesterror", portError);

  // handle any incoming serial data:

  serial.on("close", makePortButton);

  c = new Circle(width/2, height/2, 100); 

}

​

function draw() {

  background(300-c.y, 100-c.y, 100+c.y); 

  //background(bgRed, bgGreen, bgBlue); 

  c.display(); 

  c.move(); 

  var rightBrightness = map(c.y, height, 0, 0, 255);

  outData = rightBrightness;  // setup the serial output

  serial.write(outData); // write to serial for Arduino to pickup

​

  var textRColor = map(rightBrightness, 0, 255, 255,0); // draw the text

  textSize(12);

  text("BRIGHTNESS LEVEL: " + rightBrightness, 20, 30);

}

​

​

class Circle{ 

   constructor(startX, startY, d) { 

     this.x = startX; 

     this.y = startY; 

     this.d = d; 

     this.direction = 1; 

     this.speed = 2; 

   }

​

  move(){ 

    if (keyIsDown(UP_ARROW) && (this.y>50)){

      this.y-=this.speed; 

    }

    if (keyIsDown(DOWN_ARROW) && (this.y < height-50)) {

      this.y+=this.speed;

    }

  }

  display(){ 

    noStroke(0); 

    fill(246, 92, 80); 

    ellipse(this.x, this.y, this.d); 

    fill(8, 24, 58); 

    ellipse(100, height+350, 1000); 

    ellipse(width, height+320, 1000);

  }

}

​

​

function mouseDragged() {

  // map the mouseY to a range from 0 to 255:

  outByte = int(map(mouseY, 0, height, 0, 255));

  // send it out the serial port:

  serial.write(outByte);

} 

​

​

function keyPressed() {

  if (mouseX<200) { // if the user presses 0 through 9

    console.log("LESS 200");

    outByte = 'H'; // map the key to a range from 0 to 225

  }

  else if (mouseX>200){ 

    console.log("MORE 200");

    outByte = "L"; 

  }

  serial.write(outByte); // send it out the serial port

}

​

function makePortButton() {

  // create and position a port chooser button:

  portButton = createButton("choose port");

  portButton.position(10, 10);

  // give the port button a mousepressed handler:

  portButton.mousePressed(choosePort);

}

// make the port selector window appear:

function choosePort() {

  if (portButton) portButton.show();

  serial.requestPort();

}

// open the selected port, and make the port 

// button invisible:

function openPort() {

  // wait for the serial.open promise to return,

  // then call the initiateSerial function

  serial.open().then(initiateSerial);

  // once the port opens, let the user know:

  function initiateSerial() {

    //console.log("port open");

  }

  // hide the port button once a port is chosen:

  if (portButton) portButton.hide();

}

// pop up an alert if there's a port error:

function portError(err) {

  alert("Serial port error: " + err);

}

// try to connect if a new serial port 

// gets added (i.e. plugged in via USB):

function portConnect() {

  console.log("port connected");

  serial.getPorts();

}

// if a port is disconnected:

function portDisconnect() {

  serial.close();

  console.log("port disconnected");

}

function closePort() {

  serial.close();

}