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.