createCanvas(550, 700);

}

​

function draw() {

  background(226, 117, 27);

  print(mouseX, mouseY);

  //wanted to know the points where to put the shapes

  fill(252, 190, 45);

  rect(0, 242, 550, 50);

​

  beginShape();

  curveVertex(0, 110);

  curveVertex(0, 100);

  curveVertex(72, 92);

  curveVertex(141, 125);

  curveVertex(207, 120);

  curveVertex(329, 85);

  curveVertex(462, 142);

  curveVertex(550, 129);

  curveVertex(550, 129);

  endShape();

​

  fill(247, 75, 7);

​

  beginShape();

  curveVertex(0, 183);

  curveVertex(0, 183);

  curveVertex(99, 150);

  curveVertex(230, 232);

  curveVertex(434, 159);

  curveVertex(550, 182);

  curveVertex(550, 182);

  endShape();

​

  beginShape();

  curveVertex(0, 56);

  curveVertex(0, 56);

  curveVertex(76, 63);

  curveVertex(187, 100);

  curveVertex(272, 50);

  curveVertex(376, 59);

  curveVertex(449, 40);

  curveVertex(502, 59);

  curveVertex(550, 77);

  curveVertex(550, 77);

  endShape();

​

  fill(11, 162, 122);

  rect(0, 1, 550, 20);

​

  beginShape();

  curveVertex(550, 36);

  curveVertex(550, 36);

  curveVertex(481, 37);

  curveVertex(403, 49);

  curveVertex(326, 38);

  curveVertex(251, 45);

  curveVertex(185, 39);

  curveVertex(88, 47);

  curveVertex(150, 57);

  curveVertex(202, 58);

  curveVertex(251, 45);

  curveVertex(251, 45);

  endShape();

​

  //all of this makes up the patterns shown in the sky behind the man

​

  fill(96, 53, 239);

​

  rect(0, 263, 700, 500);

  //this rectangle here makes up most of the blue landlike background behind the man

  fill(253, 249, 159);

  ellipse(386, 409, 25, 50);

  //had to put the right hand above the face so that it appear around  the side of the head like it does in the painting will have to do the same for the left hand

​

  fill(246, 225, 154);

  beginShape();

  curveVertex(550, 330);

  curveVertex(550, 330);

  curveVertex(406, 417);

  curveVertex(411, 508);

  curveVertex(550, 700);

  curveVertex(550, 700);

  endShape();

​

  beginShape();

  curveVertex(0, 274);

  curveVertex(0, 274);

  curveVertex(354, 280);

  curveVertex(288, 299);

  curveVertex(284, 312);

  curveVertex(337, 309);

  curveVertex(273, 329);

  curveVertex(0, 321);

  curveVertex(0, 321);

  endShape();

​

  fill(0);

  strokeWeight(7);

  line(0, 287, 550, 641);

  line(0, 301, 508, 694);

  line(0, 317, 412, 697);

  line(478, 597, 464, 697);

  line(23, 301, 13, 355);

​

  line(157, 389, 136, 456);

​

  //wanted to make thick lines for the banisters on the boardwalk that went down the screen on an angle

​

  strokeWeight(2);

  //did this so everything besides those banisters are thick

​

  fill(36, 18, 117);

  ellipse(300, 529, 45, 115);

​

  ellipse(378, 525, 45, 120);

​

  //i decided to use these ellipses here for both of his arms since both curl upwards for him to hold his face.

​

  fill(253, 249, 159);

​

  beginShape();

  curveVertex(390, 433);

  curveVertex(390, 433);

  curveVertex(376, 447);

  curveVertex(363, 449);

  curveVertex(376, 425);

  curveVertex(376, 425);

  endShape();

​

  beginShape();

  vertex(378, 445);

  vertex(388, 477);

  vertex(370, 484);

  vertex(362, 449);

  endShape();

​

  //used these custom shapes to really show the hands clasping his face in fear or shock

​

  ellipse(285, 425, 20, 50);

  //his left hand is skinnier than his right

​

  beginShape();

  curveVertex(280, 447);

  curveVertex(280, 447);

  curveVertex(294, 458);

  curveVertex(306, 453);

  curveVertex(292, 431);

  curveVertex(292, 431);

  endShape();

​

  beginShape();

  vertex(292, 454);

  vertex(287, 477);

  vertex(305, 479);

  vertex(304, 453);

  endShape();

​

  //once again used custom shapes in order to show him clasping the side of his face

​

  ellipse(333, 406, 95, 95);

  //good start for the head of screaming man being in the lower right middle of the painting

​

  fill(36, 18, 117);

  ellipse(341, 534, 70, 150);

  //had to place his round hunched shoulders up here so it wouldnt affect the cut in his shirt or the screaming face

​

  fill(223, 145, 73);

  triangle(383, 700, 0, 322, 0, 700);

  // made a really nice and lovely boardwalk for this man to stand on in shock used a triangle to make the border of the screen a perspective moving towards the person much like in the original painting

​

  fill(253, 249, 159);

  beginShape();

  curveVertex(364, 440);

  curveVertex(364, 440);

  curveVertex(357, 481);

  curveVertex(350, 490);

  curveVertex(330, 480);

  curveVertex(306, 444);

  curveVertex(306, 444);

  endShape();

  //this custom shape is exclusivly for the jaw this jawline is important its what makes the scream the scream. he SCREAMS!

​

  fill(253, 249, 159);

  beginShape();

  vertex(331, 481);

​

  vertex(346, 489);

  vertex(346, 497);

  vertex(336, 499);

​

  endShape();

  //they have a little cut in their gown right under their jaw

  //it is jagged and not round at all

​

  fill(36, 18, 117);

  rect(290, 650, 58, 640);

  //his body stars at the bottom but in a rectangular like shape and gets more round towards the top.

​

  beginShape();

  curveVertex(347, 653);

  curveVertex(347, 653);

  curveVertex(370, 573);

  curveVertex(315, 573);

  curveVertex(290, 655);

  curveVertex(290, 655);

  endShape();

  //hes pretty hunched over and panicked tried to show that with a bit of a hunch forwards

​

  fill(0);

  ellipse(302, 409, 5, 5);

  ellipse(348, 397, 7, 7);

  ellipse(324, 428, 2, 2);

  ellipse(333, 424, 2, 2);

  ellipse(336, 453, 10, 32);

​

  //each one of these elipses make up the shocked expression on the mans face that he has

​

  fill(79, 52, 194);

​

  beginShape();

  curveVertex(550, 401);

  curveVertex(550, 401);

  curveVertex(545, 459);

  curveVertex(550, 545);

  curveVertex(550, 545);

  endShape();

  //used this to show that its almost like a river on the side of the painting there seperation of land and water like in the original painting

​

  beginShape();

  curveVertex(0, 265);

  curveVertex(0, 265);

  curveVertex(92, 225);

  curveVertex(176, 245);

  curveVertex(226, 265);

  curveVertex(226, 265);

  endShape();

  //hill 1

​

  beginShape();

  curveVertex(550, 264);

  curveVertex(550, 264);

  curveVertex(450, 210);

  curveVertex(315, 265);

  curveVertex(315, 265);

  endShape();

  //hill 2

}

​