Uploaded March 2022 | Updated September 2026, 1 week ago
EXTENDED class with object oriented code structure and ❄FRACTAL RAIN ❄effect as the final project:
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 it's 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!
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:
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, 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!
#frankslaboratory
EXTENDED class with object oriented code structure and ❄FRACTAL RAIN ❄effect as the final project:
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 it's 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!
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:
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, 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!
#frankslaboratory
