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): www.frankslaboratory.co.uk/do...
codepen.io/franksLaboratory/p...
Experimental bubbles (project 3):
experiment 1: codepen.io/franksLaboratory/p...
experiment 2: codepen.io/franksLaboratory/p...
experiment 3: codepen.io/franksLaboratory/p...
Stars sprite sheet (project 4): www.frankslaboratory.co.uk/do...
Scrolling stars and space whales (project 7):
⭐️ STAR: www.frankslaboratory.co.uk/do...
🐋 WHALE 1: www.frankslaboratory.co.uk/do...
🐋 WHALE 2: www.frankslaboratory.co.uk/do...
🐋 WHALE 3: www.frankslaboratory.co.uk/do...
(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: • Flow Fields
or FRACTALS • Learn Creative Coding:...
or how about SIMPLE TEXT EFFECTS • Matrix Rain Experiment...
or more ADVANCED TEXT EFFECTS • Particle Text with Van...
If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪
www.udemy.com/course/learn-cr...
www.udemy.com/course/learn-ga...
www.udemy.com/course/creative...
www.udemy.com/course/build-an...
www.udemy.com/course/learn-ht...
www.udemy.com/course/remake-r...
www.udemy.com/course/learn-ht...
Get Skillshare FREE for 1 month: ‍🎓
www.skillshare.com/en/r/profi...
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

[@Bro_Code25]

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.

[@Frankslaboratory]

Hi Simon, nice to meet you! Well done, my tutorials are quite advanced, if you are able to keep up so early in your studies you have a great coding career ahead of you

[@Radu]

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

[@Frankslaboratory]

Thank you Radu 😊😊

[@BiP00]

If it isn’t the man, the legend!!

[@mahimabhardwaj1807]

radu sir your skills are also amazing

[@user-qe4nu5sz7n]

Oh, Radu, man, I met you here))) both of you are Giants whose shoulders we are trying to climb on), Hi from Russia

[@mahimabhardwaj1807]

amazing amazing amazing best content

[@Frankslaboratory]

Thank you 😊

[@Victor-mx1jt]

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

[@Frankslaboratory]

Hi Victor, nice to meet you, thank you, very kind to say

[@liorxd2557]

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

[@Frankslaboratory]

Glad you found some value

[@user-mf6tx8nm7i]

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

[@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!

[@Frankslaboratory]

Thank you. I think its nice to sometimes practice coding on more visual projects like this. Makes the new concepts easier to remember for me.

[@JohnnyDub08]

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.

[@Frankslaboratory]

Hi Johnny. Thank you. It probably takes a little less code to do this in p5.js but I think there is a value in writing the logic ourselves with vanilla JS. As I mention in the course, knowing how the code actually works is important if you want complete control.

[@imclowdy]

Good Work! Thank you.

[@shaikhsanuar5339]

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

[@daronadkins4251]

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

[@Frankslaboratory]

Hi Daron, nice to meet you. Thank you for the gift, very kind! I'm happy you found some value. Good luck with your coding studies! :)

[@berkipekoglu]

Awesome!! Thank you Frank!

[@Frankslaboratory]

Happy to help :D

[@mohammedabujayyab6146]

very good. Thanks a lot 🎉

[@anwerjivani1547]

you both are great teachers here

[@Frankslaboratory]

Thank you Anwer

[@user-rs1kp4uu4v]

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

[@Frankslaboratory]

Glad you found some value

[@ChristopherCricketWallace]

Thanks for this. Great work.

[@Frankslaboratory]

Hi Chris, glad you found some value

[@BiP00]

Awesome!!

[@Frankslaboratory]

Thanks!

[@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?

[@Frankslaboratory]

Hi Luke, glad you found some value. Yes, a big creative CSS class would be fun, I want to do more on CSS animations.

[@forgottenaquarium2879]

Amazing 🎉 awesome work 💯👏

[@Frankslaboratory]

I'm here to help 😊😊

[@localhost666]

This is amazing 🎉🎉🎉

[@Frankslaboratory]

Glad you like it 😊

[@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.

[@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?)

[@Frankslaboratory]

Do you mean you want me to use ES6 modules to split scripts? Good idea with the drop down menu. Very easy to implement. I'll do it for a project soon

[@r-i-ch]

@@FrankslaboratoryI just mean that often the code gets to be pretty long in size and I'd think it would be better to split things up somehow? Thank you again for all you've taught me!

[@AZHARakaGoat]

Thanks

[@Frankslaboratory]

Happy to help

[@walidnaceri2571]

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

[@nicholasobrien5914]

Could you explain how fill style is still or not gaining performance by being moved to the top of the js file even when hsl is used in draw context?

[@nicholasobrien5914]

Is it possible to use 'old paint' as a dataset for transformation?

[@amoljadhav5088]

Nice content and Ur hard work ❤

[@Frankslaboratory]

Thank you ❤️

[@amoljadhav5088]

​@@Frankslaboratorysir u create other games

[@Frankslaboratory]

@amoljadhav5088 yup. Next 2 videos will be games. Already recording it.

[@amoljadhav5088]

@@Frankslaboratory am excited for it's 😍 sir u make a three js play list

[@muksid100]

hey how can i use it in an webpage.. if i want to write some text and some photos in the foreground and play the particle system in the backgroun

[@alexanderpoker6655]

cool

[@Frankslaboratory]

Thanks

[@halfeatenpizza11]

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

[@user-px5pj7ux5k]

very nice sir, could you make a tutorial of SPH fluid simulation?

[@Frankslaboratory]

I would love to do smooth particle hydrodynamics series yes. Will look into it

[@Frankslaboratory]

I would love to do smooth particle hydrodynamics series yes. Will look into it

[@anfxf6513]

sir, I really wanna make a fighting game using html canvas, can you make a tutorial about that? and also love your hard work to make us good javascript developers and web developers

[@Frankslaboratory]

Check Chris Courses channel, he made a fighting game tutorial recently. I will do a fighting game eventually but it will take a while before I get around to it.

[@anfxf6513]

@@Frankslaboratory Thank you very much, happy to hear that we will get a fighting game too, love it🤗

[@nursing_questions-nu6fy]

this coding is on steroids

[@johnniegilkerson4724]

@265:56 in video, I get an error: uncaught reference error: context is not defined at Effect.connectParticles, everything was working fine till then.

[@Frankslaboratory]

Hi John. Follow how you pass the context along. You probably forgot to pass context argument somewhere along the line. Alternatively use ctx to draw instead to pull it directly from the outside. If you can't figure it out drop me an email and I will tell you where the typo is when I have some time to go over your code.

[@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.

[@muneebshoukat4793]

@FrankslaboratoryThank you. I have only one question. You have a lot of videos of Canvas etc. Can I use those in my projects or portfolio?? I am not taking about copying the code because that obviously not going to help me. Instead I am talking about going through the tutorial and learn it. And then use it in my projects. What about the assets (like images, icons, etc)?? Can I use that? Is that ok??? Waiting for your Response.

[@Frankslaboratory]

@muneebshoukat4793 Hi. Yes you can use anything from my classes in your portfolio to show off what you built. These projects are for learning I don't impose any copyright on students. Good luck with your coding studies 😊

[@muneebshoukat4793]

@@Frankslaboratory Thank you very much for your generosity. I would love to connect with you in the future. Thanks again.

[@028-manikandan3]

Bro konjam solve va ponga bro

[@laserak9887]

My canvas doesn't reset on window resize..is this a new change?

[@Frankslaboratory]

Nope. There's a bug in your code. Check console for errors and code for typos

[@laserak9887]

@@Frankslaboratory Thanks for the reply. I figured it out. I skipped the gradient on the canvas, and was still styling via the HSL color in the draw method. Which obviously didn't stop on resize.