2D Particle Effects on Canvas with JavaScript

The realm of particle effects can have thousands of entities traversing the screen in different directions. Each particle needs calculations to update their velocity and position every frame. And each particle needs to be rendered just as often.

If we are working at 60 FPS, that gives less than 17 milliseconds to do all that work. I thought, "You surely couldn't ask JavaScript to do that in a browser."

I was thrilled to be wrong and to discover that even my decade-old laptop could handle the task without melting.

Perhaps my view of what was possible was tainted by my background in web development. I was familiar working in a world where moving more than a handful of elements on a page at one time could be sluggish (at least with naive implementations.)

Simple particles

Particles with gravity

The source code is available by just viewing the source in the browser on the demo page.