Let It Snow! Falling Snow Animation

Falling Snow Animation made using p5.js library. This Christmas Online Card was made just for fun ;-) Let it snow!

Tech Stack

JavaScript (ES6+)

Let It Snow! Falling Snow Animation

This Christmas Online Animated Musical Card was made using Javascript & p5.js library.

If you never heard about p5.js, it is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source. (https://p5js.org/)

I love create games & animations with help of p5.js. Thanks to this library I've started learning JavaScript & felt in love with coding one year ago (Khan Academy online courses). I've made a few games & animations with this library (see my Old School 2D Racing Game here https://vadimgierko.github.io/old-school-2d-racing-game/). Also I've developed Mind Maps App with p5 (try this app here: https://vadimgierko.github.io/MIND-MAP-APP/). I encourage you to try p5.js!

I wish you a Merry Christmas & a Happy New Year! Let it snow!

Realistic 3D illusion & perspective

To make the animation seem more realistic, I created a pseudo 3D illusion thanks to basic knowledge of perspective:

  • there are 3 layers of snow
  • more distant snowflakes are smaller, while closer are larger
  • more distant snowflakes fall slower, and closer ones fall faster

In addition, I've implemented noise effect (noise() in p5.js) to:

  • falling snow, so now it seems to fall more naturally -> each snowflake moves sometimes slightly left or right, like in real life!
  • mountains on horizon

And finally, there are 4-sized trees:

  • randomly positioned (every page reload => different trees positioning);
  • more distant trees are smaller & darker
  • closer trees are lighter & bigger

Music Copyright

© 1959 Sammy Cahn, Jule Styne & Dean Martin