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