Creating a particle rain effect
If you new to the series start here: Part1, Part 2 and Part 3
All the code and libraries can be found here: https://github.com/GeorgeGally/creative_coding
Particle rain effect
So now that we have our particles… let’s have some fun and create some particle effects. This will also, hopefully, give you an insight as to how the same piece of code can create vastly different effects and get you experimenting more, which is where the magic and fun happens.
So let’s create a simple, but visually pleasing particle rain effect like the image above…
We already have all the code we need… we just need to make particle trails fall from the top, and instead of bouncing, and then just reappear at the top when they get to the bottom…
So, firstly let’s add some particles… we set our ball’s speed_x to 0, as the particles are just falling down. And we give it a random start position of anywhere from 0 to the screen width, ie. random(w); which is the same as saying random(0, w); And we give our balls a vertical start point somewhere above the screen to they don’t all start at the same place. And a random grey colour using rgb(random(255));
So our setup code will look like this:
var ctx = createCanvas("canvas1");var max_balls = 2000;var balls = [];
for (var i = 0; i < max_balls; i++) {addBall();}
// push a ball and it's values into the arrayfunction addBall(){var ball = {x: random(w),y: random(-200,0),speed_x: 0,speed_y: random(0.5, 3),size: 8,colour: rgb(random(255))}balls.push(ball);if (balls.length > max_balls) balls.splice(0,1);}
For our moveBall() function, it look pretty much the same as before, except we need to reset the particle to the top once it goes over the edge:
function moveBall(){
for (var i = 0; i < balls.length; i++) {
var b = balls[i];b.x = b.x + b.speed_x;b.y = b.y + b.speed_y;
// if ball goes over bottom reset it if (b.y > h) {b.y = random(-100,0);b.colour = rgb(randomInt(255));}
}
}
For neatness’ sake let put the rest stuff in a resetBall() function. We’ll need to pass a reference of our ball to the function, otherwise the function won’t know which ball we are referring to. We do this just by passing the an object/variable to the function in it’s brackets, like so:
_// syntax: functionName(variable)_resetBall(b)
And receiving the variable in the function like so:
function resetBall(_b) {// do some stuff with _b}
In coding we often use the underscore (like _b in this case) because it just makes it easy to see that we’re referring to a local variable reference (any variable declared inside a function can’t be see outside of it — which is a good thing. You should always try to steer away from global variables as much as possible).
So now our completed code should look like this:
var ctx = createCanvas("canvas1");var max_balls = 2000;var balls = [];
for (var i = 0; i < max_balls; i++) {addBall();}
function addBall(){var ball = {x: random(w),y: random(-200,0),speed_x: 0,speed_y: random(0.5, 3),size: 8,colour: rgb(random(255))}balls.push(ball);if (balls.length > max_balls) balls.splice(0,1);}
function draw(){ctx.background(0, 0.06);moveBall();drawBall();}
function moveBall(){for (var i = 0; i < balls.length; i++) {var b = balls[i];b.x = b.x + b.speed_x;b.y = b.y + b.speed_y;
**if (b.y > h) {
resetBall(b);
}**
}}
function resetBall(_b){_b.y = random(-100,0);_b.colour = rgb(randomInt(255));}
function drawBall(){for (var i = 0; i < balls.length; i++) {var b = balls[i];ctx.fillStyle = b.colour;ctx.fillEllipse(b.x, b.y, b.size, b.size);}}
And that’s it... Particle rain. Most code you’ll use is really just a variation of this. So play around and see what other effects you can come up with… See you next time.
Follow me on Instagram here: https://www.instagram.com/radarboy3000/
Follow me on Twitter here: https://twitter.com/radarboy_japan
And like my Facebook Page here: https://www.facebook.com/radarboy3000
Introduction to Creative Coding Part 1: https://medium.com/@radarboy3000/creative-coding-basics-4d623af1c647#.hn9zzliob
Introduction to Creative Coding Part 2: https://medium.com/@radarboy3000/introduction-to-creative-coding-part-2-d869832d9ffb#.fzxcom541
Introduction to Creative Coding Part 3: https://medium.com/@radarboy3000/how-to-make-particles-1cbeee937593#.wwjhkv7u2
Github repository of all the code: https://github.com/GeorgeGally/creative_coding