Generative art!! Please 🙏 And could you show us how to remove any of the drawn layers on canvas context menu event, given the bind method? If not possible, then with an object array (I, specifically, know the second case, but many beginners don't)? Thank you
@@unknown-bx8my Why don't you use a game engine? Adding physics and calculating Z-Index is a Quadrillion Times easier than that of in Javascript. Try Godot. It is so light that my slow laptop also supports it 😂 so I always recommend it bro
Aleks, thanks man, I think as someone who also makes content you realise what needs to happen behind the scenes for a video to come out. I'm slowly improving my video making skills but it's a long process since it's not my natural talent. Anyway thanks for a nice message :)
@@Frankslaboratory For sure! It's a long road from getting a video idea to hitting that publish button. That's (partly) why I'm procrastinating a bit, but I'm getting back into the groove. :)
@@Frankslaboratory Thank you so much, you are very kind. :) I'm currently on a long awaited vacation, but I am wrapping up my next video. I should have it up next week, hopefully. :)
Amazing! thank you so much for this video, I'm an artist just starting in the java script world and sometimes feeling lack of motivation. This is such a booster!
@Franks laboratory I did the Matrix code rain today. I'm in a coding camp. I'm an artist at heart, so I'm trying to learn more about other things that can help my job search when I'm done.
I appreciate your tutorials, and the effort and quality you put into every one of them. My question is related to pixel animation in general. Do you have any tutorials on pixel animation that will have the pixels fly in on page load and will have elasticity / bounce that will slowly settle into the image or text.
Doug! Thank you for saying that. I'm still a beginner when it comes to teaching but I'm learning a lot from feedback people give me here. I made several tutorials where I analyse canvas for pixels and convert them into particle objects. I have never done a video on easing functions and elasticity, I will add it on my list now. I like the idea. It wouldnt be too much work to make this effect you describe from my existing pixel tutorials, I will look into it when I have a moment :)
This is an amazing effect! Although I feel confident with the HTML canvas, I learnt a lot here. Actually I could not imagine that such a thing is possible! I am glad I found your channel, will check out other videos as well. :)
I'll admit that i never absolved one of your turorials. But i always click to see your newest creation. Someday i might want to build some cool animations in a website.
Hi, nice to meet you, thanks for leaving a comment. What coding tutorials do you usually do, it seems you have interest in creative coding but no time to actually do it, I had the same problem for many years :D
Recursion within the class itself? That's awesome! I never even considered that. Is that in any way more performant as opposed to an animation loop like you usually do, because my PC is not that great and has issues when running too many nested for loops? Definitely looking forward to giving this a try. Another great video! Always entertaining and educational, thanks, Frank!
Hi Arthur, in this case I kinda trust requestAnimationFrame to be optimised out of the box. I didn't do aby big performance tests for this technique but on my PC it runs well. Canvas shadows I use at the end are a problem and they can cause a lot of lag on weaker computers. This video is experimental, when it comes to generative art I don't spend too much time on optimisations, even though I should do it for evert video. I need to find some people with weak computers that will test my codebases haha. I will create FPS counter in upcoming video, it should give us better idea about how these animations perform. Hope you're doing well in your new job
@@Frankslaboratory my job is going great! I love it, thanks for the well wishes. And in fact, they are providing me with a MacBook pro, so hopefully I'll be able to create more stuff without any hardware hindrances. An fps counter would be cool! I created one on one of my codepens on one of the imageData particle projects. Would be pretty neat, but I enjoy learning from your videos even though my PC struggles with the more intensive stuff. I guess I was just asking because I was learning a little about big O notation and performance formulas, but after thinking about it, it's still a 1/1 because the loop is still running, and if you loop through again for collision detection, it's still O(n²), so I'll just wait for my company-provided computer. Lol. Thanks again for the video. You always open my eyes to how much stuff you can do with canvas.
@@coltonaallen Macbook pro has great performance, I also have one for work. You will be able to crunch heavy animations with 1000 active particles easily haha. In this particular effect we don't do any complex algorithms but when it comes to nested for loops I used for constellations effect for example, then we get exponential complexity and things can really slow down. Also every draw call on canvas is expensive so we need to be mindful of that. There are techniques like quad tree to help with performance of particle effects, but I haven't done tutorials on that yet, since I'm trying to get beginners in first. Glad to hear you are settling well in your new job.
Hi Arthur, I can see you left a comment but TH-cam is auto removing them before I can read it, so annoying. I reported the bug many times, they have the most useless support I have seen in a long time, they don't believe me comments are being removed. Hope you're well.
@@Frankslaboratory yeah, I tried sending it like 3 or 4 times. Anyways, I just wanted to share a little story with you. As I said before, I started working as a front-end dev shortly ago, and this past week one of my coworkers was building a site for one of our clients, and the design called for bubbles (their logo) to fall slowly in the background. She addressed that she was a bit unsure how to handle mobile responsivity because the bubbles would bunch up together did to the small screen size, so I ordered to assist. Within 20 minutes I had added a canvas to the main content container and used everything you taught me about particle effects and used the ctx.drawImage() method to draw the bubbles and randomly generate their x position. Once they reach the bottom, y position is returned to the top along with a newly generated x position. Everyone was impressed and loved the effect. I just wanted to share that with you and let you know that you're making a difference in our lives as devs (at least mine for sure). You're a great teacher and put out the best content out there by far. Please never stop these awesome videos! I owe this success to you, my friend. Thanks for another awesome video! Can't wait to see some more and continue my learning journey. I wish you all the best!
Thank you so much for your posting such a voluable contents. Please make more vdo about howto +codr for generative art like this vdo for biginner please.
i could not focus at the intro 'cuz i couldn't stop staring at your t-shirt inversed sleeve and collar non simmetry :)) - cool JS stuff i wonder if i can use canvas to make cool animated buttons for sites - i'll do some research :)
Oh noo, you noticed :D I noticed too late and was lazy to rerecord it hahaha, I'm asymmetrical just like my paint brush effect in this video :D I used canvas on buttons in previous video, you can do it, might be a bit overkill according to some people who commented on that hahaha
I think it would be better to put the roots inside an array and iterate through them to update them at each frame request, it's much better than having one event listener for each root. You also have more customisability and easier to manage as you are exporting logic from the root to the request animation frame
21:15 Ternary operator is not ES6. Plus you say that this syntax is clear and concise, but I think that `this.willFlower = (this.size > 11.5)` is even more concise ;)
Hi Alexandre, thank you for correcting me. Just checked and you are right. I think I first learned it while doing ES6 course from Wes Bos so I guess I assumed, he has a chapter on it in his famous course I think. Your syntax is better yes, apparently in this case I could have also used this.willFlower = this.size > 12.5. I'm learning from these comments, thank you.
Very nice video Small nit on the coding style... at 21:45 the code would more conventionally be written: this.willFlower = (this.size > 11.5 ? true : false) or even just: this.willFlow = (this.size > 11.5)
This is awesome!!!!!!!!!!!! How can I make it work when I resize the canvas size (20remx20rem), as I'm still getting the coordinates of the whole window size from the browsers window object?
Hi. If your canvas doesn't cover the entire browser window you can calculate and match mouse/canvas coordinates by accounting for top and left space between canvas and browser window. Probably there is an event property for that as well. Can't think of the name right now. Will check it when I'm home. Might make a tutorial on this as well
@@Frankslaboratory Thanks for the hint! I managed to do this by setting the canvas' width & height to the canvas elements' size: canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; and listening to the canvas instead of the window plus calculating the canvas' space from top and left of the screen with element.getBoundingClientRect() like so: canvas.addEventListener('mousemove', (e) => { if (drawing) { for (let i = 0; i < 30; i++) { const fromTop = canvas.getBoundingClientRect().top; const fromLeft = canvas.getBoundingClientRect().left; const root = new Root(e.x - fromLeft, e.y - fromTop) root.update(); } } }) Cheeers!
I have a question about relation between framerate and quantity of the branches. It is related ? i think so, because on update method there is reqAnimFrame. Am i right? Anyway, on my PC i have much more branches generated even before for loop you introduced on 14:40. Thanks for another great piece!
Hi, it is related. It adds a new branch every time mouse move event ticks which will depend on performance of your PC. The right way would be to pass a time stamp and add new set of branches let's say every 200 ms. That way it would be consistent on all machines. I will use timestamps in my next video, I wanted to keep this one straightforward and this is another thing to explain. thanks for mentioning that
@@Frankslaboratory Thank You for your answer. It cleared out the enigmatic behaviour of my code. I think it is important for code to be consistent on all machines. I would like to see next video about this :D Pozdrawiam!
@@TheMisieq93 So you are Polish, I'm Czech :D I agree with you. There are several good practices that I should use every time, but sometimes I don't because it would make the videos twice as long, I will make separate videos on it soon.
@@Frankslaboratory I agree, just a showcase of techniques you're using, without excess code. Thanks again for your answers :D BTW i was pretty sure you are a Czech, i've had to read about this or something? IDK. Pozdrawiam raz jeszcze z pobliskiego kraju :D
Hi. Its not possible to draw complex graphics with html elements. You can do basic animations with images and simple shapes but canvas will always perform faster and have many more options. It depends what exactly is your goal. These effects in particular need canvas
Just noticed a difference that may have been updated in browsers after you release this video or maybe just specific to some browsers. Setting context properties globally like lineWidth and globalCompositeOperation did not work. It had to be set just before calling fill, stroke, and draw. Seems to me that API uses local values over global values.
Yes, canvas can export gifs, I will make a video on that eventually. You can also just record your screen and convert that video to a gif with some video editor, most of them can output gifs
Hi Günal, it's possible to generates GIFs with JavaScript in browsers, not something I can explain here in a comment. Other video formats are complex I think as decoding etc would be involved. I'm lazy so I simply record my screen with OBS studio and then I use some video editor to crop it and export as GIF, easy and simple way to turn my animations into gifs and videos
Hi Sumit, there is a bug somewhere in your code. If you can't find it you can message me on Twitter, I can give you the final code files for comparison
I need to correct your statement that the ternary operator is an ES6 construct. Rather, the ternary operator was introduced way back in 1997 in ECMAScript 1. It's been around a looong time, and is not a new thing whatsoever.
Hi Matt, thank you for pointing that out. I think I just watched 'ES6 for everyone' course by Wes Boss around the time I recorded this, which has a chapter on ternary operator and that's why I said it. Always learning :D
There's a typo somewhere in your code. It becomes easier as you do more coding, but if you are completely lost probably you are not ready for projects like this. I always recommend doing a few beginner courses before doing complex gen art projects like this one.
@@Frankslaboratory thank you for the help! I actually figured what was wrong in my code, first I had linked incorrectly the js file and then I mistyped the canvas width and height properties. It was frustrating to not get it to work during the video, but much more satisfying to fix it by myself. Thank you for the knowledge!
@@mrngamer272 Nice work. debugging is the part of coders life :D It becomes easier. With projects like this it's always good to use console log to inspect our arrays and variables to see where it went wrong
Hi Francesco, this is JavaScript, Java is a backend language for server side stuff. Open GL is really good but 10 times more code to achieve this. I will do a series on web GL/ open GL but it will be much more advanced than this video, because you have to manage camera angles, z axis, shaders etc
Can you teach me how to create own three .js ? Trust me it'll be more helpful for all. Please 😢😭 Edited:- if you love your fans, you'll make your next video about creating own three.js
More canvas art or more games in the next video? Let me know :) Click the LIKE please if you get any value ❤
3d games😍
it's a big request maybe😂 3d games are harder than 2d games.
@@unknown-bx8my They are indeed you are right, I want to do some 3D games though
Generative art!! Please 🙏
And could you show us how to remove any of the drawn layers on canvas context menu event, given the bind method? If not possible, then with an object array (I, specifically, know the second case, but many beginners don't)?
Thank you
It's a record. 111 likes with 0.00 Dislikes 🎉🎊🥳
@@unknown-bx8my
Why don't you use a game engine? Adding physics and calculating Z-Index is a Quadrillion Times easier than that of in Javascript. Try Godot. It is so light that my slow laptop also supports it 😂 so I always recommend it bro
You really should have some awards for these great videos. This is high quality all the time
Matej! Thank you, you are very kind to say that. I don't think I'm at the level of experienced developers, but I learn new things every day :)
@@Frankslaboratory Don't be modest. I'm pretty sure you are at the level of experienced devs, at the very least
could we have awards too for reproducing them in organised code structure? LOL ^^
There is no match of this channel!!
Simply outstanding
Really? That's a really nice compliment, very kind of you
I don't understand how is this channel not having a few hundred k subs, really cool tutorials Frank
haha, thank you, TH-cam growth is slow, only a small %of people get viral. I like it slow and steady :D Thank you for a nice message, I appreciate it
Each new animation video you produce keeps blowing my mind. The effort you put into your tutorials is tremendous. Amazing work. 👏👏👏
Aleks, thanks man, I think as someone who also makes content you realise what needs to happen behind the scenes for a video to come out. I'm slowly improving my video making skills but it's a long process since it's not my natural talent. Anyway thanks for a nice message :)
@@Frankslaboratory For sure! It's a long road from getting a video idea to hitting that publish button. That's (partly) why I'm procrastinating a bit, but I'm getting back into the groove. :)
@@AleksPopovic Hope you find some motivation to continue, your content is great, we need more of it :D
@@Frankslaboratory Thank you so much, you are very kind. :) I'm currently on a long awaited vacation, but I am wrapping up my next video. I should have it up next week, hopefully. :)
@@AleksPopovic Enjoy your vacation Aleks, TH-cam can wait :D
Man, you are the best animator !
Younis! How are you. Thank you for saying that very kind ❤
Amazing! thank you so much for this video, I'm an artist just starting in the java script world and sometimes feeling lack of motivation. This is such a booster!
Hi Camila, glad to hear you found some motivation. I also feel inspired when I see what other people can create, we have to motivate each other
@Camila I'm here for the same reason
I learned to use canvas a little while ago, this looks like advanced sorcery to me, wonderful
Hi Lucas, canvas can do many things quite easily these days, if you want give it a try again and see for yourself :)
I always learn new things every time I watch one of your videos. You are awesome! Keep going...
Hi Mohammad, thank you, I'm happy to hear that
You are really motivating to hear and see
Pranay, how do you know exactly what I wanted to hear today :D Thank you
Really great video! Had a lot of fun making this. It was my first stab at art with code. Going to check out your beginner stuff next.
Hi Clinton, hope it's not your last creative coding project :)
@Franks laboratory I did the Matrix code rain today. I'm in a coding camp. I'm an artist at heart, so I'm trying to learn more about other things that can help my job search when I'm done.
Oops. I'm late today. Thanks as always for the upload. Have a great weekend.
Happy Friday Nick ❤
Commenting even with out watching becuz I know this is gonna be amazing video
Aravind, you are too kind. Always nice to see you here
You must’ve put in a lot of hard work to get to this level of creativity, well done and thanks for sharing!
I appreciate your tutorials, and the effort and quality you put into every one of them. My question is related to pixel animation in general. Do you have any tutorials on pixel animation that will have the pixels fly in on page load and will have elasticity / bounce that will slowly settle into the image or text.
Doug! Thank you for saying that. I'm still a beginner when it comes to teaching but I'm learning a lot from feedback people give me here. I made several tutorials where I analyse canvas for pixels and convert them into particle objects. I have never done a video on easing functions and elasticity, I will add it on my list now. I like the idea. It wouldnt be too much work to make this effect you describe from my existing pixel tutorials, I will look into it when I have a moment :)
@@Frankslaboratory Thank you for the timely reply as well as being willing to look into this request!
@@DonaldsonDoug I like suggestions like this and I will do a tutorial on it hopefully (if I can figure it out :D )
This is an amazing effect! Although I feel confident with the HTML canvas, I learnt a lot here. Actually I could not imagine that such a thing is possible! I am glad I found your channel, will check out other videos as well. :)
Glad you liked it. Canvas can do pretty much any animation you can imagine. Some like the ones I teach are simpler than you would think 😊
Thank you Frank! I was having a shitty day and coding along with the video made my day better.
Hi Camilo. Nice to hear that. I'm the same. Doing some creative coding always makes my day better 😊
Just found your channel. Love your teaching style. Might be my favorite I've ever come across on yt.
Hi Do'be! Thank you for such a kind feedback and welcome, good to have you here ❤
WOW!!!! It was fantastic!!!!
Thank you Frank 😊
Hi Argy, thank you
a great nosedive into generative art! thank you!
Great effect! Awesome as always!
Thank you Evaristo ❤
Jeez!! This is amazing! Thank you so much for passing on so much knowledge in this clear and concise way! 🙏
I'm here to help, thank you for letting me know you found some value in the course
Bro keep up making this video(for which I have no words) , one day you will Reach millions subscribers
Thanks Vinay, it's nice to get a supportive comment like this
This was super helpful and fun to watch. Thank you!
well this is kind of mind-blowing
Hi CS, glad you think so, thanks man
Brilliant as always!
Mark, you're too kind, thank you
AWESOME CSS Skills you have. 😃😃
Thank you Jeenit, this was mostly JavaScript
@@Frankslaboratory Yes I do mean you have amazing HTML, CSS, JS Skills
@@jeenitprajapati3449 Thank you Jeenit, very kind
Your videos are truly amazing. Thank you so much and keep it up please!
We all need to move from darkness towards the light! 13:30 ...nice tutorial by the way!
Very useful and well put together demo. Thanks :)
Glad you found some value Paul
I'll admit that i never absolved one of your turorials. But i always click to see your newest creation.
Someday i might want to build some cool animations in a website.
Hi, nice to meet you, thanks for leaving a comment. What coding tutorials do you usually do, it seems you have interest in creative coding but no time to actually do it, I had the same problem for many years :D
Recursion within the class itself? That's awesome! I never even considered that. Is that in any way more performant as opposed to an animation loop like you usually do, because my PC is not that great and has issues when running too many nested for loops? Definitely looking forward to giving this a try.
Another great video! Always entertaining and educational, thanks, Frank!
Hi Arthur, in this case I kinda trust requestAnimationFrame to be optimised out of the box. I didn't do aby big performance tests for this technique but on my PC it runs well. Canvas shadows I use at the end are a problem and they can cause a lot of lag on weaker computers. This video is experimental, when it comes to generative art I don't spend too much time on optimisations, even though I should do it for evert video. I need to find some people with weak computers that will test my codebases haha. I will create FPS counter in upcoming video, it should give us better idea about how these animations perform. Hope you're doing well in your new job
@@Frankslaboratory my job is going great! I love it, thanks for the well wishes. And in fact, they are providing me with a MacBook pro, so hopefully I'll be able to create more stuff without any hardware hindrances. An fps counter would be cool! I created one on one of my codepens on one of the imageData particle projects. Would be pretty neat, but I enjoy learning from your videos even though my PC struggles with the more intensive stuff.
I guess I was just asking because I was learning a little about big O notation and performance formulas, but after thinking about it, it's still a 1/1 because the loop is still running, and if you loop through again for collision detection, it's still O(n²), so I'll just wait for my company-provided computer. Lol. Thanks again for the video. You always open my eyes to how much stuff you can do with canvas.
@@coltonaallen Macbook pro has great performance, I also have one for work. You will be able to crunch heavy animations with 1000 active particles easily haha. In this particular effect we don't do any complex algorithms but when it comes to nested for loops I used for constellations effect for example, then we get exponential complexity and things can really slow down. Also every draw call on canvas is expensive so we need to be mindful of that. There are techniques like quad tree to help with performance of particle effects, but I haven't done tutorials on that yet, since I'm trying to get beginners in first. Glad to hear you are settling well in your new job.
Hi Arthur, I can see you left a comment but TH-cam is auto removing them before I can read it, so annoying. I reported the bug many times, they have the most useless support I have seen in a long time, they don't believe me comments are being removed. Hope you're well.
@@Frankslaboratory yeah, I tried sending it like 3 or 4 times. Anyways, I just wanted to share a little story with you.
As I said before, I started working as a front-end dev shortly ago, and this past week one of my coworkers was building a site for one of our clients, and the design called for bubbles (their logo) to fall slowly in the background. She addressed that she was a bit unsure how to handle mobile responsivity because the bubbles would bunch up together did to the small screen size, so I ordered to assist.
Within 20 minutes I had added a canvas to the main content container and used everything you taught me about particle effects and used the ctx.drawImage() method to draw the bubbles and randomly generate their x position. Once they reach the bottom, y position is returned to the top along with a newly generated x position. Everyone was impressed and loved the effect.
I just wanted to share that with you and let you know that you're making a difference in our lives as devs (at least mine for sure). You're a great teacher and put out the best content out there by far. Please never stop these awesome videos! I owe this success to you, my friend.
Thanks for another awesome video! Can't wait to see some more and continue my learning journey. I wish you all the best!
Your videos are going from basic to exclusive with each video :)
Yes, I'm trying to teach beginners some of the more advanced stuff as well. This effect is not that complicated actually, no complex calculations here
@@Frankslaboratory
But still improving our skills 👍🏻
@@Xyzzzz307 Yes, every coding exercise improves our skills, practice makes perfect :)
Thank you Frank! This is awesome.
Jazer! Glad you think so, thank you for letting me know :)
Very Nice !!!
we can learn it direclty or is better than see other tuto before ?
Hi, I explain everything in this video but I go faster since I already covered individual techniques on my beginner playlist
Amazing as usual 😍
Awosome video 🔥 very helpful
Really? Thank you Pranjal
You are great, sir
First comment
Vaibhav, congratulations, you win the first comment race this week :D
great tutoriol🔥🔥.
this.willFlower = this.size > 11.5 ? true : false;
i think this code work also for ternary operator👍
Yup, ES6 syntax is great, I will try to use it more often now that it has good browser support
I think your syntax might be better than mine, just testing it
@Markus Zeller Sorry I misspelled your name earlier Markus, i had a long day editing the video haha. Time for a Friday break for me :D
That's cool. I've never really done anything like that before in JS. I spend 99% of my time processing data and making tables sort 🙂
Glad I was able to show you something new! :)
BROO You just made my life new!! /** @type */ xD didnt know that! thanks bro
Just wow 👏
Glad you like it Himbra
You should start teaching on udemy, skillshare like platforms man. Loved it
Inspirational ❤
Thank you ❤
wooooooooooow , amazing !!!!
Max! Thank you :)
THIS IS SO COOL! :DDD
Really? thank you :D
@@Frankslaboratory :)
Beautiful!
Thank you
Living legend 🔥
Where :D
@@Frankslaboratory you 😎
Ahaha. Nooo. I'm just a beginner :)
Thank you so much for your posting such a voluable contents. Please make more vdo about howto +codr for generative art like this vdo for biginner please.
I'm working on more generative art, coming soon :)
You are amazing
i am again here to watching your video still i am in this but i know its fantastic.
Hi, thank you :)
i could not focus at the intro 'cuz i couldn't stop staring at your t-shirt inversed sleeve and collar non simmetry :)) - cool JS stuff i wonder if i can use canvas to make cool animated buttons for sites - i'll do some research :)
th-cam.com/video/lPVZYS4fvco/w-d-xo.html
Oh noo, you noticed :D I noticed too late and was lazy to rerecord it hahaha, I'm asymmetrical just like my paint brush effect in this video :D I used canvas on buttons in previous video, you can do it, might be a bit overkill according to some people who commented on that hahaha
@@Frankslaboratory lol i have OCD - in my frontend develompent kinda helps, but in real life i make enemies :)))
@@sneaky-Jay OCD will make you a great coder so I'd say it's a good thing :D
Ok expert level coding
Glad you like it Gaurav
Truly amazing!
Thanks Michael :)
damn frank you are the best teacher no doubt
Tommy, that's very kind and exactly what I want to hear on Friday night, thank you :D
Thanks sir your all video is very nice
Thank you
Great❤️❤️❤️
Thank you :)
I think it would be better to put the roots inside an array and iterate through them to update them at each frame request, it's much better than having one event listener for each root. You also have more customisability and easier to manage as you are exporting logic from the root to the request animation frame
fantastic!
❤
You are an artist developer!
Thank you, very kind
I am using the flower image you have and I set this.image.src to the image. file and the image isn't showing. How do I fix this? Thx!
Hi Caleb, hard to tell like this from your comment, if you want source code for comparison you can message me on Twitter
Thank you very much :)
THIS IS DOPE
Thanks Cole
🤩
Ahhh yes the video is out. Recreation shall commence my lord.
In a dark place we find ourselves, and a little more knowledge lights our way. :D
@@Frankslaboratory to the greatest powers of javascript. So we could rule the internet.
@@widevader One who controls JavaScript controls all :D
@@Frankslaboratory unlimited powwwaaaaaaa
Thank you
Deepak! Have a nice weekend
21:15 Ternary operator is not ES6. Plus you say that this syntax is clear and concise, but I think that `this.willFlower = (this.size > 11.5)` is even more concise ;)
Hi Alexandre, thank you for correcting me. Just checked and you are right. I think I first learned it while doing ES6 course from Wes Bos so I guess I assumed, he has a chapter on it in his famous course I think. Your syntax is better yes, apparently in this case I could have also used this.willFlower = this.size > 12.5. I'm learning from these comments, thank you.
@@Frankslaboratory wes Bos is awesome! Great content! Syntax podcast is great too!
@@coltonaallen Yup, I learned a lot from Wes Bos premium courses, worth the money
Finally, i can simulate protein folding using javascript.
Love it :D
Very nice video Small nit on the coding style... at 21:45 the code would more conventionally be written:
this.willFlower = (this.size > 11.5 ? true : false)
or even just:
this.willFlow = (this.size > 11.5)
Hi Erik. Thank you for pointing that out. You are right your code is much nicer. I will think of it next time I'm using similar technique
🌼
I would love to see how it is possible to make this interaktiv with an camera or kinect.
This is awesome!!!!!!!!!!!! How can I make it work when I resize the canvas size (20remx20rem), as I'm still getting the coordinates of the whole window size from the browsers window object?
Hi. If your canvas doesn't cover the entire browser window you can calculate and match mouse/canvas coordinates by accounting for top and left space between canvas and browser window. Probably there is an event property for that as well. Can't think of the name right now. Will check it when I'm home. Might make a tutorial on this as well
@@Frankslaboratory Thanks for the hint! I managed to do this by setting the canvas' width & height to the canvas elements' size:
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
and listening to the canvas instead of the window plus calculating the canvas' space from top and left of the screen with element.getBoundingClientRect() like so:
canvas.addEventListener('mousemove', (e) => {
if (drawing) {
for (let i = 0; i < 30; i++) {
const fromTop = canvas.getBoundingClientRect().top;
const fromLeft = canvas.getBoundingClientRect().left;
const root = new Root(e.x - fromLeft, e.y - fromTop)
root.update();
}
}
})
Cheeers!
I have a question about relation between framerate and quantity of the branches. It is related ? i think so, because on update method there is reqAnimFrame. Am i right? Anyway, on my PC i have much more branches generated even before for loop you introduced on 14:40. Thanks for another great piece!
Hi, it is related. It adds a new branch every time mouse move event ticks which will depend on performance of your PC. The right way would be to pass a time stamp and add new set of branches let's say every 200 ms. That way it would be consistent on all machines. I will use timestamps in my next video, I wanted to keep this one straightforward and this is another thing to explain. thanks for mentioning that
@@Frankslaboratory Thank You for your answer. It cleared out the enigmatic behaviour of my code. I think it is important for code to be consistent on all machines. I would like to see next video about this :D Pozdrawiam!
@@TheMisieq93 So you are Polish, I'm Czech :D I agree with you. There are several good practices that I should use every time, but sometimes I don't because it would make the videos twice as long, I will make separate videos on it soon.
@@Frankslaboratory I agree, just a showcase of techniques you're using, without excess code. Thanks again for your answers :D BTW i was pretty sure you are a Czech, i've had to read about this or something? IDK. Pozdrawiam raz jeszcze z pobliskiego kraju :D
This is what front end should do? damn imma switch to back end then T_T
Why
Any way to do this same thing without the canvas element ?
But with regular html elements?
Hi. Its not possible to draw complex graphics with html elements. You can do basic animations with images and simple shapes but canvas will always perform faster and have many more options. It depends what exactly is your goal. These effects in particular need canvas
Just noticed a difference that may have been updated in browsers after you release this video or maybe just specific to some browsers. Setting context properties globally like lineWidth and globalCompositeOperation did not work. It had to be set just before calling fill, stroke, and draw. Seems to me that API uses local values over global values.
Hi Vijay, do you know what browser this happened on? It's fine in Chrome, I can't reproduce it
@@Frankslaboratory I used brave. It's a cromium fork, so I don't know why 🙃
@@VijayDev I see, I only test my stuff in major browsers, will check brave now
Is there a way to save the final animation as a gif?
Yes, canvas can export gifs, I will make a video on that eventually. You can also just record your screen and convert that video to a gif with some video editor, most of them can output gifs
Thank you! I would love to see the video explaining that process! 🤗
why my image in browser looks lofi quality and bigger than your example?
you forgot the link for beginners in the description :(
I am not getting the canvas at the side... what am I doing wrong?
do you mean the browser window?
@@Frankslaboratory Yes, thank you. I figured its the browser, now it works. Thanks for the video.
how can we convert this to gif SVG, MP4, WEBM
Hi Günal, it's possible to generates GIFs with JavaScript in browsers, not something I can explain here in a comment. Other video formats are complex I think as decoding etc would be involved. I'm lazy so I simply record my screen with OBS studio and then I use some video editor to crop it and export as GIF, easy and simple way to turn my animations into gifs and videos
When I added this.angle it isn't working like that
No curves
Still getting straight lines
Hi Sumit, there is a bug somewhere in your code. If you can't find it you can message me on Twitter, I can give you the final code files for comparison
@@Frankslaboratory thanks for replying it is resolved
@@sumitmishra-cy4uz Awesome, happy to hear that :D
Please make tutorials about tile map and tile collision small game
Yes, I will do it
I need to correct your statement that the ternary operator is an ES6 construct. Rather, the ternary operator was introduced way back in 1997 in ECMAScript 1. It's been around a looong time, and is not a new thing whatsoever.
Hi Matt, thank you for pointing that out. I think I just watched 'ES6 for everyone' course by Wes Boss around the time I recorded this, which has a chapter on ternary operator and that's why I said it. Always learning :D
why it didnt work for me?
There's a typo somewhere in your code. It becomes easier as you do more coding, but if you are completely lost probably you are not ready for projects like this. I always recommend doing a few beginner courses before doing complex gen art projects like this one.
@@Frankslaboratory thank you for the help! I actually figured what was wrong in my code, first I had linked incorrectly the js file and then I mistyped the canvas width and height properties. It was frustrating to not get it to work during the video, but much more satisfying to fix it by myself. Thank you for the knowledge!
@@mrngamer272 Nice work. debugging is the part of coders life :D It becomes easier. With projects like this it's always good to use console log to inspect our arrays and variables to see where it went wrong
@@Frankslaboratory I see it now. I'll try to console log more!
Do someone have script i wanna try things with it
Pls
Mmmm java ??? Why not open gl ?? At least all this good code can be used for real in vj Softwares…
Hi Francesco, this is JavaScript, Java is a backend language for server side stuff. Open GL is really good but 10 times more code to achieve this. I will do a series on web GL/ open GL but it will be much more advanced than this video, because you have to manage camera angles, z axis, shaders etc
Can you teach me how to create own three .js ? Trust me it'll be more helpful for all. Please 😢😭
Edited:- if you love your fans, you'll make your next video about creating own three.js
Hi, do you want me to use Three.js to create animation or to build our own library similar to Three.js :)
@@Frankslaboratory build own library similar to three js.
@@technicallokaya6726 That's a big project, I want to do it but I think i will first start with a 2d library to explain the basics
@@Frankslaboratory ok. Thanks bro
webgl videos
Yes!
Hello, can you make 3d perspective(not orthographic view) game tutorial using vanilla javascript.. please 🥺