let buttonPressed = false;

let rectColors = [];

let rectTimes = [];

​

function setup() {

  createCanvas(600, 600);

  for (let i = 0; i < 5; i++) {

    rectColors.push(0);

    rectTimes.push(millis());

  }

}

​

function draw() {

  let s;

​

  switch (mode) {

    case 0:

      button();

      s = "Mode: Button";

      break;

    case 1:

      toggleButton();

      s = "Mode: Toggle";

      break;

    case 2:

      binaryRectangles();

      s = "Mode: Rectangles";

      break;

    case 3:

      fadingRects();

      s = "Fading Rectangles";

      break;

    case 4:

      fadingRectsNoFlash();

      s = "Fading Rectangles (no flash)";

      break;

  }

  push();

  textSize(20);

  fill(0, 255, 255);

  text(s, 10, 30);

  fill(100);

  textSize(15);

  text("(Press keys 0-4 for different modes)", 10, 50);

  pop();

}

​

function button() {

  background(240, 10, 100);

  push();

  rectMode(CENTER);

  fill(255);

  if (

    mouseIsPressed &&

    mouseX > width / 2 - 100 &&

    mouseX < width / 2 + 100 &&

    mouseY > height / 2 - 50 &&

    mouseY < height / 2 + 50

  ) {

    fill(0, 150);

  }

  rect(width / 2, height / 2, 200, 100, 20);

  textAlign(CENTER);

  let s = "Not pressed";

  textSize(32);

  fill(0);

  if (

    mouseIsPressed &&

    mouseX > width / 2 - 100 &&

    mouseX < width / 2 + 100 &&

    mouseY > height / 2 - 50 &&

    mouseY < height / 2 + 50

  ) {

    fill(255, 0, 255);

    s = "Pressed";

  }

  text(s, width / 2, height / 2 + textAscent() / 3); // textascent: https://p5js.org/reference/#/p5/textAscent

  pop();

}

​

function toggleButton() {

  background(240, 10, 100);

  let s = "Off";

  push();

  rectMode(CENTER);

  fill(255);

  if (buttonPressed) {

    fill(0, 150);

  }

  rect(width / 2, height / 2, 200, 100, 20);

  textAlign(CENTER);

  textSize(32);

  fill(0);

  if (buttonPressed) {

    fill(255, 0, 255);

    s = "On";

  }

  text(s, width / 2, height / 2 + textAscent() / 3); // textascent: https://p5js.org/reference/#/p5/textAscent

  pop();

}

​

function binaryRectangles() {

  background(0);

​

  fill(255);

​

  let rectWidth = width / 5;

​

  if (mouseX > 10 && mouseX < rectWidth) {

    rect(0, 0, rectWidth, height);

  } else if (mouseX >= rectWidth && mouseX < rectWidth * 2) {

    rect(rectWidth, 0, rectWidth, height);

  } else if (mouseX >= rectWidth * 2 && mouseX < rectWidth * 3) {

    rect(rectWidth * 2, 0, rectWidth, height);

  } else if (mouseX >= rectWidth * 3 && mouseX < rectWidth * 4) {

    rect(rectWidth * 3, 0, rectWidth, height);

  } else if (mouseX >= rectWidth * 4 && mouseX < rectWidth * 5) {

    rect(rectWidth * 4, 0, rectWidth, height);

  } else {

    background(255);

  }

}

​

function fadingRects() {

  background(0);

  push();

  fill(0);

  noStroke();

  let rectWidth = width / 5;

​

  for (let i = 0; i < 5; i++) {

    if (

      mouseX > i * rectWidth &&

      mouseX < rectWidth * (i + 1) &&

      (mouseX != pmouseX || mouseY != pmouseY)

    ) {

      rectColors[i] = 255;

    } else {

      rectColors[i] -= 15;

    }

    fill(rectColors[i]);

    rect(rectWidth * i, 0, rectWidth, height);

  }

  pop();

}

​

function fadingRectsNoFlash() {

  background(0);

  push();

  fill(0);

  noStroke();

  let rectWidth = width / 5;

​

  for (let i = 0; i < 5; i++) {

    if (

      mouseX > i * rectWidth &&

      mouseX < rectWidth * (i + 1) &&

      (mouseX != pmouseX || mouseY != pmouseY)

    ) {

      rectColors[i] = 255;

      rectTimes[i] = millis();

    } else if (millis() > rectTimes[i] + 200 ) {

      rectColors[i] -= 30;

    }

    fill(rectColors[i]);

    rect(rectWidth * i, 0, rectWidth, height);

  }

  pop();

}

​

function keyPressed() {

  switch (key) {

    case "0":

      mode = 0;

      break;

    case "1":

      mode = 1;

      buttonPressed = false;

      break;

    case "2":

      mode = 2;

      break;

    case "3":

      mode = 3;

      break;

    case "4":

      mode = 4;

      break;

  }

}

​

function mousePressed() {

  if (

    mouseX > width / 2 - 100 &&

    mouseX < width / 2 + 100 &&

    mouseY > height / 2 - 50 &&

    mouseY < height / 2 + 50

  ) {

    buttonPressed = !buttonPressed;

  }

}

​