JavaScript Chain Coding Challenge: Particle Snow @Frankslaboratory

Uploaded December 2020 | Updated September 2026, 1 week ago

In todays JavaScript Chain Coding Challenge we will build winter scenery by adding particle snow and white hills using just HTML canvas element and plain vanilla JavaScript. Let's talk about JavaScript classes and quadraticCurveTo HTML5 canvas method.

Part 1 with Frank: youtu.be/VcxVDahScp8
Part 2 with Radu: youtu.be/Zn3Xf7XBuws
Part 3 ** this video **
Part 4 with Radu: youtu.be/MSyXn3kBoN4

Snowflakes sprite sheet download:
pixeldra.in/u/tvwWnc6e
imgur.com/a/dYzXfVN
https://i.ibb.co/Tq2Tjv3/snowflakes.png

This video will be a regular coding tutorial for beginners so feel free to code along with me. When I'm done with my particle snow I will send the code to Radu, to see if he can build on that and take the effect to the next level.

Check out Radu's channel youtube.com/RaduMariescuIstodor

Related videos:
HTML canvas rotation explained for beginners: youtu.be/TBXjWsR7XDA
Vanilla JavaScript fractal snowflake generator: youtu.be/HXTC5LSep3M
Elaborate randomised fractal tree generator: youtu.be/wBAtHDdaZ2Y

You can message me on TWITTER twitter.com/code_laboratory
Check out some of my source code on CODEPEN codepen.io/franksLaboratory

This tutorial is very beginner friendly. If you know basics of JavaScript and HTML canvas you should be able to follow. I will do my best to help you understand. Happy holidays, have fun :)

If you just started with web development, vanilla JavaScript and HTML canvas recently you might want to try some of the tutorials from beginner friendly projects playlist first: youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-

#frankslaboratory
Music: (YouTube audio library) Holly Dazed - RKVC
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!

$JavaScript Chain Coding Challenge: Particle Snow In todays JavaScript Chain Coding Challenge we will build winter scenery by adding particle snow and white hills using just HTML canvas element and plain vanilla JavaScript. Lets talk about JavaScript classes and quadraticCurveTo HTML5 canvas method. Part 1 with Frank: https://youtu.be/VcxVDahScp8 Part 2 with Radu: https://youtu.be/Zn3Xf7XBuws Part 3 ** this video ** Part 4 with Radu: https://youtu.be/MSyXn3kBoN4 Snowflakes sprite sheet download: https://pixeldra.in/u/tvwWnc6e https://imgur.com/a/dYzXfVN https://i.ibb.co/Tq2Tjv3/snowflakes.png This video will be a regular coding tutorial for beginners so feel free to code along with me. When Im done with my particle snow I will send the code to Radu, to see if he can build on that and take the effect to the next level. Check out Radus channel https://www.youtube.com/RaduMariescuIstodor Related videos: HTML canvas rotation explained for beginners: https://youtu.be/TBXjWsR7XDA Vanilla JavaScript fractal snowflake generator: https://youtu.be/HXTC5LSep3M Elaborate randomised fractal tree generator: https://youtu.be/wBAtHDdaZ2Y You can message me on TWITTER https://twitter.com/code_laboratory Check out some of my source code on CODEPEN https://codepen.io/franksLaboratory This tutorial is very beginner friendly. If you know basics of JavaScript and HTML canvas you should be able to follow. I will do my best to help you understand. Happy holidays, have fun :) If you just started with web development, vanilla JavaScript and HTML canvas recently you might want to try some of the tutorials from beginner friendly projects playlist first: https://www.youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K- #frankslaboratory Music: (YouTube audio library) Holly Dazed - RKVC The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, Ill receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!$

JavaScript Game Tutorial with HTML Canvas

The Ultimate 2D Game Development Deep Dive (Unity)

Side-Scrolling Starfields & Sprite Animation

Particles JS Effect with Pure Vanilla JavaScript | Animated Background Tutorial with Examples

Action & Reaction, Make your Games Feel Good

$Learn Creative Coding: Fractals EXTENDED class with object oriented code structure and ❄FRACTAL RAIN ❄effect as the final project: https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB Have you decided you want to become really good with HTML, CSS and JavaScript this year? Discover creative coding and make your art come to life! In this class we will go from drawing a simple line to complex beautiful fractal shapes. Let me show you that its easier than you think to use plain vanilla JavaScript and HTML5 canvas element to DRAW and ANIMATE with code! Have fun! GET 1 month FREE access to ALL Skillshare content and watch my special creative coding class where we use Object Oriented Programming to create Fractal Rain effect! https://www.skillshare.com/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on Today we will learn: 🎨 How to draw rectangles, lines, circles and bezier curves on canvas 🎨 How to transform canvas state with translate, scale and rotate methods 🎨 How to use recursion to create complex procedural shapes 🎨 How to run your own creative coding experiments and get 1000s of unique different shapes ⭐️Tutorial Contents ⭐️ 00:00 Intro & Project previews 01:05 HTML and CSS setup 01:30 HTML canvas setup 03:20 HTML canvas coordinates 03:52 Drawing methods and properties 07:59 How to rotate shapes on HTML5 canvas 10:48 How to save and restore canvas state 13:00 Drawing star shapes and spirals 15:47 What are fractals? 16:34 Drawing a fractal branch 23:01 Procedural snowflake 25:13 Randomized HSL colors 26:13 Responsive fractal size 27:40 UI controls: Randomize button 32:22 UI controls: Sliders 40:09 UI controls: Reset button 42:33 Experiments: Fractal hooks 45:05 Clean up the code 46:57 Experiments: Octopus fractals More beginner friendly creative coding: https://www.youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K- The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, Ill receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support! #frankslaboratory$