Create Acid Rain!!

Hi again, I recently came across this cool project and a IDE that I have never heard of before, with the exception of a very familiar programming language for me at least.But the project is acid rain and I’m using an IDE called p5.js Originally the project was not called acid rain but I messed around with my code a little to put my own flavor on it and, afterwards I encourage you to do the same.To download and learn more about p5.js Click Here. But for anyone with an Linux operating system and struggling, just having trouble getting p5 to work or, just doesn’t really feel like installing another IDE. Here’s a blog to show you how to use p5 in Sublime Text Click Here!!

The Project

screen-shot-2017-01-04-at-12-42-53-pm

The Details

What we are going to do is to simulate an acid type rain fall. First we need to think about a couple of things to make this look like rain. How do we create the rain, how do we allow the rain to fall and also fall in random places on the x, y and,z axis, so lets get started.

Setting up your IDE(if you have it)

Well lets start first we need to click on the pink p5 icon.When it opens you should have something like what shown below and, you should see two functions Setup and Draw if so then you are in good terms so far.

IDE_p5_acid.png

Next what we want to happen is to be able to access all the files.To do that we would need to go on the top right hand corner and click on the pink gear. Once we do that go all the way down to “Show sidebar and turn it on, this should enable us to access all the files.On the side we should see an “index.html”, “libraries” folder and, “sketch.js”.

p5_aicd.png

Now Lets Code!!

Alright I think before we start to code lets establish what are color values for your rain and background.

//Color of rain: RGB(10, 255, 21);
//Background: RGB(0, 0, 0);

Next in your setup function we need a something to draw on. To be able to execute that task we would need to call the createCanvas(); and pass through some dimensions.

function setup(){
 createCanvas(600,600);
}

Now we would need too color in our background with background(); and pass through our color value in.This goes into our draw function.

function draw(){
 background(0, 0, 0);
}

Before we create multiple rain drops and get into placement, we would need to create one single rain drop. So now what we need to do is to make another class called drop.js . We can do so by mashing the “+” button on the right side of the tab.Then after that is done go into your “index.html” folder and in the “” initialize our new class “drop.js” by write this:

 ""

So now we need too create a constructor function for our drop called Drop().

function Drop() { 
}

Then create a another function where we can work on the fall of our rain drop.

this.fall = function() {
}

We wrote the keyword this in referring the object we are working on. To learn more read this or watch this.

Next we will need a function to show our drop like so:

  this.show = function() {
}

In our Drop function our drop need an x and a y.

this.x
this.y

Now lets focus on the design of our rain drop, well in this case we would want a line by using line();. We are passing through an x , y coordinates  and the second x point and y +10, which is y plus 10 pixies. This goes into our show function.

this.show = function() {
line(this.x, this.y, this.x, this.y+ 10);
}

Now let work on the color of the rain drop with the method stroke(); ,with this we are going to pass through our color value for our rain.

stroke(10, 255, 21);

OK great!! Lets go over to our Drop function and create a variable called “yspeed” and set the speed to how fast we want our rain drop to travel along the y axis. For now we are going to set our speed to 1.

  this.yspeed = 1;

Now lets go to the fall function and we are going to set y to what ever we set the y speed to become.

this.y = this.y + this.yspeed;

Lastly we need to set values for our x and y in the Drop function.We are going to set x to the middle of the screen  and y to the top of the screen.

this.x = width/2;
this.y = 0;

Alright now that we have enough code to test in our drop.js lets go over to the sketch.js and implement that in our drop.js in the sketch.js.First lets create a variable drop (We are not going to set a value for it yet, this is just for test purposes).

//make sure you code this above the setup function 
var drops;

Now we are going to take the rain drop we created and store into the “drops” variable.

drops =new Drop();

Lastly, before we test it out, we are going to the draw function and implement the fall and show function out of our “drops” variable.

 drops.fall();
 drops.show();

Test #1

one_aicd_rain_drop.jpg.png
What you should get is one single slow rain drop.

Making multiple rain drops

Now we have one rain drop lets create multiple rain drops. How we would go about that is to add an empty array value to our drops variable.

var drops = [];

Next we need to find a way to fill that empty array with rain drops. Got it !!! we will create a for loop to do so and lets make about 100 or so to start off with.Also we need to place “i” in the array. By the way this goes into our setup function.

for (var i = 0; i < 100; i++){
 drops[i] = new Drop();
 }

Then we need to go down to the draw function and do the same.

for(var i = 0; i< drops.length; i++){
 drops[i].fall();
 drops[i].show();

}

Next we need to switch over to our drop.js and go into the Drop function. Now if we would to run this now, you would only see one run drop that’s because all 100 rain drops are exactly on the same x axis so we would need to spread them out.

 //this spreads them out to the width of our canvas 
this.x = random(width);

Test 2#

rian_drop_line.jpg.png
What should. get is drops moving in same speed.

Well we have rain and multiple of them but it doesn’t look natural. What we have to do is is to get them to start at random y points, but allow them to do that off the screen so we wont see them start at random spots on your canvas.

this.y = random(-500, -50);

Also we we can make happen is to give them different speeds.

this.yspeed = random(4, 20);

Test #3

end_rain.jpg.png
So if you see the rain ends after we cycle through 100 rain drops.

Now we need to work on having continuous rain drops. How we can go about doing that is after the last drop of rain is greater than the height of the canvas we will cycle through another 100 drops.Remember that the rain is being generated of the canvas.

//This goes into the fall function in the drop.js file
if (this.y > height) {
 this.y = random(-200, -100);

 }

Test #4

same_rain.jpg.png

Another thing we can do is to have some rain appears closer its bigger and falls faster and ,others appear farther, slower and smaller. We can achieve this by utilizing the map(); method. So lets create a “z” variable even though this is a 2-d project. So we are going to create values from 0 to 20.

this.z = random(0, 20);

Then we are going to create a “len” which stands for length, to create that parallax view. So first we are going to map the “z” that we just made and pass through the values 0 and 20. Then pass lengths from 10 to 20.

//this means if its futher its shorter if its closer its longer
this.len = map(this.z, 0, 20, 10, 20);

After that make sure you go down to the show and make this change to your line.

                                   
line(this.x, this.y, this.x, this.y+this.len);

Also we should map the speed for the far drops to travel slower.

this.yspeed = map(this.z, 0, 20, 4, 10);

Now  we are going to work on the weight or thickness of our rain drops depending on how close they are. So we can make a variable called “thick” then map it.

var thick = map(this.z, 0, 20, 1, 5);
strokeWeight(thick);

Great now you need to do is test it out and should have something like so:

screen-shot-2017-01-04-at-12-42-53-pm

Nice!! Congrats you have created acid rain pretty cool right. Like always I encoruge you to play around with this code and put your own taste on it or just add to it and keep programming!

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s