const columns = 20;

const fadeSpeed = 2;

let cells = [];

​

​

​

function setup() {

  createCanvas(600, 600);

  for (let r = 0; r < rows; r++) {

    cells[r] = [];

    let ran = random(255)

    for (let c = 0; c < columns; c++) {

      cells[r][c] = ran;

    }

  }

}

​

function draw() {

  background(255);

  //modified from: https://happycoding.io/examples/p5js/arrays/fading-grid 

  cellWidth = width / columns;

  cellHeight = height / rows;

​

  if (mouseX > 0 && mouseX < width &&

      mouseY > 0 && mouseY < height) {

    const mouseR = floor(rows * (mouseY / height));

    const mouseC = floor(columns * (mouseX / width));

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

      cells[mouseR][i] = 255;

    }

  }

​

  for (let r = 0; r < rows; r++) {

    for (let c = 0; c < columns; c++) {

      cells[r][c] -= fadeSpeed;

      cells[r][c] = constrain(cells[r][c], 0, 255);

​

      const y = height * (r / rows);

      const x = width * (c / columns);

​

      fill(cells[r][c], 0, 128);

      noStroke()

      rect(x, y, cellWidth, height);

    }

  }

  // faces basis  

  noStroke();

  fill(240, 220, 215);

  arc(295,250,230,350, radians(-50), radians(-130),OPEN);

  //hair

  fill(35, 20, 20);

  ellipse(300,110,100);

  ellipse(300,90,100);

  ellipse(250,100,110);

  ellipse(330,90,110);

  ellipse(220,120,110);

  ellipse(370,100,110);

  //Eyes

  ellipse(245, 240, 35, 40);

  ellipse(345, 240, 35, 40);

  fill(255);

  ellipse(240, 230, 10, 15);

  ellipse(340, 230, 10, 15);

  stroke(35, 20, 20);

  strokeWeight(5);

  noFill();

  arc(245, 202,50,20,PI,TWO_PI,OPEN);

  arc(345, 202,50,20,PI,TWO_PI,OPEN);

  //nose

  fill(140, 120, 115);

  noStroke();

  triangle(295, 270, 305, 300, 285, 300);

  //mouth

  fill(255, 50, 50);

  arc(295,330,70,70,0,PI);

  //neck

  fill(240, 220, 215);

  rectMode(CENTER);

  rect(295,435,40,60);

  //suite

  fill(0);

  rect(295,580,250,300,30);

  fill(150);

  triangle(275,430,315,430,295,580);

  fill(255);

  ellipse(310,465,10,10);

  ellipse(308,497,10,10);

  ellipse(304,530,10,10);

  stroke(255);

  strokeWeight(6);

  line(200, 490, 240,490);

  //glass

  stroke(0);

  strokeWeight(4);

  noFill();

  ellipse(245, 240, 75, 80);

  ellipse(345, 240, 75, 80);

  line(282,240,307,240);

  rectMode(CORNER);

  noStroke();

}

​

​

​

​

​

​

​