Inspired by Jongmin Park's sketch from Programming for Artists @ CUNY CCNY Spring 2022

*/

​

//define height of rows

let rowHeight;

​

//setup area

function setup() {

  //600x600 canvas

  createCanvas(600, 600);

  //no outline

  noStroke();

  //set height of rows to 1/3 of canvas size.

  rowHeight = height / 3;

}

//repeating code

function draw() {

  //set x to vertical mouse movements

  let x = mouseX;

  //set y to horizontal mouse movements

  let y = mouseY;

  //opposite values of mousex and mousey

  let inverseX = width - mouseX;

  let inverseY = height - mouseY;

​

  //if the mouse is pressed change the background color and transparency until mouse is released

  if (mouseIsPressed) {

    background(80, 175);

  } else {

    background(175, 80);

  }

  //set circle color to black, half transparency

  fill(255, 150);

  //define a circle in the middle of the y axis of the canvas a that follows mousex movement and changes size based on mousey movement

  circle(x, height / 2, y);

  //set circle2 color to white, half transparency

  fill(0, 150);

  //define another circle with the inverse movement

  circle(inverseX, height / 2, inverseY);

​

  //if mouseY is lower than 1/3 of the screen then make a rectangle on the bottom 1/3 of the screen

  if (mouseY < rowHeight) {

    fill(20, 150);

    rect(0, 0, width, rowHeight);

    //if mouseY is on the 2/3 of the screen, make another rectangle with a different color

  } else if (mouseY < rowHeight * 2) {

    fill(80, 150);

    rect(0, rowHeight, width, rowHeight);

    //if mouseY is on the top 1/3 of the screen, make another rectangle with a different color

  } else {

    fill(140, 150);

    rect(0, rowHeight * 2, width, rowHeight);

  }

}

​