Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
////////////IMC Project 1 Interactive Drawing////////////

/*
By: Lawrence Le
Prof: Fredd Eyles
For: Intro to Media Computation
Date: 20 September 2017
 */
 
/*  - Vertical Mouse Movement Controls 4 Lamps
        > Lights Turn On/Off
        > Light Hitting The Ground Around Lamps
        > Stone Lamps Get Brighter From The Light
        
    - Horizonal Mouse Movement Controls Clouds and Moon
        > Brightens/Darkens Entire Area
        > Sky Gets Brighter
        > Clouds Move Out Of The Way And Dissipate
        > Moon Shines Brighter
        
    - Moving The Mouse Cursor Will Move The Firefly
    
    - Mouse Click To Make Crow's Eye Flash Red
        > Framerate Lowered To 3 During Click
        
    - Key Press To Make Firefly Sparkle
        > Framerate Lowered To 3 During Press
      
    - Stars Twinkle
 */

void setup() {

  //Setting Window Size
  size(400, 400);
  
}

void draw() {

  //Background Colour
  background(0);
  
  //Setting FrameRate
  frameRate(30);
  
////////////CODE FOR SKY////////////

  //Sky Colour
  fill(25, 25, 80 + mouseX/50);
  rectMode(CENTER);
  rect(200, 100, 400, 200);
  fill(25, 25, 70, 255 - mouseX/2); 
  rect(200, 60, 400, 125);
  fill(25, 25, 60, 255 - mouseX/2);
  rect(200, 20, 400, 100);
  
  //Moon
  fill(230);
  ellipseMode(CENTER);
  ellipse(50, 50, 60, 60);
  
  //Moonlight
  fill(240, 0 + mouseX/10);
  ellipse(50, 50, 70, 70);
  fill(255, 0 + (mouseX/10)*0.5);
  ellipse(50, 50, 85, 85);
  
  //Clouds
  fill(200, 220 - mouseX*0.6);
  ellipseMode(CENTER);
  ellipse(60 + mouseX/10, 60, 80 + mouseX/25, 30 - mouseX/35);
  ellipse(55 + mouseX/10, 75, 25 + mouseX/20, 15 - mouseX/40);
  ellipse(45 - mouseX/4, 65, 60, 25 - mouseX/35);
  ellipse(55 - mouseX/6, 30, 100 + mouseX/30, 20);
  //ellipse (175 + mouseX/12, 50, 125 + mouseX/35, 35 - mouseX/30);
  
////////////CODE FOR GRASS////////////

  //Grass Colour (Below Walkway)
  noStroke();
  fill(70, 110 + mouseX*0.04, 70);
  rectMode(CENTER);
  rect(200, 375, 400, 100); 
  
  //Blades of Grass (Below Walkway)
  fill(75, 125 + mouseX*0.04, 75);
  triangle(75, 385, 72, 372, 81, 385);
  fill(80, 140 + mouseX*0.04, 80);
  triangle(80, 385, 83, 367, 86, 385);
  fill(77, 133 + mouseX*0.04, 77);
  triangle(84, 385, 103, 377, 92, 385);
  fill(80, 140 + mouseX*0.04, 80);
  triangle(290, 385, 293, 367, 296, 385);
  fill(75, 125 + mouseX*0.04, 75);
  triangle(297, 385, 294, 372, 303, 385);
  fill(77, 133 + mouseX*0.04, 77);
  triangle(175, 395, 172, 382, 181, 395);
  fill(80, 140 + mouseX*0.04, 80);
  triangle(160, 395, 163, 377, 166, 395);
  fill(77, 133 + mouseX*0.04, 77);
  triangle(164, 395, 183, 387, 172, 395);
  
  //Grass Colour (Above Walkway)
  noStroke();
  fill(75, 120 + mouseX*0.04, 75);
  rectMode(CENTER);
  rect(200, 220, 400, 125); 
  
  //Blades of Grass (Above Walkway)
  fill(85, 130 + mouseX*0.04, 85);
  triangle(200, 220, 200, 205, 193, 220);
  fill(90, 140 + mouseX*0.04, 90);
  triangle(193, 220, 189, 210, 185, 220);
  fill(88, 135 + mouseX*0.04, 88);
  triangle(192, 220, 194, 203, 195, 220);
  fill(90, 140 + mouseX*0.04, 90);
  triangle(70, 170, 68, 163, 64, 170);
  fill(85, 130 + mouseX*0.04, 85);
  triangle(68, 169, 60, 164, 62, 169);
  
  //Grass-Sky Cut-off
  stroke(25);
  strokeWeight(5);
  line(0, 158, 100, 158);
  strokeWeight(4);
  line(100, 157, 180, 157);
  strokeWeight(5);
  line(180, 159, 310, 159);
  strokeWeight(3);
  line(310, 157, 400, 157);
  
////////////CODE FOR TREE + CROW////////////

  //Dead Tree
  fill(30 + mouseX*0.04, 20, 20);
  noStroke();
  rectMode(CORNERS);
  rect(340, 40, 365, 200);
  rect(300, 85, 340, 95);
  rect(260, 88, 300, 97);
  triangle(365, 200, 365, 160, 370, 200);
  triangle(340, 160, 335, 130, 340, 100);
  triangle(340, 100, 340, 95, 325, 95);
  triangle(260, 88, 260, 97, 256, 94);
  triangle(300, 97, 300, 95, 309, 95);
  triangle(300, 88, 300, 85, 292, 88);
  triangle(365, 40, 365, 95, 368, 60);
  quad(340, 40, 350, 40, 355, 0, 350, 0);
  quad(340, 40, 348, 40, 330, 0, 326, 0);
  quad(340, 55, 340, 43, 313, 0, 307, 0);
  quad(350, 40, 358, 40, 365, 0, 359, 0);
  quad(356, 40, 366, 42, 450, 10, 459, 0);
  rect(320, 20, 325, 0);
  rect(385, 30, 392, 0);
  triangle(340, 200, 340, 192, 290, 200);
  triangle(355, 200, 362, 200, 359, 205);
  quad(358, 200, 370, 198, 376, 203, 381, 208);
  
  //Crow
  fill(0);
  ellipse(296, 75, 26, 10);
  ellipse(284, 70, 11, 11);
  triangle(280, 67, 280, 73, 268, 70);
  stroke(0);
  strokeWeight(2);
  line(300, 79, 302, 82);
  line(302, 82, 301, 85);
  line(301, 85, 298, 86);
  quad(286, 71, 301, 71, 318, 80, 316, 80); 
  quad(286, 71, 301, 71, 317, 77, 315, 77);

////////////CODE FOR WALKWAY////////////

  //Walkway
  stroke(150 + mouseX*0.04);
  strokeWeight(100);
  line(0, 302, 400, 302);
  
  //Walkway Squares
  stroke(120 + mouseX*0.04);
  strokeWeight(6);
  line(0, 254, 400, 254);
  line(-25, 347, 25, 256);
  line(75, 347, 125, 256);
  line(68, 347, 125, 256);
  line(175, 347, 225, 256);
  line(168, 347, 225, 256);
  line(275, 347, 325, 256);
  line(268, 347, 325, 256);
  line(375, 347, 425, 256);
  line(368, 347, 425, 256);
  strokeWeight(12);
  line(0, 347, 400, 347);
  strokeWeight(9);
  line(0, 299, 400, 299);
  

////////////CODE FOR LAMP 1////////////

  //Removing Outlines
  noStroke();

  //Lamp 1 Light on Ground
  fill(255, 255, 0, 0 + (mouseY/12)*0.75);
  ellipse(75, 355, 80, 15);
  fill(255, 255, 0, 0 + (mouseY/12)*0.35);
  ellipse(75, 355, 130, 25);

  //Lamp 1 Lightbulb

  fill(200 + (mouseY/8), 200 + (mouseY/8), 0);
  ellipse(75, 285, 15, 15);

  //Lamp 1
  fill(80 + mouseY/20);
  rectMode(CENTER);
  rect(75, 350, 50, 10);
  fill(110 + mouseY/20);
  rect(75, 320, 20, 35);
  fill(100 + mouseY/20);
  rect(75, 300, 40, 10);
  fill(90 + mouseY/16);
  rect(75, 290, 45, 10);
  fill(120 + mouseY/20);
  rect(75, 320, 12, 23);
  fill(90 + mouseY/20);
  rect(75, 340, 40, 10);
  fill(90 + mouseY/20);
  triangle(52, 285, 62, 265, 62, 285);
  triangle(88, 285, 88, 265, 98, 285);

  //Lamp 1 Light
  ellipseMode(CENTER);
  fill(255, 255, 0, 0 + (mouseY/12));
  ellipse(75, 285, 30, 30);
  fill(255, 255, 0, 0 + (mouseY/12)*0.75);
  ellipse(75, 285, 60, 60);
  fill(255, 255, 0, 0 + (mouseY/12)*0.4);
  ellipse(75, 285, 100, 100);

////////////CODE FOR LAMP 2//////////////

  //Lamp 2 Light on Ground
  fill(255, 255, 0, 0 + (mouseY/12)*0.75);
  ellipse(275, 355, 80, 15);
  fill(255, 255, 0, 0 + (mouseY/12)*0.35);
  ellipse(275, 355, 130, 25);

  //Lamp 2 Lightbulb

  fill(200 + (mouseY/8), 200 + (mouseY/8), 0);
  ellipse(275, 285, 15, 15);

  //Lamp 2
  fill(80 + mouseY/20);
  rect(275, 350, 50, 10);
  fill(110 + mouseY/20);
  rect(275, 320, 20, 35);  
  fill(100 + mouseY/20);
  rect(275, 300, 40, 10);
  fill(90 + mouseY/20);
  rect(275, 290, 45, 10);
  fill(120 + mouseY/20);
  rect(275, 320, 12, 23);
  fill(90 + mouseY/20);
  rect(275, 340, 40, 10);
  fill(90 + mouseY/20);
  triangle(252, 285, 262, 265, 262, 285);
  triangle(288, 285, 288, 265, 298, 285);

  //Lamp 2 Light
  fill(255, 255, 0, 0 + (mouseY/12));
  ellipse(275, 285, 30, 30);
  fill(255, 255, 0, 0 + (mouseY/12)*0.75);
  ellipse(275, 285, 60, 60);
  fill(255, 255, 0, 0 + (mouseY/12)*0.4);
  ellipse(275, 285, 100, 100);

////////////CODE FOR LAMP 3////////////

  //Lamp 3 Light on Ground
  fill(255, 255, 0, 0 + (mouseY/12)*0.75);
  ellipse(125, 254, 64, 12);
  fill(255, 255, 0, 0 + (mouseY/12)*0.35);
  ellipse(125, 254, 104, 20);

  //Lamp 3 Lightbulb
  fill(160 + (mouseY/8), 160 + (mouseY/8), 0);
  ellipse(125, 194, 12, 12);

  //Lamp 3
  fill(65 + mouseY/20);
  rect(125, 250, 40, 8);
  fill(95 + mouseY/20);
  rect(125, 224, 20, 28);
  fill(85 + mouseY/20);
  rect(125, 206, 32, 8);
  fill(75 + mouseY/20);
  rect(125, 198, 36, 8);
  fill(105 + mouseY/20);
  rect(125, 224, 10, 19);
  fill(75 + mouseY/20);
  rect(125, 242, 32, 8);
  fill(75 + mouseY/20);
  triangle(107, 194, 115, 178, 115, 194);
  triangle(135, 194, 135, 178, 143, 194);

  //Lamp 3 Light
  fill(255, 255, 0, 0 + (mouseY/12));
  ellipse(125, 194, 24, 24);
  fill(255, 255, 0, 0 + (mouseY/12)*0.75);
  ellipse(125, 194, 48, 48);
  fill(255, 255, 0, 0 + (mouseY/12)*0.4);
  ellipse(125, 194, 80, 80);

////////////CODE FOR LAMP 4////////////

  //Lamp 4 Light on Ground
  fill(255, 255, 0, 0 + (mouseY/12)*0.75);
  ellipse(325, 254, 64, 12);
  fill(255, 255, 0, 0 + (mouseY/12)*0.35);
  ellipse(325, 254, 104, 20);

  //Lamp 4 Lightbulb
  fill(160 + (mouseY/8), 160 + (mouseY/8), 0);
  ellipse(325, 194, 12, 12);

  //Lamp 4
  fill(65 + mouseY/20);
  rect(325, 250, 40, 8);
  fill(95 + mouseY/20);
  rect(325, 224, 16, 28);
  fill(85 + mouseY/20);
  rect(325, 206, 32, 8);
  fill(75 + mouseY/16);
  rect(325, 198, 36, 8);
  fill(105 + mouseY/20);
  rect(325, 224, 10, 19);
  fill(75 + mouseY/20);
  rect(325, 242, 32, 8);
  fill(75 + mouseY/20);
  triangle(307, 194, 315, 178, 315, 194);
  triangle(335, 194, 335, 178, 343, 194);

  //Lamp 4 Light
  fill(255, 255, 0, 0 + (mouseY/12));
  ellipse(325, 194, 24, 24);
  fill(255, 255, 0, 0 + (mouseY/12)*0.75);
  ellipse(325, 194, 48, 48);
  fill(255, 255, 0, 0 + (mouseY/12)*0.4);
  ellipse(325, 194, 80, 80);
  
////////////CODE FOR GLOWING LIGHTS////////////

  //Stars
  fill(255, 255, 200, 200);
  ellipse(200, 100, sin(frameCount/16)*3, 10);
  ellipse(200, 100, 10, sin(frameCount/16)*3);
  ellipse(120, 60, sin(frameCount/20)*2, 8);
  ellipse(120, 60, 8, sin(frameCount/20)*2);
  ellipse(50, 125, sin(frameCount/16)*3, 9);
  ellipse(50, 125, 9, sin(frameCount/16)*3);
  ellipse(300, 40, sin(frameCount/20)*2, 10);
  ellipse(300, 40, 10, sin(frameCount/20)*2);
  ellipse(380, 140, sin(frameCount/16)*3, 8);
  ellipse(380, 140, 8, sin(frameCount/16)*3);
  
  //Firefly Light
  fill(255, 255, 0, 40);
  ellipse(mouseX, mouseY, 25, 25);
  fill(255, 255, 0, 75);
  ellipse (mouseX, mouseY, sin(frameCount/10)*15, sin(frameCount/10)*15);
  fill(255, 255, 0, 100);
  ellipse (mouseX, mouseY, cos(frameCount/10)*15, cos(frameCount/10)*15);
  
  //Firefly
  fill(50);
  ellipse(mouseX +2, mouseY, 5, 3);
  fill(255, 255, 0);
  ellipse(mouseX, mouseY, 3, 3);
   
}

  //Firefly Sparkle On Key Press
  
void keyPressed(){
  
  frameRate(3);
  fill(255, 255, 200, 100);
  ellipse(mouseX, mouseY, 35, 35);
  fill(255, 255, 200);
  triangle(mouseX -2, mouseY,  mouseX + 2, mouseY, mouseX, mouseY + 25);
  triangle(mouseX -2, mouseY, mouseX + 2, mouseY, mouseX, mouseY - 25);
  triangle(mouseX, mouseY + 2, mouseX, mouseY - 2, mouseX + 25, mouseY);
  triangle(mouseX, mouseY + 2, mouseX, mouseY - 2, mouseX - 25, mouseY);
  
}

  // Crow's Glowing Eye on Mouse Click

void mouseClicked(){
  
  frameRate(3);
  fill(255, 0, 0);
  ellipse(283, 69, 4, 4);
  fill(255, 0, 0, 100);
  ellipse(283, 69, 8, 8);
  fill(255, 0 , 0, 35);
  ellipse(283, 69, 12, 12);

}