let option1;

let diameter = 200;

let side = 200;

let bgValue = 0;

let trianglePositionShift = 0;

let buttonIsPressed = false;

let growthRate = 0.01;

let prompt;

​

let button1Pressed = false;

let button2Pressed = false;

let button3Pressed = false;

let buttonChaosPressed = false;

let buttonResetPressed = false;

​

function setup() {

  createCanvas(600, 600);

​

  button1 = createButton("triangle");

  button1.position(450, 250);

  button1.mousePressed(moveTriangle);

​

  button2 = createButton("circle");

  button2.position(200, 500);

  button2.mousePressed(moveCircle);

​

  button3 = createButton("square");

  button3.position(450, 500);

  button3.mousePressed(moveSqaure);

​

  buttonChaos = createButton("chaos");

  buttonChaos.position(200, 250);

  buttonChaos.mousePressed(moveChaos);

  // TODO: Make reset button appear only after a button is clicked

  buttonReset = createButton("reset");

  buttonReset.position(500, 550);

  buttonReset.mousePressed(resetCanvas);

}

​

function draw() {

  // set up

  background(

    200 - bgValue * 2,

    200 - bgValue / 2,

    200 - bgValue / 4,

    255 - bgValue * 4

  );

  textSize(16);

  noStroke();

  fill(100, 100, 100, 255);

  text("try click on a button →", 50, 60);

​

  //   if (buttonIsPressed) {

  //     diameter += diameter * growthRate;

  //     side -= diameter * growthRate;

  //     trianglePositionShift += diameter * growthRate;

  //     bgValue += 1;

  //   }

​

  if (button1Pressed) {

    trianglePositionShift += frameCount * growthRate * 10;

    console.log(trianglePositionShift);

  } else {

    trianglePositionShift = 0;

  }

​

  if (button2Pressed) {

    diameter += diameter * growthRate;

  } else {

    diameter = 200;

  }

​

  if (button3Pressed) {

    side -= diameter * growthRate;

  } else {

    side = 200;

  }

​

  if (buttonChaosPressed) {

    growthRate = 1.1;

    trianglePositionShift += frameCount * growthRate;

    diameter += diameter * growthRate;

    side -= diameter * growthRate;

    bgValue += 1;

    console.log(trianglePositionShift);

​

    background(

    random(255),random(255),random(255));

  }

​

  if (buttonResetPressed) {

    bgValue = 0;

    background(200, 200, 200, 255);

    buttonResetPressed = false;

    frameCount = 0;

    growthRate = 0.01;

  }

​

  stroke("#888");

​

  // button 1

  fill("#1d4785");

  triangle(

    300 - trianglePositionShift / 2,

    50,

    300 - trianglePositionShift / 4,

    250 + trianglePositionShift / 4,

    500 + trianglePositionShift / 4,

    250 + trianglePositionShift / 8

  );

​

  // button 2

  fill("#78c2ff");

  option1 = circle(150, 400, diameter);

​

  // button 3

  fill("#4283d3");

  rectMode(CENTER);

  option2 = square(400, 400, side);

​

  noStroke();

  fill(100, 100, 100, 255);

​

  // console.log(frameCount);

}

​

function option1Animation() {

  buttonIsPressed = true;

  // diameter += frameCount;

}

​

function moveTriangle() {

  button1Pressed = true;

  console.log("▲ button pressed");

}

​

function moveCircle() {

  button2Pressed = true;

  console.log("● button pressed");

}

​

function moveSqaure() {

  button3Pressed = true;

  console.log("◼︎ button pressed");

}

​

function moveChaos() {

  buttonChaosPressed = true;

  console.log("Chaos mode enabled");

}

​

function resetCanvas() {

  button1Pressed = false;

  button2Pressed = false;

  button3Pressed = false;

  buttonChaosPressed = false;

  buttonResetPressed = true;

  console.log("Reset mode enabled");

}

​