Uploaded February 2023 | Updated September 2026, 2 weeks ago
🎓 Continue Learning (Creative Coding Courses)
⚛️ Pixels, Particles & Physics udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
🌀 Next Level Flow Fields udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A
🪄 Advanced Text & Particle Effects udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01
🌿 Fun with Fractals udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB
Step by step tutorial from drawing a simple shape to a fully animated generative art piece! Do you want to master Front End Web Development this year? Then this tutorial is for you! :) We will go from important fundamentals to digital art, let me show you the real power of vanilla JavaScript in this creative coding crash course for beginners!
Today we will build:
Procedurally generated lines | Rainbow lightning storm effect | Chaos scribbles effect
🎨 Skillshare (free 1 month trial):
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on
Project files:
Image for createPattern method: frankslaboratory.co.uk/downloads/110/patternImage.png
📚 What to watch next?: youtu.be/MJNy2mdCt20
📚 Full playlist: youtube.com/playlist?list=PLYElE_rzEw_uVHNJjZor-b_bJpftEG4tV
Beginner friendly warm-up class you can watch before this video: youtu.be/O7cUOPYducc
⭐️Tutorial Contents ⭐️
00:00 Intro
00:34 HTML5 & CSS3 setup
01:14 JavaScript setup
03:17 How to draw rectangles
04:37 How to draw lines
07:44 Object oriented programming
13:05 Dynamic colors with HSL
14:52 Randomised line art
18:13 Drawing multi segmented lines
21:25 Animating lines
25:15 Rainbow Lightning Storm effect
31:23 HTML5 Canvas Linear Gradient Tutorial
33:43 HTML5 Canvas Radial Gradient Tutorial
34:46 Create a pattern with HTML5 Canvas
38:52 How to make a shadow in HTML canvas
39:59 Using trigonometry to animate HTML5 canvas
43:20 Chaos Scribbles effect
We will experiment with our drawings and modify them using
🎨 createLinearGradient
🎨 createRadialGradient
🎨 createPattern
All of that with no frameworks and no libraries using just vanilla JavaScript, HTML5 canvas element and object oriented programming. I will explain every line of code step by step as we build our interactive animated project. Let's make art with code and learn JavaScript and front end web development in the process.
🎨 EXTENDED class with BONUS lessons and more creative coding experiments, full source code from multiple different stages, learn how to create image flow fields and animate smooth color transitions.
🎨 Udemy: udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A
More beginner friendly creative coding with vanilla JavaScript & HTML canvas:
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
🎓 Continue Learning (Creative Coding Courses)
⚛️ Pixels, Particles & Physics udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
🌀 Next Level Flow Fields udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A
🪄 Advanced Text & Particle Effects udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01
🌿 Fun with Fractals udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB
Step by step tutorial from drawing a simple shape to a fully animated generative art piece! Do you want to master Front End Web Development this year? Then this tutorial is for you! :) We will go from important fundamentals to digital art, let me show you the real power of vanilla JavaScript in this creative coding crash course for beginners!
Today we will build:
Procedurally generated lines | Rainbow lightning storm effect | Chaos scribbles effect
🎨 Skillshare (free 1 month trial):
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on
Project files:
Image for createPattern method: frankslaboratory.co.uk/downloads/110/patternImage.png
📚 What to watch next?: youtu.be/MJNy2mdCt20
📚 Full playlist: youtube.com/playlist?list=PLYElE_rzEw_uVHNJjZor-b_bJpftEG4tV
Beginner friendly warm-up class you can watch before this video: youtu.be/O7cUOPYducc
⭐️Tutorial Contents ⭐️
00:00 Intro
00:34 HTML5 & CSS3 setup
01:14 JavaScript setup
03:17 How to draw rectangles
04:37 How to draw lines
07:44 Object oriented programming
13:05 Dynamic colors with HSL
14:52 Randomised line art
18:13 Drawing multi segmented lines
21:25 Animating lines
25:15 Rainbow Lightning Storm effect
31:23 HTML5 Canvas Linear Gradient Tutorial
33:43 HTML5 Canvas Radial Gradient Tutorial
34:46 Create a pattern with HTML5 Canvas
38:52 How to make a shadow in HTML canvas
39:59 Using trigonometry to animate HTML5 canvas
43:20 Chaos Scribbles effect
We will experiment with our drawings and modify them using
🎨 createLinearGradient
🎨 createRadialGradient
🎨 createPattern
All of that with no frameworks and no libraries using just vanilla JavaScript, HTML5 canvas element and object oriented programming. I will explain every line of code step by step as we build our interactive animated project. Let's make art with code and learn JavaScript and front end web development in the process.
🎨 EXTENDED class with BONUS lessons and more creative coding experiments, full source code from multiple different stages, learn how to create image flow fields and animate smooth color transitions.
🎨 Udemy: udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A
More beginner friendly creative coding with vanilla JavaScript & HTML canvas:
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
