let y = 250;

let c;

let textInput;

​

let offX = 0;

let offY = 0;

​

let button1;

let button2;

let button3;

let button4;

​

let colorPicker1;

let colorPicker2;

​

function setup() {

  c = createCanvas(600, 600);

​

  //Background Color

  colorPicker1 = createColorPicker("black");

  colorPicker1.position(0, 20);

​

  //Text and graphic Color

  colorPicker2 = createColorPicker("white");

  colorPicker2.position(50, 20);

​

  button1 = createButton("SAVE PIC");

  button1.position(447, 0);

  button1.mousePressed(function () {

    saveCanvas(c, "earworm-pic");

  });

​

  //Save GIF, 5 seconds, 300 frames

  button2 = createButton("SAVE GIF");

  button2.position(524, 0);

  button2.mousePressed(function () {

    saveGif("earworm-gif", 5);

  });

​

  //Pause Button - Pauses animation

  button3 = createButton("PAUSE");

  button3.position(540, 22);

  button3.mousePressed(function () {

    noLoop();

  });

​

  //Play Button - Plays animation

  button4 = createButton("PLAY");

  button4.position(490, 22);

  button4.mousePressed(function () {

    loop();

  });

​

  textInput = createInput("Listening to:");

  textInput.position(0, 0);

}

​

function draw() {

  background(colorPicker1.value());

  fill(colorPicker2.value());

​

  strokeWeight(0);

​

  textFont("Gotham");

  textSize(36);

  textAlign(CENTER);

  text("EARWORM", 300, 540);

​

  textSize(14);

​

  push();

  textFont("Whitney");

  let msg = textInput.value();

  text(msg, 300, 570);

​

  pop();

​

  for (let i = -5; i < 15; i++) {

    offX = sin(i / 8.5 + frameCount / 100) * 180;

    offY = cos(i / 10 + frameCount / 55) * 180;

​

    rect(x - offX, y - offY, 45 + i / 2, 45);

    rect(x + offX, y + offY, 40 + i * 2, 40);

  }

}

​