degrees();

  createCanvas(950, 950);

  margex = width / 5;

  margey = height / 5;

  framex = width - margex;

  framey = height - margey;

  centerx = width / 2;

  centery = height / 2;

}

​

function draw() {

  background(mouseX, mouseY, 225);

​

  //white circle//

  fill(225, mouseX, mouseY);

  noStroke();

  ellipse(mouseX, mouseY, framex, framey);

​

  //black half//

  fill(mouseY, 225, mouseX);

  arc(mouseX, mouseY, framex, framey, PI + HALF_PI, HALF_PI);

​

  //small white//

  fill(225, mouseX, mouseY);

  ellipse(mouseX, mouseY - margey, framex / 2, framey / 2);

​

  //small black//

  fill(mouseY, 225, mouseX);

  ellipse(mouseX, mouseY + margey, framex / 2, framey / 2);

​

  //smaller black//

  fill(mouseY, 225, mouseX);

  ellipse(

    mouseX,

    mouseY - margey,

    framex / 2 - width / 4,

    framey / 2 - height / 4

  );

​

  //smaller white//

  fill(225, mouseX, mouseY);

  ellipse(

    mouseX,

    mouseY + margey,

    framex / 2 - width / 4,

    framey / 2 - height / 4

  );

}

let pos = 25

function mouseWheel(event) {

  print(event.delta);

  //move the square according to the vertical scroll amount

  pos += event.delta;

  //uncomment to block page scrolling

  //return false;  

}