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:

Experimental bubbles (project 3):

Scrolling stars and space whales (project 7):

(if you can't download the files, try to use a different browser or VPN to change your country)

What's next?

If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪

Get Skillshare FREE for 1 month: ‍🎓

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

[Radu]

Really awesome compilation! It's obvious you've put a lot of work into this. Congratulations :-)

[SWEDevT]

how you teach is a perfect way to learn javascript, whats covered is built in methods, nested loops, calling a function etc. This is exactly the type of content I was searching for. Most of youtube is over hyped "projects" that is just for show on portfolios and dont covered fundamental understanding of the codes.

[Frankslaboratory]

⭐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.

[daronadkins]

You've taught me so much for free. Thank you.

[Drone-Capture-Unlimited]

I’ve been self studying html js ccs for 4 months now. Just followed the two videos on particles. I must say you are an amazing teacher and your skills are incredible and inspiring to me. I will be watching very all you work. Massive thank you and respect. Simon.

[Victor-mxjt]

Incredible compilation! I have never seen content like this so well explained like you did! Thank you so much.

[peryMimon]

The derivative of the function
sin(x) is: cos(x) because that rotate the whale to angle of the wave in the point that calcualte with sin(x) and some constant

[smurfenhej]

Appreciate all the hard work, this is really refreshing to come across. It shows that code can be fun and vibrant, which is easy to forget if you're stuck doing a large project for work. Keep up the good work!

[dovakin_]

It's amazing! Thank you so much for such a detailed explanations!

[JohnnyDub]

I did almost everything you show here in processing or p5.js in the past, but it's really nice to see this concepts in vanilla js. Thanks a lot for sharing the knowledge and structuring it so well. You sir are a hero. :) Hope karma is showing you that already.

[liorxd]

thank you for this! this was really cool to learn :)

[chomok-bd]

It's the best i have ever come across ❤❤

[lukeBalmar]

You have helped me a lot in my journey. I love you. Can you make one long CSS animation video like this one if possible?

[halfeatenpizza]

at 11:39 i'm a bit confused, what is causing the draw method to run 60 times a second for each particle? and how does it improve the performance to declare it outside of the draw method?

anyway thank you for all the videos they've been a great help

[erturkyorulmaz]

Hi Frank, do you have a video that you explain and use Perlin Noise in Vanilla JS? İf not, can you make one? :) Thanks... You are grate!..🌹

[ЛеонідПрокопенко-лм]

It's amazing! Thank you so much for your job.

[peryMimon]

I think it be can apply the filter on Ctx lever

[r-i-ch]

I have learned so much from your channel.
(Though I still wish the code was broken up into different files. Like what about adding a drop-down menu that would let you switch between the visualizations?)

[bennybrouwer]

Hi Frank,
using multiple canvasses makes you mind blow. The use of sprite-sheets (faster then someClass.draw(context) is new to me. I'ts hard to find extra info beyond game-programming sites like e.g. udemy. You are asked many questions - I am a little experienced but will not experiended enough to reply and ask. . e.g.
(and this may sound silly) . . .
why not make a class Screen() that instantiates an array of canvasses and contexts.
So in stead of canvas (globally) and overlapping canvas1 and canvas2 - create canvas[0] with id "canvas1" ...
Well, It's a matter of organizing and sometimes my programming is Utopia but I would love some functionality (JS only) like:
let myCanvas = [];
let myC.., context / ctx/ some array
myCanvas[0] = new
RadusRacingCars(context)
FranksMonsters(ctx)
MyAntFantasie(ctx ? context)
PS: Readers will ask - "whats he on about?"" I may sound grumpy but I am learning and always with respect.

[walidnaceri]

if its possible make for us a game where we can draw lines, for example electric game or something like that :)