Make a particle system in HTML5 canvas

View code Play Walkthrough

Description

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:

  1. Drawing rectangles and circles on canvas
  2. Drawing radial gradients
  3. Simple animation for particle movement

Subscribe

Get updates about new walkthroughs, behind-the-scenes experiments, tips, tricks and more.

Add New Comment

25 Comments

(close)
Web Guru

Web Guru

Excellent Walkthrough Man :O
Loved it and learned a lot.

Thanks so much!

David Henrry Ticona

David Henrry Ticona

wow!! impressive tutorial, thanks to the author and the code player team :D

Ruturaj

Ruturaj

I loved the way u’ve gelled in the Video+Text Graphics for the tutorials, and what a lovely demo of Particles!

Eric

Eric

Absolutely amazing! I was wondering how you would go about having the particles “bump” into each other?

andrew wooldridge

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!

PieMan

PieMan

Great tutorial.

graydsl

graydsl

Nice tutorial! A small improvement idea would be to use requestAnimationFrame(). But it’s really cool! Thanks! :)

Vaizki

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

Antony

Just Awesome man!

Francisc

Francisc

Very nice. One note though, you should be using

requestAnimationFrame() with fallback to setTimeout.

Paul Irish has a nice polyfill.

nooby

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

Navjot

Thanks…. :-)
You are a very good programmer and teacher of course…

Mohamed Fellak

Mohamed Fellak

What a Professional work
i Like HTML5
its a very very great new technology in internet

Lasitha

Lasitha

ela

kanchana

kanchana

How do u make it which program?

Abhijit Dey

Abhijit Dey

Excellent work. Thanks a lot for sharing.

Anirudh

Anirudh

I have been following your tutorial for long. Its been really helpful.

Can you make a tutorial on using multiple canvas, and make cool patterned animations.

Thank you :)

Giovanne Afonso

Giovanne Afonso

You make it seems easy.

cainiao

cainiao

Concise tutorial!
excellent!

Dev

Dev

Excelent

25 Comments

Description

5x 10x 15x 20x