Uploaded October 2023 | Updated September 2026, 2 weeks ago
🎓 Continue Learning (Creative Coding Courses)
🌀 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
⚛️ Pixels, Particles & Physics udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
🌿 Fun with Fractals udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB
Create 8 interactive animated projects with JavaScript and HTML canvas. No frameworks and no libraries, because only when we UNDERSTAND THE CODE, we can FULLY CONTROL IT and make it do whatever we want.
DISCOVER and MASTER creative coding and add 8 FUNDAMENTAL TECHNIQUES into your animation toolkit.
Have you decided that this year you want to become really good at JavaScript and need a set of fun, visual and memorable projects to learn and practice on?
Have fun!
⭐️Today we will build 8 creative coding projects: ⭐️
🎨 Project 1:
00:00:00 Constellations effect
Build the famous effect that connects floating particles with lines using dynamic opacity. No frameworks and no libraries.
🎨 Project 2:
00:57:16 Sunrays effect
Apply specific styles to every nth particle. For example connect the mouse to every 10th particle with a line.
🎨 Project 3:
01:03:59 Particle bubbles
Turn particles into bubbles that interact with mouse by growing and shrinking in size. Draw simple shapes with inflatable bubble trails.
🎨 Project 4:
01:11:17 Star particles
Particles can look like any image of your choice. Turn particles into stars, planets or Pokémon.
Learn how to use a sprite sheet (a single image that consists of several smaller images) and assign each particle one randomised frame.
🎨 Project 5:
01:24:15 Liquid Effects
Experiments with interactive liquid and sticky effects, so called 'meta-balls'.
🎨 Project 6:
01:32:27 Bouncing particles
Make particles bounce around a website.
Collision detection between 2 rectangles, where one rectangle is a hit box around each particle and the other is a bounding rectangle of any website element of your choice.
🎨 Project 7:
02:02:53 Scrolling particles and animated characters
Endlessly scrolling particle field effect, that can also be used for many games. And then we make those particle interact with animated character, using sprite animation capabilities of built-in drawImage method.
🎨 Project 8:
02:43:19 Spatially aware particles in liquid
Create a simple physics system where particles push each other around, move around each other and do their best to never overlap. Also experiments with liquids and gradients.
Course resources:
Download STARTER CODE (from the end of project 1): frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zip
codepen.io/franksLaboratory/pen/BaqVmMB
Experimental bubbles (project 3):
experiment 1: codepen.io/franksLaboratory/pen/MWzyYOG
experiment 2: codepen.io/franksLaboratory/pen/PoxNwEG
experiment 3: codepen.io/franksLaboratory/pen/oNQxgdv
Stars sprite sheet (project 4): frankslaboratory.co.uk/downloads/129/stars_sprite.png
Scrolling stars and space whales (project 7):
⭐️ STAR: frankslaboratory.co.uk/downloads/119/star.png
🐋 WHALE 1: frankslaboratory.co.uk/downloads/119/whale1.png
🐋 WHALE 2: frankslaboratory.co.uk/downloads/119/whale2.png
🐋 WHALE 3: frankslaboratory.co.uk/downloads/119/whale3.png
(if you can't download the files, try to use a different browser or VPN to change your country)
What's next?
This class focuses on PARTICLES. If you want, you can also explore FLOW FIELDS: youtube.com/playlist?list=PLYElE_rzEw_uVHNJjZor-b_bJpftEG4tV&si=XZl7A_ccZtkwtWR1
or FRACTALS youtu.be/dQKYao-daYw
or how about SIMPLE TEXT EFFECTS youtu.be/f5ZswIE_SgY
or more ADVANCED TEXT EFFECTS youtu.be/2F2t1RJoGt8
Get Skillshare FREE for 1 month: 🎓
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on
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)
🌀 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
⚛️ Pixels, Particles & Physics udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
🌿 Fun with Fractals udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB
Create 8 interactive animated projects with JavaScript and HTML canvas. No frameworks and no libraries, because only when we UNDERSTAND THE CODE, we can FULLY CONTROL IT and make it do whatever we want.
DISCOVER and MASTER creative coding and add 8 FUNDAMENTAL TECHNIQUES into your animation toolkit.
Have you decided that this year you want to become really good at JavaScript and need a set of fun, visual and memorable projects to learn and practice on?
Have fun!
⭐️Today we will build 8 creative coding projects: ⭐️
🎨 Project 1:
00:00:00 Constellations effect
Build the famous effect that connects floating particles with lines using dynamic opacity. No frameworks and no libraries.
🎨 Project 2:
00:57:16 Sunrays effect
Apply specific styles to every nth particle. For example connect the mouse to every 10th particle with a line.
🎨 Project 3:
01:03:59 Particle bubbles
Turn particles into bubbles that interact with mouse by growing and shrinking in size. Draw simple shapes with inflatable bubble trails.
🎨 Project 4:
01:11:17 Star particles
Particles can look like any image of your choice. Turn particles into stars, planets or Pokémon.
Learn how to use a sprite sheet (a single image that consists of several smaller images) and assign each particle one randomised frame.
🎨 Project 5:
01:24:15 Liquid Effects
Experiments with interactive liquid and sticky effects, so called 'meta-balls'.
🎨 Project 6:
01:32:27 Bouncing particles
Make particles bounce around a website.
Collision detection between 2 rectangles, where one rectangle is a hit box around each particle and the other is a bounding rectangle of any website element of your choice.
🎨 Project 7:
02:02:53 Scrolling particles and animated characters
Endlessly scrolling particle field effect, that can also be used for many games. And then we make those particle interact with animated character, using sprite animation capabilities of built-in drawImage method.
🎨 Project 8:
02:43:19 Spatially aware particles in liquid
Create a simple physics system where particles push each other around, move around each other and do their best to never overlap. Also experiments with liquids and gradients.
Course resources:
Download STARTER CODE (from the end of project 1): frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zip
codepen.io/franksLaboratory/pen/BaqVmMB
Experimental bubbles (project 3):
experiment 1: codepen.io/franksLaboratory/pen/MWzyYOG
experiment 2: codepen.io/franksLaboratory/pen/PoxNwEG
experiment 3: codepen.io/franksLaboratory/pen/oNQxgdv
Stars sprite sheet (project 4): frankslaboratory.co.uk/downloads/129/stars_sprite.png
Scrolling stars and space whales (project 7):
⭐️ STAR: frankslaboratory.co.uk/downloads/119/star.png
🐋 WHALE 1: frankslaboratory.co.uk/downloads/119/whale1.png
🐋 WHALE 2: frankslaboratory.co.uk/downloads/119/whale2.png
🐋 WHALE 3: frankslaboratory.co.uk/downloads/119/whale3.png
(if you can't download the files, try to use a different browser or VPN to change your country)
What's next?
This class focuses on PARTICLES. If you want, you can also explore FLOW FIELDS: youtube.com/playlist?list=PLYElE_rzEw_uVHNJjZor-b_bJpftEG4tV&si=XZl7A_ccZtkwtWR1
or FRACTALS youtu.be/dQKYao-daYw
or how about SIMPLE TEXT EFFECTS youtu.be/f5ZswIE_SgY
or more ADVANCED TEXT EFFECTS youtu.be/2F2t1RJoGt8
Get Skillshare FREE for 1 month: 🎓
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on
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
