let xPos = 0; // horizontal position of the ellipse

let yPos = 0; // vertical position of the ellipse

let switchState = 0; // state of the switch that clears the Etch A Sketch

​

// Setup function, runs once when the sketch is loaded

function setup() {

  createCanvas(600, 400);

  textSize(18);

  background(255);

  frame();

}

​

// Counter variable for the while loop in draw function

let i = 0;

​

// Draw function, runs continuously to update the sketch

function draw() {

  // While loop to set the button state to 1 only once

  while (i < 1) {

    switchState = 1;

    i++;

  }

​

  // Map the xPos and yPos to the canvas size to control ellipse position

  fill("#39FF13");

  // Draw the ellipse at a position determined by the mapped xPos and yPos

  ellipse(

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

    map(yPos, 1023, 0, 70, height - 80),

    3

  );

​

  // Check if the switchState is 1, and call the frame function to clear the sketch

  if (switchState == 1) {

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

  }

}

​

// Function to set up the serial connection when spacebar is pressed

function keyPressed() {

  if (key == " ") {

    setUpSerial();

  }

}

​

// Function to read data from the Arduino

function readSerial(data) {

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

  //READ FROM ARDUINO HERE

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

​

  // Check if there is any data received

  if (data != null) {

    // Split the message

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

    // If the message is of the correct length, store the Arduino values

    if (fromArduino.length == 3) {

      xPos = fromArduino[0]; // Update the xPos value based on input from Arduino

      yPos = fromArduino[1]; // Update the yPos value based on input from Arduino

      switchState = fromArduino[2];

    }

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

    //SEND TO ARDUINO HERE (handshake)

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

    let sendToArduino = xPos + "," + yPos + "\n";

    writeSerial(sendToArduino);

  }

}

​

// Function to draw the frame of the Etch A Sketch

function frame() {

  // Draw the outer frame

  strokeWeight(120);

  noFill();

  stroke("#2BC20E");

  rect(0, 0, width, height);

​

  // Draw the inner frame

  fill("#010B12");

  strokeWeight(30);

  stroke("#010B12");

  strokeJoin(ROUND);

  rect(70, 70, width-140, height-140);

​

  // Draw the title 

  noStroke();

  fill("#1E1F21");

  textAlign(CENTER);

  textSize(30);

  textFont("Brush Script MT");

  text(" ~ Lime Liner ~ ", width/2, 40);

​

  // Draw the two knobs at the bottom

  noStroke();

  fill("#010B12");

  ellipse(width-570, 365, 50, 50);

  ellipse(570, 365, 50, 50);

}

​