Download "Interacting with HTML5 Canvas for Complete Beginners"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FvxljFhP2krI%252Fmaxresdefault.webp&w=1139&q=75)
Similar videos from our catalog
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F5en7I8hNtM4%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F9uW6B9LPntY%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FBqmJpFbRY2U%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FPO3BibcbkK8%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fbb4zvZdrMz4%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FdWO-mJlqjNg%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FmNWYI7-pCaQ%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FnNSn1uVNyiU%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FogNynYq1IxE%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FM5DKV5QfrsY%252Fmaxresdefault.jpg&w=1139&q=75)
Video tags
Subtitles
00:00:00
Welcome back everyone. This is going to00:00:01
be episode four of our become a Canvas00:00:03
Pro course where in this episode we are00:00:04
going to be learning how to interact00:00:06
with the canvas. So we know how to00:00:08
resize our canvas. We know how to draw00:00:09
elements on it, we know how to animate00:00:11
those elements, but we don't know how to00:00:12
add interactivity with our canvas so00:00:14
that when we hover over the canvas or00:00:16
when we click on it or when we put our00:00:18
finger on our phone or so forth, we00:00:20
don't know how to actually get these00:00:21
elements to interact with the events00:00:23
that are occurring on the screen. So00:00:25
this is the end goal. We want to be able00:00:26
to produce something cool like this00:00:28
where we have animation, our balls00:00:30
bouncing off the edge of the screen, but00:00:31
at the same time, our circles are00:00:33
growing as they come in contact with our00:00:35
mouse. So, this is going to be the end00:00:36
goal. And this is what we're going to00:00:38
produce by the end of this video. So,00:00:40
where we left off, let me go ahead and00:00:41
exit out of this tab. This is where we00:00:43
left off. We have bunch of large black00:00:45
circles bouncing off the edges of the00:00:47
screen in slow motion. So, we have a00:00:48
little bit to go. We have to change the00:00:50
sizes of these circles randomly. We have00:00:52
to change their colors randomly. And we00:00:54
also have to add that interactivity I00:00:55
was talking about. So first thing first,00:00:57
let's go ahead and add that00:00:58
interactivity.00:01:00
To add interactivity to your canvas00:01:01
piece, you're going to need to know one00:01:03
important concept. And that concept is00:01:05
event listeners. So if you haven't heard00:01:08
of an event listener, basically it's a00:01:09
function that's going to be fired over00:01:11
and over again as long as an event is00:01:13
occurring on the screen. So let's say my00:01:15
event is mouse movement. If I'm moving00:01:16
my mouse like I am right now, we're00:01:18
basically going to be calling a function00:01:19
within our JavaScript. And that function00:01:21
is only going to be called as long as00:01:23
the event is occurring. So only when I00:01:24
move my mouse. And there are a multitude00:01:26
of different events we can call. We can00:01:28
call things such as mouse down, a click00:01:30
event, we can call a mouse up event, and00:01:31
we can also call touch events for mobile00:01:33
devices. So to create an event listener,00:01:36
we are going to go into our code, call00:01:38
our window, and add an event listener00:01:41
like so. So this takes three arguments,00:01:44
but we really only need to focus on the00:01:46
first two. We first need to declare what00:01:48
type of event we want to monitor. We00:01:50
want to monitor our mouse's position00:01:52
whenever we move it across our screen.00:01:54
So in order to monitor our mouse's00:01:56
movement, we are going to put in00:02:00
mouse move as the event we want to00:02:03
monitor.00:02:04
So now that we know which event we want00:02:06
to monitor, we now need a function to00:02:08
call whenever this event occurs. So we00:02:11
can insert a function name such as00:02:13
animate if we were to put our animate00:02:14
function in here. But that wouldn't00:02:15
really make sense. It's much easier to00:02:17
just add an anonymous function. So we00:02:19
are going to do that instead.00:02:21
So now whenever we move our mouse across00:02:23
our canvas, this event, this function is00:02:26
going to be called. And we can test this00:02:28
out by inserting a console log00:02:29
statement. Put some dummy text in there.00:02:32
Refresh the page. Move your mouse00:02:33
around. And you'll see that our console00:02:35
log statement is being outputed into the00:02:37
console over and over again. As long as00:02:38
we move our mouse only when we move our00:02:40
mouse. If we stop, it's not going to be00:02:42
incrementing. But when we move our00:02:43
mouse, you'll see that's being called00:02:44
over and over and over again. So00:02:46
basically, in order to get these circles00:02:48
to interact with our mouse whenever00:02:49
we're moving it, we need to take into00:02:52
consideration some geometry, we need to00:02:55
get the distance between our mouse00:02:57
position and the distance between each00:02:58
of these individual circles. And if the00:03:00
distance between our mouse position and00:03:02
each of these individual circles is,00:03:04
let's say, less than 50, then we want to00:03:06
make sure that circle is growing. And if00:03:08
it's greater than 50, we want to make00:03:10
sure that the circle shrinks down back00:03:11
to its original size.00:03:14
So, if we want to get the distance00:03:15
between our mouse position and one of00:03:17
these circles, then we first need to get00:03:19
our mouse's position. And we can do that00:03:21
through our event listener over here.00:03:23
This anonymous function always has00:03:25
what's known as an event argument.00:03:29
So, within this anonymous function, all00:03:30
we're going to do is add an event00:03:32
argument. And if we console log this00:03:33
out,00:03:39
move our mouse, you'll see that we00:03:40
actually have an object being returned00:03:42
to us. And these objects represent all00:03:44
the data that are associated with our00:03:47
event as it's happening on the screen.00:03:48
So you'll see that when this event00:03:50
occurred, our mouse was at an X position00:03:52
of 226 pixels and our Y coordinate was00:03:55
at a position of 239 pixels. And if we00:03:58
look inside another one of these and00:04:00
scroll down, you'll see that our X and Y00:04:01
values are different because our mouse00:04:03
was at a different position as this00:04:04
event was being called. You'll see that00:04:06
we just keep creating more and more00:04:08
event objects as we move our mouse00:04:09
across the screen. So with this event00:04:12
argument, this event object, we can go00:04:14
ahead and grab the x and y values of the00:04:16
event that is occurring. And we're going00:04:17
to use those x and y values to compare00:04:20
them to the position of the circles on00:04:22
the screen. And once we compare them to00:04:24
the position of the circles on the00:04:25
screen, that's when we can calculate the00:04:26
distance between our mouse position and00:04:28
the actual x and y values of the00:04:30
circles.00:04:32
So since we first want to get the x and00:04:34
y value of our mouse, we are going to be00:04:36
creating a mouse object like so.00:04:41
This is going to have an x coordinate,00:04:42
which at first is going to be undefined,00:04:45
and a y-coordinate, which is also going00:04:47
to be undefined. We don't want to set00:04:48
this just yet. We're going to set this00:04:51
within our mouse move event listener.00:04:54
So, our mouse x is going to be equal to00:04:56
our events00:04:58
that I believe, let's go ahead and look00:05:00
inside our object to make sure we're00:05:01
selecting the right thing. It's going to00:05:03
be equal to our event.x00:05:06
property. And same thing is going to go00:05:08
for our mouse's Y property. It's going00:05:10
to be equal to our event Y's property.00:05:15
And we can test this out by console00:05:16
logging our mouse object.00:05:19
Refresh the page. You'll now see we have00:05:22
an object with just an X and Y00:05:23
coordinate. And we are going to use00:05:24
this, as I said, to compare it to the00:05:26
actual positioning of each individual00:05:28
circle. And if the distance is less than00:05:30
50, the circle is going to grow.00:05:33
So now we need to compare it to each00:05:34
individual circle's coordinates. So we00:05:36
are going to go head on over to our00:05:38
update function. We are going to add00:05:40
another conditional below all of our00:05:42
velocity and wall bouncing stuff here.00:05:44
So we are going to say this is where the00:05:46
interactivity occurs with a comment.00:05:48
So the first thing we need to do is we00:05:50
need to get the distance between our00:05:52
mouse's positioning and the actual00:05:53
circle's positioning. So to do that all00:05:56
we need to do is select our mouse this x00:06:00
coordinate and from our mouse's x00:06:02
coordinate we are going to subtract00:06:05
each individual circle's x coordinate00:06:08
and if this is less than 50 we want to00:06:11
call a function. So first we need to00:06:14
create a conditional make this00:06:16
conditional at least00:06:18
and that should be good to go. So if00:06:21
this is less than 50 we want to grow the00:06:23
radius of our circle. So we are going to00:06:24
say this radius00:06:27
plus is equal to one.00:06:30
And now let's watch what happens when we00:06:32
refresh the page. We start moving.00:06:34
you'll see everything to the right00:06:36
starts growing sporadically and there's00:06:38
really no control here. We only want to00:06:40
track what is within 50 pixels within00:06:41
our mouse's positioning. So, this isn't00:06:44
good enough. This isn't going to cover00:06:45
all of those use cases, all the00:06:47
conditions we want to track in order to00:06:48
ensure that happens. So, right now all00:06:50
the circles to the right of the mouse00:06:52
are growing because let's say let's say00:06:54
that this x is equal to 200 while our00:06:57
mouse.x is equal to 100. Well, if that's00:07:01
the case, we are going to get a value of00:07:03
negative 100 and obviously that's going00:07:06
to be less than 50. So that means that00:07:08
all the circles to the right of our00:07:10
mouse are going to be growing by one. We00:07:12
need to take into account that we don't00:07:13
want that to happen. So as a result, we00:07:16
are going to add an or or excuse me an00:07:19
and operator and we are going to say if00:07:22
mouse.x minus this.x x00:07:26
is greater than -50 then we are going to00:07:30
grow its radius by one. So let's go00:07:32
ahead and see what happens with that. So00:07:34
now not everything to the right of the00:07:35
mouse is going to grow. Just whatever is00:07:37
within 50 pixels of our mouse from the00:07:40
left or the right. But the issue is we00:07:42
refresh the page again. You'll see00:07:44
everything to the top and the bottom of00:07:46
the mouse is still growing. So, we need00:07:48
to take into account as well that the00:07:50
circles above and below our mouse should00:07:52
only be 50 pixels within the distance of00:07:54
the mouse. So, right now we're only00:07:57
tracking our x values. We need to take00:07:59
into account our y values as well. So,00:08:01
I'm going to space this just to give us00:08:02
some space. And let's go ahead and full00:08:04
screen this to better show you the00:08:05
conditional going on here. We are going00:08:08
to add another and operator and we are00:08:10
going to say only increase the radius of00:08:12
the circle if mouse.y y minus the00:08:15
circles ycoordinate00:08:18
is less than a distance of 50. But we00:08:21
also need to take into account the00:08:23
negative number. So we need to say only00:08:25
increase the radius of a circle if the00:08:27
mousey minus this doy the distance00:08:30
between the two is no less than -50.00:08:36
And let's go ahead and shrink this.00:08:37
Refresh the page. And now you'll see00:08:40
only the circles within 50 pixels00:08:42
distance of our actual mouse are going00:08:44
to be growing. But it still leaves us00:08:47
with a bit of an issue. These circles00:08:48
keep growing and the ones that aren't 5000:08:50
pixels within the distance of the mouse,00:08:52
uh, they don't actually shrink as they00:08:54
should be within the demo I showed you00:08:55
earlier. So that's something we'll also00:08:57
need to take into account is what00:08:59
happens when this conditional is not00:09:00
true. And we can test what is not true00:09:04
by adding an else statement at the end00:09:05
of this. And when this is not true, we00:09:08
are going to decrease the radius of each00:09:11
individual circle by one.00:09:14
So basically all the circles are00:09:15
shrinking to the point where they're not00:09:17
even visible and we get a bug within the00:09:19
console. Now this is happening because00:09:21
this conditional is not true. So we're00:09:24
actually subtracting one from the radius00:09:25
of all circles until they equal zero. So00:09:28
we need to make sure that these circles00:09:30
do not decrease past a certain point. So00:09:32
instead of just doing an else statement,00:09:34
we are going to add an else if00:09:37
we are going to say only subtract one00:09:39
from the radius of circle00:09:42
if if this radius is greater than two.00:09:46
So this way the radius of the circles,00:09:48
the radi circles, they won't actually uh00:09:51
go into nothing. They'll at least be two00:09:53
pixels wide in radius uh once they go00:09:56
outside the distance of our mouse. So00:09:59
now you can see when we're hovering over00:10:00
these, the the circles don't go back to00:10:02
their original size. They go down to a00:10:04
smaller size as specified here. This is00:10:06
the size that they're shrinking down to.00:10:08
But at the same time, they're still kind00:10:10
of achieving what we wanted to in the00:10:11
first place. We're hovering over the00:10:13
circles and they're growing to a certain00:10:15
distance. And as we hover out of them,00:10:17
they're going back down to a specified00:10:19
size.00:10:20
So to achieve the same effect I showed00:10:22
you within the demo, we need to ensure00:10:24
that these circles don't expand past a00:10:26
specified limit as they grow.00:10:29
So this is going to go within this00:10:30
conditional. Right now this conditional00:10:32
is managing when the circle should grow00:10:34
uh when the mouse is within 50 pixels of00:10:37
each individual circle.00:10:39
So to ensure this we are going to not00:10:41
add on to our current conditional00:10:43
because that is already quite lengthy.00:10:45
We are going to be adding a new00:10:46
conditional within this and we're going00:10:48
to say only increase the radius of each00:10:50
individual circle if each individual00:10:52
circle's radius is no greater than let's00:10:55
just say 44.00:10:57
Then we'll grab our increment radius00:10:58
code and place it within this new00:11:00
conditional.00:11:02
So now if we refresh the page and we00:11:04
hover over these, you'll see that the00:11:05
circles now have a max limit in which00:11:07
they can grow to. They can't grow past00:11:09
this limit because we added this new00:11:11
conditional. And for good coding00:11:13
purposes, it'll actually be good to00:11:15
transform this 40 into something that is00:11:17
more understandable. So instead of just00:11:19
saying that make sure the radius does00:11:21
not grow past 40, we're going to say00:11:23
make sure that the radius is no greater00:11:25
than max radius specified as a variable.00:11:29
We can specify a variable up top. Let's00:11:31
just do it right beneath our mouse00:11:33
object00:11:35
and our max limit. Is that why we call00:11:37
it max limit? Max radius. And our max00:11:39
radius00:11:42
is going to be equal to 40. This is the00:11:44
max radius in which our circle should00:11:45
grow to.00:11:48
All right. So now we're following some00:11:49
better coding conventions because we're00:11:51
specifying what our max radius should be00:11:53
instead of just having an arbitrary00:11:54
number within this conditional. And we00:11:56
can do the same thing for our minimum00:11:58
radius. Let's go ahead and add that in00:12:00
here as well. So we'll say instead of00:12:02
two min radius00:12:04
and right beneath our max radius, let's00:12:07
go ahead and add a min radius of yeah,00:12:10
let's just go ahead and do two for now.00:12:15
All right. So, we have more readable00:12:17
code now, but there are still a few00:12:18
things we need to do here in order to00:12:19
get that nice aesthetic that I showed00:12:21
you within the demo. So, some of the00:12:23
things we need to do here are change up00:12:25
the colors of these circles. And to00:12:28
change up the colors of these circles,00:12:29
we need to do a little bit of math here.00:12:31
It's a it's a little interesting topic.00:12:33
We need to create what is known as a00:12:35
color array. And this is just going to00:12:38
be an array that stores all the colors00:12:40
we would like our circles to be. If we00:12:43
wanted our circles to be randomized00:12:44
between five different colors,00:12:47
our circle array would contain five00:12:50
different objects. And within these,00:12:52
we'd specify hexodimal values that will00:12:54
represent individual colors. So, let's00:12:57
just go ahead and put some random colors00:12:58
in here for now. And then once we00:13:00
actually want to make this thing start00:13:02
looking good, that's when we'll go ahead00:13:03
on over to a website called Cooler,00:13:05
which will go ahead and give us color00:13:07
palettes. And we can use the hexodimal00:13:08
values from there to give us a nice look00:13:10
instead of just randomized colors as00:13:12
we're doing right now.00:13:18
All right. So now we have an array of00:13:19
colors, but now we need to actually00:13:20
insert these colors within each00:13:22
individual circle's fill property. So00:13:25
let's go ahead and check out where we're00:13:26
drawing our circle right now. You'll see00:13:28
that we have a stroke style, we have a00:13:29
stroke, and we also have a fill. Let's00:13:31
go ahead and get rid of our stroke style00:13:33
for now. So we just have a fill. You'll00:13:36
see that we just have black circles at00:13:37
the moment with no stroke. We need to00:13:39
change the circle fill style for each00:13:43
individual circle. And each fill style00:13:46
is going to be equal to one of these00:13:47
options within this color array. So how00:13:50
do we randomly select a color from the00:13:52
color array? Well, first we need to00:13:54
access our color array and then we need00:13:57
to specify a random index. So we need a00:13:59
number from zero to 1 2 3 4. We need to00:14:04
specify a random indicy from 0 to 400:14:06
because we start counting our arrays at00:14:08
zero. So how do we get a random number00:14:10
from 0 to 4 or at least the length of00:14:12
our array? Well, it's a little it's a00:14:14
little tricky for beginners, but this is00:14:16
how it's going to happen. We need to get00:14:19
a random number. So we are going to use00:14:21
math.random.00:14:23
We need a random number between zero and00:14:25
the length of this array. And the length00:14:26
of this array is going to be five since00:14:28
there are five different elements in00:14:29
here. Let's go ahead and test that out00:14:31
really quickly. Let's just go ahead and00:14:32
console out our color arrays length.00:14:38
Excuse me. That's just console logging00:14:40
out our color array. We want to specify00:14:41
our length. And you'll see the length of00:14:43
our array is five. It's just how many00:14:45
elements are within our array.00:14:48
So we want a random number between zero00:14:50
and the length of our array, which is00:14:51
going to be five.00:14:54
And we're using color array.length00:14:56
because if we wanted to add more colors00:14:58
onto this, color array.length length00:15:00
will take care of any calculations for00:15:02
us. So we don't need to get rid of this00:15:03
and just specify we have five colors00:15:05
within array or six colors and so forth.00:15:07
Color array will automatically take the00:15:09
number of elements within array and do00:15:11
any calculations you need in the process00:15:12
to get a random color. All right. So we00:15:15
are specifying get a random number00:15:18
between zero and five. But this will00:15:20
give us decimal numbers. If we actually00:15:22
run this in the browser00:15:25
you'll see we're not actually getting00:15:26
any colors. And that is because right00:15:28
now this whole function that we're doing00:15:29
with math random color array.length, it00:15:31
is giving us a decimal value. So we want00:15:33
to make sure that we're getting a whole00:15:34
number so we can access each individual00:15:36
index within this array. So to get a00:15:39
whole number, we are going to use00:15:40
another function called math.f floor.00:15:43
And we are going to wrap our whole00:15:44
multiplication function within this. So00:15:46
all math floor does is it gets the00:15:48
lowest whole number closest to the value00:15:49
that's outputed. So if I were to get a00:15:52
value of 0.5, math.lo floor would take00:15:54
that value and transform it into zero00:15:56
since that is the lowest whole number00:15:58
right beneath the value. Let's say my00:16:00
number were 1.2. If I were to put that00:16:02
within math floor, well, my end result00:16:04
would be one. Same thing goes for00:16:06
something like 3.8. If I were to get00:16:08
3.8, we get the lowest value beneath00:16:10
that and lowest whole number, which00:16:11
would be three.00:16:14
So, with this in place, we should get00:16:15
random values, random colors as our00:16:18
circles. And you'll see that we actually00:16:20
have a pretty wild effect going on here.00:16:22
This isn't a lot that goes into canvas.00:16:23
This is just experimentation. And right00:16:25
now this is happening because we are00:16:27
calling this draw function every single00:16:29
time within our update function. Right00:16:32
at the bottom here we are calling draw.00:16:34
And since we're calling a random color00:16:36
from our array over and over again00:16:37
within this draw function, well the00:16:39
colors are changing dynamically over and00:16:41
over again as well. So we want to make00:16:43
sure that the colors of our circles are00:16:45
only set once rather than set over and00:16:47
over again within this draw function.00:16:49
And to do that, we are going to take00:16:52
this function right here that we wrote,00:16:54
and we're going to add a new property to00:16:55
our circle called color. This is going00:16:58
to be equal to a random color from our00:17:01
color array. So, our fill style is then00:17:03
going to be equal to this color. And00:17:06
that should fix the issue of our00:17:07
blinking circles. And it does. So, now00:17:10
we have some nice looking colors here,00:17:12
some randomized colors. And we are going00:17:14
to change these up to a nicer color as00:17:16
soon as we finish everything else. But00:17:18
go ahead and play around with this. I00:17:19
say this about every episode. Play00:17:21
around with it. Change up the colors a00:17:22
bit. Go ahead and change up the00:17:24
randomization stuff. See what you can do00:17:25
and just what kind of cool stuff you can00:17:27
produce because it's really fun and it's00:17:29
what's going to help you learn the most00:17:30
in the long run.00:17:32
All right, so we're almost done here. We00:17:34
need to now randomize the actual sizes00:17:37
of our circles. So, as you can see, all00:17:39
of our circles right here, they are all00:17:41
very small and they're all very uniform.00:17:44
We want to make sure that the circles00:17:45
that are bouncing around are random00:17:46
sizes to give it a little more variety,00:17:49
a little a little more of a randomized00:17:52
feel to our actual canvas piece. So to00:17:54
randomize actual minimum size of the00:17:56
circles, we are going to be giving our00:17:59
circles radius a random number. So all00:18:02
of our circles radi, they are being00:18:04
declared within this for loop down here.00:18:06
And you can see that we just hardcoded00:18:07
in a value of 30 for our radius. So00:18:11
instead of a value of 30, let's go ahead00:18:13
and do math.random.00:18:16
And let's say that we want a random00:18:18
value from 1 to let's just say four for00:18:22
now. And to get a random number 100:18:24
through 4 instead of 0 through 4, we00:18:26
first need to get a random number 000:18:28
through 3. So we're going to say00:18:30
math.random* 3. And then once we get a00:18:32
random number 0 through 3, we are going00:18:34
to add one onto the end of this. So how00:18:37
this works is if we get a lowest value00:18:40
of zero, a random number 0 through00:18:42
three, well then at least we'll be00:18:44
adding one onto that. So we know that00:18:45
we're getting a minimum radius of one.00:18:48
And if we get the highest value of00:18:49
math.random* 3, which will be three,00:18:52
we're adding one onto that as well. So00:18:53
we're successfully getting a range 100:18:56
through 4 rather than just a range of00:18:58
zero through four. So we want to make00:19:00
sure our circles aren't that small. We00:19:02
want to make sure that they have a00:19:03
minimum radius of at least one. So this00:19:05
should make things look a little00:19:07
different over here. And you can see00:19:08
that indeed they do. Our some of our00:19:09
circles are smaller, very slightly00:19:11
smaller than the others. And it's kind00:19:12
of giving it a nice variety compared to00:19:15
what we had before. But if we start00:19:16
hovering over these,00:19:19
you'll see that eventually the circles00:19:21
become uniform again. And that is00:19:23
because we have a set minimum radius, a00:19:25
hard-coded minimum radius up here, which00:19:28
says that the minimum radius after a00:19:30
circle grows and shrinks back down is00:19:32
going to be two. So it's not actually00:19:34
shrinking back down to its original size00:19:36
that it was set as. It's actually00:19:38
shrinking back down to this set value00:19:40
that we put here with a minimum radius00:19:42
of two. So we want to make sure our00:19:43
circles shrink down to their original00:19:45
radius rather than a set value as we had00:19:47
up here. So to do this we are going to00:19:49
be creating another property. This is00:19:51
going to be called this min radius.00:19:56
So each individual circle is going to00:19:57
have its own individual minimum radius00:19:59
because one circle's minimum radius, its00:20:01
starting radius could be one, while the00:20:03
other could be three, the other could be00:20:05
two, other could be 2.5. We want to make00:20:06
sure that each individual circle has its00:20:08
own minimum radius so it shrinks down to00:20:10
what it was originally set as. And so00:20:12
instead of setting it to something like00:20:14
minimum radius, we're going to set it to00:20:15
a circle's original radius. So this00:20:17
radius right here, it's going to be00:20:19
altered by these conditionals. It's00:20:20
going to be increasing and it's going to00:20:21
be decreasing depending on the mouse's00:20:23
positioning. But this min radius is not00:20:26
going to be altered at all. We are going00:20:28
to say keep decreasing the size of our00:20:29
circles as long as the circle's radius00:20:32
is greater than each individual circles00:20:35
minimum radius.00:20:37
And with that in place, you'll see that00:20:40
the circles actually shrink down to00:20:42
their original size and not one uniform00:20:44
size. So we're actually adding some nice00:20:46
variety here, some clean code and some00:20:49
stuff that's ensuring that our circles00:20:51
are going back down to their original00:20:52
size. So, this is not this is good, but00:20:55
it's not great at the moment. There's00:20:57
still a lot of white space here, and00:20:59
it's not that it's not that appealing to00:21:02
me in my eyes. So, let's go ahead and00:21:04
add more circles to this. Let's go ahead00:21:06
and bump this up to 800. That should be00:21:08
good. Go ahead and mess around with00:21:09
this. See see how many circles you can00:21:11
add without crashing your program. Let's00:21:12
go ahead and refresh this. And you can00:21:14
see this is a lot more interesting,00:21:16
especially when we actually make this00:21:18
full screen. Like so. And that presents00:21:20
an issue when we make this full screen.00:21:22
is why isn't the canvas actually being00:21:23
responsive to the width and the height00:21:25
of our browser? Well, that is because we00:21:28
need to add another event listener00:21:30
specifically for resizing our browser00:21:32
window. So, right now we have an event00:21:34
listener of mouse move. Let's go ahead00:21:36
and add an event listener00:21:40
of resize. This is going to be called00:21:42
whenever the browser is resized.00:21:45
So, we need a function to call over and00:21:47
over again whenever we resize our00:21:48
browser. And now we need to do a few00:21:51
things to ensure that our canvas is the00:21:52
full width and height of our browser00:21:53
each time we resize it. To ensure that,00:21:56
all we need to do, we need to grab this00:21:58
original code that we wrote from the00:21:59
first episode, which resized our canvas00:22:02
width and height based on it first00:22:03
refresh. And we want to make sure that00:22:05
we're calling this canvas resize code00:22:07
every time the browser is resized. So00:22:10
this will ensure that the canvas is00:22:11
always going to be the full width and00:22:13
height of the actual browser. And if we00:22:16
refresh this and start dragging our00:22:19
browser, you'll see that the canvas is00:22:20
actually extending. But our circles,00:22:22
they're starting to move over into the00:22:24
other side of the canvas. But they're00:22:26
not being they're not being generated00:22:28
dynamically over here when we actually00:22:30
resize the browser. So to ensure that00:22:33
the circles are being generated00:22:34
dynamically each time the browser is00:22:36
resized, we need to add a few00:22:38
initialization techniques to our event00:22:40
listener.00:22:42
So what's going to happen is we are00:22:44
going to call a function called init.00:22:46
Each time we resize our canvas, but now00:22:48
we need to create an actual function00:22:49
called init. So right above our animate00:22:51
function, we're going to say function in00:22:53
it. And within this, we are going to00:22:56
basically be resetting our circle array.00:22:58
We're basically going to be calling all00:23:00
of this in here over and over again.00:23:01
Each time we resize our browser, we're00:23:03
basically just replacing all the00:23:04
circles, generating them in new00:23:06
positions so that they're always going00:23:07
to be filling up the entire screen.00:23:10
So let's go ahead and grab this code,00:23:13
paste it within our init function. And00:23:16
since we're putting this within a00:23:17
function, we need to make sure that00:23:18
we're actually calling it so it can be00:23:20
generated the first time.00:23:22
Press the page and you'll see that we00:23:25
have an issue. And let's go ahead and00:23:27
check out our console to see what's00:23:28
going on here. And you'll see that00:23:29
circle array is not defined. And that is00:23:31
because the scope of our circle array is00:23:33
currently only within this init00:23:34
function. So let's go ahead and make00:23:36
sure that we're taking it out of there.00:23:38
Refresh the page.00:23:40
And let's see what happens when we00:23:42
resize our browser. And you'll see that00:23:45
we're generating multiple circles over00:23:47
and over again. And it's starting to get00:23:49
pretty laggy in the process. Let's go00:23:51
ahead and refresh that and find out00:23:52
what's happening. So each time we're00:23:54
calling a knit, we're calling a knit00:23:56
each time we resize our browser. And00:23:59
since we're calling a nit over and over00:24:00
again, it's supposed to generate 80000:24:01
circles. And it's also pushing 80000:24:03
circles into our circle array. We're not00:24:05
actually resetting our circle array back00:24:07
to zero. but we're not actually00:24:08
resetting it to a clean slate. We're00:24:10
just adding circles on and on to the end00:24:12
of the array. So to ensure that we're00:24:13
resetting it to a clean slate, we're00:24:15
going to say circle array is equal to an00:24:18
empty array right before we call all the00:24:21
circle generation code right here.00:24:24
And if we do that,00:24:27
you'll see that fixes our issue and00:24:28
circles are being generated dynamically00:24:30
as we go about resizing our browser,00:24:33
which is exactly what we want. So to00:24:35
finish off this episode, let's go ahead00:24:37
and choose a better color palette so we00:24:38
get something that's more interesting, a00:24:40
little more eye pleasing than what we00:24:42
have right here. My website of choice00:24:44
for choosing color palettes is called00:24:45
Cooler.00:24:47
And you can just type cooler into00:24:48
Google.00:24:50
And within Cooler, you can click the00:24:52
explore button and explore different00:24:53
color palettes that people have created.00:24:57
So you'll see that we have a number of00:24:59
different color palettes here. You'll00:25:01
have most used, most popular, uh, all00:25:03
themes. Just really go through here.00:25:05
These are really well picked out color00:25:07
themes for the most part. Pick something00:25:08
that's going to be eye appealing to you.00:25:11
Personally, I think I like this one.00:25:12
This is very similar to what I had in00:25:14
the original demo. So, I'm going to00:25:15
choose this one. And to get the color00:25:17
values for this color palette right00:25:18
here, all we have to do is click edit,00:25:20
copy. And you'll see that each of these00:25:22
individual colors has a hexadimal value00:25:24
beneath it right here. So, if I wanted00:25:26
my circles to be blue, I can just go00:25:27
ahead and grab this. go back to my color00:25:30
array00:25:32
and paste it there. And we're just going00:25:34
to do this for all of our colors. We're00:25:35
just going copy, paste,00:25:39
copy,00:25:40
paste.00:25:43
And we're almost there. Copy, paste,00:25:44
copy, paste.00:25:47
All right. So, now we have what should00:25:49
be a better looking color palette than00:25:50
before. And if we check this out in the00:25:52
browser,00:25:55
you'll see that this is a lot better00:25:56
looking than it was. This is a lot more00:25:58
professional looking as the colors were00:25:59
handpicked to blend and give off a more00:26:01
professional vibe. So, we now have a00:26:04
full-fledged canvas piece that takes00:26:05
animation, interaction, and browser00:26:07
resizing into consideration. We also00:26:10
know the four basic skills required to00:26:11
become a canvas pro and should now have00:26:13
a solid foundation that you can use when00:26:15
developing any interactive canvas piece.00:26:18
In regards to next steps, try replacing00:26:19
the art drawings with points, lines,00:26:21
rectangles, and even images. Try00:26:23
different randomization techniques. See00:26:25
what other conditionals you can add to00:26:26
make objects react with their00:26:27
environment. There's a lot you can do00:26:29
here. A lot to experiment with. Just00:26:30
take it into your own arms. Really see00:26:32
what you can do here to produce some00:26:33
badass canvas pieces.00:26:36
So, that's going to be it for this one,00:26:37
folks. I hope you enjoyed and learned a00:26:38
lot along the way in regards to future00:26:40
canvas courses. I do have a bit more00:26:41
planned out in which we'll learn how to00:26:43
cover specific one-off canvas animations00:26:45
such as how to make a bunch of particles00:26:46
on screen attract to a certain point and00:26:48
how to create HTML 5 canvas games. So,00:26:51
stay tuned everyone. Thanks for tuning00:26:52
in and I look forward to seeing you in00:26:54
the next episode later.00:27:12
[Music]Description:
Learn how to use canvas to build your own games at https://chriscourses.com/courses/javascript-games/videos/javascript-games-for-beginners 🚀Download the free HTML5 Canvas cheat sheet at https://chriscourses.com/cheatsheet 📸Gear I used to produce this video: https://kit.com/chriscourses/chris-courses-studio-setup Animating our canvas is cool and all, but we can take things one step further by adding some code that'll allow users to interact with our canvas's objects. Adding interactivity to our canvas pieces creates a sort of surprise that web users don't normally expect. Look around the web, how many sites can you list off that include some sort of interactive art piece that meshes with the site's overall look and feel? Probably not many. In regards to making your site stand out from the rest, there's no better solution than adding an interactive design. Learn how, within this episode of Chris Courses. Note: Apologies for the many fades throughout, to be transparent, I messed up more than a few times during recording. Want to ensure I'm getting these videos out on time and have a limited schedule due to work, but nevertheless, hoping you enjoy the video and get some useful knowledge out of it. Video Timeline: ----------------------------- 00:40 - Where we left off 01:07 - Event listeners explained 03:15 - Introduction to the event object / argument 05:33 - Growing our circles 09:02 - Shrinking circles that aren't near our mouse 10:20 - Restricting the growth of the circles 12:18 - Randomizing the colors of our circles 17:54 - Randomizing the initial size of our circles 20:30 - Additional aesthetic improvement 21:16 - Making the canvas responsive to the browser 24:35 - Kuler and choosing color palettes The Platform: ------------------------- https://chriscourses.com/ is a platform in progress whose goal is to educate aspiring and seasoned web developers via story driven learning. Each course tells a different story, and each milestone reveals a different scene. With an expansive universe to explore, you can track your progress, and gain the necessary skills needed to build your dreams. For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at https://chriscourses.com/ Chris Courses Social: ------------------------------------- Twitter: https://twitter.com/chriscourses Facebook: https://www.facebook.com/unsupportedbrowser Christopher Lis Social: --------------------------------------- Twitter: https://twitter.com/christopher4lis CodePen: https://codepen.io/chriscourses Beats: ------------- Joakim Karud - Looking To The Sky w/Peter Kuli & Kasey Andre
Mediafile available in formats
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players
Questions about downloading video
How can I download "Interacting with HTML5 Canvas for Complete Beginners" video?
http://univideos.ru/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.
Which format of "Interacting with HTML5 Canvas for Complete Beginners" video should I choose?
The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.
Why does my computer freeze when loading a "Interacting with HTML5 Canvas for Complete Beginners" video?
The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.
How can I download "Interacting with HTML5 Canvas for Complete Beginners" video to my phone?
You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.
How can I download an audio track (music) to MP3 "Interacting with HTML5 Canvas for Complete Beginners"?
The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.
How can I save a frame from a video "Interacting with HTML5 Canvas for Complete Beginners"?
This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.
How do I play and download streaming video?
- in video formats, hover your mouse over "Streaming Video**";
- right-click on "Copy link";
- open VLC-player;
- select Media - Open Network Stream - Network in the menu;
- paste the copied link into the input field;
- click "Play".
- copy the video address (URL);
- select "Open Network Stream" in the "Media" item of VLC player and paste the link to the video into the input field;
- click on the arrow on the "Play" button and select "Convert" in the list;
- select "Video - H.264 + MP3 (MP4)" in the "Profile" line;
- click the "Browse" button to select a folder to save the converted video and click the "Start" button;
- conversion speed depends on the resolution and duration of the video.
For this purpose you need VLC-player, which can be downloaded for free from the official website https://www.videolan.org/vlc/.
How to play streaming video through VLC player:
To download streaming video via VLC player, you need to convert it:
Warning: this download method no longer works with most YouTube videos.
What's the price of all this stuff?
It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.