These tutorials are great, it's not just a code-along, you explain everything as you go. One thing I have to add, might be new since these videos were recorded, just use the line ' window.onresize = () => location.reload(); ' instead of adding event listeners and an init function, etc. Thank you for these videos, I will be looking for more of your content!
Tnx for putting in so much effort doing these tutorials Chris!! Honestly having searched everywhere i could not find any as good as your's, You Rock man!
Chris, Thank you for teaching me and everybody else who has clicked on this video what they came to learn. This has helped me a lot. I figured I would return the favor by saying instead of resizing the canvas every time the window listens to the resize event, you could refresh the website instead. Not only will it keep circles from spawning making the program more laggy, it will also prevent the sizes being broken.
Your Videos Have taught me everything I know about javascript/HTML 5 canvas animation! I will make sure to spread your channel where ever I can so that more people can experience your videos and learn through your amazing style of teaching.
for c in circle array { if c.x > innerwidth splice(circleArray, c)) | if c.y > innerheight splice(circle array, c)} // remove circles that are past the bounds of the canvas for var i= circle array.length, i < ciel(innerwidth*.75), i++ // generate circles to cover most of the white space
I've just watched all the 4 episodes and I'm simply amazed by your coding intelligence and teaching skills. I've subscribed. Gonna watch the videos again to try out myself.
Hi Chris. This is a great tutorial! One suggestion. When I set out to implement a version of this script, I noticed that when the mouse leaves the active window, larger shapes keep on being created on the last mouse position that the browser "remembers". This is not necessarily at the borders. When you move the mouse out fast, this can also be elsewhere in the canvas. I solved this by adding one more eventlistener, like this: window.addEventListener("mouseout", function(event){ mouse.x = undefined; mouse.y = undefined; });
Brilliant! JUST BRILLIANT! Your tutorials did a great impact on my learning curve. Please, pretty please, don't stop at 4 episodes. I'm famished for knowledge and your videos hits the spot perfectly! You don't know how grateful I am to you, if I'm not halfway across the globe, I'd be on my knees begging for more tutorials in front of you right now. LOL. But seriously, I hope to see more from you soon, bud! Cheers! :)
Hey man, thanks so much for such a kind comment, I've said it a few times before, but hearing things like this motivates me even more to produce the best videos I possibly can. Glad you enjoyed the series, and I can guarantee you, more canvas videos are on the way! This week's vid is going to focus on authentication with Node.js, so a bit more backend oriented than this series, but still helpful nevertheless if you're interested in building Node apps. Release is this Thursday. Enjoy, thanks again for the nice comment, and keep on devvin :)
No worries, man. Everything you do is much appreciated. :) My goal is to be a front end developer to be honest but any lesson you throw in here would be something to add in my portfolio so, by all means please, I'm ready to learn my friend. See you on thursday!
Hiya, not sure if you saw the update, but the Thursday released got delayed due to some unfortunate technical issues along the way. Making up for it by releasing three videos this week instead of just one. We'll get you to front end dev status with some hard work, practice, and real life projects. If you'd like some guidance on where to go or what skills would be helpful for you to learn, let me know and I'll provide what I know from my own experiences. Always more than glad to help others achieve their goals and get to where they want to be.
My apologies on delayed response. I'm a bit swamped on studies lately. :| Anyways, I'd appreciate your guidance in front end dev. Currently, I'm a bit confident about my HTML/CSS and jQuery skills. As well as SVG animations and stuff like that. I find coding a fully responsive website from scratch fairly easily now too. :) However, I think I still lack in vanilla JS. I know the fundamentals, but I still find it confusing at times. I'm pretty sure there's something wrong with how I engage JS as I still confuses the h*ll outa' me. lol. I understood the lessons you've taught in JS just fine, it's just rather difficult for me to write JS on my own. If you could help a brother out and show me the right approach into learning JS that would be really nice! :)
Yeah totally, I remember I used to be in your exact same predicament. When it comes to learning JS, what's helped me the most is trying to code things I'd normally code in jQuery with, with just pure vanilla JavaScript. So for instance, instead of selecting my elements with the classic $(".element") selector, I would force myself to figure out how to select things using document.querySelector('.element); instead. That's just the start, but trying to do things w/o jQuery will definitely amp up your understanding of the JS language as a whole. Now this isn't a pure replacement for jQuery (I still use jQuery within a ton of my projects), but for learning purposes it's a fantastic method. Also, I've read a really, really great book on JS I think you may enjoy as well. Check out www.amazon.com/JavaScript-JQuery-Interactive-Front-End-Development/dp/1118531647, very easy to understand book for anyone looking to enhance their JS skills. Let me know if that helps :)
This is great! I was just practicing JS using the canvas, implementing arrowkey interactivity on objects have a smooth friction function on them as well when they are not accelerating. These tutorials compliments my small projects very well. Thanks alot for posting these.
Great to hear, I'm actually working on a gravity related canvas tutorial right now, including some tips on how to implement gravity and friction. Might be able to help out a bit even more, we'll see :)
Looking forward to that. One thing that I found a bit more challenging to do was round object collision. As far a I know, there are no good tutorials on the topic either... ;)
This is real quality, and a lot of fun to experiment with. Thanks! I learned so much, and I've watched just the first four videos. Can't wait to check out the others.
for the first time , i came to know where to use object oriented approach with your great canvas tutorial , hats off to what u r doing . i m expecting that u will continue to share your experience with us #giveBack , Channel subscribed
I'm so glad I found your channel this is such an awesome tutorial and so in depth now I actually can make cool things with canvas not just ugly shapes.
Teaching real world examples with engaging visuals is the goal, I myself doze off while watching some of the typical "Hello World" tutorials you find across the web. Glad you've been enjoying things, will continue to do my best to help.
Thanks Abhishek, really appreciate the support! I've been making some premium courses over at chriscourses.com, but will definitely be back here with some free content very soon. Looking forward to helping you learn.
Believe this or not.. your first three lectures... made me such confident.. that I paused your this tutorial before looking at any function what you were about to teach... and did that myself.. and that was 99% the same way .. what you did.. although the variables and code positions were different.. but output was the same.. btw.. on resizing.. instead of re-initializing the only expanding particles to white space were more sexy ;)
Hey man, thank you for the great tutorial. This is a really well explained and practical way to learn the fundamentals of canvas so I can now start experimenting. There were only a few things I had to go back to and watch again. Great explanations, thorough, and excellent pacing. I got through this series in 2 days. Thank you!
You're a very skilled educator in addition to an awesome visual programmer. I'm making the switch from Processing and Processing JS to fully dive into HTML 5 Canvas. These are great tutorials to learn the syntax changes. 500 Internet points to you. :-)
Chris! Thanks so much for this series - it helped me out tremendously. Everything is good to go with my project as far as functionality. Moving on to CSS to make it look pretty. Thanks again!
Thank you thank you Spencer, super glad to hear how much this helped you out. I saw your previous comment and wanted to let you know you can view some of the finished code here: codepen.io/christopher4lis/pen/MyaGvr Hope that helps bro, will be posting updates this week about new vids and site enhancements on social. Stay tuned.
At 8.35 if we want to get the distance between the mouse and the circles, we should use the pythagorean theorem. Without it you will simply test if the circles are inside a square thats tilted 45 degrees to any direction, as we are doing at 8:35, but still, thanks a lot of these canvas videos, they were really nice and helpful, even if they were sometimes too predictable and easy, but that's understandable, because you make videos for beginners.
your tutorials are amazing. love how you explain things all the way through, 10/10 better than my lecturer, wish i paid to watch you teach instead! keep up the good work man,
Excellent tutorial! The best I found on TH-cam, actually! You helped me understand canvas and how to use it so well that I can now finish this little project of mine. Thank you so much! Liked and subbed!
@@Stevesteacher Oh awesome, I literally just launched that new version yesterday-lots of hard work put into, and more to come! Going to try and get progress tracking for videos in place.
The easiest way to describe `Math.floor`, is that it removes everything after the decimal place. So 3.96389, just ignore everything after the decimal, so you get 3. Same goes for `Math.ceil` (short for "ceiling"). Drop all the decimals, and add 1 to the number. 3.96389 = 3 = 3 + 1 = 4. As an aside, this is how most of the JS interpreters will handle this in C (the language most of the engines/interpreters are written in).
Man you are really good at explaining. I implemented your animation, made a few tweaks here and there and applied your coding logic to create the same animation using rectangles this time around. Will definitely check out your other tutorials
23:21 Looks like you removed the animate() and replaced it with init() instead of putting it before the animate() - took me a few min to figure out why nothing was happening :) Great tutorial by the way!
Hey there, just saw all of your comments. Thanks so much for all of the kind words, glad I could help and share some knowledge along the way. More videos to come :)
I really like this effect and you did a good job explaining the process. I was wondering can you give more details on the logic that some of the circles drift over or behind others?
Simpler way of making the dots return to their original size: in the if else if statement under // interactivity, } else if (this.radius > radius) { this.radius -= 1; } it forces them to shrink until they reach their original radius, then once they do they stop shrinking.
so this was really amazing I created this and instead of using five colors I just added random colors into it whose code was like function randomColor(){ let letters = "0123456789ABCDEF"; let color = "#"; for(let i = 0 ; i < 6 ; i++){ color += letters[Math.floor(Math.random()*16)]; } return color; } and then called in our for loop of circle array . push and sent it as argument and used it in fillStyle method of our circles...... Also generate 2000 circles with removing c.clearRect() function and just look at the magic how beautiful and artistic it really is ..... Thanks a lot chris brdr you are really Amazing
This week's video will be focuses on authentication with Node.js (Thursday release), but after that, I'd like to create a tutorial on integrating canvas visualizations that react to sound. Would also like to start up on those gravity and canvas movement tutorials when I can. Hope you're excited, thanks for tuning in again, and I look forward to keep on doing my best to up your dev skills :)
Chris Courses Thing is, I'm still new to JS too and I find it kind of difficult. I think there are a lot of weird parts in JS. lol. Though, your JS explanations are clear in the recent videos and I'm really digging it. :) I just hope that me being new to JS, won't be an issue for the next lesson. :/ Anyway, I'm always excited by your channel's content and I keep on checking it for updates as your lined up lessons of choice are really interesting. Thanks, bud :)
I will say, even through the advanced topics, I try my best to make every bit of code understandable along the way. Things will seem hard at first (I'm a year or so into the node scene and it still seems hard to me), but if you stick with it, I guarantee things will begin to click. Programming is like one giant puzzle: you learn a little bit at a time, and eventually the pieces start putting themselves together. Otherwise, I'll do my damnedest to ensure everything is as clear as possible. Like always, thanks a ton for tuning in, and keep it up :)
Yeah, I'm telling you you're doing a fantastic job on this tutorials, I just love how you make programming look easy. :) Just saw you uploaded a new video. I'll try my best to keep up with that series, hope I can get it.. Then maybe afterwards we can go back and add more awesome Canvas/JS series? Love those! And I love you for doing it. lol. Keep it up! :)
Nice tutorial and very useful as my first play with canvas. Just as a word of warning for those that play with the code, if you have your mouse at the corner of the canvas you can trap the circles, so much so that it actually marked my screen after leaving it for 5 minutes... accidentally. Thankfully it recovered after about 20 mins and I identified the issue which is due to the simple reversing of speed (this.dx & this.dy) when the radius is growing as it starts to flip flop as the value plus the radius is always bigger than the width / height. My solution was to declare a this.edgeArray with 4 values indicating our state at each edge and then only allowing you to reverse the speed (this.dx & this.dy) when the array for that edge was set to false as shown in the following code snippet which you simply then repeat for checking each edge. this.edgeArray = [false,false,false,false]; this.update = function(number){ if (this.x + this.radius > canvas.width) { if (this.edgeArray[1] === false) { this.dx = -this.dx; this.edgeArray[1] = true } } else { this.edgeArray[1] = false } if (this.x - this.radius < 0) { if (this.edgeArray[0] === false) { ......... With this fully implemented full size circles should simply bounce. I then went on to updating the code so the circles burst when they hit the maximum size and disappeared, all a bit of fun. Hope this helps.
Would like to see a tutorial playlist for javascript with canvas. How to set a "class" in javascript, what is a function, how do I seperate my code in different files :D
I think learning how to separate your code within separate files is one of the most important topics a new developer should learn. I believe a refresh on webpack and an intro to modules is needed, thanks for the suggestion!
It's very important to note that an HTML canvas has two sizes: the size on the page (in CSS pixels) and the size in memory (true number of image pixels). For example, you could set the canvas.width = 1280 to use 1280 pixels in memory but display the canvas at 100% of the screen width using CSS by setting canvas.style.width="100vw". On a 1280 display they would be almost the same size but on a 4K display the size on screen would be almost 4K pixels but you wouldn't be using extra memory drawing your pixels. You can change the CSS size and the apparent size on the screen (by using canvas.style.width and canvas.style.height) without problems but if you ever set canvas.width or canvas.height (even to the same size) then in resets the canvas back to blank - it isn't smart enough to resize the actual canvas in memory for you (you would have to manually copy its state as an image and then redraw it as an image on the canvas after resizing it). You can use lower resolutions for better performance (yet fill the screen size) or higher resolutions to make use of high DPI displays, such as a 4K screen on a laptop or a 1920x1080 screen on mobile phone. A useful trick is to set a canvas.width and .height to the full screen size before you start drawing. That way you will never be in the position of wanting to increase the memory size of the canvas so you'll never need to reset it. If they make their window smaller you just change the CSS canvas size to match. If you set the CSS style width to "100vw" (which means 100% of the viewport width) and style height to "100vh" it will dynamically resize the canvas for you to keep it filling the screen, without resetting/losing the canvas in memory. A side effect is that the aspect ratio will change if the user changes the ratio of the window, so an circles will become ellipses, etc., because you end up with non-square pixels. If you simply set the CSS canvas.style.width and height, then the canvas will stay the default size in memory (try it!) which is normally a measly 300x150 and will therefore look very blocky unless on a very small screen (e.g., mobile phone). Setting position:fixed (in CSS) also makes things easier since it fixes the position in the viewport regardless of scrollbars and the document below and browser quirks/peculiarities.
@@unknownperson7265 If I remember correctly, there was a problem with the canvas not lining up exactly with the viewport but setting the position to fixed helped solve it. Browsers can be weird and inconsistent. A webpage normally includes elements that flow one after the other but if you want the canvas to fill the whole viewport, position:fixed helped. Try it out; I was using Chrome.
Hey Guys :) Seeing as this whole course is based on randomizing numbers I made a little function that will take in a min and max value and give you a random number between those 2 numbers. Been super useful following along as it becomes really tedious to keep doing the whole Math.random() dealio. function grn(min, max) { let random = Math.floor(Math.random() * max + 1); return random >= min ? random : grn(min, max); } Btw Chris thanks for this course! Its really so much fun to follow along and just mess around with all the parameters and see what weird and whacky things I can create :D
When you make a circle grow or shrink, how could you make it follow a certain curve (e.g. smooth, exponential, parabolic, S-curve) instead of a linear slope?
Hello Chris, I saw your portfolio and its amazing. Your projects are too good. Can you please make tutorials on your projects especially the stars one?
Hey there, I think this is a great idea. One advanced skill to learn in regards to creating canvas pieces is grouping objects together. Maybe I'll use the star piece to cover just that :) A few of my canvas projects are star related, let me know if Star Shower is the one you're referring to and we'll go from there.
I love it so far. Although I have a question. I can't seem to find a good way to implement text ontop of the canvas so far. How do I do this? THank you!
One thing you may like as an extra I put in my code was for the number of circles to draw, I set it as parseInt(window.innerWidth / 8); Therefore the amount of circles created is proportionate to the window size
1:10 Remove the "over and over" part. It's not like the function is gonna fire endlessly when the event is occurring. No, it's gonna fire once. The "over and over" is only true in the meaning that it won't fire just once - it'll fire whenever the browser tells the event to fire, which will trigger the listener that you create as well. This is a much better explanation when you consider the "removeEventListene()" as well.
An amazing and Quality course, glad that it is free and on youtube.
These tutorials are great, it's not just a code-along, you explain everything as you go. One thing I have to add, might be new since these videos were recorded, just use the line ' window.onresize = () => location.reload(); ' instead of adding event listeners and an init function, etc. Thank you for these videos, I will be looking for more of your content!
Tnx for putting in so much effort doing these tutorials Chris!! Honestly having searched everywhere i could not find any as good as your's, You Rock man!
Chris,
Thank you for teaching me and everybody else who has clicked on this video what they came to learn. This has helped me a lot. I figured I would return the favor by saying instead of resizing the canvas every time the window listens to the resize event, you could refresh the website instead. Not only will it keep circles from spawning making the program more laggy, it will also prevent the sizes being broken.
Your Videos Have taught me everything I know about javascript/HTML 5 canvas animation! I will make sure to spread your channel where ever I can so that more people can experience your videos and learn through your amazing style of teaching.
for c in circle array { if c.x > innerwidth splice(circleArray, c)) | if c.y > innerheight splice(circle array, c)} // remove circles that are past the bounds of the canvas
for var i= circle array.length, i < ciel(innerwidth*.75), i++ // generate circles to cover most of the white space
you deserve more subscribers broo.... there are very few ppl out there who are good programmers as well as have a good teaching skill.
I think thia might be the best TH-cam programming tutorial I have ever watched.
Best tutor hands down. Great series. Learnt a lot in a short amount of time. Everything is connected and makes sense. Thank you so much.
I've just watched all the 4 episodes and I'm simply amazed by your coding intelligence and teaching skills. I've subscribed. Gonna watch the videos again to try out myself.
Awesome man, glad to hear it, let me know if you have any questions along the way.
Chris Courses Sure!
Thnx chris a lot. I felt very good watching this video series and I started making games using canvas. Love you man
Incredibly awesome and impressive video series. Stayed engaging throughout and went from simple to in-depth but was never overwhelming. Thx.
Hi Chris. This is a great tutorial!
One suggestion.
When I set out to implement a version of this script, I noticed that when the mouse leaves the active window, larger shapes keep on being created on the last mouse position that the browser "remembers". This is not necessarily at the borders. When you move the mouse out fast, this can also be elsewhere in the canvas. I solved this by adding one more eventlistener, like this:
window.addEventListener("mouseout", function(event){
mouse.x = undefined;
mouse.y = undefined;
});
man, you are awesome,no body teaches this much in detail not even at college lol.
you are a legend. god bless you.
I'm very appreciate for this high quality courses, it's full of detail and friendly for engineers!
Brilliant! JUST BRILLIANT! Your tutorials did a great impact on my learning curve. Please, pretty please, don't stop at 4 episodes. I'm famished for knowledge and your videos hits the spot perfectly! You don't know how grateful I am to you, if I'm not halfway across the globe, I'd be on my knees begging for more tutorials in front of you right now. LOL. But seriously, I hope to see more from you soon, bud! Cheers! :)
Hey man, thanks so much for such a kind comment, I've said it a few times before, but hearing things like this motivates me even more to produce the best videos I possibly can. Glad you enjoyed the series, and I can guarantee you, more canvas videos are on the way!
This week's vid is going to focus on authentication with Node.js, so a bit more backend oriented than this series, but still helpful nevertheless if you're interested in building Node apps. Release is this Thursday.
Enjoy, thanks again for the nice comment, and keep on devvin :)
No worries, man. Everything you do is much appreciated. :)
My goal is to be a front end developer to be honest but any lesson you throw in here would be something to add in my portfolio so, by all means please, I'm ready to learn my friend. See you on thursday!
Hiya, not sure if you saw the update, but the Thursday released got delayed due to some unfortunate technical issues along the way. Making up for it by releasing three videos this week instead of just one.
We'll get you to front end dev status with some hard work, practice, and real life projects. If you'd like some guidance on where to go or what skills would be helpful for you to learn, let me know and I'll provide what I know from my own experiences.
Always more than glad to help others achieve their goals and get to where they want to be.
My apologies on delayed response. I'm a bit swamped on studies lately. :|
Anyways, I'd appreciate your guidance in front end dev. Currently, I'm a bit confident about my HTML/CSS and jQuery skills. As well as SVG animations and stuff like that. I find coding a fully responsive website from scratch fairly easily now too. :)
However, I think I still lack in vanilla JS. I know the fundamentals, but I still find it confusing at times. I'm pretty sure there's something wrong with how I engage JS as I still confuses the h*ll outa' me. lol. I understood the lessons you've taught in JS just fine, it's just rather difficult for me to write JS on my own.
If you could help a brother out and show me the right approach into learning JS that would be really nice! :)
Yeah totally, I remember I used to be in your exact same predicament. When it comes to learning JS, what's helped me the most is trying to code things I'd normally code in jQuery with, with just pure vanilla JavaScript. So for instance, instead of selecting my elements with the classic $(".element") selector, I would force myself to figure out how to select things using document.querySelector('.element); instead.
That's just the start, but trying to do things w/o jQuery will definitely amp up your understanding of the JS language as a whole. Now this isn't a pure replacement for jQuery (I still use jQuery within a ton of my projects), but for learning purposes it's a fantastic method.
Also, I've read a really, really great book on JS I think you may enjoy as well. Check out www.amazon.com/JavaScript-JQuery-Interactive-Front-End-Development/dp/1118531647, very easy to understand book for anyone looking to enhance their JS skills.
Let me know if that helps :)
This course is a masterpiece! thank you so much Chris!
Glad it was helpful! Thanks Diego.
I don't know why I took so much time to find this channel. Your tutorials on canvas are awesome!
Did not know I could learn this much in 2 hour. Perfect that I can now make cool effects for browsers.
This is great! I was just practicing JS using the canvas, implementing arrowkey interactivity on objects have a smooth friction function on them as well when they are not accelerating. These tutorials compliments my small projects very well. Thanks alot for posting these.
Great to hear, I'm actually working on a gravity related canvas tutorial right now, including some tips on how to implement gravity and friction. Might be able to help out a bit even more, we'll see :)
Looking forward to that. One thing that I found a bit more challenging to do was round object collision. As far a I know, there are no good tutorials on the topic either... ;)
Learned how to correct my mistakes! It's also a first step for debugging simple syntax errors. Thanks!
This series was extremely awesome, thank you for taking the time to put it together!
Anytime bro, thanks for watching!
@@ChrisCourses I wish you had the code somewhere so we could download it and look at it
thank you so much chris! i am coding for my first game ever in js and you’re helping me a lot ! 🤙🏾
Thanks so much Christ, your efforts on this help so many people
window.onresize = function(){ location.reload(); }..... Use this while resizing....... Great Vid as usual
This is real quality, and a lot of fun to experiment with. Thanks! I learned so much, and I've watched just the first four videos. Can't wait to check out the others.
thank you very much for this tutorial! the best material on the topic still - 7 years later
Tutorial was really awesome...! It is not easy to forget your style of teaching......
That's what I like to hear, thanks Rohit!
for the first time , i came to know where to use object oriented approach with your great canvas tutorial , hats off to what u r doing . i m expecting that u will continue to share your experience with us #giveBack , Channel subscribed
Fantastic set of tutorials! I feel like I learnt a lot and it was all so fun along the way. Congrats! Liked and Subbed
Just a comment to support the channel. Keep up the good work. Very interesting content.
I'm so glad I found your channel this is such an awesome tutorial and so in depth now I actually can make cool things with canvas not just ugly shapes.
Teaching real world examples with engaging visuals is the goal, I myself doze off while watching some of the typical "Hello World" tutorials you find across the web. Glad you've been enjoying things, will continue to do my best to help.
I'm late to the show..! Thanks for this wonderful series, Chris.
It was awesome learning from you :)
Looking forward to more videos
Thanks Abhishek, really appreciate the support! I've been making some premium courses over at chriscourses.com, but will definitely be back here with some free content very soon. Looking forward to helping you learn.
another piece of tutorial brilliance, thx m8!
Thanks man, appreciate the comment!
Believe this or not.. your first three lectures... made me such confident.. that I paused your this tutorial before looking at any function what you were about to teach... and did that myself.. and that was 99% the same way .. what you did.. although the variables and code positions were different.. but output was the same..
btw.. on resizing.. instead of re-initializing the only expanding particles to white space were more sexy ;)
Hey man, thank you for the great tutorial. This is a really well explained and practical way to learn the fundamentals of canvas so I can now start experimenting. There were only a few things I had to go back to and watch again. Great explanations, thorough, and excellent pacing. I got through this series in 2 days. Thank you!
Can't believe he made this 4 years ago. To much quality
Props man, appreciate the support
You just got a new subscriber, this is the best tutorial video that i've ever seen
Amazingly high viewer retention rate on this series! (awesome)
boy, that was some techno creativity. Liked it. superb!
What an amazing tutorial Chris
this course is super exciting . your teach javascript great
You're a very skilled educator in addition to an awesome visual programmer. I'm making the switch from Processing and Processing JS to fully dive into HTML 5 Canvas. These are great tutorials to learn the syntax changes. 500 Internet points to you. :-)
Thanks bud, appreciate the nice comment-been learning a ton as of late as well, need to get back into the routine of releasing consistent videos ;)
Why switching from Processing JS to Canvas? Aren't they better?
Chris! Thanks so much for this series - it helped me out tremendously. Everything is good to go with my project as far as functionality. Moving on to CSS to make it look pretty. Thanks again!
Thank you thank you Spencer, super glad to hear how much this helped you out. I saw your previous comment and wanted to let you know you can view some of the finished code here: codepen.io/christopher4lis/pen/MyaGvr
Hope that helps bro, will be posting updates this week about new vids and site enhancements on social. Stay tuned.
Your the man!
Thank you for the amazing tutorial. It was short, clear, easy to understand and GR8.. Keep the good work coming..
Thank you! Glad you love the videos as much as we love making them. Feel free to let us know if you want to see anything specific.
At 8.35 if we want to get the distance between the mouse and the circles, we should use the pythagorean theorem. Without it you will simply test if the circles are inside a square thats tilted 45 degrees to any direction, as we are doing at 8:35, but still, thanks a lot of these canvas videos, they were really nice and helpful, even if they were sometimes too predictable and easy, but that's understandable, because you make videos for beginners.
your tutorials are amazing. love how you explain things all the way through, 10/10 better than my lecturer, wish i paid to watch you teach instead! keep up the good work man,
Excellent tutorial! The best I found on TH-cam, actually! You helped me understand canvas and how to use it so well that I can now finish this little project of mine. Thank you so much! Liked and subbed!
Jolly good tutorial mate, looking forward to more content! Also, your stuff all looks very nice, 10 points for design and colour considerations.
Thanks Adrian, gotta make sure I'm taking into account both aesthetics and functionality :)
Dude, I just went to your webpage... Oh my fuq, it looked amazing! You have amazing skill!
Steve's teacher which one? Just launched some new stuff the other day heh
@@ChrisCourses the one in your description, it blew my mind, the design was amazing and it was so interactive
(chriscourses.com)
@@Stevesteacher Oh awesome, I literally just launched that new version yesterday-lots of hard work put into, and more to come! Going to try and get progress tracking for videos in place.
@@ChrisCourses Duuude, that's gonna be awesome! I'll definitely go check it out once it has been added to your page!
The easiest way to describe `Math.floor`, is that it removes everything after the decimal place. So 3.96389, just ignore everything after the decimal, so you get 3.
Same goes for `Math.ceil` (short for "ceiling"). Drop all the decimals, and add 1 to the number.
3.96389
= 3
= 3 + 1
= 4.
As an aside, this is how most of the JS interpreters will handle this in C (the language most of the engines/interpreters are written in).
You do a terrific job with these videos.
Hoping to see you in the top tech channels soon😊
Hope to see that too 🙌🙌🙌
hey man, came across your channel tonight. This canvas series is great, have learnt so many nuances in JS that I didn't grasp before :)
I just finished the series and it's really cool! Thank you!
Man you are really good at explaining. I implemented your animation, made a few tweaks here and there and applied your coding logic to create the same animation using rectangles this time around. Will definitely check out your other tutorials
Man you are amazing! Your videos are so informative. Really glad I found your channel.
Perfect tutorial, this really opened my eyes to what canvas can do, many thanks!
You're explaining so good! Thank you, I had so much fun learning these stuff!
You're welcome, glad I could help!
23:21 Looks like you removed the animate() and replaced it with init() instead of putting it before the animate() - took me a few min to figure out why nothing was happening :) Great tutorial by the way!
Thanks for telling, I put init and deleted animate first, and then kept before animate. Now working.
Yes, but why is it still working in the demo???
@@SquaredbyX he did not deleted it, animate() is just underneath and we can't see it
function animate(){
requestAnimationFrame(animate);
c.clearRect(0, 0 , innerWidth, innerHeight);
for(var i = 0; i < circleArray.lenght; i++){
circleArray[i].update();
}
}
init();
animate();
not working...
Nicely explained and very helpful for beginners. Appreciate.
Awesome tutorial! Can't wait for gravity implementation! :D
Also can't wait for the HTML5 Canvas Games!!! :D
Thank you! Can't wait either, both gravity and the canvas game courses should be a lot of fun, hope to see you there!
Just awesome tutorial! looking forward to see more. Thanks for sharing the knowledge.
Hey there, just saw all of your comments. Thanks so much for all of the kind words, glad I could help and share some knowledge along the way. More videos to come :)
Great job making this tutorial. It was incredibly helpful. Much appreciation for your work.
You are smart and young and hey you are helping too!
Thanks buddy for this wonderful video.
Thank you very much!!! I love how you explain the code ! Please keep making some more videos :)
I really like this effect and you did a good job explaining the process. I was wondering can you give more details on the logic that some of the circles drift over or behind others?
Simpler way of making the dots return to their original size: in the if else if statement under // interactivity,
} else if (this.radius > radius) {
this.radius -= 1;
}
it forces them to shrink until they reach their original radius, then once they do they stop shrinking.
Great! This is the best tutorial on this subject ever! :D
Awesome, glad you think so, more to come :)
Chris Courses can't wait! :)
You are amazing man!!!
Amazing tutorial. Very well explained! Thank you very much for sharing!
Nice set of episodes, good job! Although, an epilepsy warning before 16:17 would've been great ahah
so this was really amazing I created this and instead of using five colors I just added random colors into it whose code was like
function randomColor(){
let letters = "0123456789ABCDEF";
let color = "#";
for(let i = 0 ; i < 6 ; i++){
color += letters[Math.floor(Math.random()*16)];
}
return color;
}
and then called in our for loop of circle array . push and sent it as argument and used it in fillStyle method of our circles...... Also generate 2000 circles with removing c.clearRect() function and just look at the magic how beautiful and artistic it really is ..... Thanks a lot chris brdr you are really Amazing
Now playing around with my newly learned canvas techniques. Thank you for this, Chris! Will we be seeing more episodes any time soon?
This week's video will be focuses on authentication with Node.js (Thursday release), but after that, I'd like to create a tutorial on integrating canvas visualizations that react to sound. Would also like to start up on those gravity and canvas movement tutorials when I can.
Hope you're excited, thanks for tuning in again, and I look forward to keep on doing my best to up your dev skills :)
Chris Courses Thing is, I'm still new to JS too and I find it kind of difficult. I think there are a lot of weird parts in JS. lol. Though, your JS explanations are clear in the recent videos and I'm really digging it. :)
I just hope that me being new to JS, won't be an issue for the next lesson. :/
Anyway, I'm always excited by your channel's content and I keep on checking it for updates as your lined up lessons of choice are really interesting. Thanks, bud :)
I will say, even through the advanced topics, I try my best to make every bit of code understandable along the way.
Things will seem hard at first (I'm a year or so into the node scene and it still seems hard to me), but if you stick with it, I guarantee things will begin to click. Programming is like one giant puzzle: you learn a little bit at a time, and eventually the pieces start putting themselves together.
Otherwise, I'll do my damnedest to ensure everything is as clear as possible. Like always, thanks a ton for tuning in, and keep it up :)
Yeah, I'm telling you you're doing a fantastic job on this tutorials, I just love how you make programming look easy. :) Just saw you uploaded a new video. I'll try my best to keep up with that series, hope I can get it.. Then maybe afterwards we can go back and add more awesome Canvas/JS series? Love those! And I love you for doing it. lol. Keep it up! :)
amazing series! thank you for these tutorials
btw if your circles get a border (really thin)
write where strokestyle();
was and write
c.strokestyle = this.color
Nice tutorial and very useful as my first play with canvas.
Just as a word of warning for those that play with the code, if you have your mouse at the corner of the canvas you can trap the circles, so much so that it actually marked my screen after leaving it for 5 minutes... accidentally. Thankfully it recovered after about 20 mins and I identified the issue which is due to the simple reversing of speed (this.dx & this.dy) when the radius is growing as it starts to flip flop as the value plus the radius is always bigger than the width / height. My solution was to declare a this.edgeArray with 4 values indicating our state at each edge and then only allowing you to reverse the speed (this.dx & this.dy) when the array for that edge was set to false as shown in the following code snippet which you simply then repeat for checking each edge.
this.edgeArray = [false,false,false,false];
this.update = function(number){
if (this.x + this.radius > canvas.width) {
if (this.edgeArray[1] === false) {
this.dx = -this.dx;
this.edgeArray[1] = true
}
} else {
this.edgeArray[1] = false
}
if (this.x - this.radius < 0) {
if (this.edgeArray[0] === false) {
.........
With this fully implemented full size circles should simply bounce. I then went on to updating the code so the circles burst when they hit the maximum size and disappeared, all a bit of fun.
Hope this helps.
Thanks a lot!
Need more of these tutorial.
Would like to see a tutorial playlist for javascript with canvas. How to set a "class" in javascript, what is a function, how do I seperate my code in different files :D
I think learning how to separate your code within separate files is one of the most important topics a new developer should learn. I believe a refresh on webpack and an intro to modules is needed, thanks for the suggestion!
It's very important to note that an HTML canvas has two sizes: the size on the page (in CSS pixels) and the size in memory (true number of image pixels). For example, you could set the canvas.width = 1280 to use 1280 pixels in memory but display the canvas at 100% of the screen width using CSS by setting canvas.style.width="100vw". On a 1280 display they would be almost the same size but on a 4K display the size on screen would be almost 4K pixels but you wouldn't be using extra memory drawing your pixels. You can change the CSS size and the apparent size on the screen (by using canvas.style.width and canvas.style.height) without problems but if you ever set canvas.width or canvas.height (even to the same size) then in resets the canvas back to blank - it isn't smart enough to resize the actual canvas in memory for you (you would have to manually copy its state as an image and then redraw it as an image on the canvas after resizing it).
You can use lower resolutions for better performance (yet fill the screen size) or higher resolutions to make use of high DPI displays, such as a 4K screen on a laptop or a 1920x1080 screen on mobile phone.
A useful trick is to set a canvas.width and .height to the full screen size before you start drawing. That way you will never be in the position of wanting to increase the memory size of the canvas so you'll never need to reset it. If they make their window smaller you just change the CSS canvas size to match.
If you set the CSS style width to "100vw" (which means 100% of the viewport width) and style height to "100vh" it will dynamically resize the canvas for you to keep it filling the screen, without resetting/losing the canvas in memory. A side effect is that the aspect ratio will change if the user changes the ratio of the window, so an circles will become ellipses, etc., because you end up with non-square pixels.
If you simply set the CSS canvas.style.width and height, then the canvas will stay the default size in memory (try it!) which is normally a measly 300x150 and will therefore look very blocky unless on a very small screen (e.g., mobile phone).
Setting position:fixed (in CSS) also makes things easier since it fixes the position in the viewport regardless of scrollbars and the document below and browser quirks/peculiarities.
thank you for this helpful comment! If you see this, would you clarify your last paragraph because i cannot understand what you are trying to say
@@unknownperson7265 If I remember correctly, there was a problem with the canvas not lining up exactly with the viewport but setting the position to fixed helped solve it. Browsers can be weird and inconsistent. A webpage normally includes elements that flow one after the other but if you want the canvas to fill the whole viewport, position:fixed helped. Try it out; I was using Chrome.
Hey Guys :)
Seeing as this whole course is based on randomizing numbers I made a little function that will take in a min and max value and give you a random number between those 2 numbers. Been super useful following along as it becomes really tedious to keep doing the whole Math.random() dealio.
function grn(min, max) {
let random = Math.floor(Math.random() * max + 1);
return random >= min ? random : grn(min, max);
}
Btw Chris thanks for this course! Its really so much fun to follow along and just mess around with all the parameters and see what weird and whacky things I can create :D
Here's another way of doing it:
const randomInt = (max, min) => Math.floor(Math.random() * (max - min + 1)) + min;
Went through this whole thing today great tutorial I feel like I have the tools I need!
When you make a circle grow or shrink, how could you make it follow a certain curve (e.g. smooth, exponential, parabolic, S-curve) instead of a linear slope?
Thanks for a great video. My one question is: How does this all still work without a stroke() statement???
Sir I love you.
Plz keep doing it .
I learn lots of things from you.
Thank you
Hello Chris,
I saw your portfolio and its amazing. Your projects are too good. Can you please make tutorials on your projects especially the stars one?
Hey there, I think this is a great idea. One advanced skill to learn in regards to creating canvas pieces is grouping objects together. Maybe I'll use the star piece to cover just that :)
A few of my canvas projects are star related, let me know if Star Shower is the one you're referring to and we'll go from there.
Thanks Chris. Yes I was referring to star shower. I look forward for your tutorial.
man your tuts are just great!... thanx a milion!
love your video!!! good pace! clear and easy to understand!!!
Great man, glad you enjoyed, thanks for watching!
I love it so far. Although I have a question. I can't seem to find a good way to implement text ontop of the canvas so far. How do I do this?
THank you!
One thing you may like as an extra I put in my code was for the number of circles to draw, I set it as parseInt(window.innerWidth / 8);
Therefore the amount of circles created is proportionate to the window size
Excellent vid!
Thanks for watching Leo!
THIS DUDE IS A GOAT!!!
You`re freaking amazing! Thank you for your effort!
Hey!! Thanks for the tutorial. Can't wait for more!
thank you man for relaxing tutorial
Seriously next level.. Awesome
fantastic tutorial series!
Really good playlist. Though using var instead of let kind of feels bad but since this tutorial is old, I guess its ok.
star shower is amazing...! cant wait for something like that :)
1:10 Remove the "over and over" part. It's not like the function is gonna fire endlessly when the event is occurring. No, it's gonna fire once.
The "over and over" is only true in the meaning that it won't fire just once - it'll fire whenever the browser tells the event to fire, which will trigger the listener that you create as well.
This is a much better explanation when you consider the "removeEventListene()" as well.