Creating a particle rain effect If you new to the series start here: , and Part1 Part 2 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 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. which is the same as saying 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 ; speed_x random(w); random(0, w); 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 = { size: 8, }balls.push(ball);if (balls.length > max_balls) balls.splice(0,1);} x: random(w), y: random(-200,0), speed_x: 0,speed_y: random(0.5, 3), colour: rgb(random(255)) For our 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: moveBall() 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 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: resetBall() _// 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

Ball

Facebook

Instagram

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Playing with particles

Too Long; Didn't Read

Companies Mentioned

George Gally

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Playing with particles

Too Long; Didn't Read

Companies Mentioned

George Gally

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES