Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*

 INTERACTIVE MEDIA
 "INTERACTIVE RAIN"
 MARINA PIMENTEL
 SEPT. 20, 2015
 
 When user moves mouse left or right, umbrella follows cursor & blocks out rain.
 
 */

// VARIABLES **********************************************************************************
int umbrellaColour = 254;
int dropNum = 100;
float[] posX = new float[dropNum];
int[] posY = new int[dropNum];

// SETUP **************************************************************************************
void setup() {
  
  size(500, 500);
  for (int i=0; i<=9; i++) { //pre-set droplets to begin at top
    posY[i]=0;
  }
  
}

// DRAW (LOOP) ********************************************************************************
void draw() {

  // SKY
  background(0, 70, 100);
  noStroke();

  // RAIN - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >

  for (int i=0; i<=dropNum-1; i++) { //for each iteration of rain droplet (up to dropNum) ...
    if (posY[i]<1) { //... if current droplet hasn't begun falling yet (Y=0) ...
      if (i>=1 && posY[i-1]>=150) { //... and if previously drawn droplet (if there is one) has already 'fallen' 150+ pixels ...
        posX[i] = random(0, 501); //... randomize THIS droplet's X value ...
        for (int j=0; j<=12; j=j+3) { //... & draw droplet as a gradient to simulate falling speed, with the 'head' (bottom) in the first if statement & the 'tail' (top) in the else
          if (100+(j*13) >= 255) {
            fill(255);
            rect(posX[i], posY[i]+j, 2, 7);
          } else {
            fill(0, 70+(j*13), 100+(j*13)); //colour changes based on j to 'transition' between BG colour & white (^above)
            rect(posX[i], posY[i]+j, 2, 3);
          }
        }
        posY[i]++;
      } else if (i>=1 && posY[i-1]<=150) {
      } else {
        posY[i]++;
      }
    } else if (posY[i]<500) { //... if droplet HAS begun falling (Y>0) ...
      for (int j=0; j<=12; j=j+3) { //... again, draw droplet as a gradient to simulate falling speed, as above
        if (100+(j*13) >= 255) {
          fill(255);
          rect(posX[i], posY[i]+j, 2, 7);
        } else {
          fill(0, 70+(j*13), 100+(j*13));
          rect(posX[i], posY[i]+j, 2, 3);
        }
      }
      posY[i] = posY[i]+20; //+20 for fall speed
    } else { //droplet has reached bottom of screen
      posY[i] = 0; //reset to top
    }
  }

  // UMBRELLA - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >

  // umbrella bg (fake collision)
  fill(0, 70, 100); //bg colour
  rect(mouseX-100, 235, 200, 265); //umbrella bg

  // umbrella top
  fill(umbrellaColour);
  arc(mouseX, 235, 200, 175, PI, PI*2); //top
  fill(0, 70, 100); //bg colour
  ellipse(mouseX-67, 235, 66, 20); //top: left cut-out
  ellipse(mouseX, 235, 66, 20); //top: center cut-out
  ellipse(mouseX+67, 235, 66, 20); //top: right cut-out

  // umbrella handle
  fill(umbrellaColour);
  ellipse(mouseX-11, 235+120, 30, 30); //handle
  fill(0, 70, 100); //bg colour
  ellipse(mouseX-11, 235+114, 17, 25); //handle: hole cut-out
  rect(mouseX-30, 235+103, 15, 15); //handle: flat end

  // umbrella stem
  fill(umbrellaColour);
  rect(mouseX-4, 138, 8, 220); //stem
 
}