JavaScript Day 15: Particles

I don’t know about you, but I’m getting tired of wires. Let’s build something else. For starters, a simple particle system.

First the HTML:

[php lang=”HTML”]

[/php]

In the script file, we’ll use the jQuery document ready function to kick things off:

[php lang=”JavaScript”]$(function() {
// …
});[/php]

As for vars, we’ll of course need a reference to the canvas and context, its width and height. Then an array to hold the particles, something for the number of particles, a loop counter, and we’ll throw in a bounce variable to reverse the particles’ directions when they hit the walls. After that we can go ahead and grab our canvas reference with jQuery and then the context.

[php lang=”JavaScript”]$(function() {
var points = [], numPoints = 50, i, canvas, context, width, height, bounce = -1;

canvas = $(“#canvas”)[0];
width = canvas.width;
height = canvas.height;
context = canvas.getContext(“2d”);

// …
});[/php]

Now we can create the particles themselves. These are just going to be generic objects with x, y, vx, and vy properties. We’ll randomized both their positions and velocities.

[php lang=”JavaScript”]for(i = 0; i < numPoints; i += 1) { points.push({x:Math.random() * width, y:Math.random() * height, vx:Math.random() * 10 - 5, vy:Math.random() * 10 - 5}); }[/php] We'll run everything in a loop with setInterval. We'll split it into two functions, update and draw. The update function will run the physics simulation - moving the particles, checking to see if they hit a boundary and bouncing them if so. [php lang="JavaScript"]function update() { var i, point; for(i = 0; i < numPoints; i += 1) { point = points[i]; point.x += point.vx; point.y += point.vy; if(point.x > width) {
point.x = width;
point.vx *= bounce;
}
else if(point.x < 0) { point.x = 0; point.vx *= bounce; } if(point.y > height) {
point.y = height;
point.vy *= bounce;
}
else if(point.y < 0) { point.y = 0; point.vy *= bounce; } } }[/php] The draw function will run through all the particles and draw a small circle on the canvas to represent that particle's position. [php lang="JavaScript"]function draw() { context.clearRect(0, 0, width, height); var i, point; for(i = 0; i < numPoints; i += 1) { point = points[i]; context.beginPath(); context.arc(point.x, point.y, 2, 0, Math.PI * 2, false); context.stroke(); } }[/php] And finally, we just need the setInterval call to run these two on a loop: [php lang="JavaScript"]setInterval(function() { update(); draw(); }, 1000/24);[/php] You can see the whole JS function here: http://www.bit-101.com/jscanvas/mar15.js

And see the simulation in action here:

http://www.bit-101.com/jscanvas/mar15.html

Over the next few days, we’ll mess with this some more and see what we can come up with.