Your browser does not support the canvas tag.
previous        Show / Hide Source    
Process
    Download        next
/*******
 INTERACTIVE DRAWING
 KAI BANKS
 SEPT 15 2016
 
 A SIMPLE PLATFORMING LEVEL. MOVE THE MOUSE UP AND DOWN TO VIEW 
 THE PATH FROM THE GROUND TO THE NEXT-LEVEL PORTAL
 
 *******/


void setup() {
  size(400, 400);

  //remove cursor
  noCursor();
}

void draw() {
  //sky goes from dark blue to orange as screen moves up
  background(8 + (mouseY/2.5), 14 + (mouseY/10), 44 + (mouseY/20));
  noStroke();

  /*lower sky variation-- lighter towards the horizon
  rectangles fade as screen moves up*/
  fill(11 + (mouseY/3), 19 + (mouseY/9), 60 + (mouseY/25), 255 - (mouseY/1.5) );
  rect(0, 120, 400, 200); 
  fill(14 + (mouseY/3), 23 + (mouseY/9), 70 + (mouseY/25), 255 - (mouseY/1.5));
  rect(0, 140, 400, 200); 
  fill(16 + (mouseY/3), 28 + (mouseY/9), 88 + (mouseY/25), 255 - (mouseY/1.5));
  rect(0, 180, 400, 200); 
  fill(18 + (mouseY/3), 38 + (mouseY/9), 96 + (mouseY/25), 255 - (mouseY/1.5));
  rect(0, 250, 400, 200); 
  fill(20 + (mouseY/3), 48 + (mouseY/9), 104 + (mouseY/25), 255 - (mouseY/1.5));
  rect(0, 280, 400, 200); 
  fill(22 + (mouseY/3), 58 + (mouseY/9), 112 + (mouseY/25), 255 - (mouseY/1.5));
  rect(0, 310, 400, 200); 
  fill(24 + (mouseY/3), 68 + (mouseY/9), 120 + (mouseY/25), 255 - (mouseY/1.5));
  rect(0, 340, 400, 200); 
  fill(26 + (mouseY/3), 78 + (mouseY/9), 128 + (mouseY/25), 255 - (mouseY/1.5));
  rect(0, 370, 400, 200); 

  /*upper sky variation-- light centered around the portal
  circles fade as screen moves down*/
  fill(255, 235, 160, (mouseY/5));
  ellipse(100, -220 + (mouseY), 90, 90);
  fill(255, 235, 160, (mouseY/6.7));
  ellipse(100, -220 + (mouseY), 170, 170);
  fill(255, 235, 160, (mouseY/10));
  ellipse(100, -220 + (mouseY), 280, 280);  
  fill(255, 235, 160, (mouseY/20));
  ellipse(100, -220 + (mouseY), 390, 390); 
  fill(255, 235, 160, (mouseY/40));
  ellipse(100, -220 + (mouseY), 520, 520); 

  //stars, fade as screen moves up
  fill(235, 255 - (mouseY/1.3));
  rect(180, 40 + (mouseY/11), 2, 2);
  rect(160, 70 + (mouseY/11), 1, 1);
  rect(165, 72 + (mouseY/11), 1, 1);
  rect(150, 74 + (mouseY/11), 1, 1);
  rect(190, 90 + (mouseY/11), 1, 1);
  rect(166, 80 + (mouseY/11), 1, 1);
  rect(176, 45 + (mouseY/11), 1, 1);
  rect(200, 56 + (mouseY/11), 1, 1);
  rect(204, 72 + (mouseY/11), 2, 2);
  rect(230, 76 + (mouseY/11), 1, 1);
  rect(206, 54 + (mouseY/11), 1, 1);
  rect(260, 92 + (mouseY/11), 1, 1);
  rect(263, 94 + (mouseY/11), 1, 1);
  rect(290, 56 + (mouseY/11), 1, 1);
  rect(304, 92 + (mouseY/11), 2, 2);
  rect(330, 99 + (mouseY/11), 1, 1);
  rect(306, 61 + (mouseY/11), 1, 1);
  rect(360, 72 + (mouseY/11), 1, 1);
  rect(363, 80 + (mouseY/11), 1, 1);
  rect(390, 53 + (mouseY/11), 1, 1);
  rect(310, 29 + (mouseY/11), 1, 1);
  rect(356, 21 + (mouseY/11), 1, 1);
  rect(330, 12 + (mouseY/11), 1, 1);
  rect(343, 30 + (mouseY/11), 1, 1);
  rect(370, 33 + (mouseY/11), 1, 1);
  rect(106, 91 + (mouseY/11), 1, 1);
  rect(164, 62 + (mouseY/11), 1, 1);
  rect(163, 50 + (mouseY/11), 1, 1);
  rect(193, 33 + (mouseY/11), 1, 1);
  rect(110, 19 + (mouseY/11), 1, 1);
  rect(151, 31 + (mouseY/11), 1, 1);
  rect(130, 42 + (mouseY/11), 1, 1);
  rect(151, 10 + (mouseY/11), 1, 1);
  rect(170, 63 + (mouseY/11), 1, 1);
  rect(6, 21 + (mouseY/11), 1, 1);
  rect(64, 102 + (mouseY/11), 1, 1);
  rect(23, 154 + (mouseY/11), 1, 1);
  rect(43, 133 + (mouseY/11), 1, 1);
  rect(60, 149 + (mouseY/11), 1, 1);
  rect(91, 11 + (mouseY/11), 1, 1);
  rect(10, 122 + (mouseY/11), 1, 1);
  rect(61, 110 + (mouseY/11), 1, 1);
  rect(30, 163 + (mouseY/11), 1, 1);
  rect(330, -9 + (mouseY/11), 1, 1);
  rect(306, -61 + (mouseY/11), 1, 1);
  rect(260, -42 + (mouseY/11), 1, 1);
  rect(363, -80 + (mouseY/11), 1, 1);
  rect(490, -23 + (mouseY/11), 1, 1);
  rect(210, -2 + (mouseY/11), 1, 1);
  rect(356, -21 + (mouseY/11), 1, 1);
  rect(230, -12 + (mouseY/11), 1, 1);
  rect(343, -30 + (mouseY/11), 1, 1);
  rect(270, -53 + (mouseY/11), 1, 1);
  rect(106, -21 + (mouseY/11), 1, 1);
  rect(364, -32 + (mouseY/11), 1, 1);
  rect(163, -50 + (mouseY/11), 1, 1);
  rect(393, -33 + (mouseY/11), 1, 1);
  rect(110, -19 + (mouseY/11), 1, 1);
  rect(151, -31 + (mouseY/11), 1, 1);
  rect(10, 122 + (mouseY/11), 1, 1);
  rect(61, 110 + (mouseY/11), 1, 1);
  rect(30, 163 + (mouseY/11), 1, 1);
  rect(330, 229 + (mouseY/11), 1, 1);
  rect(306, 161 + (mouseY/11), 1, 1);
  rect(260, 142 + (mouseY/11), 1, 1);
  rect(363, 180 + (mouseY/11), 1, 1);
  rect(490, 223 + (mouseY/11), 1, 1);
  rect(210, 222 + (mouseY/11), 1, 1);
  rect(356, 221 + (mouseY/11), 1, 1);
  rect(230, 212 + (mouseY/11), 1, 1);
  rect(343, 130 + (mouseY/11), 1, 1);
  rect(270, 153 + (mouseY/11), 1, 1);

  //lower clouds, moving to the right
  fill(200, 40);
  rect(120 + (frameCount/1.6), 60 + (mouseY), 80, 50, 10);
  rect(180 + (frameCount/1.6), 90 + (mouseY), 40, 30, 10);
  rect(260 + (frameCount/1.6), 140 + (mouseY), 60, 30, 5);
  rect(-40 + (frameCount/1.6), 120 + (mouseY), 60, 40, 10);
  rect(-180 + (frameCount/1.6), 150 + (mouseY), 40, 30, 10);
  rect(-230 + (frameCount/1.6), 110 + (mouseY), 70, 50, 10);

  //upper clouds, moving to the right
  fill(250, 40);
  rect(20 + (frameCount/1.6), -360 + (mouseY), 60, 40, 10);
  rect(60 + (frameCount/1.6), -380 + (mouseY), 40, 30, 10);
  rect(180 + (frameCount/1.6), -300 + (mouseY), 40, 20, 10);
  rect(210 + (frameCount/1.6), -270 + (mouseY), 60, 40, 10);
  rect(-170 + (frameCount/1.6), -360 + (mouseY), 60, 40, 10);
  rect(-260 + (frameCount/1.6), -280 + (mouseY), 40, 30, 10);
  rect(-310 + (frameCount/1.6), -200 + (mouseY), 40, 20, 10);
  rect(-350 + (frameCount/1.6), -300 + (mouseY), 60, 40, 10);

  /*rotating light a.k.a. The Problem Child-- equally spaced triangles, 
  dislocate the grid, move the origin, rotate triangles, relocate grid
  */
  pushMatrix();
  fill(255, (mouseY/16));
  translate(100, -220 + (mouseY));
  rotate(radians(frameCount)/9);
  triangle(0, 0, 0, 620, 346, 620);
  triangle(0, 0, 620, 0, 620, 346);
  triangle(0, 0, 0, -620, -346, -620);
  triangle(0, 0, -620, 0, -620, -346);
  triangle(0, 0, 620, -346, 346, -620);
  triangle(0, 0, -620, 346, -346, 620);  
  popMatrix();

  //left tree trunk
  fill(#16222e);
  rect(30, 200 + (mouseY), 25, 210, 10);

  //left tree leaves
  fill(#063b47);
  rect(70, 220 + (mouseY), 30, 20, 10);
  rect(50, 180 + (mouseY), 50, 35, 10);
  rect(30, 140 + (mouseY), 90, 50, 10);
  rect(-10, 120 + (mouseY), 50, 80, 10);
  rect(50, 110 + (mouseY), 60, 20, 10);
  rect(-10, 210 + (mouseY), 20, 20, 10);
  rect(10, 90 + (mouseY), 30, 20, 10);
  rect(15, 205 + (mouseY), 25, 20, 10);

  //cliff
  fill(#16222e);
  rect(305, 225 + (mouseY), 105, 10, 5); 
  rect(320, 225 + (mouseY), 90, 50, 7);
  rect(315, 250 + (mouseY), 105, 50, 10); 
  rect(310, 280 + (mouseY), 90, 30, 5);
  rect(300, 290 + (mouseY), 110, 40, 7);
  rect(290, 310 + (mouseY), 120, 90, 10);
  rect(280, 370 + (mouseY), 130, 40, 7);
  rect(-10, 390 + (mouseY), 410, 20, 7);

  fill(#1e3842);  
  rect(290, 220 + (mouseY), 120, 8, 5);

  //cliff rocks
  fill(#1e3842);
  rect(370, 240 + (mouseY), 20, 20, 5);
  rect(385, 265 + (mouseY), 10, 10, 2);
  rect(300, 320 + (mouseY), 30, 30, 5);
  rect(335, 315 + (mouseY), 15, 15, 3);
  rect(330, 350 + (mouseY), 10, 10, 2);

  //vine
  fill(#1e3842);
  rect(370, 20 + (mouseY), 10, 190, 5);

  //vine leaves
  fill(#064747);
  rect(380, 40 + (mouseY), 10, 5, 3);
  rect(360, 60 + (mouseY), 10, 5, 3);
  rect(380, 85 + (mouseY), 10, 5, 3);  
  rect(360, 100 + (mouseY), 10, 5, 3);  
  rect(380, 120 + (mouseY), 10, 5, 3);  
  rect(360, 135 + (mouseY), 10, 5, 3);  
  rect(380, 155 + (mouseY), 10, 5, 3);  
  rect(360, 170 + (mouseY), 10, 5, 3);
  rect(380, 190 + (mouseY), 10, 5, 3);  

  //platforms
  fill(#16222e);  
  rect(105, 333 + (mouseY), 50, 12, 5);
  rect(205, 273 + (mouseY), 50, 12, 5);
  
  //platform tops
  fill(#063b47);
  rect(100, 330 + (mouseY), 60, 5, 5);
  rect(200, 270 + (mouseY), 60, 5, 5);

  //right tree leaves
  fill(#063b47);
  rect(350, -10 + (mouseY), 60, 40, 10);
  rect(320, 30 + (mouseY), 20, 20, 5);
  rect(330, -30 + (mouseY), 30, 40, 5);
  rect(350, -30 + (mouseY), 60, 30, 5);
  rect(370, -40 + (mouseY), 30, 20, 5);

  //upper platforms
  fill(255, 100);
  rect(270, -30 + (mouseY), 50, 10, 5);
  rect(170, -70 + (mouseY), 50, 10, 5);  

  //portal
  fill(#FCDEE9, 130);
  rect(70, -250 + (mouseY), 60, 140, 30);  
  fill(247 +random(-20, 20), 189, 92, 150);  
  rect(75, -245 + (mouseY), 50, 130, 30);

  //cloud portal, flickers
  fill(#FCDEE9, 170);
  rect(60, -130 + (mouseY), 80, 30, 5);
  rect(20, -130 + (mouseY), 100, 20, 5);
  rect(100, -140 + (mouseY), 60, 30, 10);
  rect(30, -150 + (mouseY), 50, 20, 5);
  rect(40, -240 + (mouseY), 20, 90, 5);
  rect(140, -240 + (mouseY), 20, 100, 5);
  rect(60, -280 + (mouseY), 80, 20, 5);

  //upper roof clouds
  fill(#FCDEE9, 170);
  rect(-10, -410 + (mouseY), 60, 40, 10);
  rect(40, -410 + (mouseY), 120, 50, 10);
  rect(140, -410 + (mouseY), 40, 20, 10);
  rect(180, -410 + (mouseY), 80, 20, 10);
  rect(260, -410 + (mouseY), 90, 50, 10);
  rect(340, -410 + (mouseY), 60, 30, 10);
}