Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*
Title: Big Ben (London Storm)

Description: It's an overcast day in London, UK. 
The sky dulls as the day continues, it's just a regular day in London.
- The mouse can manipulate time, moving it up and down can either move you forward in time, or backwards.
- The mouse also can move the clouds back and forth along the 'x' axis
- Pressing your mouse key causes lightning and thunder to appear (if only I could import sounds)
- Both the clouds and sky will darken as the day goes by, indicating the status of the storm. (As the day continues the storm gets worse)

Creater: Evan Grose

*/

void setup() {
  // set size of canvas
  size(400, 400);

  // set rectMode
  rectMode(CORNERS);
  ellipseMode(CENTER);
  println("It's currently 3am in London, United Kingdom. Drag you mouse down to manipulate the time.");
}

void draw() {
  // Blue to dark blue bg
  background(mouseY-250, mouseY-150, 255);
  
  // Additional dark blue layer
  fill(35, 31, 83, mouseY/2);
  rect(0,0,400,400);
  
  // Additional dark blue layer #2
  fill(55, 51, 103, mouseY/4);
  rect(0,0,400,400);
  
  // Additional grey layer to de-saturate
  fill(150, 100);
  rect(0,0,400,400);
  
  // Additional white layer to brighten
  fill(250, 100-mouseY);
  rect(0,0,400,400);
  
  // Additional sky layer to saturate daytime
  fill(0, 150, 250, 100-mouseY);
  rect(0,0,400,400);
  
  // Additional black layer to darken
  fill(20, mouseY/2-100);
  rect(0,0,400,400);
  
  // Clouds behind
  noStroke();
  fill(255-mouseY/4);
  ellipse(mouseX-180, (100+6*sin(radians(frameCount)-PI)), 90, 70);
  ellipse(mouseX-100, (100+6*sin(radians(frameCount)-PI)), 80, 50);
  ellipse(mouseX-140, (100+6*sin(radians(frameCount)-PI))-10, 110, 90);
  
  // Blue slant [top]
  strokeWeight(1);
  stroke(66, 91, 125);
  fill(106, 131, 165);
  quad(160, 60, 190, 0, 210, 0, 240, 60);

  // Blue slant open [top]
  strokeWeight(5);
  stroke(66, 91, 125);
  line(175, 50, 175, 60);
  line(200, 50, 200, 60);
  line(225, 50, 225, 60);

  line(190, 30, 190, 40);
  line(210, 30, 210, 40);

  line(200, 10, 200, 20);

  strokeWeight(3);
  stroke(46, 71, 105);
  line(185, 42, 195, 42);
  line(205, 42, 215, 42);

  line(195, 22, 205, 22);

  // Tower base
  strokeWeight(1);
  stroke(142, 130, 108);
  fill(222, 195, 164);
  rect(160, 60, 240, 400);

  // Tower base 2
  strokeWeight(1);
  stroke(142, 130, 108);
  fill(222, 195, 164);
  rect(155, 260, 245, 400);

  // Head bottom
  strokeWeight(1);
  stroke(142, 130, 108);
  fill(222, 195, 164);
  rect(145, 265, 255, 250);

  // Head
  strokeWeight(1);
  stroke(142, 130, 108);
  fill(222, 195, 164);
  rect(140, 140, 260, 260);

  // Head base - Top open
  strokeWeight(5);
  stroke(182, 155, 124);
  line(170, 90, 170, 100);
  line(190, 90, 190, 100);
  line(210, 90, 210, 100);
  line(230, 90, 230, 100);

  line(180, 80, 180, 70);
  line(200, 80, 200, 70);
  line(220, 80, 220, 70);

  strokeWeight(3);
  stroke(162, 135, 104);
  line(175, 82, 185, 82);
  line(195, 82, 205, 82);
  line(215, 82, 225, 82);

  // Blue slant
  strokeWeight(1);
  stroke(66, 91, 125);
  fill(106, 131, 165);
  quad(145, 135, 160, 100, 240, 100, 255, 135);

  // Blue slant open
  strokeWeight(7);
  stroke(66, 91, 125);
  line(170, 120, 170, 135);
  line(190, 120, 190, 135);
  line(210, 120, 210, 135);
  line(230, 120, 230, 135);

  // Head top
  strokeWeight(1);
  stroke(142, 130, 108);
  fill(222, 195, 164);
  rect(145, 135, 255, 140);

  // Head white square
  strokeWeight(3);
  stroke(250);
  noFill();
  rect(150, 150, 250, 250);

  // Clock
  noStroke();
  fill(255);
  ellipse(200, 200, 80, 80);

  // Clock dashes
  strokeWeight(1);
  stroke(0);
  line(200, 165, 200, 170);
  line(200, 230, 200, 235);
  line(165, 200, 170, 200);
  line(230, 200, 235, 200);

  // Clock hands
  strokeWeight(2);
  stroke(75);
  //line(200, 200, 200, 165);
  //200 = The center point
  //25 = The amplitude
  //mouseY/0.5 = The frequency
  //600 = The starting point of the cos/sine wave
  line(200+25*cos(radians(mouseY/0.05)-PI-300), (200+25*sin(radians(mouseY/0.05)-PI-300)), 200, 200);
  strokeWeight(3);
  stroke(75);
  //line(200, 200, 210, 185);
  line(200+15*cos(radians(mouseY/0.6)-PI-600), (200+15*sin(radians(mouseY/0.6)-PI-600)), 200, 200);
  
  // Clock bracket
  noFill();
  strokeWeight(2);
  stroke(200, 200, 0);
  ellipse(200, 200, 4, 4);

  // Tower Lines V
  strokeWeight(3);
  stroke(182, 155, 124);
  line(175, 280, 175, 320);
  line(200, 280, 200, 320);
  line(225, 280, 225, 320);

  line(175, 350, 175, 400);
  line(200, 350, 200, 400);
  line(225, 350, 225, 400);

  // Tower Lines H
  line(155, 330, 245, 330);
  line(155, 340, 245, 340);
 
  // Clouds front
  noStroke();
  fill(255-mouseY/4);
  ellipse(mouseX+120, (150+4*sin(radians(frameCount/1.2)-PI-300)), 90, 70);
  ellipse(mouseX+40, (150+4*sin(radians(frameCount/1.2)-PI-300)), 80, 50);
  ellipse(mouseX+80, (150+4*sin(radians(frameCount/1.2)-PI-300))-10, 110, 90);
}

void mousePressed() {
 // Lightning
 noStroke();
 fill(255, 255, 0);
 rect(0, 0, 400, 400);
  
 println("*Thunderstorm Sounds*");
}