let alpha = 255;

let left = 0;

let right = 0;

let buttonState = 0; //state of the switch that cleans the etch-a-sketch

​

function preload() {

  Song = loadSound("Run-Amok.mp3");

}

​

function setup() {

  Song.play();

  Song.loop();

​

  createCanvas(600, 400);

  textSize(18);

  background(190);

  frame();

} // end bracket of setup

​

let i = 0;

​

function draw() {

  while (i < 1) {

    buttonState = 1;

    i++;

  }

​

  // one value from Arduino controls the background's red color

​

  // the other value controls the transparency value

​

  fill(0, 0, 0, map(alpha, 0, 1023, 0, 255)); // fills the color of the ellipse and maps its alpha value

  ellipse(

    map(rVal, 0, 1023, 70, width - 90),

    map(alpha, 0, 1023, 70, height - 100),

    3

  ); // the ellipse is drawn.

  // moves horizontally based on its rvalue

  // moves vertically based on its alpha value

​

  if (buttonState == 1) {

    frame(); // calls the frame function i.e. restarts the sketch

  }

} // end bracket of draw

​

function keyPressed() {

  if (key == " ") {

    // pressing the spacebar starts the serial connection

    setUpSerial();

  }

}

​

function readSerial(data) {

  ////////////////////////////////////

  //READ FROM ARDUINO HERE

  ////////////////////////////////////

​

  if (data != null) {

    // make sure there is actually a message

    // split the message

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

    // if the right length, then proceed

    if (fromArduino.length == 3) {

      // store Arduino values here

      // checks and connects the serial connection

      rVal = fromArduino[0];

      alpha = fromArduino[1];

      buttonState = fromArduino[2];

    }

​

    // console.log(fromArduino);

​

    //////////////////////////////////

    //SEND TO ARDUINO HERE (handshake)

    //////////////////////////////////

    let sendToArduino = left + "," + right + "\n";

    writeSerial(sendToArduino);

  }

}

​

function frame() {

  // draws the entire frame

  strokeWeight(120);

  noFill();

  stroke(191, 26, 20);

  rect(0, 0, 600, 400);

  fill(230, 219, 222);

​

  fill(230, 219, 222);

  strokeWeight(30);

  stroke(230, 219, 222);

  strokeJoin(ROUND);

  rect(70, 70, 460, 260);

​

  noStroke();

  fill(234, 196, 165);

  textAlign(CENTER);

  textSize(30);

  textFont("Brush Script MT");

  text("Etch A Sketch", 300, 40);

​

  noStroke();

  fill(255);

  ellipse(30, 365, 50, 50);

  ellipse(570, 365, 50, 50);

}

​