top of page

Falling Like Rain

Drop[] drops = new Drop[100] ;
PFont f;

void setup(){
  size(800, 800); 
  for (int i= 0; i < drops.length; i++) { // creating a loop to add 100 drops into the array
    drops[i] = new Drop();
    
    // creating the font
    printArray(PFont.list());
    f = createFont ("Arial",24);
  }
}

void draw() {
  background(0); 
  for (int i = 0; i < drops.length; i++) 
  {  
  drops[i].fall(); //creating a loop to draw 100 drops
  drops[i].show();
  }
  { 
    text("priority",230,400);
    textSize(100);
  }
}

class Drop {

  float x = random(width) ; //random location to start on the screen
  float y = random(-500,-100); // object starting randomly off the screen
  float yspeed = random(4, 10); //random speed of the drop
  
  void fall() {  //function to make it fall
    y= y + yspeed; // a variable to reset the y axis - to make it look as it is moving
    yspeed = yspeed + 0.03; //increase speed while falling
    
    if (y> height) { 
      y = random (-20, -10); // making the drops reset back to the top to start again
      yspeed = random(4, 10);  //reset speed
     }
  }
  
    void show() { // function to show or rendered on the screen
        stroke(191,227,247); // color of the lines
        line(x, y, x, y+20); //increasing y+20 makes the lines longer
  
  }
}

Code

Video Demonstration

This code creates an array of many lines moving from the top of the screen to the bottom as if it was rain. I changed it up so that the background was black like the sky during a storm and the lines blue to represent raindrops. I made the lines longer by increasing y+10 to y+20. I slowed down the speed of the drops from 0.05 to 0.03. I also changed the area where the drops would reset back to the top to create a more seamless flow. Then I decided to add in the word that was assigned to me to get a better idea of how it would look if I included this code into my final project. I tried experimenting ways I could insert text with exercises that I had already completed, I first tried using PGraphics(), pushMatrix() and popMatrix() but it wouldn't work. There was an error. So I used a simpler technique of simply adding text() and textSize(). This worked perfectly but the text was blurry. This happened because when I was experimenting I added the code 'P2D' which means print 2D. I simply deleted it and made sure to include PFont.list().

​

(click the functions underlined to learn more about them)

Function

bottom of page