//Making an array to store the colors so that they can be accessed later in a procedural way

let colors = [];

​

let GoldenRatioString;

​

// by creating 400*400 rows, the first 1600 digits of Pi can be visualised

const columnsTotal = 400;

const rowsTotal = 400;

​

let rowNumber = 0; //this is to keep track of how many digits have been represented in a row

​

​

//the txt file contains 

function preload() {

  loadStrings("Golden Ratio.txt", loadGoldenRatio);

}

​

function loadGoldenRatio(GoldenRatioLine) {

  GoldenRatioString = GoldenRatioLine[0];

}

​

let rVal = 0;

let alpha = 255;

let left = 0;

let right = 0;

let buttonState = 0;

​

// let xPosition = 1023 / 2;

// let yPosition = 1023 / 2;

​

// let mapX = 200;

// let mapY = 200;

​

// function preload() {

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

// }

​

​

function setup() {

  createCanvas(600, 400);

  textSize(18);

  background(190)

  frame();

​

  colors = [

    "black", // for 0

    "red", // for 1

    "orange", // for 2

    "yellow", // for 3

    "green", // for 4

    "cyan", // for 5

    "blue", // for 6

    "indigo", // for 7

    "violet", // for 8

    "white", // for 9

  ];

}

 let i = 0;

​

function draw() {

  while(i<1){

    buttonState=1;

    i++

  }

  // ellipse(rVal, alpha, 50); 

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

  // background(map(rVal, 0, 1023, 0, 255), 255, 255, 0);

​

  // the other value controls the text's transparency value

  fill(0, 0, 0, map(alpha, 0, 1023, 0, 255));

   ellipse(map(rVal, 0, 1023, 70, width-90), map(alpha,  0, 1023, 70, height-100), 5);

  // map(value, start1, stop1, start2, stop2, [withinBounds])

  if (buttonState == 1){

    // print("hehe")

    // background(map(rVal, 0, 1023, 0, 255), 255, 255);

    // background (190)

    pixel();

    frame();

  }

​

  // if (!serialActive) {

  //   text("Press Space Bar to select Serial Port", 20, 30);}

//   } else {

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

​

//     // Print the current values

//     text('rVal = ' + str(rVal), 20, 50);

//     text('alpha = ' + str(alpha), 20, 70);

​

//   }

​

  // click on one side of the screen, one LED will light up

​

}

​

function keyPressed() {

  if (key == " ") {

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

    setUpSerial();

  }

  // Song.play();

}

​

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) {

      // only store values here

      // do everything with those values in the main draw loop

      rVal = fromArduino[0];

      alpha = fromArduino[1];

      buttonState = fromArduino[2];

    }

    // console.log(fromArduino);

​

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

    //SEND TO ARDUINO HERE (handshake)

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

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

    writeSerial(sendToArduino);

  //   if (buttonState == 0) {

  //   Song.stop();

  // } else if (buttonState ==1) {

  //   Song.play();

  // }

  }

}

​

function 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);

​

}

​

function pixel() {

  if (!GoldenRatioString) {

    return;

  }

​

  // draw a whole row of digits

  for (let columnNumber = 0; columnNumber < columnsTotal; columnNumber++) {

    const Index = columnsTotal * rowNumber + columnNumber;

    const GoldenRatioDigit = int(GoldenRatioString.substring(Index, Index + 1));

    const Color = colors[GoldenRatioDigit];

​

    fill(Color);

    rect(columnNumber, rowNumber, 10, 10);

    //by enlongating the rectangles a cool effect can be seen, it looks like its bleeding.

  }

​

  //for looping until the rows are equal to the lenghth of the canvas.

  rowNumber++;

  if (rowNumber >= rowsTotal) {

    noLoop();

  }

}