​

var stopHere;

var stopB;

var lengthB = [];

var rotB = [];

var x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6, x7, y7;

var cx1, cx2, cx3, cx4, cy1, cy2, cy3, cy4, rad1, rad2, rad3, rad4;

var clx1, clx2, clx3, cly1, cly2, cly3;

var row, circx;

​

function setup() 

{

   createCanvas(400, 400);  // You may make this larger if you like

   colorMode(RGB,255,255,255,1);

   stopHere = 0;

   stopB = 0;

   rotB.push(-PI/12);

   rotB.push(PI/12);

   rotB.push(-PI/6);

   rotB.push(PI/4);

   rotB.push(0);

   rotB.push(PI/6);

   rotB.push(-PI/8);

   rotB.push(0);

​

   cx1 = 50+random(-10, 25);

   cx2 = -50+random(-10, 25);

   cx3 = 0;

   cx4 = 0;

   cy1 = 0;

   cy2 = 0;

   cy3 = 25+random(-10, 25);

   cy4 = -25+random(-10, 25);

   rad1 = 25+random(-10, 25);

   rad2 = 25+random(-10, 25);

   rad3 = 25+random(-10, 25);

   rad4 = 25+random(-10, 25);

   clx1 = 50+random(0, 50)

   clx2 = 200+random(-25, 25)

   clx3 = 350+random(-50, 0)

   cly1 = 50+random(-25, 25)

   cly2 = 75+random(-25, 25)

   cly3 = 50+random(-25, 25)

​

​

   for (var i=0; i < 8; i++)

   {

      lengthB.push(random(8, 12));

   }

}

​

function draw() 

{

   background(255);

​

   //water

   row = 0;

   for (let y = -5; y <= height + 180; y += 48)

    {

      if (row % 2 == 0)

      {

         circx = 0;

      }

      else

      {

         circx = 84;

      }

      for (let x = circx; x <= width; x += 168)

    {

      for (let i = 9; i > 0; i--)

        {

          if (i % 2 == 0)

      {

         fill(84, 122, 147);

      }

      else if (i % 2 == 1)

      {

         fill(13, 34, 45);

      }

​

      ellipse(x, y, i*20);

        }  

    }

    row += 1

    }

​

   // night sky

​

   noStroke();

   fill(0, 0, 50);

   rect(0, 0, 400, 150);

​

   drawCloud(clx1, cly1, .5);

   drawCloud(clx2, cly2, .5);

   drawCloud(clx3, cly3, .5);

​

   //tree branches

   drawBranch(400, 200, 0, 100, 200, 100);

   x1 = 400 - (lengthB[0]*10)*cos(rotB[0]);

   y1 = 200 + (lengthB[0]*10)*sin(-1*rotB[0]);

   drawBranch(x1, y1, 1, 100, 200, 100);

   x2 = x1 - (lengthB[1]*10)*cos(rotB[1]);

   y2 = y1 + (lengthB[1]*10)*sin(-1*rotB[1]);

   x3 = x1 - (lengthB[2]*10)*cos(rotB[2]);

   y3 = y1 + (lengthB[2]*10)*sin(-1*rotB[2]);

   drawBranch(x1, y1, 2, 100, 200, 100);

   drawBranch(x2, y2, 3, 100, 200, 100);

   x4 = x3 - (lengthB[6]*10)*cos(rotB[6]);

   y4 = y3 + (lengthB[6]*10)*sin(-1*rotB[6]);

   drawBranch(x2, y2, 4, 100, 200, 100);

   drawBranch(x3, y3, 5, 100, 200, 100);

   drawBranch(x3, y3, 6, 100, 200, 100);

   drawBranch(x4, y4, 7, 100, 200, 100);

   x5 = 400 - (lengthB[0]*5)*cos(rotB[0]);

   y5 = 200 + (lengthB[0]*5)*sin(-1*rotB[0]);

   drawCam(x5, y5, 0.4, -PI/12);

​

   x6 = x4 - (lengthB[7]*5)*cos(rotB[7]);

   y6 = y4 + (lengthB[7]*5)*sin(-1*rotB[7]);

   drawCam(x6, y6, 0.5, 0);

​

   x7 = x2 - (lengthB[3]*5)*cos(rotB[3]);

   y7 = y2 + (lengthB[3]*5)*sin(-1*rotB[3]);

   drawCam(x7, y7, 0.35, PI/4);

}

​

function drawSpiral(cx, cy, radi, r, g, b)

{

   var sx, sy, sradi;

   stroke(r, g, b);

   fill(r, g, b);

   sradi = 0;

   for (var i=0; i < stopHere; i++)

   {

      sx = cx +sradi*sin(radians(i));

      sy = cy + sradi*cos(radians(i));

      ellipse(sx, sy, sradi/5, sradi/5);

      sradi = sradi + radi/810;

   }

   //advance the loop parameter so each frame it animates more

   //as long as we haven’t reach 720 (visually pleasing)

   if (stopHere < 810)

   {

      stopHere = stopHere + 1;

   }

}

​

function drawCam(x, y, sc, rot)

{

   push();

   translate(x, y);

   rotate(rot);

   scale(sc);

   translate(0, 0);

   stroke(0);

   strokeWeight(5);

   fill(100, 200, 100);

   arc(19, -52, 195, 137, 2.5, 0.75, PIE);

   noStroke();

   fill(100, 200, 100);

   arc(71.7, -6.7, 137, 175, 3.3, 1.1,  PIE);

   noFill();

   stroke(0);

   strokeWeight(5);

   arc(71.7, -6.7, 137, 175, 5.1, 1.1, OPEN);

   noStroke();

   fill(255);

   //ellipse(7.4, 52, 204, 137);

   stroke(0);

   strokeWeight(5);

   fill(100, 200, 100);

   beginShape();

   curveVertex(-73, -75);

   curveVertex(-73, -75);

   curveVertex(-77, -84);

   curveVertex(-78.5, -85.5);

   curveVertex(-82, -86);

   curveVertex(-87, -83.5);

   curveVertex(-98, -76);

   curveVertex(-109, -63);

   curveVertex(-111.5, -58);

   curveVertex(-112.5, -54);

   curveVertex(-114, -50.5);

   curveVertex(-118, -49);

   curveVertex(-122, -48);

   curveVertex(-130, -43);

   curveVertex(-136, -35);

   curveVertex(-138, -28);

   curveVertex(-139.5, -16);

   curveVertex(-140, -2);

   curveVertex(-139.5, 4);

   curveVertex(-134, 10.5);

   curveVertex(-120, 14.5);

   curveVertex(-103, 14);

   curveVertex(-70.5, 3.5);

   curveVertex(-59, -1);

   curveVertex(-51, -4);

   curveVertex(-51, -4);

   endShape();

​

   beginShape();

   curveVertex(-46.5, -43);

   curveVertex(-46.5, -43);

   curveVertex(-38, -41.5);

   curveVertex(-26, -42.5);

   curveVertex(-10.5, -44);

   curveVertex(4, -41.5);

   curveVertex(9, -35.5);

   curveVertex(8, -27.5);

   curveVertex(-1.5, -14.5);

   curveVertex(-8.5, -6.5);

   curveVertex(-16.5, 3.5);

   curveVertex(-22, 8.5);

   curveVertex(-28.5, 12.5);

   curveVertex(-31.5, 13.5);

   curveVertex(-33.5, 14);

   curveVertex(-35.5, 15);

   curveVertex(-40, 21);

   curveVertex(-43.5, 25.5);

   curveVertex(-48.5, 27);

   curveVertex(-56, 24.5);

   curveVertex(-58.5, 19);

   curveVertex(-57, 13.5);

   curveVertex(-52, 7);

   curveVertex(-50, 2);

   curveVertex(-48, -2);

   curveVertex(-46, -2.5);

   curveVertex(-40, -2.5);

   curveVertex(-37, -3.5);

   curveVertex(-31, -9);

   curveVertex(-15.5, -26.5);

   curveVertex(-15.5, -26.5);

   curveVertex(-20, -26.5);

   curveVertex(-30, -24);

   curveVertex(-40, -23);

   curveVertex(-48, -24);

   curveVertex(-48, -24);

   endShape();

​

   beginShape();

   curveVertex(101, -23);

   curveVertex(101, -23);

   curveVertex(83.5, -25.5);

   curveVertex(61.5, -31);

   curveVertex(44.5, -37);

   curveVertex(37.5, -40);

   curveVertex(30.5, -38.5);

   curveVertex(25, -33.5);

   curveVertex(23.5, -24.5);

   curveVertex(20.5, -17);

   curveVertex(15, -2.5);

   curveVertex(12.5, 4.5);

   curveVertex(10, 6);

   curveVertex(7, 6.5);

   curveVertex(3.5, 9);

   curveVertex(2, 12);

   curveVertex(2.5, 17);

   curveVertex(1.5, 20.5);

   curveVertex(0.5, 23);

   curveVertex(-1, 25.5);

   curveVertex(-2.5, 28.5);

   curveVertex(-2, 31);

   curveVertex(2, 36);

   curveVertex(10.5, 39);

   curveVertex(18, 36);

   curveVertex(24.5, 27);

   curveVertex(29, 13);

   curveVertex(33.5, -2.5);

   curveVertex(35, -7);

   curveVertex(38, -10);

   curveVertex(43.5, -11);

   curveVertex(53.5, -9);

   curveVertex(53.5, -9);

   endShape();

​

   noStroke();

   fill(0);

   ellipse(-133.5, -6.5, 4, 4)

   noFill();

   stroke(0);

   strokeWeight(1);

   ellipse(-120.5, -29, 26, 28);

   ellipse(-121, -28.5, 28, 25);

   ellipse(-121, -28, 20, 22.5);

   ellipse(-121.5, -27.5, 18, 20.5);

   ellipse(-122, -27.5, 16, 18.5);

   strokeWeight(5);

   line(-128, -26, -122, -30);

​

   beginShape();

   curveVertex(-138.5, 6.5);

   curveVertex(-138.5, 6.5);

   curveVertex(-130, 1);

   curveVertex(-108, -11.5);

   curveVertex(-98.5, -15);

   curveVertex(-95, -15.5);

   curveVertex(-91.5, -15.5);

   curveVertex(-86.5, -16);

   curveVertex(-83.5, -17.5);

   curveVertex(-82, -20);

   curveVertex(-80, -24);

   curveVertex(-77.5, -35);

   curveVertex(-77.5, -35);

   endShape();

​

   beginShape();

   curveVertex(-116, -49.5);

   curveVertex(-116, -49.5);

   curveVertex(-108, -51.5);

   curveVertex(-99.5, -54.5);

   curveVertex(-95, -58);

   curveVertex(-91, -62);

   curveVertex(-87.5, -65.5);

   curveVertex(-87.5, -65.5);

   endShape();

​

   beginShape();

   curveVertex(-72, -76);

   curveVertex(-72, -76);

   curveVertex(-70, -72);

   curveVertex(-68.5, -62.5);

   curveVertex(-69, -56);

   curveVertex(-71.5, -46.5);

   curveVertex(-71.5, -46.5);

   endShape();

​

   arc(7.4, 52, 204, 137, 5.25, .15, OPEN);

   arc(7.4, 52, 204, 137, 4.6, 4.9, OPEN);

   arc(7.4, 52, 204, 137, 3.8, 4.2, OPEN);

​

   drawSpiral(69.5, 36, 45, 100, 200, 100);

   pop();

}

​

function drawBranch(x, y, j)

{

   var dx, count;

   dx = 0;

   count = 0;

   while(count < lengthB[j])

   {

   noStroke();

   fill(165, 111, 77);

   push();

   translate(x, y);

   rotate(rotB[j]);

   translate(0, 0);

   ellipse(dx, 0, 20)

   pop();

   dx -= 10;

   count += 1;

   }

   push();

   translate(x, y);

   rotate(rotB[j]);

   translate(0, 0);

   drawLeaf(dx, 0, 1)

   pop();

}

​

function drawCloud(x, y, sc)

{

   push();

   translate(x, y);

   rotate(PI);

   scale(sc);

   translate(0, 0);

   drawSpiral(cx1, cy1, rad1, 150, 150, 150);

   drawSpiral(cx2, cy2, rad2, 150, 150, 150);

   drawSpiral(cx3, cy3, rad3, 150, 150, 150);

   drawSpiral(cx4, cy4, rad4, 150, 150, 150);

   pop();

}

​

function drawLeaf(x, y, sc)

{

   push();

   translate(x, y);

   scale(sc);

   translate(0, 0);

   noStroke();

   fill(100, 200, 100);

   beginShape();

   curveVertex(-33, 34);

   curveVertex(-33, 34);

   curveVertex(-14.5, 29);

   curveVertex(3, 21);

   curveVertex(11.5, 11);

   curveVertex(16, -1);

   curveVertex(12.5, -9);

   curveVertex(4.5, -15);

   curveVertex(-3.5, -15.5);

   curveVertex(-12, -12);

   curveVertex(-19, -4.5);

   curveVertex(-23.5, 5);

   curveVertex(-26, 20);

   curveVertex(-33, 34);

   curveVertex(-33, 34);

   endShape();

   noFill();

   stroke(255);

   strokeWeight(3);

   beginShape();

   curveVertex(-28, 30.5);

   curveVertex(-28, 30.5);

   curveVertex(-22, 26.5);

   curveVertex(-17, 20.5);

   curveVertex(-15, 14.5);

   curveVertex(-13, 6);

   curveVertex(-9, -2.5);

   endShape();

   pop();

​

   push();

   translate(x, y);

   rotate(PI);

   scale(sc);

   translate(0, 0);

   drawSpiral(4, -4, 8, 255, 255, 255);

   pop();

}

​