createCanvas(740, 185);

  colorMode(HSB);

  strokeWeight(10);

}

​

function draw() {

​

  background(180, 10, 80);

  drawRobotFace(      0, 0, 185,   0);

  drawRobotFace(    185, 0, 185,  80);

  drawRobotFace(2 * 185, 0, 185, 160);

  drawRobotFace(3 * 185, 0, 185, 240);  

  noLoop();

}

​

function drawRobotFace(x, y, w, baseHue){

  push();

  translate(x, y);

  scale(w / 400, w / 400);

​

  let h1 = (baseHue + 180) % 360;

  let h2 = (baseHue +   0) % 360;

  let h3 = (baseHue +  50) % 360;

  // Draw the background of the face

  stroke(h1, 30, 50);

  fill(h1, 30, 100);

  square(80, 100, 220);

​

  // Draw the eye

  stroke(h1, 30, 30);

  fill(h1, 10, 100);

  ellipse(190, 100, 180, 80);

  fill(h2, 50, 100);

  circle(160, 100, 20);

  stroke(h2, 100, 50);

  point(160, 100);

  stroke(h1, 30, 30)

  line(100, 70, 140, 50);

  // Draw the mouth

  fill(h3, 100, 100);

  stroke(h1, 30, 30)

  rect(140, 230, 180, 60);

​

  // Draw the nose

  stroke(h1, 30, 30);  

  fill(h2, 50, 100);

  triangle(170, 200, 230, 200, 200, 160);

  pop();

}