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 } } }
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 !!!!)
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..
@@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?
@@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
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!
@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
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
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. 🤔
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.
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
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?
@@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 ruclips.net/video/c9QmaCrT8Vk/видео.html ... 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 ?
Libraries or vanilla JavaScript, which one do you prefer to use.
Mostly prefer liabrary...
vanilla, but work demands libraries
Definitely prefer vanilla for stuff like this
Vanilla of course!!!!
100% vanilla JS, it's so gratifying making these effects from scratch
I can’t believe you don’t have 1 million subscribers,keep up the good work you are amazing ❤❤
I would be fine with 100k 😆
Haven't even gotten halfway and this is already so incredible! Please never stop making these videos
Glad you like it Chad. I will turn this into 10 very distinct generative art effects in the next parts
Thanks a lot for your patience and explaining everything in such an understandable way. You are a great teacher.
Awesome video. Just spend the last hour to follow through. Love your work!
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
}
}
}
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 !!!!)
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..
@@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?
Great explanation and cool effects - thanks for this video!
we love you ^^ , you teach us so much!
omagaad King , you always put out some amazing video that fill my brain with good stuff ! I thank god you exist !
Haha. Thanks for letting me know. Hope you like what I do with this effect in the next part then 😊
Hey sir how can I use js particle effect & your image effect together in 1 HTML file , please help me
Thanks for all your tutorials, brilliant as always.
This is my favourite channel😊
I'm hitting like for those bad ass glasses sir! (Also Frank, you rock! Thank you for your channel and fantastic projects.)
Thank you Thomas, I'm happy to see feedback like that ☺️
Never cease to blow my mind!! 🤯
In that case you should see the 10 variations I will turn this into in this miniseries. I wonder what you will think then 😊
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.
Amazing, thank you so much for your videos!!!
Hi Anna, I'm here to help!
4 years ago i created same plexus art its available in my youtube channel but yours is way cooler 👌
Great Video, really liked your way of explaining the code
Thank you for your feedback. Glad you found some value
Great! Thank you so much.
excelente!!!, quisiera tomar tus cursos en udemy pero no tiene subtítulos en español y aun no soy bueno con el ingles
thank you for this tutorial
i just love what you do
Glad to hear that thank you
Amazing! Thanks for!
I'm here to help
Nice shades 🕶️🕶️😎
Haha. Thank you Javi. I was just being silly 😄
A stupid question. Can I use the connectParticle method and change it so that each particle bounce off every other particle when they touch?
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.
@@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
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!
@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
how i could use it as a website backround?
Canvas element can be positioned on your website same as it was any other element
Cool glasses :-)
I'm sure you could track that neon colour around glasses and do some cool webcam video effects with that 😁
@@Frankslaboratory Is that a challenge? :-D
@@Radu yes 😁
@@Radu I disabled my Twitter notifications. Will check when I get home 😊
@@Frankslaboratory Sure :-)
could you please share the code repo for this video; thank you!
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
@@Frankslaboratory thank you
next please sir, cloth simulation😊
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. 🤔
haha good luck
🔥
🔥
Very good videos I am amazed, where I can support you financially?
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.
Hi Frank how are you, particles videos are cool
Hi Gopinath. It's been a while my friend.
@@Frankslaboratory 👍
you are Goat was looking for code from scratch but everyone was using librarires
All my videos are from scratch. No libraries at all. Have fun 😊😊
thankyou :))
I'm here to help 😊😊
Can you do a video about a challenge between you and chatGPT
Who do you think would win
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
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
could you build a physics engine using javascript?
Yes I will probably do more videos on physics next
And why you don’t go a step farther to 3 dimensional space?
I might do that
Please Frank, make a video on making a game like octopath traveller, specifically HD-2D effect... without 3D ☝😉 thank you for your contents
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?
@@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 ruclips.net/video/c9QmaCrT8Vk/видео.html ... 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 ?
so cool.. if only i know how to program
That's why I made the video, to teach people how to do it :D
🙏
Hello Frank, I am a teacher. I want to build fun application for my website and pupils. Can I edit and use your code.
Ho Abi. Yes you can go ahead and do that. Hope your students have fun learning
🎉🎉🎉🎉
🥳🥳
please teach ai with javascript if possible
I will do something with AI soon