Wow! I'm already quite advanced at JS, and still learned a ton from this. The way you explain all the little details, without presuming anything about what the viewer already knows, is really fantastic. Well done!
This tutorial rises far above the countless tech tutorials I've watched on many different topics. It's superbly well focused and "information dense" in its presentation of the material while both including all necessary details and not ever dragging on and on with "dead space side-tracks" where you just start feeling like, "Ok, get on with it already!" I watch a lot of videos at substantially accelerated rates and still skip ahead routinely with the right-arrow key, but not this one. This video can be watched at normal playback speed (maybe even slowed, or at least paused once in awhile), without ever skipping ahead, and without ever losing the target due to inappropriately omitted details---because they're all here. Great job!
I'm a silent surfer and rarely ever comment. But boy, this stuff is so high quality! There aren't many resources regarding canvas and generative art (which I'm very interested in learning) and your channel is full of this high-quality content! Not only the quality is top-notch, but you're a great teacher as well which sets you apart. Thank you so much for putting in the effort and sharing your knowledge with everyone! May you live a happy, healthy, and prosperous life :)
Hi thank you for leaving such a nice feedback. It means a lot since you say you don't comment often, very happy to read feedback like this. You are right there aren't many canvas and generative art tutorials, especially if you want to do more than draw a simple rectangle and circle. Good luck with your coding studies ! :)
holy cow - that's some crazy stuff you've got going on there only recently discovered your channel, Frank total respect for the skillage on display; many thanks for sharing your knowledge
I love how you over-explain everything but in a super fast to the point way so if I already know it I can just block it out and move on but if im like huh? I can just go back and get a really clear explanation one of the most informative vids ive seen so far thanks
That intro song is growing on me. I'ma take my lunch break and roll through this. Thanks Frank, inspiring content, as always. (To answer your question: Found your channel by the inside of TH-cam's algorithms when looking up "HTML Canvas". I think you hold a pretty high position on this subject.).
Just found your channel! WOW!! Straight to the point, no bs, information dense, everything clearly explained without too much repetition.. I LOVE IT!! Thank you and keep up the great work!
Thank you, love this feedback, very kind of you, thank you for taking the time to let me know, If I had a working website I would pin this comment as my viewer testimonial haha
7:30 You can get canvas width and height from ctx. ctx have it`s canvas element as property inside. If size was changed (like in tutorial) you can get variables, else they are undefined.
Quick thought on deltaTime, if you reset the counter back to 0 it will only exactly match between devices if the interval is exactly divisible by the frame rate. Better to subtract the interval from the counter Eg 100ms interval at 60fps and 45fps. As you described, the 60fps will complete the 100ms in 6 frames, however, the 45fps device wont land as neatly. 4 frames takes 88.88ms and 5 frames takes 111.11ms. Within 1 second you’re already adrift by 1 interval. By subtracting the interval from the counter, at the end of the first interval the 45fps device starts at 11.11, ,giving it the boost it needs to stay in step
Hi Andrew. Yes. This is a great explanation. I will try to mention it next time I use delta time because its important to understand. Thank you for taking the time to share with us
thanks for the content! I believe that you can use arrow functions to avoid the use of bind like this: animate = () =>, arrow functions have autobinding and you don't have to be thinking about contexts
The way you explain is very understandable! Can you please make a tutorial for moving and zooming in canvas? For example something like google map. Thank you in advance
Hahahaha woow that's amazing but you know I've got hypnotized by those lines 😵💫 but generally thank you very much for this amazing effort explaining some principles and go step by step without skipping any important information. I've liked and subscribed.
I have copied all the code into VS studio . Checked for spelling/syntax errors, I can't get the line @12:00 to draw . Am I missing something ??? The getContext method when declaring ctx is not in my list . Do I need to import something , I haven't? Thanks for any help
wow just one week ago i found out that JS has its own private property/method syntax (no support from IE). And now i see a new guide where you talk about it😎
To be honest I also found out recently, it's not something people commonly use but I think it will become more popular soon as more of us learn about it
27:40 about 33 frames after he adds a 0 to the flowField.animate method the console reveals that the first frame of animation took 123.713 milliseconds. My computer spikes on the first frame of animation too, but it's only 21.789 milliseconds. I wonder what causes this.
Hey Frank! Consider yourself making a full course on udemy from covering all the basics to doing some projects towards the end of the course. What you do on youtube is amazing and you deserve more attention. Also thank you for your videos! Keep up the good work!!
Hi, thank you, very kind to say that. I might do a full Udemy course eventually when I have more time, for now just TH-cam videos, I have a full time job.
@@Frankslaboratory Just curious to know does your job involves using Canvas or regular Web development stuffs like CRUD app using React,Vue,etc. Because I want to learn Canvas but don't have reason to learn it at the moment. Can you please tell some of the real life applications that leverages HTML5 Canvas instead of DOM and what sort of applications can be made using Canvas.Thanks
Holy shit! If this is for beginners, I hate to see what advanced is going to be like! lol Most of this is too advanced for me, but I'm doing it anyway! This looks like it's going to be very fun!
Hi Scott, I explain it slowly so I marked it as 'for beginners' but the second half of the video is actually getting quite advanced. I need to get better at rating the difficulty
I was able to achieve a near perfect replica of the pattern at 39:38. But I notice that when you change the cell size, your pattern just becomes a slightly less detailed version of the same image. So does mine, but also the image is change. It's like it zooms in or something
@@Frankslaboratory no me causa problemas no es muy bueno mi inglés pero trato de mejorarlo, tu canal lo sigo porque son excelentes tus tutoriales y el código es muy limpio se entiende a la perfección
Hi Zhuozi, I don't think there are many complete canvas courses. There is some good quality canvas content from channels like Chris courses, but to build different effects and learn different techniques you will have to piece it together from independent tutorials. If I find any good complete course I will make sure to tell everyone :D
Hi Himanshu, true 3D takes a lot of code, unless it's just a single cube or something and even that takes A LOT of math. I usually use 'fake' 3D with many different tricks, for example shadows, layers etc. Many 2D things can easily be made look 3D, or at least '2.5D', I will make more content on that soon.
I watched some of you video but things went over my head. you explain thing but in a little bit fast pace. but in this video you are bit slow which helping to understand what you are doing and saying. Btw, thanks for such an awesome tutorial
A great series. Many thanks. My only comment is that you talk about data encapsulation in your program structure, but end up creating publicly scope variables when your coding structure breaks down. You might have been better to write a simpler functional program. Cheers.
Hi Thomas, you are right, by the end of video in experiments section I pulled some global variables. I will try to do better next time. thank you for taking the time to comment
Hi Could you explain why you can't set canvas height and width via CSS as the container that this is within will scale the canvas which will imply points that plots will not be the same as specified on canvas even though console.log(canvas.width , canvas.height) will report correct size This has had me going for hours as to why this should be so Now lest say I need to make the container within which canvas sits flex and I want this to be responsive placing the canvas centre page vertically and horizontally How do you do this EG ...
Later CSS .container{ .display : flex ; margin: 0 auto ; justify-content: center; align-items: center;
width:70vw ; height:100vh; border:rgb(124, 6, 6) solid 1px ; #canvas1{ border:white solid 1px ; width:600px ; height:600px ; } The only way i found this will plot correctly is by specifying width and height in the JS file for canvas Please could you explain this part in more detail Thanking you EG .... your JS file window.onload = function(){ canvas = document.getElementById('canvas1'); /* set canvas width and height here otherwise this will NOT DRAW OR PLOT CORRECTLY and will scale the canvas unevenly doesn't matter what you do within the CSS file or what console.log reports as correct unless you specify height and width here or within the html canvas element it will not plot correctly */ canvas.width=600 ; canvas.height= 600 ; } /* Please also make special notes that you cannot retrieve canvas width , height using canvas.width or using canvas.height but instead need t use the following syntax, functions if you then use this syntax as above console. log will report 300 , 150 no matter what you specify in the CSS file which will really have you going */ // NB This is quite important // This is is how this is done !! // get the width of this canvas canvasW = canvas.getBoundingClientRect().width; // get the hight of this object canvasH = canvas.getBoundingClientRect().height; Web links here html.spec.whatwg.org/multipage/canvas.html#attr-canvas-width Otherwise excellent quality , meant with no malice PS for others and comments we all hear quote typical UK , "Uni students are a waste of time " ,, Are they really ?? How interesting
I am junior ReactJS developer and I was to move backend side. but your tutorials really making me think again where i want to go in my career 😁 please let me know by mastering canvas and animation in JS which job market or clients can be targeted? do I need to have designing background knowledge as well? As I have no design sense i just provide figma design and develop or make it functional
Пожалуйста, подскажите, как называется мелодия ?? Хочу добавить в свой ежедневный плейлист.))))) Видео вышло 3 недели назад, но TH-cam рекомендует мне его только сегодня. Уж лучше поздно, чем никогда.))))))
Hello, I have a question that I cant seem to work out. When doing const img= new Image(); img.src = "path" Is it possible to get the width and height of the image without the onload function? img.width and img.height return zero. I need this because I want to set the size of the enemies the same as the size of their image.
Hi, you need to wait for the image to load before you can measure it's width and height with JavaScript, it takes only a few miliseconds to load but JavaScript is even faster and it will see the image as 0 x 0 pixels. Load event will wait for all assets to be fully loaded and available before running javascript, that's why we use it.
It's easy to achieve what you want to do, just put all your code inside window.addEventlistener('load', function(){...here...}) at that point inside all images are avalable so just scan the first one for width and height and use those values however you want with the second image
@@Frankslaboratory thank you for this answer!! , it will work wonders for my next project :) . I created a workaround by starting the game with "starting screen". By the time the user clicks start game (and changes the variable start game to true which is required for the rest of the program), everything is loaded and ready to go.
@@Slokingseba Nice, glad you managed to find a workaround. If you add sounds and more graphics you might have to do the load event anyway but for small projects it's fine
Hi Aravind, it's been a while, good to see you here. Thank you ❤ Will take a break from coding until Sunday, spent too much time coding all examples for this video intro :D :D
Hello frank, I like about your channel.. The way you explain to code with html canvas.. I like to doin this stuff, playing with pattern, colors in html canvas.. I just the beginner of programming world, i start it with Frontend.. But, for frank.. or anyone, can answer my question please.. about.. If we focuss in the html canvas.. Can we get some job for experting this stuff? Thanks a lot frank!
Hi Muhammad, yes you can get a job with knowledge we use here. Even if you don't use canvas at work specifically, it's still JavaScript, all we do are important front end skills. I'm using classes, arrays, loops etc. It has many applications. Also more and more companies use canvas because there is no alternative for complex interactive graphics on the web. CSS animations can only do so much.
It seems really strange to create a new flowfield object upon resize instead of just updating the width and height values in the existing object. That also would have negated the need for canceling the animation.
Hi Johan, you're right, I just wanted to use cancel animation frame to show how it's used. I guess the right way would be to create a public method to set width and height and call it on resize, will do that next time.
Hello, ive tried to follow your Instructions, but i have a Problem just in the beginning. I dont know which IDE you use for the Code, so i downloaded Brackets. But if to work on my JS. File i get Errors, ERROR: Parsing error: The Keyword 'const' is reserved ... ive read its because of the ESLint Config, and something is uncompatibel with the Parser. Could you tell me which Programm/IDE u use?
Hi, I use VS code, from the error you're describing it sounds like you didn't declare your variable correctly, check your spaces, semicolons etc. If you can't resolve this issue, maybe you should do a beginner course first, it will make project tutorials much easier when you get comfortable with declaring variables etc
it depends what you compare canvas with, if you try to do this animation with CSS and HTML where each line is a HTML element, canvas is super fast and can handle thousands more objects at the same time. Compared to webgl canvas is slow, since it's using CPU. They are always improving and optimising it, I'm sure it will just keep getting better
@@Frankslaboratory Yes, you're right. By the way I saw a library, which emulate canvas rendering context 2d interface, but uses webgl. It's really cool. Unfortunately, author didn't complete it (((
learning this type of canvas animation is worthy? is there any real life utilization ? as far as I know that canvas animation use more ram and use processor much more , it may delay to open a webpage , I am curious to know the real , I like canvas but confused
well i think its more about beeing creative and understanding the concepts. if you want to do heavy animations you would probably use a lib/framework that utilizes WebGL/WebGPU.
Yes, you can take it as a coding exercise or something to get creative with, while learning JS, also I usually like to build big effects, you can always scale it down and apply optimisations in the code, to make it faster. It won't delay loading of the webpage, since loading thousands of lines of JavaScript takes microseconds. If the effect is too complex it will affect fps of the webpage and can make it laggy, that's why we learn how to optimise the code.
@@Musfiq77 Make it into animated background fpr some div on a website, or a game. Build an open source library. Particles JS is a very popular 2D animation library. People love creative coding. We need to get creative with how to use it.
Hi Mahmoud, in most videos I usually mention which settings to tweak to make the effect faster on older computers. I think I mentioned it in this video as well. But thank you for reminding me, I need to make sure these effects run fast on every computer. Canvas 2D uses CPU, you would have to use webgl context to use GPU, but the code to do that is more complicated, I hope to make webgl series one day
Hi, if you actually mean 'meaning' of two sentences and you want JavaScript to compare that for you, not even Google AI can do that, if you write that algorithm you will be rich :D If you just want to compare two sentences and see if they are composed of the same letters that's easy, just Google 'how to compare two strings with JavaScript'
It's easy to use JavaScript to make a gif, to make a MP4 video you need to write a codec, that's complex and I don't think people do that. There's software and libraries, I make a lot of videos of my code effects just by recording my screen, which is the easiest option.
After wrapping my draw code in the delta time if statement my moving flow field lines disappear on canvas resize. Anyone else have this problem? Everything else works great, just the delta time portion is giving me trouble.
Figured it out. I didn't pass 0 into the flowField.animation() call inside my "resize" event listener. Thus, the first old time stamp has a value of NaN and breaks my code. Now I see why you pass the 0 Frank!
Hi, you don't need math for frontend, once you know JavaScript and how to structure your animation code it's easy to Google any algorithm you need and insert it, like I did with Pythagoras theorem in this video. It's not really necessary to fully understand that formula to be able to use it.
How did you find my channel? TH-cam search? Reddit?
While I was searching for game development tutorial on YT
Thanks to TH-cam recommendations
i believe it was a yt search on something to do with JS and you earned my sub right there and then
youtube recommendations
ThreePixDroid. Hello from Russia)))
Wow! I'm already quite advanced at JS, and still learned a ton from this. The way you explain all the little details, without presuming anything about what the viewer already knows, is really fantastic. Well done!
This tutorial rises far above the countless tech tutorials I've watched on many different topics. It's superbly well focused and "information dense" in its presentation of the material while both including all necessary details and not ever dragging on and on with "dead space side-tracks" where you just start feeling like, "Ok, get on with it already!"
I watch a lot of videos at substantially accelerated rates and still skip ahead routinely with the right-arrow key, but not this one. This video can be watched at normal playback speed (maybe even slowed, or at least paused once in awhile), without ever skipping ahead, and without ever losing the target due to inappropriately omitted details---because they're all here. Great job!
Oh my goodness, you're blowing my mind, Frank! This is amazing! Keep it up!
Arthur! Thanks for encouraging words ❤🙏
I'm a silent surfer and rarely ever comment. But boy, this stuff is so high quality!
There aren't many resources regarding canvas and generative art (which I'm very interested in learning) and your channel is full of this high-quality content!
Not only the quality is top-notch, but you're a great teacher as well which sets you apart.
Thank you so much for putting in the effort and sharing your knowledge with everyone! May you live a happy, healthy, and prosperous life :)
Hi thank you for leaving such a nice feedback. It means a lot since you say you don't comment often, very happy to read feedback like this. You are right there aren't many canvas and generative art tutorials, especially if you want to do more than draw a simple rectangle and circle. Good luck with your coding studies ! :)
I am a simple man. I see a video by Frank, I press like.
Hahaha, thanks Sagar ❤
holy cow - that's some crazy stuff you've got going on there
only recently discovered your channel, Frank
total respect for the skillage on display; many thanks for sharing your knowledge
I love how you over-explain everything but in a super fast to the point way so if I already know it I can just block it out and move on but if im like huh? I can just go back and get a really clear explanation one of the most informative vids ive seen so far thanks
I know, you've taught . It ans so much to so many people, you are helping us pursue our dreams! Love from Sweden
That intro song is growing on me. I'ma take my lunch break and roll through this. Thanks Frank, inspiring content, as always. (To answer your question: Found your channel by the inside of TH-cam's algorithms when looking up "HTML Canvas". I think you hold a pretty high position on this subject.).
Hi J, I have been using that song a lot haha. Thanks for letting me know, will check my rankings for that keyword :D
Top 10 best coding tutorials I've ever watched!
love the way you explain everything. thanks for everything.
Hi! I'm here to help :)
Geballte Informationen, wirklich effektiv und jepp alles funktioniert. Danke. Ihr seid der „Hammer“.
Glad you found some value!
Watching it... Intro of this video is quite exciting. Goosebumps 🎇🤗
Glad you like the intro, spent some time coding these examples and editing that :D
Just found your channel! WOW!! Straight to the point, no bs, information dense, everything clearly explained without too much repetition.. I LOVE IT!! Thank you and keep up the great work!
Thank you, love this feedback, very kind of you, thank you for taking the time to let me know, If I had a working website I would pin this comment as my viewer testimonial haha
Best Canvas tutorial I've seen so far. Keep it up! Subscribed.
7:30 You can get canvas width and height from ctx. ctx have it`s canvas element as property inside. If size was changed (like in tutorial) you can get variables, else they are undefined.
I actually never tried this, thank you, I appreciate comments like this, will go and test this now
Master Frank, thank you for your contributions
Brilliant presentation , very well explained and liked it
What am amazing video! Love how you are having fun with it, really inspires me to play around.
YOU ARE PHENOMENAL!!!!!!!!!!!!!!!!!!!!
Thank you so much, Frank!!
Glad you found some value
It's nice to get some real world examples of using instructors and objects in general! Thanks, your channel is awesome!
Quick thought on deltaTime, if you reset the counter back to 0 it will only exactly match between devices if the interval is exactly divisible by the frame rate. Better to subtract the interval from the counter
Eg 100ms interval at 60fps and 45fps. As you described, the 60fps will complete the 100ms in 6 frames, however, the 45fps device wont land as neatly. 4 frames takes 88.88ms and 5 frames takes 111.11ms. Within 1 second you’re already adrift by 1 interval. By subtracting the interval from the counter, at the end of the first interval the 45fps device starts at 11.11, ,giving it the boost it needs to stay in step
Hi Andrew. Yes. This is a great explanation. I will try to mention it next time I use delta time because its important to understand. Thank you for taking the time to share with us
@@Frankslaboratory no problem. Having used Unity with C#, using deltaTime in JS is pretty damn cool
very very cool, Frank. thanks.
Yup another one of your tutorials done, this is making JS learning journey very fun
Congratulations on completing the project Ahmed!
thanks for the content!
I believe that you can use arrow functions to avoid the use of bind like this: animate = () =>, arrow functions have autobinding and you don't have to be thinking about contexts
Hi. Thanks for sharing Alex. Yes. Arrow functions inherit this from the parent scope. Lexical scoping
awesome effect.
i didn't think before that this can be done only with lines.
JavaScript can do many cool things, even with basic shapes
Cool tutorials thank you !!!! Could you make tutorials about tile map and tile collisions? ))
Hi Eran, yes I will do that soon, good idea
This is such a complete tutorial in only 50 mins! TH-cam did well to recommend you to me hehehe
Hi Lloyd, nice to meet you, thank you for the feedback, appreciate it!
Extremely insightful.
Just watched half, and already learned how to catch width and height while window resizing!
Cool work!
Hi Estrav, glad you found some value, thank you for letting me know
The way you explain is very understandable! Can you please make a tutorial for moving and zooming in canvas? For example something like google map. Thank you in advance
thank you for the great tutorial!
Best Game Development Channel ever👍👍👍👍👍👍👍👍👍
Thank you Odyek!
Thanks for the canvas tutorial. 🔥🔥👍
Happy to help Sagar
@@Frankslaboratory 🙏🙏❤️👏👏👏👏👏👏
wow nice, thats a look into the world of QuantumMechanicField
Great name, I should have named it quantum mechanic field :D
just...... AWESOME!
Bro, great vids!!💯
Hahahaha woow that's amazing but you know I've got hypnotized by those lines 😵💫 but generally thank you very much for this amazing effort explaining some principles and go step by step without skipping any important information. I've liked and subscribed.
Your tutorial is very good !
Super intro, many videos are usefull
Glad you found it useful, thank you for letting me know :D
Absolute Master Class
If you switch the numbers at the if statement by the distance you get a sphere where the effect works and the rest is lower rotatet
Thank you for sharing, will try this
I have copied all the code into VS studio . Checked for spelling/syntax errors, I can't get the line @12:00 to draw . Am I missing something ??? The getContext method when declaring ctx is not in my list . Do I need to import something , I haven't? Thanks for any help
This is such a thorough video. Great content
Thank you Brent, very happy to see feedback like this
wow just one week ago i found out that JS has its own private property/method syntax (no support from IE).
And now i see a new guide where you talk about it😎
To be honest I also found out recently, it's not something people commonly use but I think it will become more popular soon as more of us learn about it
27:40 about 33 frames after he adds a 0 to the flowField.animate method the console reveals that the first frame of animation took 123.713 milliseconds. My computer spikes on the first frame of animation too, but it's only 21.789 milliseconds. I wonder what causes this.
Love the video .. is there a preferred way to watch the tutorials, ground up, for a beginner?
Thanks for the great content .
Wow, that's really impressive! Thank you so much for making this available on TH-cam ⭐⭐⭐⭐⭐
Hi Tiziano, glad you found some value
Thank you, great video and good explanation!
Hi Tatiana, thank you for letting me know you found my explanations helpful, I appreciate your feedback
Great video, by the way I have the same dress shirt
can i use this for a background website?. and how to do it?
Sir your tuts are pure gold. Thank you
Thank you Farnaam, I appreciate your comment
I enjoy coding because of this channel, 👍👍👍
Really? Thanks for letting me know Max ❤💪
Hey Frank! Consider yourself making a full course on udemy from covering all the basics to doing some projects towards the end of the course. What you do on youtube is amazing and you deserve more attention. Also thank you for your videos! Keep up the good work!!
Hi, thank you, very kind to say that. I might do a full Udemy course eventually when I have more time, for now just TH-cam videos, I have a full time job.
@@Frankslaboratory Just curious to know does your job involves using Canvas or regular Web development stuffs like CRUD app using React,Vue,etc. Because I want to learn Canvas but don't have reason to learn it at the moment. Can you please tell some of the real life applications that leverages HTML5 Canvas instead of DOM and what sort of applications can be made using Canvas.Thanks
No words!!! Keep going!!!
Thank you ❤
Please make a webgl masterclass too.. Your teaching's awesome !
Hi Rithish, I might do some webgl classes as well when I have more time, good idea
Holy shit! If this is for beginners, I hate to see what advanced is going to be like! lol
Most of this is too advanced for me, but I'm doing it anyway! This looks like it's going to be very fun!
Hi Scott, I explain it slowly so I marked it as 'for beginners' but the second half of the video is actually getting quite advanced. I need to get better at rating the difficulty
@@Frankslaboratory It's still a great video nonetheless. I had fun doing it. Always thankful for your content! :)
Это реально круто! ✨
thank you :)
a learn very cool thing on your video thank
Hi Johan, glad you found some value
Great stuff! Would love to see how it could be used within the design of a typical webpage for example.
Hi John, there are many ways to use this, I made this video to give people the tools, it's up to everyone's creativity how they use it
Nice tutorial brother sorry I need to ask you if soft can be installe on Android?
Thank you Arnold very cool
Why Arnold, my accent? :D
I was able to achieve a near perfect replica of the pattern at 39:38. But I notice that when you change the cell size, your pattern just becomes a slightly less detailed version of the same image. So does mine, but also the image is change. It's like it zooms in or something
Excelente video hermano, llevaba meses intentando hacer eso en Canvas y no me salía, muchas gracias!!
HI Sebastian, thank you, that's good to hear, is that a problem for you that my videos are in English and not Spanish or you just look at the code?
@@Frankslaboratory no me causa problemas no es muy bueno mi inglés pero trato de mejorarlo, tu canal lo sigo porque son excelentes tus tutoriales y el código es muy limpio se entiende a la perfección
@@sebastianmoyano7313 Glad to hear that, thanks for letting me know Sebastian
Hey frank! love your videos. have been getting into html canvas recently and am loving it!!! do you recommend any html canvas courses?
Hi Zhuozi, I don't think there are many complete canvas courses. There is some good quality canvas content from channels like Chris courses, but to build different effects and learn different techniques you will have to piece it together from independent tutorials. If I find any good complete course I will make sure to tell everyone :D
@@Frankslaboratory Noticed that too, thanks frank :)
Does we need to change x&y coordinates if we resize window...??
Wow, I got a shoutout :-) Thanks! And, nice video!
Thank you for help with the code :)
@@Frankslaboratory No problem!
Such a valuable video, if you got a link where people can support you let me know
Really curious to know if you think that using hooks would be excessive or complicated or even undoable for this?
Hi, Edward Norton. I'm your biggest fan!! lol.
Hi Sergio, why Edward Norton, is that a HULK reference? :D
@@Frankslaboratory No. It's because you look like him!!
Ahahaha
Can you use the canvas tag in bootstrap?
Thanks alot sir .can you please make video on how could we create 3d stuff through use of 2d canvas?
Hi Himanshu, true 3D takes a lot of code, unless it's just a single cube or something and even that takes A LOT of math. I usually use 'fake' 3D with many different tricks, for example shadows, layers etc. Many 2D things can easily be made look 3D, or at least '2.5D', I will make more content on that soon.
I watched some of you video but things went over my head.
you explain thing but in a little bit fast pace. but in this video you are bit slow which helping to understand what you are doing and saying.
Btw, thanks for such an awesome tutorial
A great series. Many thanks. My only comment is that you talk about data encapsulation in your program structure, but end up creating publicly scope variables when your coding structure breaks down. You might have been better to write a simpler functional program. Cheers.
Hi Thomas, you are right, by the end of video in experiments section I pulled some global variables. I will try to do better next time. thank you for taking the time to comment
YOU ARE GENIUSE
Hi MD, thank you :)
Hi
Could you explain why you can't set canvas height and width via CSS as the container that this is within will scale the canvas which will imply points that plots will not be the same as specified on canvas even though console.log(canvas.width , canvas.height) will report correct size
This has had me going for hours as to why this should be so
Now lest say I need to make the container within which canvas sits flex and I want this to be responsive placing the canvas centre page vertically and horizontally
How do you do this
EG ...
Later CSS
.container{
.display : flex ;
margin: 0 auto ;
justify-content: center;
align-items: center;
width:70vw ;
height:100vh;
border:rgb(124, 6, 6) solid 1px ;
#canvas1{
border:white solid 1px ;
width:600px ;
height:600px ;
}
The only way i found this will plot correctly is by specifying width and height in the JS file for canvas
Please could you explain this part in more detail
Thanking you
EG .... your JS file
window.onload = function(){
canvas = document.getElementById('canvas1');
/* set canvas width and height here otherwise this will NOT DRAW OR PLOT CORRECTLY and will scale the canvas unevenly
doesn't matter what you do within the CSS file or what console.log reports as correct unless you specify height and width here or within the html canvas element
it will not plot correctly */
canvas.width=600 ;
canvas.height= 600 ;
}
/*
Please also make special notes that you cannot retrieve canvas width , height using canvas.width or using canvas.height but instead need t use the following syntax, functions if you then use this syntax as above console. log will report 300 , 150 no matter what you specify in the CSS file which will really have you going
*/
// NB This is quite important
// This is is how this is done !!
// get the width of this canvas
canvasW = canvas.getBoundingClientRect().width;
// get the hight of this object
canvasH = canvas.getBoundingClientRect().height;
Web links here html.spec.whatwg.org/multipage/canvas.html#attr-canvas-width
Otherwise excellent quality , meant with no malice
PS for others and comments we all hear quote typical UK , "Uni students are a waste of time " ,, Are they really ?? How interesting
Is this the same as the p5 library??
A tad confused when you mention hoisting, you say classes don't hoist but yet it is still called in the onload function prior to defining the class?
I am junior ReactJS developer and I was to move backend side. but your tutorials really making me think again where i want to go in my career 😁
please let me know by mastering canvas and animation in JS which job market or clients can be targeted?
do I need to have designing background knowledge as well? As I have no design sense i just provide figma design and develop or make it functional
Пожалуйста, подскажите, как называется мелодия ?? Хочу добавить в свой ежедневный плейлист.))))) Видео вышло 3 недели назад, но TH-cam рекомендует мне его только сегодня. Уж лучше поздно, чем никогда.))))))
Hi, TH-cam has a rule that all featured music needs to be in video description, if you check you can see the name of the song there :)
@@Frankslaboratory thanks
This is how aliens create our reality in their high-school lab.
Yes ahaha. This comment 👌 👏 🤣
hey Frank, what extension are you using for the live preview on VS?
Hi Kevin. I'm using an extension called Live server
looks good!
Thanks man!
Hello, I have a question that I cant seem to work out.
When doing
const img= new Image();
img.src = "path"
Is it possible to get the width and height of the image without the onload function? img.width and img.height return zero. I need this because I want to set the size of the enemies the same as the size of their image.
Hi, you need to wait for the image to load before you can measure it's width and height with JavaScript, it takes only a few miliseconds to load but JavaScript is even faster and it will see the image as 0 x 0 pixels. Load event will wait for all assets to be fully loaded and available before running javascript, that's why we use it.
It's easy to achieve what you want to do, just put all your code inside window.addEventlistener('load', function(){...here...}) at that point inside all images are avalable so just scan the first one for width and height and use those values however you want with the second image
@@Frankslaboratory thank you for this answer!! , it will work wonders for my next project :) .
I created a workaround by starting the game with "starting screen". By the time the user clicks start game (and changes the variable start game to true which is required for the rest of the program), everything is loaded and ready to go.
@@Slokingseba Nice, glad you managed to find a workaround. If you add sounds and more graphics you might have to do the load event anyway but for small projects it's fine
Heyaa 🤩 after a long time, magician, how are you 😄 as always fabulous tutorial 👏👏🎉🎉
Hi Aravind, it's been a while, good to see you here. Thank you ❤ Will take a break from coding until Sunday, spent too much time coding all examples for this video intro :D :D
@@Frankslaboratory you are the best 😀 enjoy the weekend 🎉🎉
Hello frank, I like about your channel..
The way you explain to code with html canvas..
I like to doin this stuff, playing with pattern, colors in html canvas..
I just the beginner of programming world, i start it with Frontend..
But, for frank.. or anyone,
can answer my question please.. about..
If we focuss in the html canvas..
Can we get some job for experting this stuff?
Thanks a lot frank!
Hi Muhammad, yes you can get a job with knowledge we use here. Even if you don't use canvas at work specifically, it's still JavaScript, all we do are important front end skills. I'm using classes, arrays, loops etc. It has many applications. Also more and more companies use canvas because there is no alternative for complex interactive graphics on the web. CSS animations can only do so much.
I like it!!!
Hi Evaristo! :) thank you
It seems really strange to create a new flowfield object upon resize instead of just updating the width and height values in the existing object. That also would have negated the need for canceling the animation.
Hi Johan, you're right, I just wanted to use cancel animation frame to show how it's used. I guess the right way would be to create a public method to set width and height and call it on resize, will do that next time.
Hello, ive tried to follow your Instructions, but i have a Problem just in the beginning.
I dont know which IDE you use for the Code, so i downloaded Brackets. But if to work on my JS. File i get Errors, ERROR: Parsing error: The Keyword 'const' is reserved ... ive read its because of the ESLint Config, and something is uncompatibel with the Parser.
Could you tell me which Programm/IDE u use?
Hi, I use VS code, from the error you're describing it sounds like you didn't declare your variable correctly, check your spaces, semicolons etc. If you can't resolve this issue, maybe you should do a beginner course first, it will make project tutorials much easier when you get comfortable with declaring variables etc
Why canvas is so slow?((( I wnat to do such crazy effect as we get when cellSize value is 3. I hope it will be optimized in the future.
it depends what you compare canvas with, if you try to do this animation with CSS and HTML where each line is a HTML element, canvas is super fast and can handle thousands more objects at the same time. Compared to webgl canvas is slow, since it's using CPU. They are always improving and optimising it, I'm sure it will just keep getting better
@@Frankslaboratory Yes, you're right. By the way I saw a library, which emulate canvas rendering context 2d interface, but uses webgl. It's really cool. Unfortunately, author didn't complete it (((
learning this type of canvas animation is worthy? is there any real life utilization ? as far as I know that canvas animation use more ram and use processor much more , it may delay to open a webpage , I am curious to know the real , I like canvas but confused
well i think its more about beeing creative and understanding the concepts.
if you want to do heavy animations you would probably use a lib/framework that utilizes WebGL/WebGPU.
Yes, you can take it as a coding exercise or something to get creative with, while learning JS, also I usually like to build big effects, you can always scale it down and apply optimisations in the code, to make it faster. It won't delay loading of the webpage, since loading thousands of lines of JavaScript takes microseconds. If the effect is too complex it will affect fps of the webpage and can make it laggy, that's why we learn how to optimise the code.
@@Frankslaboratory actually I want to know this type of things has any real life utilization?not for just only js exercise or practice
@@Musfiq77 Make it into animated background fpr some div on a website, or a game. Build an open source library. Particles JS is a very popular 2D animation library. People love creative coding. We need to get creative with how to use it.
I love your content but my poor laptop is dying.,can we use the GPU instead of the CPU for all of this calculation?
Hi Mahmoud, in most videos I usually mention which settings to tweak to make the effect faster on older computers. I think I mentioned it in this video as well. But thank you for reminding me, I need to make sure these effects run fast on every computer. Canvas 2D uses CPU, you would have to use webgl context to use GPU, but the code to do that is more complicated, I hope to make webgl series one day
@@Frankslaboratorythank you for the explanation, I am looking forward for the upcoming videos.
Hey Frank, can we check if the meaning of two sentences are equal in JavaScript. I need it for my next project
Hi, if you actually mean 'meaning' of two sentences and you want JavaScript to compare that for you, not even Google AI can do that, if you write that algorithm you will be rich :D If you just want to compare two sentences and see if they are composed of the same letters that's easy, just Google 'how to compare two strings with JavaScript'
@@Frankslaboratory Thank you
Hi bri it is nice and i want to change this animation into video . Can you please tell me how to do this ?? Thank you bro
It's easy to use JavaScript to make a gif, to make a MP4 video you need to write a codec, that's complex and I don't think people do that. There's software and libraries, I make a lot of videos of my code effects just by recording my screen, which is the easiest option.
After wrapping my draw code in the delta time if statement my moving flow field lines disappear on canvas resize. Anyone else have this problem? Everything else works great, just the delta time portion is giving me trouble.
Figured it out. I didn't pass 0 into the flowField.animation() call inside my "resize" event listener. Thus, the first old time stamp has a value of NaN and breaks my code. Now I see why you pass the 0 Frank!
Super
Thank you
Really deep css
Thank You!
Hi Gergely, i'm here to help :)
Hi franks. Do we need any maths knowledge? If we need could you please take a udemy course. I'm also your big fan
Hi, you don't need math for frontend, once you know JavaScript and how to structure your animation code it's easy to Google any algorithm you need and insert it, like I did with Pythagoras theorem in this video. It's not really necessary to fully understand that formula to be able to use it.