Learn Creative Coding: Particle Systems

Simple things can be beautiful. This entire effect is based on a rule that says: when 2 particles are close enough to each other, connect them with a line. Join me for this mini series and let's build one of the most famous animated effects from scratch, add physics, interactivity and turn that into 10 completely different generative art pieces using a variety of creative coding techniques.
Constellations effect was made famous by the Particles.js library, today we will build if from scratch with vanilla JavaScript using object oriented programming principles. In the next part we will turn it into many different particle systems experimenting with motion, colours and physics in many different ways,
Particle systems masterclass FULL PLAYLIST: • Particle Effects Maste...
⭐️Tutorial Contents ⭐️
00:00 Intro
00:20 HTML5 & CSS3 setup
01:44 JavaScript setup
02:42 Drawing shapes on HTML canvas
03:48 Effect and Particle classes
06:38 Creating particles
08:11 Drawing particles
11:47 Dynamic colours with HSL
13:31 Positioning particles
14:57 Animating particles
16:08 Bouncing particles
19:07 Canvas gradients
21:29 Constellations effect
28:28 Dynamic opacity
Today we will learn:
🎨 object oriented programming with vanilla JavaScript, HTML5 Canvas
🎨 how to build bouncing balls effect
🎨 how to build constellations effect
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

[@Frankslaboratory]

Libraries or vanilla JavaScript, which one do you prefer to use.

[@getsetalk]

Mostly prefer liabrary...

[@carlogustavovalenzuelazepe5774]

vanilla, but work demands libraries

[@chadbroderick160]

Definitely prefer vanilla for stuff like this

[@javifontalva7752]

Vanilla of course!!!!

[@LePhenixGD]

100% vanilla JS, it's so gratifying making these effects from scratch

[@M4rt1nX]

Thanks a lot for your patience and explaining everything in such an understandable way. You are a great teacher.

[@Relic554]

Awesome video. Just spend the last hour to follow through. Love your work!

[@chadbroderick160]

Haven't even gotten halfway and this is already so incredible! Please never stop making these videos

[@Frankslaboratory]

Glad you like it Chad. I will turn this into 10 very distinct generative art effects in the next parts

[@nimira43]

Thanks for all your tutorials, brilliant as always.

[@hazadus]

Great explanation and cool effects - thanks for this video!

[@koko-mt7zr]

I can’t believe you don’t have 1 million subscribers,keep up the good work you are amazing ❤❤

[@Frankslaboratory]

I would be fine with 100k 😆

[@niyagentleman8143]

we love you ^^ , you teach us so much!

[@medios_informaticos]

Great! Thank you so much.

[@HendryWijaya8020]

Never cease to blow my mind!! 🤯

[@Frankslaboratory]

In that case you should see the 10 variations I will turn this into in this miniseries. I wonder what you will think then 😊

[@annashalbuzova8124]

Amazing, thank you so much for your videos!!!

[@Frankslaboratory]

Hi Anna, I'm here to help!

[@Mobilemaniaplays]

This is my favourite channel😊

[@dimis7096]

omagaad King , you always put out some amazing video that fill my brain with good stuff ! I thank god you exist !

[@Frankslaboratory]

Haha. Thanks for letting me know. Hope you like what I do with this effect in the next part then 😊

[@dy6697]

thank you for this tutorial

[@basiccoder2166]

4 years ago i created same plexus art its available in my youtube channel but yours is way cooler 👌

[@relmarzouki]

Great Video, really liked your way of explaining the code

[@Frankslaboratory]

Thank you for your feedback. Glad you found some value

[@dalsi1542]

Amazing! Thanks for!

[@Frankslaboratory]

I'm here to help

[@thomas6502]

I'm hitting like for those bad ass glasses sir! (Also Frank, you rock! Thank you for your channel and fantastic projects.)

[@Frankslaboratory]

Thank you Thomas, I'm happy to see feedback like that ☺️

[@u_walk2251]

i just love what you do

[@Frankslaboratory]

Glad to hear that thank you

[@swedishpsychopath8795]

Hello Frank, and thank you for your excellent tutorials. I'm following along and made the base project and having a lot of fun with it. I started to visualize (on paper) the nested for-loop in the connectParticles function and noticed the following optimizations. 1) The inner loop doesn't need to start on the value of the outer loop. This would be the same particle and there is no use in calculating the distance and drawing a zero length line to itself. Better start with the next particle (a + 1). 2) The outer loop doesn't need to go all the way to the last particle since there are no more particle after it. So stop at len-1. Here is the optimized code: connectParticles(context) { const maxDistance = 100; for (let a = 0; a < this.particles.length - 1; a++ ) { for (let b = a + 1; b < this.particles.length; b++ ) { the-existing-code } } }

[@swedishpsychopath8795]

I've dug further into the code and in ADDITION to the trick I showed in my original post (that avoids almost 30.000 calculations pr second - when avoiding to calculate the distance to itselt 60 times a second) it seems like it is ALSO better to do the math yourself instead of calling Math.hypot. I made a small test and timed the call to one million calculations of x and y with random numbers and run it multiple times in differenct browsers. It was definitelty more efficient to calculate the distance like this: const distance = Math.sqrt(dx*dx + dy*dy); (SO BASICALLY: DONT USE MATH.HYPOT !!!!)

[@Frankslaboratory]

Hi, sorry I missed this comment, love it. thank you for taking the time to research and share this. I will test it and play with it as well when I have time over the weekend. Very interesting..

[@swedishpsychopath8795]

@@Frankslaboratory It would be interesting if you could verify the first post? Personally I tried with a small amount of particles and the loop optimizations seemed to be correct (small number of particles to see if any were skipped). When it comes to using sqrt instead of hypot it seems the browsers do the math in the libraries differently (?). So I'm not definititely sure about how much longer hypot takes - but it seemed siginificant when testing with a large amount of particles. I was also avoiding using the pow function from Math. I did the dx*dx and dy*dy directly. So the first optimization makes room for having more particles since the CPU time can be spent calculating "real" disances instead of zero-distances. The other optimization is dependent on a lot of hidden optimization going on in the background. Maybe pow is inlined / replaced with multiplication anyways? Hope you'll let us know if you try this out?

[@rafaelcallejo8367]

excelente!!!, quisiera tomar tus cursos en udemy pero no tiene subtítulos en español y aun no soy bueno con el ingles

[@javifontalva7752]

Nice shades 🕶️🕶️😎

[@Frankslaboratory]

Haha. Thank you Javi. I was just being silly 😄

[@lucashorta4272]

thankyou :))

[@Frankslaboratory]

I'm here to help 😊😊

[@my2ndpassionart]

Hey sir how can I use js particle effect & your image effect together in 1 HTML file , please help me

[@AZHARakaGoat]

🔥

[@Frankslaboratory]

🔥

[@user-px5pj7ux5k]

next please sir, cloth simulation😊

[@learnfrommistakesml4763]

so cool.. if only i know how to program

[@Frankslaboratory]

That's why I made the video, to teach people how to do it :D

[@clxssycodm]

you are Goat was looking for code from scratch but everyone was using librarires

[@Frankslaboratory]

All my videos are from scratch. No libraries at all. Have fun 😊😊

[@kingpin4152]

at 9:45 I had to call the createParticles() function with "effect.createParticles()" and after tha console log effect. cuz the array kept being empty.

[@tomkadin]

Very good videos I am amazed, where I can support you financially?

[@Frankslaboratory]

You can always buy one of my extended classes on Udemy, I put some links on my About page here and under most videos. But there is no need, I'm happy to make most of my content free it's just for fun.

[@rubbish9231]

🙏

[@Radu]

Cool glasses :-)

[@Frankslaboratory]

I'm sure you could track that neon colour around glasses and do some cool webcam video effects with that 😁

[@Radu]

@@Frankslaboratory Is that a challenge? :-D

[@Frankslaboratory]

@@Radu yes 😁

[@Frankslaboratory]

@@Radu I disabled my Twitter notifications. Will check when I get home 😊

[@Radu]

@@Frankslaboratory Sure :-)

[@gopinathkrm58]

Hi Frank how are you, particles videos are cool

[@Frankslaboratory]

Hi Gopinath. It's been a while my friend.

[@gopinathkrm58]

@@Frankslaboratory 👍

[@khaledsanny4817]

Please Frank, make a video on making a game like octopath traveller, specifically HD-2D effect... without 3D ☝😉 thank you for your contents

[@Frankslaboratory]

Hi Khaled, I love that game, yes I would like to do something like that with JavaScript, probably just a smaller version otherwise it would be a 10 hour tutorial and people don't like when I make long videos here :D The effect itself wouldn't take that long, you mean the way characters are animated in that game yea?

[@khaledsanny4817]

@@Frankslaboratory thank you very much, yes of course It should be a smaller version 🙂 I mean the visual effect that looks like a parallax map and the + the 8 directional animated mouvement of the character ... something like this kzbin.info/www/bejne/mWq0npR5p7lrjM0 ... but without 3d ... I think a clever implementation of parallax and light can achieve this... I will experiment if I get good enough but i wanted a well-versed dev like you to show us something 🤷🏾‍♂... have you ever done an rpg game on this channel ?

[@javifontalva7752]

I am wonder if instead of using straight lines we could use sines lines so it looks like electrical waves. The more I watch this videos the more ideas I come up with. The problem is how to go about it. 🤔

[@niyagentleman8143]

haha good luck

[@andrzejhryniewicz3837]

how i could use it as a website backround?

[@Frankslaboratory]

Canvas element can be positioned on your website same as it was any other element

[@javifontalva7752]

A stupid question. Can I use the connectParticle method and change it so that each particle bounce off every other particle when they touch?

[@Frankslaboratory]

Hi. Yes. You can put any code in there where you need check all particle pairs. I might do this as one of the bonus experiments.

[@javifontalva7752]

@@Frankslaboratory I came up with this if (distance < this.particles[a].radius + this.particles[b].radius) { this.particles[a].vx *= -1; this.particles[a].vy *= -1; this.particles[b].vx *= -1; this.particles[b].vy *= -1; } at the beginning I thought I had it but then I notice that is not quite realistic and I think it is because I am not considering the angle. hnmmm

[@javifontalva7752]

Also I am need to think of a solution so when I spawn a circle it can never be created inside the boundaries of another circle. I didn't know what I was in for when I started my own challenge. oh my!

[@Frankslaboratory]

@Javi Fontalva if the circles repel each other it doesn't matter if they spawn inside each other. They will just pop outside. I didn that with eggs and mushrooms in my recent gamedev tutorial. Yes if you want realistic interactions you need circle collision resolution formula. I might do a video on that

[@nguyendat4275]

could you build a physics engine using javascript?

[@Frankslaboratory]

Yes I will probably do more videos on physics next

[@venkysetty9231]

could you please share the code repo for this video; thank you!

[@Frankslaboratory]

Yes i share the code for this in every episode of this series. When you get to the episodes with experimental projects i share the starter code from this episode there. Check the playlist

[@venkysetty9231]

@@Frankslaboratory thank you

[@Intellectualmind4]

🎉🎉🎉🎉

[@Frankslaboratory]

🥳🥳

[@koko-mt7zr]

Can you do a video about a challenge between you and chatGPT

[@Frankslaboratory]

Who do you think would win

[@koko-mt7zr]

100% you but do a video about that you know everybody is talking about it so it would make more people see your artwork and Chanel if you do a video about it

[@koko-mt7zr]

And about the fields video do you study calculus? It is about math and talks about fields if you want a good book about it I know some of them

[@koko-mt7zr]

And why you don’t go a step farther to 3 dimensional space?

[@Frankslaboratory]

I might do that

[@abionaadekunle6589]

Hello Frank, I am a teacher. I want to build fun application for my website and pupils. Can I edit and use your code.

[@Frankslaboratory]

Ho Abi. Yes you can go ahead and do that. Hope your students have fun learning

[@pkm1747]

please teach ai with javascript if possible

[@Frankslaboratory]

I will do something with AI soon