Bouncing Balls in Sketch.js

Roughly 60 lines of JavasScript to create 200 beautiful particles. Each particle has a random size color, opacity, and velocity. When the particles hit the edge of the screen, they bounce right back. The result is something more than a little hypnotic. I love restarting it over and over again to see what different colors I end up with.

See the Pen Bouncing Balls in sketch.js by Rob Glazebrook (@rglazebrook) on CodePen.

Things to Try:

The demo is using sketch.js, which is available free on GitHub. You can easily change the number of balls by changing the particleCount variable, or the allowed sizes/colors by changing numbers in the random() functions found the this.radius or this.rgba variables. Speed/slow the particles by changing the vx or vy values.


Rob has been building websites for more than half of his life. You'd think that'd make all this less interesting, but nope! There's a lot of awesome stuff going on webwards, and canvas is definitely one of them.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *