let shirtheight = 180;

let shirtwidth = 250;

let triangleoffset = 20;

let triangleheight = 20;

let headwidth = 150;

let headheight = 130;

let headsizeinc = 3;

let eyeoffset = 20;

let eyeheightoffset = 40;

let reyewidth = 20;

let reyeheight = 60;

let leyewidth = 20;

let leyeheight = 40;

let pupilheight = 20;

let lpupiledelay = 10;

let rpupiledelay = 20;

let numfaces = 1;

let maxfaces = 5;

let faceincval = 10;

let mouthoffset = 20;

​

function hsv_to_rgb(h, s, v) {

  h = h % 360;

  let c = v * s;

  let x = c * (1 - abs(((h / 60) % 2) - 1));

  let m = v - c;

  let rp, gp, bp;

  //r,g,b prime depend on value of h in degrees

  if (0 <= h && h < 60) {

    [rp, gp, bp] = [c, x, 0];

  } else if (60 <= h && h < 120) {

    [rp, gp, bp] = [x, c, 0];

  } else if (120 <= h && h < 180) {

    [rp, gp, bp] = [0, c, x];

  } else if (180 <= h && h < 240) {

    [rp, gp, bp] = [0, x, c];

  } else if (240 <= h && h < 300) {

    [rp, gp, bp] = [x, 0, c];

  } else{

    [rp, gp, bp] = [c, 0, x];

  }

  //return r g b values

  return [(rp + m) * 255, (bp + m) * 255, (gp + m) * 255];

}

​

function drawshirt(r,b,g){

  //drawing a shirt with random colors

  fill(r,b,g)

  stroke(200)

  rect((width-shirtwidth)/2, height-shirtheight, shirtwidth, shirtheight, 60, 60, 0, 0);

  //draw a triangle over the shirt 

  fill(255)

  triangle(width/2+triangleoffset,height-shirtheight,width/2-triangleoffset,height-shirtheight,width/2,height-shirtheight+triangleheight)

}

​

function drawface(offsetx, offsety){

  fill(255)

  //lets draw a head

  rect((width-headwidth)/2+offsetx, height-shirtheight-headheight+offsety, headwidth, headheight, 60, 60, 60, 60);

  fill(255)

  //add some eyes

  rect((width-headwidth)/2+eyeoffset+offsetx, height-shirtheight-headheight+eyeheightoffset+offsety, leyewidth, leyeheight, 60, 60, 60, 60);

  rect(width-(width-headwidth)/2-eyeoffset-reyewidth+offsetx, height-shirtheight-headheight+eyeheightoffset+offsety, reyewidth, reyeheight, 60, 60, 60, 60);

  //add some pupils that move, bounded by the height of the eyes

  fill(0)

  rect(width-(width-headwidth)/2-eyeoffset-reyewidth+offsetx, min(max(height-shirtheight-headheight+eyeheightoffset,height*sin(currbg/lpupiledelay)),height-shirtheight-headheight+eyeheightoffset+reyeheight-pupilheight)+offsety, reyewidth, pupilheight, 60, 60, 60, 60);

  rect((width-headwidth)/2+eyeoffset+offsetx, min(max(height-shirtheight-headheight+eyeheightoffset,height*sin(currbg/rpupiledelay)),height-shirtheight-headheight+eyeheightoffset+leyeheight-pupilheight)+offsety, leyewidth, pupilheight, 60, 60, 60, 60);

  //add a traingular mouth in the center of the face

  triangle(

    min(width/2+mouthoffset+offsetx,max(mouseX,width/2-mouthoffset+offsetx)),

   min(max(height-shirtheight-2*mouthoffset+offsety, mouseY),height-shirtheight+offsety),

   width/2+mouthoffset+offsetx,

   height-shirtheight-mouthoffset+offsety,

   width/2-mouthoffset+offsetx,

   height-shirtheight-mouthoffset+offsety

  )

​

}

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  let [r,g,b] = hsv_to_rgb(currbg, 0.41, 1);

  background(r, g, b);

  drawshirt(r,b,g);

  drawface(0,0)

  for(let x = 1; x <=numfaces; x+=1){

    drawface(x*10,x*10)

  }

  numfaces = maxfaces*sin(faceincval)

  faceincval+=0.05

  currbg += 0.5;

  headwidth+=(sin(currbg/headsizeinc));

}

​