Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
// "SOMETHING'S IN THE VENT"
// By: Amelia McLeavey

// The thing you dropped has fallen into a vent. It's small and shines white.
// Find it by moving your flashlight and clicking the mouse!

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

void draw() {
  // The place behind the light
  background(0); 
  // Lower framerate to prevent things from flickering
  frameRate(40);
  

  //// LIGHT ////~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  noStroke ();

  // MouseX divided by percentage of screen, scaled to 280, + 60 to constrain light to vent opening.
  // MouseY divided by percentage of screen, scaled to 130, + 30 to constrain light to vent opening.

  // Inner Glow
  fill (245, 199, 173, 120);
  ellipse (mouseX / 400.0 * 280 + 60, mouseY / 400.0 * 130 + 30, 60, 60);

  // Middle Glow
  fill (245, 199, 173, 80);
  ellipse (mouseX / 400.0 * 280 + 60, mouseY / 400.0 * 130 + 30, 85, 85);

  // Outer Glow  
  fill (245, 199, 173, 30);
  ellipse (mouseX / 400.0 * 280 + 60, mouseY / 400.0 * 130 + 30, 180, 180);

  // Extra Glow
  fill (245, 199, 173, 15);
  ellipse (mouseX / 400.0 * 280 + 60, mouseY / 400.0 * 130 + 30, 400, 400);

  // HotSpot
  fill (252, 251, 229);
  ellipse (mouseX / 400.0 * 280 + 60, mouseY / 400.0 * 130 + 30, 40, 40); 


  //// SURFACES ////~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  // Back Surface
  stroke (0);
  strokeWeight (5);
  fill (22);
  rect (50, 20, 300, 20); // top
  rect (50, 160, 300, 20); // bottom
  noStroke();
  rect (-100, 20, 155, 160); // left, width extends 100 pixels on each side
  rect (345, 20, 155, 160); // right, width extends 100 pixels on each side

  // Bottom Surface
  noStroke();
  fill (50);
  rect (-100, 170, 600, 230); // width extends 100 pixels on each side, height level to window

  // Top Surface
  rect (-100, 0, 600, 30); // width extends 100 pixels on each side, height level to window


  //// VENT ////~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  noStroke();
  fill (0);

  // From left to right
  rect (55, 40, 20, 120);
  rect (85, 40, 20, 120);
  rect (115, 40, 20, 120);
  rect (145, 40, 20, 120);
  rect (175, 40, 20, 120);
  rect (205, 40, 20, 120);
  rect (235, 40, 20, 120);
  rect (265, 40, 20, 120);
  rect (295, 40, 20, 120);
  rect (325, 40, 20, 120);


  //// SHADOWS ////~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  // Wall Shadows
  noStroke();
  fill (15);
  rect (0, 170, 400, 10);

  // Bottom Shadows from left to right, 
  // these need to move opposite to mouse at slightly different speeds to prevent overlap
  quad (-100, 170, 75, 170, 130 - mouseX, 400, -100, 400);
  quad (85, 170, 105, 170, 200 - mouseX, 400, 150 - mouseX, 400);
  quad (115, 170, 135, 170, 275 - (mouseX / 1.1), 400, 225 - (mouseX / 1.1), 400);
  quad (145, 170, 165, 170, 350 - (mouseX / 1.2), 400, 300 - (mouseX / 1.2), 400);
  quad (175, 170, 195, 170, 425 - (mouseX / 1.3), 400, 375 - (mouseX / 1.3), 400); 
  quad (205, 170, 225, 170, 500 - (mouseX / 1.3), 400, 450 - (mouseX / 1.3), 400);
  quad (235, 170, 255, 170, 575 - (mouseX / 1.3), 400, 525 - (mouseX / 1.3), 400);
  quad (265, 170, 285, 170, 650 - (mouseX / 1.4), 400, 600 - (mouseX / 1.4), 400);
  quad (295, 170, 315, 170, 725 - (mouseX / 1.5), 400, 675 - (mouseX / 1.5), 400);
  quad (325, 170, 600, 170, 500, 400, 750 - (mouseX / 1.6), 400);
}

// Reveals the thing you have dropped, the shadows have to be redrawn so that they still cover the thing.
void mousePressed() {
  
  // The Thing
  stroke (255);
  strokeWeight (2);
  point (10, 380);
  strokeWeight (1);
  line (9, 380, 11, 380);
  
  // The Shadows Redrawn
  noStroke();
  quad (-100, 170, 75, 170, 130 - mouseX, 400, -100, 400);
  quad (85, 170, 105, 170, 200 - mouseX, 400, 150 - mouseX, 400);
  quad (115, 170, 135, 170, 275 - (mouseX / 1.1), 400, 225 - (mouseX / 1.1), 400);
  quad (145, 170, 165, 170, 350 - (mouseX / 1.2), 400, 300 - (mouseX / 1.2), 400);
  quad (175, 170, 195, 170, 425 - (mouseX / 1.3), 400, 375 - (mouseX / 1.3), 400); // 770, 680
  quad (205, 170, 225, 170, 500 - (mouseX / 1.3), 400, 450 - (mouseX / 1.3), 400);
  quad (235, 170, 255, 170, 575 - (mouseX / 1.3), 400, 525 - (mouseX / 1.3), 400);
  quad (265, 170, 285, 170, 650 - (mouseX / 1.4), 400, 600 - (mouseX / 1.4), 400);
  quad (295, 170, 315, 170, 725 - (mouseX / 1.5), 400, 675 - (mouseX / 1.5), 400);
  quad (325, 170, 600, 170, 500, 400, 750 - (mouseX / 1.6), 400);
    
}