One element that changes over time, independently of the mouse.

One element that is different every time you run the sketch.*/

​

let r;

let b;

let g;

let time;

let change;

​

function setup() {

  createCanvas(400, 400);

  mouseClicked();

  time = second();

  change=2;

}

​

function draw() {

  //console.log(second()); 

  noStroke();

  background("white");

​

  //rect 1d - turquoise

  fill(color(r, g, b));

  rect(0, 0, 420, 120);

  rect(0, 0, 420, 120);

​

  //rect 2d - green

  fill(color(r2, g2, b2));

  rect(0, 120, 420, 20);

  rect(0, 120, 420, 20);

​

  //rect 3d - pink

  fill(color(r3, g3, b3));

  rect(0, 140, 420, 70);

  rect(0, 140, 420, 70);

​

  //rect 4d - turquoise

  fill(color(r, g, b));

  rect(0, 210, 420, 120);

  rect(0, 210, 420, 120);

​

  //rect 5d - green

  fill(color(r2, g2, b2));

  rect(0, 330, 420, 20);

  rect(0, 330, 420, 20);

​

  //rect 6d - pink

  fill(color(r3, g3, b3));

  rect(0, 350, 420, 70);

  rect(0, 350, 420, 70);

​

  //rect 1a - turquoise

  fill(color(r, g, b, 80));

  rect(0, 0, 120, 400);

  rect(0, 0, 120, 400);

​

  //rect 2a - green

  fill(color(r2, g2, b2, 80));

  rect(120, 0, 20, 400);

  rect(120, 0, 20, 400);

​

  //rect 3a - pink

  fill(color(r3, g3, b3, 80));

  rect(140, 0, 70, 400);

  rect(140, 0, 70, 400);

​

  //rect 4a - turquoise

  fill(color(r, g, b, 80));

  rect(210, 0, 120, 400);

  rect(210, 0, 120, 400);

​

  //rect 5a - green

  fill(color(r2, g2, b2, 80));

  rect(330, 0, 20, 400);

  rect(330, 0, 20, 400);

​

  //rect 6a - pink

  fill(color(r3, g3, b3, 80));

  rect(350, 0, 70, 400);

  rect(350, 0, 70, 400);

​

  stroke("black");

  if ((second() - time) >= change) {

    rand=int(random(1,10));

    strokeWeight(rand);

    //console.log(rand);

    time=second();

  }

​

  //head

  ellipse(200, 200, 150, 180);

​

  //glasses

  square(135, 160, 40, 5);

  square(205, 180, 40, 5);

  line(175, 180, 205, 195);

​

  //eyes

  //strokeWeight(3);

  fill(color("royalBlue"));

  let circleA = map(mouseX, 0,160,150,160, width);

  let circleB = map(mouseY, 0, 180, 170,185, width)

  circle(circleA, circleB, 15);

  //fill(color('blue'));

  let circlex = map(mouseX,0,220,215,230, width);

  let circley = map(mouseY, 0, 200, 190,200,width)

  circle(circlex, circley, 15);

  //console.log(mouseX,mouseY);

​

  //mouth

  //strokeWeight(5);

  noFill();

  if (mouseY <200) {

  arc(180, 250, 56, 30, 0, PI, OPEN);

  } else if (mouseY >= 200) {

  arc(180, 260, 56, 30, PI, 0, OPEN);    

  }

​

  //nose

  strokeJoin(ROUND);

  triangle(170, 210, 150, 230, 200, 235);

​

  //hair-head

  arc(160, 110, 80, 60, TWO_PI, HALF_PI + QUARTER_PI, OPEN);

  arc(210, 140, 80, 60, TWO_PI, PI, OPEN);

​

  //ponytail

  arc(260, 130, 20, 20, (8 * PI) / 6, PI / 3, OPEN);

  arc(320, 180, 100, 100, (7 * PI) / 6, (12 * PI) / 6, OPEN);

  arc(270, 165, 100, 100, (8 * PI) / 6, (13 * PI) / 6, OPEN);

}

​

function mouseClicked() {

  r = int(random(0, 255));

  g = int(random(0, 255));

  b = int(random(0, 255));

​

  r2 = int(random(0, 255));

  g2 = int(random(0, 255));

  b2 = int(random(0, 255));

​

  r3 = int(random(0, 255));

  g3 = int(random(0, 255));

  b3 = int(random(0, 255));

  //console.log("wrks", r, g, b);

}

​