Easy Infinite Canvas Snow

This is a little hypnotic: pristine white snowflakes drift across the screen, floating on invisible air currents. It’s easy to change the number of snowflakes, it doesn’t care about your screen size, and it runs smoothly at 60 frames per second.

See the Pen Let It Snow – Easy Version by Rob Glazebrook (@rglazebrook) on CodePen.

I’m creating 300 flakes right when the page loads. The flakes all start at a random x/y position off the top of the screen. As they fall, their vertical velocity stays the same but the horizontal velocity changes a bit, which creates the illusion of air currents. Smaller flakes fall slower, which increases the illusion of air currents.

When the flake falls off the bottom of the screen, I move it back to the top with a new size, position, and velocity. That way we never have to create or destroy any new flakes (which saves on memory usage), but we still get a lot of variety.

Rob

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 *