Make a particle system in HTML5 canvas
Learn to make a simple particle system in HTML5 canvas and Javascript. This walkthrough is inspired by a video tutorial from @seb_ly. The particles are basically made of simple circles with radial gradients and random properties for velocity, size and color.
Points covered:
- Drawing rectangles and circles on canvas
- Drawing radial gradients
- Simple animation for particle movement
22 Comments
(close)Web Guru
Excellent Walkthrough Man :O
Loved it and learned a lot.
Thanks so much!
David Henrry Ticona
wow!! impressive tutorial, thanks to the author and the code player team :D
Ruturaj
I loved the way u’ve gelled in the Video+Text Graphics for the tutorials, and what a lovely demo of Particles!
Ruturaj
I loved the way u’ve gelled in the Video+Text Graphics for the tutorials, and what a lovely demo of Particles!
Eric
Absolutely amazing! I was wondering how you would go about having the particles “bump” into each other?
andrew wooldridge
Really enjoyed this tutorial. It really makes the concept of these js tutorials really hit home. Thank you for working on this! I look forward to more from you in the future!
Jason Campbell
Wow, great tutorial!
PieMan
Great tutorial.
James Moriarty
Very impressive.
graydsl
Nice tutorial! A small improvement idea would be to use requestAnimationFrame(). But it’s really cool! Thanks! :)
Vaizki
Good work on code player and the tutorial is fine except for the Math.random()*255>>0; bit where you might want to consider using Math.floor() to truncate a float into an integer :) This being a tutorial and all, some newbies are bound to get completely flummoxed by it as searching for >> on google is pretty futile.
Or replace it with Math.random()*255^0 to really throw some people off :)
Antony
Just Awesome man!
Paul Mason
Great tutorial! I’ve also done a bit of experimenting with particle generators too, using just JS and CSS without canvas. Let me know what you think? http://paulmason.name/item/javascript-particle-engine-effects
Libaier
nice demo
Francisc
Very nice. One note though, you should be using
requestAnimationFrame() with fallback to setTimeout.
Paul Irish has a nice polyfill.
nooby
Great tut! To create a more particlistic behaviour on boundaries:
//To prevent the balls from moving out of the canvas
if(p.x < p.radius) p.vx *= -1;
if(p.y < p.radius) p.vy *= -1;
if(p.x > W-p.radius) p.vx *= -1;
if(p.y > H-p.radius) p.vy *= -1;
Navjot
Thanks…. :-)
You are a very good programmer and teacher of course…
Mohamed Fellak
What a Professional work
i Like HTML5
its a very very great new technology in internet
Lasitha
ela
kanchana
How do u make it which program?
Stephen
that was awesome
Abhijit Dey
Excellent work. Thanks a lot for sharing.