​

function setup() {

  createCanvas(600, 600);

}

​

  // 1   2   3

  // 4   5   6

  //     7

  //     8

  //     9

​

function draw() {

  background(220);

  push();

  translate(0,-12);

  //1

  push();

  translate(100,100);

  rotate(PI/6);

  strokeWeight(5);

  stroke("#0097A0");

  fill("#FFAD6C");

  ellipse(0,0,110,70);

  pop();

  //2

  push();

  translate(300,100);

  noStroke();

  fill("#0E66A6");

  triangle(-10,-60,70,50,-50,70);

  pop();

  //3

  push();

  translate(450,140);

  rotate(PI/-3);

  strokeWeight(7);

  stroke("#26914A");

  fill("#CD378B");

  rect(0,0,100,70);

  pop();

  //4

  push();

  translate(50,230);

  fill("#ABEBC6");

  strokeWeight(2);

  stroke("#9B59B6");

  rect(0,0,120,130,25,5,25,10);

  pop();

  //5

  push();

  strokeWeight(10);

  strokeCap(SQUARE);

  line(250,250,380,380);

  line(250,380,380,250);

  stroke("white");

  point(250,320);

  point(400,320);

  stroke("red");

  point(370,320);

  stroke("yellow");

  point(220,320);

  pop();

  //6

  push();

  translate(500,380);

  fill("yellow");

  stroke("#F8C471");

  strokeWeight(3);

  rotate(PI/-4*3);

  arc(60,60,90,90,0,2*PI*3/4-.2,PIE);

  pop();

  stroke("black");

  strokeWeight(10);

  point(520,280);

  //7

  push();

  translate(50,450);

  strokeWeight(5);

  stroke("#3498DB");

  let angle = 0.0;

  for (var i=0; i<500; i++){

    point(i,sin(angle)*30.0);

    angle = angle + PI / 15.0;

  }

  pop();

  //8

  push();

  translate(-10,480);

  strokeWeight(3);

  noFill();

  for(var i=0; i<16; i++){

    translate(30,0);

    bezier(85, 50, 70, -20, 90, 90, 15, 50);

  }

  bezier(85, 50, 70, -20, 90, 90, 15, 50);

  pop();

  //9

  push();

  translate(50,555);

  rotate(PI/2.5);

  strokeWeight(1);

  stroke("white");

  var color = ["#E74C3C","#3498DB","#1ABC9C","#FFC300"];

  shearX(PI/4.0);

  for (var j=0; j<35; j++){

    translate(18,-13.6);

    fill(color[j%4]);

    rect(0, 0, 20, 15);

  }

​

  pop();

  pop();

}