Rain in 2D

I decided that I wanted to make a rain scene so I done some research into it and found a load of information about it. This lead me to download a coding platform called Processing which is java as our teacher wanted us to learn a range of coding languages.

1Purple Rain Gif.gif

I made one drop, this fell in the center of the screen so i changed the variable to 500 then it still stayed on drop as all of the 500 drops were in the same place. Then I made a flat variable which spread them out across a range. After this tweak they all fell in a straight line so i made a variable of their spawning locations, I made this into the negatives so there were a wider range of the spawning giving it a more realistic rain effect.

2Purple Rain Gif.gif

I added a lot more rain drops and then game them gravity depending on the Z value which determined how close they were. Also the closer they are the smaller and slower they fall. This was to give the impression of distance for some of the drops.3Purple Rain Gif.gif

As an example I changed the colour of the rain to green to show my friend. As this was his favorite colour. You can clearly see the difference in sizes for the rain drops giving the impression of distance. I have marked each line of code making it easy to understand and clearly explaining what each line does this is so if i need to look back at it in the future I will be reminded on what it does in case I forget.



//Purple Rain

// This is a purple colour (138, 43, 226)
// This is a background colour (230, 230, 250)

// ‘Drop d’ is the drop class
// Drop[] is an element of it and the Drop[100] is the amount of drops
Drop[] drops = new Drop[500];

void setup() {
//The size of the screen
size(640, 360);
for (int i = 0; i < drops.length; i++) {
drops[i] = new Drop();

void draw() {
//The background colour
background(230, 230, 250);
for (int i = 0; i < drops.length; i++) {

class Drop {
//these are variables
//Random(width) Gave them all a random spawn location across the width of the screen.
float x = random(width);
//this is the range of where the drops can start
float y = random(-500,-50);
//yspeed is for falling
//At a range of 4, 10
float z = random(0, 20);
//this gives them random length based on the distance on the Z axis
//The Z axis is what changed the depth on how colose it is
//The map means the closer it is the longer it is the further away the smaller
float len = map(z, 0, 20, 10, 20);
//This is the falling speed to change must also change the if factor
float yspeed = map(z, 0, 20, 10, 20);

void fall() {
y = y + yspeed;
float grav = map(z, 0, 20, 0, 0.2);
//This is kind of like gravity. It increases the velocity as they are falling
yspeed = yspeed + grav;
//if y > height it respawns the drops somewhere random between -200,-100
if (y > height) {
y = random(-200,-100);
//This resets the yspeed to what it started as when it the drop respawns
yspeed = map(z, 0, 20, 10, 20);

void show() {
float thick = map(z, 0, 20, 1, 3);
//This is the drop fall path (A Line) in the x-y region)
//The stroke is the rain and its colour is purple so we used the purple colour code
stroke(0, 128, 0);
// The first x,y is the start and it finishes as x,y+10


1Purple Rain Code.PNG

That code is for the Drop, the creation of it.

2Purple Rain Code P1.PNG3Purple Rain Code P2.PNG

That code is the mechanics behind the drop and what it does.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s