Help Make It Rain
This should tell you everything you need to know to complete the Make It Rain Project at Khan Academy.
We're not going to write all the code for you, just try to help you understand all the parts necessary to build it yourself.
First let's draw a single drop:
noStroke();
fill(0, 200, 255);
ellipse(200, 100, 10, 10);
Now we'll make our raindrop fall. First we'll want to put everything in a draw function:
draw = function() {
noStroke();
fill(0, 200, 255);
ellipse(200, 100, 10, 10);
};
***
We want it to move down in the Y axis, so we'll replace the Y value with a Variable:
var dropY = 100;
draw = function() {
noStroke();
fill(0, 200, 255);
ellipse(200, dropY, 10, 10);
};
Now to animate it, we will update the Variable inside the draw function:
var dropY = 100;
draw = function() {
noStroke();
fill(0, 200, 255);
dropY = dropY + 1;
ellipse(200, dropY, 10, 10);
};
This of course leaves a trail behind it, so we'll add a background color:
var dropY = 100;
draw = function() {
background(204, 247, 255);
noStroke();
fill(0, 200, 255);
dropY += 1;
ellipse(200, dropY, 10, 10);
};
Hit the Restart button to see your drop slowly falling.
Now we want to make it so if the drop goes off the screen in Y, it get's reset back to the top:
var dropY = 100;
draw = function() {
background(204, 247, 255);
noStroke();
fill(0, 200, 255);
dropY += 1;
if(dropY > 400){ dropY = 0; }
ellipse(200, dropY, 10, 10);
};
First let's draw a drop using a Variable for the X position:
var dropX = 100;
draw = function() {
background(204, 247, 255);
noStroke();
fill(0, 200, 255);
ellipse(dropX, 200, 10, 10);
};
Then we'll add a second drop the same way:
var drop1X = 100;
var drop2X = 200;
draw = function() {
background(204, 247, 255);
noStroke();
fill(0, 200, 255);
ellipse(drop1X, 200, 10, 10);
ellipse(drop2X, 200, 10, 10);
};
That can turn into a lot of Variables to manage if you want say 100 items in your program.
So now, instead of having separate Variables for each drop, we will store them in an Array:
var dropsX = [100,200];
Remembering that Array index numbers start at 0, we could access the values in the array by calling their index number:
var dropsX = [100,200];
ellipse(dropsX[0], 200, 10, 10);
ellipse(dropsX[1], 200, 10, 10);
One way we could add more drops to the Array would be by adding more numbers:
var dropsX = [100,200,300,400];
Or instead we could also push items onto the Array like this:
dropsX.push(300);
dropsX.push(400);
Now of course, we would have to add more lines of code to draw each newly added item in the Array:
ellipse(dropsX[0], 200, 10, 10);
ellipse(dropsX[1], 200, 10, 10);
ellipse(dropsX[2], 200, 10, 10);
ellipse(dropsX[3], 200, 10, 10);
or we can use a Loop to iterate through each item in the Array:
for(var each in dropsX){
ellipse(dropsX[each], 100, 10, 10);
}
OK, so we learned a couple different ways to populate our Array. We can fill it with values:
var dropsX = [100,200,300,400];
Or instead we could also push items onto the Array like this:
dropsX.push(100);
dropsX.push(200);
dropsX.push(300);
dropsX.push(400);
Again, that can become a lot if you want 20 or more items in your array. In our case, we want all of our drops to have different X and Y values so let's start over with an empty Array for both:
var dropsX = [];
var dropsY = [];
Then we could push some random values from 0 to 400 onto both our X and Y Arrays:
dropsX.push(random(0,400));
dropsY.push(random(0,400));
and then to add more random values we could do the same thing again and again:
dropsX.push(random(0,400));
dropsY.push(random(0,400));
dropsX.push(random(0,400));
dropsY.push(random(0,400));
Or, whenever you find yourself doing things over and over in Programming, let the computer do the work for you!
Instead let's use a For Loop to Push as many random drops as we want onto the Arrays:
for(var d = 0; d < 20; d++){
dropsX.push(random(0,400));
dropsY.push(random(0,400));
}
And of course add the y values when you draw the ellipse:
for(var each in dropsX){
ellipse(dropsX[each], dropsY[each], 10, 10);
}
So now we are using a For / In Loop to iterate through the Array and draw each drop. If we want to animate them, inside the same loop we can update the position of each drop right before we draw it. Then add an if statement to set each drop back to 0 if it goes past the screen size.
We want to make it so it does something every time the mouse is clicked. We want it to do it one time instead of once every frame. For that we can create a mouseClicked function. The function must be declared outside of the draw function:
mouseClicked = function(){
// Do stuff
};
Then make it so when you click the mouse it pushes more values to the X & Y position Arrays. You can also make it so it uses the mouseX & mouseY instead of random values.
Let's store a color value in an Array:
var myColor = [color(255,0,0)];
Then we'll use that color value on an ellipse:
var myColor = [color(255, 0, 0)];
noStroke();
fill(myColor[0]);
ellipse(100, 200, 10, 10);
Here is how we would push a random color onto our Array:
myColor.push(color(random(255), random(255), random(255)));