Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*
Title: Missed the Bus
 Author: Pamela Payad
 Description: When moving the mouse left and right, a person is the mouse position and it gives the illusion of the person catching the bus. 
 The car in the background is moving with the person but at double speed. 
 Some stars become brighter.
 When moving the mouse up and down, the rest of the stars get brighter.
 When clicking the mouse, the headlights of the bus and the car shine and flash. 
 "HONK!" text in the console is displayed.
 When pressing a key, the person's hand "raises".
 "Missed the bus again!" text in the console is displayed. 
 */

//set up the window in a 400x400 window and display some text
void setup() {

  size(400, 400);
  println("Press a key to stop the bus.");
}


void draw() {
  //set the framerate of the drawing
  frameRate(60);
  //no stroke onto any of the shapes drawn and set background colour
  noStroke();
  background(0, 0, 118);
  
//draw basic background shapes
  //bottom rail
  fill(175);
  rect(0, 320, 400, 80);

  //bottom rail 2
  fill(150);
  rect(0, 320, 380, 60);

  //road
  fill(50);
  rect(0, 250, 400, 70);
  //road 2
  fill(75);
  rect(10, 280, 400, 40);

  //road line
  fill(255, 200, 0);
  rect(30, 295, 30, 10);
  fill(255, 200, 0);
  rect(120, 295, 30, 10);
  fill(255, 200, 0);
  rect(210, 295, 30, 10);
  fill(255, 200, 0);
  rect(300, 295, 30, 10);
  fill(255, 200, 0);
  rect(390, 295, 30, 10);

  //top rail
  fill(100);
  rect(0, 220, 400, 50);
  fill(120);
  rect(10, 230, 400, 40);

  //car
  fill(176, 0, 29);
  rect(mouseX*2, 240, 80, 30);
  rect(mouseX*2+10, 227, 65, 30);
  fill(0);
  rect(mouseX*2+15, 230, 10, 10);
  fill(255, 80);
  rect(mouseX*2+10, 230, 40, 10);
  fill(255, 255, 0);
  rect(mouseX*2-2, 242, 5, 5);

  //dividing rail
  fill(150);
  rect(0, 250, 400, 20);
  fill(175);
  rect(-20, 260, 400, 10);

  //bus
  fill(255);
  rect(-mouseX+20+width, 240, 140, 70);
  fill(0, 138, 196);
  rect(-mouseX+20+width, 240, 140, 50);
  fill(0, 138, 196);
  rect(-mouseX+30+width, 235, 120, 50);
  fill(240, 177, 2);
  rect(-mouseX+20+width, 285, 80, 5);
  fill(240, 177, 2);
  rect(-mouseX+100+width, 285, 5, 12);
  fill(240, 177, 2);
  rect(-mouseX+100+width, 292, 60, 5);
  //sign
  fill(255);
  ellipse(-mouseX+115+width, 250, 25, 10);
  //wheels
  fill(0);
  rect(-mouseX+40+width, 300, 20, 20);
  rect(-mouseX+110+width, 300, 20, 20);
  //seating
  fill(0);
  rect(-mouseX+35+width, 270, 10, 10);
  rect(-mouseX+65+width, 270, 10, 10);
  rect(-mouseX+95+width, 270, 10, 10);
  //windows
  fill(200, 80);
  rect(-mouseX+30+width, 260, 90, 20);
  //doors
  fill(200);
  rect(-mouseX+135+width, 260, 7, 50);
  rect(-mouseX+145+width, 260, 7, 50);
  //headlight
  fill(255, 255, 0);
  rect(-mouseX+155+width, 300, 7, 7);

  //person
  fill(229, 211, 146);
  rect(mouseX-20, 295, 15, 30);
  rect(mouseX-17, 285, 8, 8);
  //shirt
  fill(57, 200, 53);
  rect(mouseX-20, 295, 15, 20);
  //arm
  //rect(mouseX-8, 280, 6, 13);
  rect(mouseX-24, 300, 5, 13);
  //shoes
  fill(77, 63, 11);
  rect(mouseX-20, 320, 15, 5);

  //bus stop
  fill(210);
  rect(180, 260, 3, 70);
  fill(0, 13, 255);
  rect(179, 260, 5, 15);

  //buildings

  //building 1
  fill(67, 58, 104);
  rect(20, 20, 80, 200);
  fill(84, 73, 129);
  rect(30, 20, 80, 200);

  //building2
  fill(49, 43, 76);
  rect(120, 60, 50, 160);
  fill(64, 56, 99);
  rect(130, 60, 50, 160);

  //building3
  fill(67, 53, 130);
  rect(190, 110, 130, 110);
  fill(75, 59, 144);
  rect(200, 110, 130, 110);

  //building4
  fill(107, 99, 143);
  rect(340, 40, 100, 180);
  fill(130, 119, 175);
  rect(350, 40, 100, 180);

  //stars 
  
  //when you move the mouse up and down, stars become brighter/dimmer for 3 stars
  fill(220-mouseY/2, 220-mouseY/2, 200-mouseY/2);
  //draw the stars with a glow effect by having some ellipses lower opacity
  ellipse(150, 10, 5, 5);
  fill(255, 50);
  ellipse(150, 10, 20, 20);
  fill(255, 50);
  ellipse(150, 10, 15, 15);

  fill(220-mouseY/2, 220-mouseY/2, 200-mouseY/2);
  ellipse(350, 10, 5, 5);
  fill(255, 50);
  ellipse(350, 10, 20, 20);
  fill(255, 50);
  ellipse(350, 10, 15, 15);
  
   fill(220-mouseY/2, 220-mouseY/2, 200-mouseY/2);
  ellipse(210, 90, 5, 5);
  fill(255, 50);
  ellipse(210, 90, 20, 20);
  fill(255, 50);
  ellipse(210, 90, 15, 15);
  
  //When you move the mouse left and right, the rest of the stars become dimmer/brighter for 2 stars
  fill(220-mouseX/3, 220-mouseX/3, 200-mouseX/3); 
  ellipse(280, 50, 5, 5);
  fill(255, 50);
  ellipse(280, 50, 20, 20);
  fill(255, 50);
  ellipse(280, 50, 15, 15);

  fill(220-mouseX/3, 220-mouseX/3, 200-mouseX/3); 
  ellipse(0, 100, 5, 5);
  fill(255, 50);
  ellipse(0, 100, 20, 20);
  fill(255, 50);
  ellipse(0, 100, 15, 15);

}

//when the mouse is pressed, create headlight flashing illusion and display text on the console
void mousePressed() {
  //create headlight flashing illusion
  fill(246, 255, 10, 90);
  quad(-mouseX+160+width, 310, -mouseX+160+width, 300, 400, 250, 400, 320);
  //display text on the console
  fill(246, 255, 10, 90);
  quad(mouseX*2-400+width, 242, mouseX*2-400+width, 245, 0, 250, 0, 210);
  println("HONK!");
}

//when a key is pressed, flash the "arm" of the person and display text
void keyPressed() {
  //set frame rate lower so the hand flashes faster
  frameRate(4);
  //display text
  println("Missed the bus again!");
  //flash the arm
  fill(57, 200, 53);
  rect(mouseX-8, 280, 6, 13);
}