Build 8 Creative Coding Projects (vanilla JavaScript)

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): https://www.frankslaboratory.co.uk/downloads/117/particle_systems_source_code.zip
https://codepen.io/franksLaboratory/pen/BaqVmMB

Experimental bubbles (project 3):
experiment 1: https://codepen.io/franksLaboratory/pen/MWzyYOG
experiment 2: https://codepen.io/franksLaboratory/pen/PoxNwEG
experiment 3: https://codepen.io/franksLaboratory/pen/oNQxgdv

Stars sprite sheet (project 4): https://www.frankslaboratory.co.uk/downloads/129/stars_sprite.png

Scrolling stars and space whales (project 7):
⭐️ STAR: https://www.frankslaboratory.co.uk/downloads/119/star.png
🐋 WHALE 1: https://www.frankslaboratory.co.uk/downloads/119/whale1.png
🐋 WHALE 2: https://www.frankslaboratory.co.uk/downloads/119/whale2.png
🐋 WHALE 3: https://www.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: https://youtube.com/playlist?list=PLYElE_rzEw_uVHNJjZor-b_bJpftEG4tV&si=XZl7A_ccZtkwtWR1
or FRACTALS https://youtu.be/dQKYao-daYw
or how about SIMPLE TEXT EFFECTS https://youtu.be/f5ZswIE_SgY
or more ADVANCED TEXT EFFECTS https://youtu.be/2F2t1RJoGt8

If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪
https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB
https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2
https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A
https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B
https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7
https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01

Get Skillshare FREE for 1 month: ‍🎓
https://www.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

Видео Build 8 Creative Coding Projects (vanilla JavaScript) канала Franks laboratory