Glowing Particle System with Different Shapes
Third part of my series where I build a Particle system with Canvas consisting of glowing particles with different shapes (circles and squares for now, read comments, it tells you a bit more about other shapes like stars).
I also show off how to achieve linear and radial gradients with canvas! Let me explain them a bit.
The syntax for linear-gradient is like this:
var gradient = createLinearGradient(start_x, start_y, end_x, end_y);
gradient.addColorStop(0, color1);
gradient.addColorStop(1, color2);
0 and 1 are the start and end color stops, you can add more between for say 0.4 0.5 0.8 etc. It's quite similar to the CSS3 linear gradients actually.
The gradient variable can then be assigned to ctx.fillStyle or ctx.strokeStyle.
The syntax for radial-gradient is like this createRadialGradient(x1, y1, r1, x2, y2, r2) and then you add color stops like you do for linear gradients!
The x1, y1, r1 is are the x, y and radius positions for the first circle, while the x2, y2, r2 are for the second circle.
In this creation, I limited the particles count to 200 and their emission point is not the center anymore. It's quite random.
Dont't forget to check out the previous parts of the series: http://cssdeck.com/labs/particle-system-leaving-trails http://cssdeck.com/labs/canvas-particles-emission
Btw, now I have an idea. You might wanna make a small nice game and use the circular particles when someone fires from some kind of funky weapon ;). Reminds me of Super Contra.