Advanced - HTML5 Canvas and Animations Udacity English English (auto-generated)

Advanced - HTML5 Canvas and AnimationsYouTube↗ IA↗(long shot)
Education 6.6K views 27 likes 21 dislikes 06 Jun 2016

Udacity 651K subscribers United States YouTube↗

Click to Play Video

Okay, so we will be talking about canvas.

okay so we will be talking about canvas

So, what is the canvas in HTML file?

so what is the canvas in html5 the

The canvas is basically a way for you,

canvas is basically a way for you it

it gives you a way for you to draw stuff in a nutshell.

gives you a way for you to draw stuff in a nutshell it gives you a built the

It gives you a built, the ability to draw objects. Basic objects such as rectangles, squares, lines.

ability to draw objects basic objects such as rectangles squares lines as well

As well as be able to paint pictures that you import in.

as being able to paint pictures that you

And why's the name canvas is that, it's just like if you were a painter, right.

import in and why the name of the why's the name canvas is that it's just like if you were a painter right and you're

And you're painting on a canvas and

painting on a canvas and the canvas is

the canvas is just a white piece of usually a white piece of cloth that

just a white piece of you know what

you would just paint on the canvas with your actual paint.

piece of cloth that you would just paint on the canvas with your actual pink with

With the brushstrokes.

the brushstrokes

So instead of manually painting it, you actually paint it through your code.

so instead of manually painting it you actually paint it through your code and

And how it will work is like,

how it will work is like if you paint

if you paint something on your canvas that's it.

something on your canvas that's it

You cannot really remove the paint and adjust it.

you don't you cannot really remove the paint and weep and and adjust it once

Once you paint on something on your real canvas and

you paint on something on on your real

then you paint brush, you actually have to paint it over.

canvas and then your pray for us you

And that's a very important concept to know.

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.

once you paint something on the canvas those pixels are there indefinitely on

On your canvas.

your canvas so if you want to adjust

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.

something you need to paint it over those pixels now lucky for up lucky for us in the computer world we have the ability to clear our canvas to reset it

We set it to a black state in order for us to be able to repaint it again.

to a black state in order for us to be able to repaint it again and that will

And that will be a very crucial concept for you to learn about the canvas. Animation is basically, you just showing me a picture.

be a very good concept very crucial concept for you to learn about the canvas animation is basically you just showing me a picture and then showing

And then show me another picture.

you another picture and then show me

And they show me another picture rapidly, very fast.

another picture of rapidly a very fast

And each picture, one thing, one slight thing changes.

and each picture one thing one slight

So, in my eye it gives me the illusion of movement.

thing changes so in my eye is show it tell us it gives me the illusion of movement that is basically

That is basically animation and you just flip through it.

animation and you just flip through it

The first thing I'm going to do and you go find all this documentation on

the first thing I'm going to do and you can find all this documentation on

Mozilla's development network or on the campus video lessons on you udesk.

Mozilla's development network or on the campus video lessons on Udacity so the

So, the first thing that we need to do is, this is our HTML site here.

first thing that we need to do is this is our HTML site here in HTML and taurah

In HTML and to our left is what page will look like.

is what the page will look like right

Right now, there's nothing because we haven't drawn anything.

now there's nothing because we haven't

So what we need to do, [INAUDIBLE] alike we need to declare a canvas

drawn anything so what we need to do is first we need to please you see this

element called canvas, that's pretty easy.

highlight here we need to declare a canvas element called canvas that's

You need to our ID to something similar like my canvas, and

pretty easy we need to set our ID to something similar like my canvas and is good to

it's good to set width and a height, because this is very important.

set a width and a height because this is very important that will let us know

That will allow us to know our boundaries when we're drawing.

allow us to know our boundaries well when we're drawing and then I am

And then, I'm actually hooking in to a JavaScript file that actually does all

actually hooking into a JavaScript file

of the heavy lifting of the work.

that actually does all the heavy lifting all the work and this is called demo

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.

setup jeaious so I'm gonna go into demo JA set up dot J's now and tell you how would you set up an animation for it

Right here. So the first couple of lines you're going to see this line here.

anything right here so the first couple lines you're gonna see this line here

A set up canvas and other variables.

set up canvas and other variables

So, I'm getting Domage DOM called canvas.

so I'm declaring I'm getting a Dom object do M called canvas I'm getting

I'm getting the ID from my canvas. And then, I'm getting the context.

the ID from my canvas and then I'm getting the context the context will

The context will allow us to hook into every other API call in the canvas.

allow us to hook into every other API

Now if you you're not sure of what I'm doing or

call in the canvas now if you if you're not sure of what I'm doing or why I'm

why I'm doing it, it's just part of the documentation.

doing it it's just part of the

And you will find out more about this

documentation and you will find out more about this set up in our you guys

set up in our UDAC course or you could just read the documentation online.

Udacity course or you just read the documentation online so this is very

So this is very important, a lot of people, a lot of beginners

important a lot of people a lot of

don't realize that like once you set up your canvas and your context,

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.

you think that you're ready to start

But, it's not quite that simple because in JavaScript,

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

in HTML programming there's a lot of things called events and we actually had

we actually have to wait for events to finish.

to wait for events to finish because the

because the browser needs a couple milliseconds to actually load up and

browser needs a couple milliseconds to actually load up and create the document

create the document tree structure like the DOM, because, how process work?

tree tree structured like a Dom cuz how how browser is working you'll find

And you'll find out more on project 4 is that, it gets a string file,

out more on in project four is that it

it gets the code in your HTML, it then needs to process and

gets a string file it gets the code in your HTML it then needs to process and

create these abstractions, these nodes.

create these abstractions these nodes

These objects in the .NET object model.

these objects in the document object

And if the browser has not finished loading all these objects, and if you

model and if the browser it has not finished loading all these objects and

have a JavaScript that's trying to refer to an object that does not exist,

if you have a Java Script that's trying to refer to an object that does not

such as canvas, it's not going to work.

exist such as canvas it's not going to

So, this is a trick that I recommend you keep notes of.

work so this is a trick that I recommend you keep notes of it's called window

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,

onload so window onload is an event that the window the browser will fire off once it's done loading everything including the document object model the

the images and also all the other resources for you. Let's go back and talk about animation.

images and also also other other resources for you let's go back and talk

So we set up our objects here.

about animation so we set up our objects

And then we set this to unload this function here.

here and then we set this onload

So unload I'm going to call this function called anime.

function here so onload I'm going to call this flushing call enemy and I'm

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.

gonna pass in my canvas object and my context object and then I'm gonna go down here and then I'm gonna do my magic

And then, I'll walk through this common stuff here again but

here and then I'll walk through these common stuffs here again but you do your

you do your magic here.

magic here but then at the end this is

But, then at the end this is very crucial.

very crucial this is how animation works

This is how animation works because right here, I'm going to highlight this.

because right here I'm going to

You're making one frame.

highlight things you're making one frame

One function call is basically one frame.

one function call is basically one frame

You're just making one static picture.

you're just making one static picture

How do you show the next picture?

how do you show the next picture because

Because in animation, we need to show the next picture and change the objects.

in animation we need to show the next picture and change the objects change

Change to X and Y coordinates when we draw stuff.

the X&Y coordinates when we draw stuff

And then show that picture again.

and then show that picture again there

There is a method in JavaScript called requests animation frame.

is a method in JavaScript call requestanimationframe so what you do is

So, what we do is pass in your function,

pass in your function an anonymous

an anonymous function, to Window request animation frame.

function from when two window requestanimationframe and then you pass

And then you pass in this function, again, animate.

in this function again animate so

So, animate function is calling itself.

animate function is calling itself again

Again, this may be new to you if you're new to programming,

this may be new to to you if you're new

but a function has the ability to call itself.

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.

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

and then once I call myself I'm gonna go

I'm going to repeat my instructions.

back to the top here I'm going to repeat my instructions what I want to do is

What I want to do, is that I want to be able to draw on line.

that I want to be able to draw a line

Pretend that this is a line, this pen is a line.

pretend that this is line this pen is a

I'm drawing this line from point A to point B.

line I'm drawing this line from point A to point B and then I want to rotate

And then I want to rotate this line. Like this, in a circular motion, indefinitely.

this line like this in a circular motion indefinitely so basically how do we do

So basically, how would we do that?

that we'll just go back to our animation

We'll just go back to our animation. We want to draw static images of one line. Then okay.

we want to draw a stack we want to George strike images static images of one line then okay we call animation

Recall animation frame again.

frame again change the position of this

Change the position of this line again, okay. Paint that over a series of thousands of frames that you're drawing.

lawn again okay paint that over a series of thousands of frames that you're

It will look like it's animating like this.

drawing it will look like it's an amine like this so let's go let's go back to

So let's go back to the code and let's see how we're going to do this.

the code and let's see how we're gonna

So let's just first learn how to draw a line because I think,

do that so let's just first learn how to draw a

if you're not familiar with, we'll learn how to draw a line I'm going to show you

line because I think you know if you're if you're not familiar how'd your lamb

and how you're going figure this out is just read the documentation.

will show you and how you gonna figure this out is just just read the documentation and let's just draw a line

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

so CTX line with I'm going to draw a line width of 10 because I want the

this line to be 10 pixels.

width of this line could be 10 pixels

I'm going to execute this command called beginPath(). And you'll find all this in the documentation.

I'm gonna keep this command called begin path and you'll find all this in the

So you're just really going to read the documentation and

documentation so you just really don't read the documentation then apply what

then apply what you want. So I'm going to move my, I'm going to begin at let's say the coordinate

you want so I'm gonna move my Maya I'm gonna begin and let's say the coordinate

100 pixels, 200 hundred pixels down.

100 pixels 200 pixels down so this is

So, this is your X coordinate on 100 pixels from the left and

your x coordinate I'm 100 pixels from

then on 200 pixels down from the top. So that's your Y coordinate.

the left and then I'm 200 pixels down from the top so that's real and then I'm

And down let's start line times two.

going to start line to next quarter now

The next coordinate.

300, 200 so that's my next coordinate in my XY.

two hearts coordinate and my ex-wife I'm

I'm going to actually escape the command stroke,

gonna actually execute the command stroke yeah we're going to close this

then I'm going to close this path.

Okay, and that's how we draw on a line.

okay and that's how we join the line so

So I'm going to save this and I'm going to refresh.

I'm going to save this and uncle refresh

There's our line.

yours our line but mark it's not

But, Mark, it's not animating. Well, it's, technically it is because it's calling the frame again and again.

animating well it's technically it is cuz it's calling the frame again and

It's calling the function animate again and again but

again it's called a function animate

we're not moving the line because we just have the static code because it's

again and again but we're not moving the line cuz we just have the static code

just painting this line over and over and over again.

because it's just painting this line over and over and over again so how are

So, how are we going to show that this is actually working?

you gonna show that this is actually

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.

working well let's just go ahead and change these XY coordinates and what I'm gonna do I'm just I'm gonna give you a little trick here is that this is my

Is that, this is my start point.

start point my end point will be

My endpoint will be different. So, my endpoint will be, let me add a little bit of randomness to it.

different so my end point will be let me add a little bit of randomness to it so

So random 50 plus 10. So, and if you're not familiar with this random function.

random 150 plus 10 so and if you're not familiar with this random function for

For each call of this function it will give you a random number from 0 to 1.

each call at this function it will give you a random number from 0 to 1 and then

And then, I am increasing the range of 0 to 1 from let say 160 to 10.

I am increasing the range of certain 1/2

And if you are a little bit confused on that,

from let's say 160 to 10 and if you are

just look up the that documentation for random and

a little bit confused on that just look

figure out how can I set random numbers between my minimum value and

up the documentation for random and figure out how can I set random numbers between you know my minimum value and

my maximum value I want.

maximum value one so I'm gonna set this

So I'm going to set this up per frame what do you think?

so per frame what do you think

The line should move, should looks something like this.

the line should move it should look something like this

All right, so that's great.

all right so that's great so the line

So the line moves. But then it doesn't, it's painting over everything else.

moves but then it doesn't it's painting over everything else remember this is a

Remember, this is a canvas. So, if I'm painting something over and over again.

canvas so if I'm picking something over

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,

and over again that that it's like I'm simulating I will paint something on a real actual canvas so in order for me to be able to displays animation per se

like, I want this line to move, and I just only want that one line drawn,

that like I want this line to move and I just only want that one line drawn I

I need to actually clear the canvas per frame call, per animation call.

need to actually clear the canvas per friend call for animation cost so if

So if we go to this code here, there is a function called clear rectangle.

you go to this code here there is a flushing called Claire

And the rectangle is basically the canvas like the whole canvas.

rectangle and the rectangle is basically the canvas like the whole campus so I'm

So I'm going to clear this.

gonna clear this I say that um I'm gonna

I save it. I'm going to refresh.

refresh and here we go

And here we go. So this is animation in a nutshell.

so this is animation in a nutshell you

You see that so every animate, anime call.

see that so every animate animate call

It will draw a line from one point to another.

it will draw a line from one point to

This doesn't, it's and we're animating.

another this doesn't it's and we're animating so

So congratulations, we just learned the basic concepts of anime and

congratulations we just learned the basic concepts of anime and learn how to

learned how to apply that in canvas. Now, we want the line to not do this, but

apply that in canvas now we want we want

we want the line to rotate in a circle.

the line to not do this but we want the mountain rotating in a circle so how are

So how are we going to do that?

we gonna do that so I'm gonna use a

So i'm going to use a series of sine and cosine.

series of sine and cosine and a series

And a series of angles because basically what I'm doing is that I want to be

of angles because basically what I'm I'm doing is that I want to be able to have

able to have a point here and a point here along the circle.

a point here and a point here along the

I want to trace the X and Y points here. because they're on a circle.

circle and I want trace the X&Y points here because they're on a circle so I'm

So, I'm going to go and walk through the code a little bit.

gonna go and well free to code a little

So first I set up my canvas here.

bit so first I set up my canvas here I

I then set my center of my circle.

didn't set my center of my circle and

And here this is in the center of the canvas. I actually get my time delta to smooth out my animations.

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

And here's the trick, I set my angle. And the angle will basically change per animation call and

set my angle and the angle is will basically change for per animation call

this angle will basically drive everything else.

and this angle will basically drive everything else insofar as calculating

In so far as calculating to X and Y coordinates of my circle.

the X&Y coordinates of my circle I'm I

I do my math, I did some magic with math here. I'm actually setting the color of my line call stroke style.

do my math I do some magic with math here I'm actually setting the color of my line cos stroke style and then I just

And then, I just draw my line with my new X and

dropped my line with my new X&Y

Y coordinates based on this angle here.

coordinates based on this angle here so

So, what does this look like?

what does this look like let's just go

Let's just go and refresh. This is what it looks like.

every fresh 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.

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

And clear it for every frame.

clear it for every frame there we go

There we go. So we are now animating a line.

so we are now animating a line

Similar videos:

1.3: Basics of drawing - p5.js Tutorial
The Coding Train
245K views 3.1K likes 58 dislikes 01 Sep 201526% match

1.1: Drawing with Pixels - Processing Tutorial
The Coding Train
268.8K views 4.4K likes 68 dislikes 11 Jul 201525% match

Settings Privacy About Contact Donate