​

let background_num;

​

​

​

function setup() {

  createCanvas(600, 600);

  background_num = 1;

  changeDirection = false;

}

​

function draw() {

  background(253, 252, 248);

​

​

  //create circle from shapes: https://youtu.be/kP-RkS70Lm8

  push();

  fill(34, 139, 34);

  angleMode(DEGREES);

  translate(width / 2, height / 2);

  for (a = 0; a < 12; a++) {

    rotate(30);

    strokeWeight(1);

    //stroke(230, 222, 185);

    line(1 - background_num, 1, 2, 1);

    for (b = 0; b < 1; b++) {

      line(2 - background_num, 2, 4, 2);

      for (c = 0; c < 1; c++) {

        strokeWeight(2);

        stroke(212, 191, 136);

        line(4 - background_num, 4, 8, 4);

        for (d = 0; d < 1; d++) {

          line(8-background_num, 8, 16, 8);

          for (e = 0; e < 1; e++) {

            strokeWeight(3);

            stroke(144, 122, 72);

            line(16-background_num, 16, 32,16);

            for (f = 0; f < 1; f++) {

              line(32-background_num, 32, 64, 32);

              for (g = 0; g < 1; g++){

                strokeWeight(4);

                stroke(59, 46, 30);

                line(64-background_num, 64, 128, 64);

                for (h = 0; h < 1; h++){

                  strokeWeight(5);

                  stroke(58, 73, 40);

                  line(128-background_num, 128, 256, 128);

                  for (i = 0; i < 1; i++){

                    strokeWeight(6);

                    stroke(75, 107, 60);

                    line(256-background_num, 256, 512, 256);

                  }

                }

              }

            }

          }

        }

      }

    }

  }

  //Make background shapes move back and forth

  if (background_num > 600) {

    changeDirection = true

  } else if (background_num <= 0) {

    changeDirection = false

  }

  if (background_num >= 0 && changeDirection == false) {

    background_num = background_num + 1

  } else if (changeDirection == true) {

    background_num = background_num - 1

  }

  //console.log(num);

  pop();

​

​

  let brown = color(176, 108, 73);

  push();

  //noStroke();

  angleMode(RADIANS);

  beginShape();

  fill(brown);

​

​

  vertex(80, 600);

  vertex(600, 600);

  vertex(600, 465);

  vertex(580, 470);

  vertex(560, 475);

  vertex(540, 480);

  vertex(520, 490);

  vertex(500, 500);

  vertex(510, 460);

  vertex(530, 420);

  vertex(550, 405);

  vertex(560, 390);

  vertex(570, 380);

  vertex(575, 370);

  vertex(575, 365);

  vertex(570, 360);

  vertex(540, 350);

  vertex(520, 350);

  vertex(480, 360);

  vertex(440, 370);

  vertex(400, 380);

  vertex(360, 400);

  vertex(320, 420);

  vertex(280, 460);

  vertex(240, 495);

  vertex(215, 505);

  vertex(210, 505);

  vertex(200, 500);

  vertex(195, 490);

  vertex(190, 480);

  vertex(195, 440);

  vertex(215, 400);

  vertex(230, 360);

  vertex(250, 320);

  vertex(265, 280);

  vertex(280, 240);

  vertex(295, 180);

  vertex(300, 165);

  vertex(305, 145);

  vertex(305, 100);

  vertex(300, 70);

  vertex(295, 50);

  vertex(285, 35);

  vertex(275, 25);

  vertex(265, 20);

  vertex(250, 20);

  vertex(240, 25);

  vertex(230, 30);

  vertex(220, 40);

  vertex(215, 50);

  vertex(210, 60);

  vertex(205, 65);

  vertex(195, 70);

  vertex(160, 75);

  vertex(130, 80);

  vertex(120, 85);

  vertex(120, 90);

  vertex(130, 100);

  vertex(160, 110);

  vertex(190, 120);

  vertex(210, 130);

  vertex(220, 140);

  vertex(220, 160);

  vertex(195, 200);

  vertex(160, 240);

  vertex(120, 280);

  vertex(45, 360);

  vertex(30, 400);

  vertex(20, 480);

  vertex(25, 520);

  vertex(30, 560);

  vertex(40, 600);

  //vertex(100, 570);

  //vertex(185, 420);

  //vertex(185, 475);

  //vertex(130, 475);

  endShape(CLOSE);

  pop();

​

  //top hand

  line(125, 95, 170, 92);

  line(170, 92, 215, 95);

​

​

  beginShape();

  fill(brown);

  vertex(235, 130);

  vertex(235, 110);

  vertex(195, 65);

  vertex(197.5, 55);

  vertex(212, 55);

  vertex(270, 110);

  vertex(280, 112);

  endShape();

​

  line(220, 64, 245, 68);

  line(245, 68, 270, 58);

  line(231, 65, 240, 50);

​

  line(240, 47, 230, 40);

  line(252, 41, 254, 33);

​

  push();

  fill(0);

  translate(185, -195);

  rotate(PI / 2.9);

  rect(240, 50, 22, 17, 3);

  pop();

​

​

  beginShape();

  fill(brown);

  vertex(240, 200);

  vertex(220, 160);

  vertex(210, 120);

  vertex(216, 90);

  endShape();

  //end top hand

​

  //btm hand

  line(70, 590, 228, 500);

  line(370, 410, 420, 375);

  line(410, 420, 520, 350);

  line(440, 440, 570, 360);

  line(460, 470, 537, 415);

  line(460, 510, 500, 500);

  line(410, 550, 460, 510);

  line(350, 550, 410, 550);

  line(320, 540, 350, 550);

  line(280, 600, 320, 540);

​

​

​

  //Add blend screen

  push();

  fill(brown);

  noStroke();

  blendMode(DIFFERENCE);

  rect(0, 600, width, curtain);

  pop();

  //end blend screen

  if (curtain < -600) {

    noStroke();

  } else {

    stroke(0);

  }

}

​

//to move

function mouseDragged() {

  curtain = curtain - 10;

}

​

function keyPressed() {

  curtain = 0;

  noStroke();

}