let h;

let multi = ['#C264C1', '#EBE14A', '#00980A', '#687DF2', '#69F591'];

let mycolor;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  w = windowWidth;

  h = windowHeight;

  let rand = round(random(multi.length-1)); 

  mycolor = multi[rand];

​

  angleMode(DEGREES);

  frameRate(9);

  ellipseMode(CENTER);

​

}

​

function draw() {

  //text(mycolor, 34, 45); 

  background(mycolor);

  sleepy(); 

  wakeMultitouch();

​

function sleepy() {

​

  //hair

  noStroke();

  fill("#010178");

  rect(0, 0, w / 9, h / 5);

  rect(w / 9, 0, w / 9, h / 7);

  rect(w / 4.5, 0, w / 9, h / 5);

  rect(w / 3, 0, w / 9, h / 7);

  rect(w * 4 / 9, 0, w / 9, h / 5);

  rect(w * 5 / 9, 0, w / 9, h / 7);

  rect(w * 6 / 9, 0, w / 9, h / 5);

  rect(w * 7 / 9, 0, w / 9, h / 7);

  rect(w * 8 / 9, 0, w / 9, h / 5);

  rect(w, 0, w / 9, h / 7);

​

  //left eyebrow

  rectMode(CENTER);

  fill("#010178");

  rect(w / 3, h / 3, w / 4, h / 20);

​

  //right eyebrow

  fill("#010178");

  rect(width - w / 3, h / 3, w / 4, h / 20);

​

  //left eye closed

  fill("#010178");

  ellipse(w / 3, h / 2, w / 4, w / 4);

​

  //right eye closed

  noStroke();

  fill("#010178");

  ellipse(width - w / 3, h / 2, w / 4, w / 4);

​

  //nose

  fill("#010178");

  arc(w / 2, height - h / 2.8, w / 16, w / 16, 180, 0);

​

  //mouth

  {

    fill("FFFFFFF");

    stroke("#010178");

    strokeWeight(h / 40);

    var step = frameCount % 20;

    translate(width - w / 2, height - h / 5);

    applyMatrix(1 / step, 0, 0, 1 / step, 0, 0);

    ellipse(10, 0, w / 5, w / 5);

    textSize(80);

    noStroke();

    fill('#FFFFFF');

    text('zzz', w / 5, w / 5);

    resetMatrix();

  }

​

}

​

function wakeMultitouch() {

  fill("#010178");

  let display = touches.length;

  //text(display, 20, 100);

  //ellipse(200,200,300-100*display,300-100*display);

​

  //left eye open

  noStroke();

  fill('#010178');

  ellipse(w / 3, h / 2, w / 4, w / 4);

  fill('#69F5E7');

  ellipse(w / 3, h / 2, w / 5, w / 5);

  fill('#B6BDFA');

  ellipse(w / 3, h / 2, w / 6, w / 6);

  fill('#010178');

  ellipse(w / 3, h / 2, w / 11, w / 11);

  fill('#FFFFFF');

  ellipse(w / 2.8, h / 2.1, w / 28, w / 28);

​

  //right eye open

  fill('#010178');

  ellipse(width - w / 3, h / 2, w / 4, w / 4);

  fill('#69F5E7');

  ellipse(width - w / 3, h / 2, w / 5, w / 5);

  fill('#B6BDFA');

  ellipse(width - w / 3, h / 2, w / 6, w / 6);

  fill('#010178');

  ellipse(width - w / 3, h / 2, w / 11, w / 11);

  fill('#FFFFFF');

  ellipse(width - w / 3.2, h / 2.1, w / 28, w / 28);

​

  //left eye closed

  fill("#010178");

  ellipse(w / 3, h / 2, 0.25*w - 25*display , 0.25*w - 25*display);

​

  //right eye closed

  noStroke();

  fill("#010178");

  ellipse(width - w / 3, h / 2, 0.25*w - 25*display , 0.25*w - 25*display);

}

}

​

function windowResized() {

resizeCanvas(windowWidth, windowHeight);

}