Advanced – HTML5 Canvas and Animations


Okay, so
we will be talking about canvas. So, what is the canvas in HTML file? The canvas is basically a way for you, it gives you a way for
you to draw stuff in a nutshell. It gives you a built,
the ability to draw objects. Basic objects such as rectangles,
squares, lines. As well as be able to paint
pictures that you import in. And why’s the name canvas is that, it’s
just like if you were a painter, right. And you’re painting on a canvas and the canvas is just a white piece of
usually a white piece of cloth that you would just paint on the canvas
with your actual paint. With the brushstrokes. So instead of manually painting it,
you actually paint it through your code. And how it will work is like, if you paint something on
your canvas that’s it. You cannot really remove the paint and
adjust it. Once you paint on something
on your real canvas and then you paint brush,
you actually have to paint it over. And that’s a very
important concept to know. Once you paint something on a canvas
those pixels are there indefinitely. On your canvas. So, if you want to adjust something you
need to paint it over those pixels. Now, lucky for us, in the computer world
we have the ability to clear our canvas. We set it to a black state in order for
us to be able to repaint it again. And that will be a very crucial concept
for you to learn about the canvas. Animation is basically,
you just showing me a picture. And then show me another picture. And they show me another
picture rapidly, very fast. And each picture, one thing,
one slight thing changes. So, in my eye it gives me
the illusion of movement. That is basically animation and
you just flip through it. The first thing I’m going to do and
you go find all this documentation on Mozilla’s development network or on
the campus video lessons on you udesk. So, the first thing that we need to
do is, this is our HTML site here. In HTML and
to our left is what page will look like. Right now, there’s nothing because
we haven’t drawn anything. So what we need to do, [INAUDIBLE]
alike we need to declare a canvas element called canvas,
that’s pretty easy. You need to our ID to something
similar like my canvas, and it’s good to set width and a height,
because this is very important. That will allow us to know our
boundaries when we’re drawing. And then, I’m actually hooking in to
a JavaScript file that actually does all of the heavy lifting of the work. And this is called demo.setup.js. So I’m going to go into
demo.setup.js now and tell you how would you set up
an animation for anything. Right here. So the first couple of lines you’re
going to see this line here. A set up canvas and other variables. So, I’m getting
Domage DOM called canvas. I’m getting the ID from my canvas. And then, I’m getting the context. The context will allow us to hook into
every other API call in the canvas. Now if you you’re not
sure of what I’m doing or why I’m doing it,
it’s just part of the documentation. And you will find out more about this set up in our UDAC course or you could
just read the documentation online. So this is very important,
a lot of people, a lot of beginners don’t realize that like once you set
up your canvas and your context, you think that you’re ready to
start animating and start drawing. But, it’s not quite that
simple because in JavaScript, in HTML programming, there’s
a lot of things called events and we actually have to wait for
events to finish. because the browser needs a couple
milliseconds to actually load up and create the document tree structure like
the DOM, because, how process work? And you’ll find out more on project
4 is that, it gets a string file, it gets the code in your HTML,
it then needs to process and create these abstractions, these nodes. These objects in the .NET object model. And if the browser has not finished
loading all these objects, and if you have a JavaScript that’s trying to
refer to an object that does not exist, such as canvas, it’s not going to work. So, this is a trick that I
recommend you keep notes of. It’s called Window on load. So window on load is an event that the
window, the browser will fire off once it’s done loading everything,
including the document object model, the images and
also all the other resources for you. Let’s go back and talk about animation. So we set up our objects here. And then we set this to
unload this function here. So unload I’m going to call
this function called anime. I’m going to pass in my canvas
object and my context object. And then, I’m going to go down here and
then I’m going to do my magic here. And then, I’ll walk through this
common stuff here again but you do your magic here. But, then at the end
this is very crucial. This is how animation works because
right here, I’m going to highlight this. You’re making one frame. One function call is
basically one frame. You’re just making one static picture. How do you show the next picture? Because in animation, we need to show
the next picture and change the objects. Change to X and
Y coordinates when we draw stuff. And then show that picture again. There is a method in JavaScript
called requests animation frame. So, what we do is pass in your function, an anonymous function,
to Window request animation frame. And then you pass in this function,
again, animate. So, animate function is calling itself. Again, this may be new to you
if you’re new to programming, but a function has
the ability to call itself. So once I’m done drawing, I’m actually
going to go ahead and call myself again. And then, once I call myself,
I’m going to go back to the top or I’m going to repeat my instructions. What I want to do, is that I
want to be able to draw on line. Pretend that this is a line,
this pen is a line. I’m drawing this line
from point A to point B. And then I want to rotate this line. Like this, in a circular motion,
indefinitely. So basically, how would we do that? We’ll just go back to our animation. We want to draw static
images of one line. Then okay. Recall animation frame again. Change the position of this line again,
okay. Paint that over a series of thousands
of frames that you’re drawing. It will look like it’s
animating like this. So let’s go back to the code and
let’s see how we’re going to do this. So let’s just first learn how
to draw a line because I think, if you’re not familiar with, we’ll learn
how to draw a line I’m going to show you and how you’re going figure this
out is just read the documentation. And let’s just draw a line. So, CTX.linewidth. I’m going to draw a line width of
10 because I want the width of this line to be 10 pixels. I’m going to execute this
command called beginPath(). And you’ll find all this
in the documentation. So you’re just really going
to read the documentation and then apply what you want. So I’m going to move my, I’m going to
begin at let’s say the coordinate 100 pixels, 200 hundred pixels down. So, this is your X coordinate
on 100 pixels from the left and then on 200 pixels down from the top. So that’s your Y coordinate. And down let’s start line times two. The next coordinate. 300, 200 so
that’s my next coordinate in my XY. I’m going to actually
escape the command stroke, then I’m going to close this path. Okay, and that’s how we draw on a line. So I’m going to save this and
I’m going to refresh. There’s our line. But, Mark, it’s not animating. Well, it’s, technically it is because
it’s calling the frame again and again. It’s calling the function
animate again and again but we’re not moving the line because we
just have the static code because it’s just painting this line over and
over and over again. So, how are we going to show
that this is actually working? Well let’s just go ahead and
change this XY coordinates. And what I’m going to do is I’m
going to give you a little track here. Is that, this is my start point. My endpoint will be different. So, my endpoint will be, let me add
a little bit of randomness to it. So random 50 plus 10. So, and if you’re not familiar
with this random function. For each call of this function it will
give you a random number from 0 to 1. And then, I am increasing the range
of 0 to 1 from let say 160 to 10. And if you are a little
bit confused on that, just look up the that documentation for
random and figure out how can I set random
numbers between my minimum value and my maximum value I want. So I’m going to set this up
per frame what do you think? The line should move,
should looks something like this. All right, so that’s great. So the line moves. But then it doesn’t,
it’s painting over everything else. Remember, this is a canvas. So, if I’m painting something over and
over again. It’s like I’m simulating how I would
paint something on a real actual canvas. So, in order for me to be able to
displays animation per se, that, like, I want this line to move, and
I just only want that one line drawn, I need to actually clear the canvas
per frame call, per animation call. So if we go to this code here, there
is a function called clear rectangle. And the rectangle is basically
the canvas like the whole canvas. So I’m going to clear this. I save it. I’m going to refresh. And here we go. So this is animation in a nutshell. You see that so
every animate, anime call. It will draw a line from
one point to another. This doesn’t, it’s and we’re animating. So congratulations, we just learned
the basic concepts of anime and learned how to apply that in canvas. Now, we want the line to not do this,
but we want the line to rotate in a circle. So how are we going to do that? So i’m going to use a series of sine and
cosine. And a series of angles because basically
what I’m doing is that I want to be able to have a point here and
a point here along the circle. I want to trace the X and Y points here. because they’re on a circle. So, I’m going to go and
walk through the code a little bit. So first I set up my canvas here. I then set my center of my circle. And here this is in
the center of the canvas. I actually get my time delta
to smooth out my animations. And here’s the trick, I set my angle. And the angle will basically
change per animation call and this angle will basically
drive everything else. In so far as calculating to X and
Y coordinates of my circle. I do my math,
I did some magic with math here. I’m actually setting the color
of my line call stroke style. And then,
I just draw my line with my new X and Y coordinates based on this angle here. So, what does this look like? Let’s just go and refresh. This is what it looks like. Pretty cool? Well, remember that I’m painting
over my past pixels, so if I want to just have
show the line itself and don’t care about my past pixels,
I need to go back to this code here. And clear it for every frame. There we go. So we are now animating a line.

Tags:, ,

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *