let textVertical;

​

function setup()

{

createCanvas(400, 400); //create canvas

  textVertical = height/2;

  background(220);

}

​

function textDisplay() //display text in the starting

{

text("PRESS SPACE TO START SERIAL PORT", width/2 - 109, height/2 - 5);

}

​

function draw()

{

​

if (serialActive) //if serial is active

{

text("connected", width/2 - 27, height/2 - 5); //tell the user that it is connected

  colorMode(HSB);

  stroke(textVertical, 200, 100);

text("Drag the mouse horizontally to change brighthess", width/2 - 130, height/2); //give instructions on how to control brightness

}

else

{

textDisplay(); //display instructions on how to start serial is not active

}

if (mouseX >= 0 && mouseX<=10){

  brightness = 0;

}

else if (mouseX >= 3 && mouseX<=width/5){

  brightness = 51;

}

else if(mouseX >= width/5 && mouseX<=2*width/5){

  brightness = 102;

}

else if(mouseX >= 2*width/5 && mouseX<=3*width/5){

  brightness = 153;

}

else if(mouseX >= 3*width/5 && mouseX<=4*width/5){

  brightness = 204;

}

else if (mouseX>=4*width/5){

  brightness = 255;

}

else{

  brightness = 0;

}

}

​

function keyPressed() //built in function

{

if (key == " ") //if space is pressed then

{

setUpSerial(); //setup the serial

}

​

​

}

​

//callback function

function readSerial(data)

{

  if (data != null) {

    // convert the string to a number using int()

    let fromArduino = split(trim(data), ",");

    print(fromArduino[0]);

    // Map the potentiometer value to the ellipse width

    textVertical = map(int(fromArduino[0]), 0, 1023, 0, 255); 

  }

let sendToArduino = brightness + "\n"; //add the next line to dimness counter

writeSerial(sendToArduino); //write serial and send to arduino

}