let t = 0;  //Time variable

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(255);

  strokeWeight(2.5);

​

  translate(300, 300); //moving reference point to the canvas center (move origin to the center)

  let mouseVecCurrent = createVector(mouseX - 300, mouseY - 300); //Vector holding current mouse position

  let mouseVesPrev = createVector(pwinMouseX - 300, pwinMouseY - 300); //Vector holding previous mouse position

​

  let mouseAngle = mouseVecCurrent.heading(); //Angle of mouse pointer relative to the origin

  let mouseAngularV = 9 * abs(mouseAngle - mouseVesPrev.heading()); //Angular velocity of the cursor

​

  //If cursor is rotating rapid enough around the origin, set colorChange to true. OR, if colorChange is already and it has not been 2 seconds since the last rapid rotation, keep colorChange as true.

  if (mouseAngularV > 53 || (colorChange && millis() - t < 2000)) {

    if (!colorChange) {  //If colorChange is false, set t to current millis time.

      t = millis();

    }

    colorChange = true;

  } else colorChange = false;

​

  let divNum = 30; //Number of divisions in color wheel to generate behind the face

​

  //color blocks

  for (let i = 1; i <= divNum; i++) {

    fill(i * 10 + 70, 3 * i + 125, 5 * i);  //Default color regardless of the cursor movement.

    if (colorChange) fill(random(255), random(255), random(255));  //If colorChange is true, wheel colors will totally be random for 2 seconds.

    triangle(

      0,

      0,

      700 * cos(((i - 1) * 2 * PI) / divNum + mouseAngle),

      700 * sin(((i - 1) * 2 * PI) / divNum + mouseAngle),

      700 * cos((i * 2 * PI) / divNum + mouseAngle),

      700 * sin((i * 2 * PI) / divNum + mouseAngle)

    );

  }

​

  //text(mouseAngularV, 100, 250);

​

  translate(-300, -280); //reset the reference point

​

  //ears

  fill(251, 206, 177);

  rotate(radians(347)); //Rotate left ear 13 degrees counterclockwise

  ellipse(160, 301, 30, 50); //Outer ear

  fill(207, 165, 137);

  ellipse(160, 301, 19, 33); //Inner ear

​

  rotate(radians(23)); //Rotate right ear 10 degrees clockwise

  fill(251, 206, 177);

  ellipse(413, 187, 30, 50); //Outer ear

  fill(207, 165, 137);

  ellipse(413, 187, 19, 33); //Inner ear

​

  rotate(radians(350)); //Reset the reference point

​

  //face

  fill(251, 206, 177);

  arc(300, 250, 148, 235, 0, PI);

  arc(300, 250, 148, 155, PI, 2 * PI);

​

  //eyes

  fill(255);

  ellipse(263, 263, 33, 12); //Left sclera

  ellipse(337, 263, 33, 12); //Left pupil

  fill(0);

  ellipse(263, 263, 9, 9); //Right sclera

  ellipse(337, 263, 9, 9); //Right pupil

​

  //nose

  noFill();

  arc(300, 295, 10, 10, 0, PI);

​

  //mouth

  fill(150, 10, 30);

  arc(300, 325, 50, 40, 0, PI, CHORD);

​

  //Left part of the hair

  fill(0);

  stroke(0);

  beginShape();

  curveVertex(314, 192);

  curveVertex(314, 192);

  curveVertex(302, 215);

  curveVertex(292, 250);

  curveVertex(222, 255);

  curveVertex(227, 205);

  curveVertex(247, 180);

  curveVertex(277, 160);

  curveVertex(307, 155);

  curveVertex(327, 163);

  curveVertex(327, 180);

  curveVertex(324, 188);

  curveVertex(314, 192);

  curveVertex(314, 192);

  endShape();

​

  //Right part of the hair

  beginShape();

  curveVertex(324, 185);

  curveVertex(324, 185);

  curveVertex(326, 175);

  curveVertex(337, 170);

  curveVertex(366, 177);

  curveVertex(374, 198);

  curveVertex(375, 225);

  curveVertex(372, 232);

  curveVertex(362, 210);

  curveVertex(347, 200);

  curveVertex(324, 185);

  curveVertex(324, 185);

  endShape();

}

​