OK.
So let's get started here.
And this video will focus on getting Paperchase set up and doing some simple simple animations.
So no audio just yet.
First thing I'll point out I'm in a new directory I created.
I added that sounds directory in here.
So make sure that you don't have to do it necessarily for this video because you won't be playing the
sounds.
But if you want to follow along make a directory make sure you drag or copy that sounds folder into
it.
The next thing you need to do is make our file so I'll make a file save it into the correct directory
and I'll just call it circles each time.
Well I in our h tim L. skeleton of course just like that and we'll leave it at that for now.
So let's just open it up shouldn't really see anything.
Now let's go to paper genius.
Again I really love this one.
But we're going to move away from this and we're going to go to download to start.
And the first thing we'll do is just download the most recent version which I've actually already done
.
So when you're done with that it will look like this.
And the first thing we can do is just take a look in the examples directory.
Let's take a look at animated animated star.
Pretty fun to play around with this makes me dizzy so I'm going to shut that off.
But you can take a look at some of the other ones as well.
Candy crash.
So there's some cool animation you can do.
There's a little physics involved here.
What else do we have.
This cool line animation and a whole bunch of other ones are you.
I really like this one this kind of parallax effect as you move your mouse.
OK.
So you can spend hours doing this.
There's lots of great examples you can open any of them up if you want.
Take a look at how it works.
So let's look at that space one first thing that you'll see that we're including paper J.S..
We need that file of course the library just like we need for Jay Querrey.
But there's something that you haven't seen before which is that we have a script type equals text slash
paper script.
So there's a particular type of file or a script that we can write called paper script that is a domain
specific language which is basically it's a language that is made specifically for paperchase.
So it's not something that will work unless we have Paperchase included.
And then you also see this canvas attribute canvas equals canvas.
So this is kind of weird what a canvas is it's an aged hymnal element.
So it's actually where everything that we do.
I'll show you inspect this right now.
This is the working version or the final version.
If I take a look first to show you how it works.
Again if I take a look and I inspect this black background it's not the body.
It's something called canvas and canvas is an HMO element that basically acts as a place to do animations
and graphics.
So if I go to DN a look for canvas can see that added an aged smell five to each smoke cannabis element
can be used to draw graphics to be a scripting in Javascript.
So that's really all it is.
It's an element in canvas that on its own without javascript it really doesn't do a thing.
But then we go and add javascript's to say things like make it rectangle here make it green make a 3-D
shape here do this animation and we do that all with Javascript.
So paper J.S. uses a canvas element.
It's the stage it's where it adds in all the animations in all the graphics.
So we need to have a canvas on our page as you can see for this space example.
If I go to the very bottom the only thing in the body is this right here a canvas and it has ID equal
to canvas and also the background set to black.
So Id equal the canvas corresponds to this line right here.
Canvas equals canvas.
So we're just telling this paper script file or this paper script script what ID to look for which in
the example that just named but canvas.
So we're going to do something very similar to this.
But before we get there we need to make sure we include paper yes.
So when you go to the download.
And rather than opening examples we're going to look indexed and then we can pick either paper full
or paper full of men and understand the full one here.
So I'm going to copy that over into our directory so paper Dasch full but us then in our own app we
need to make sure to include that.
So Source equals paper Dasch full japes just like that and save.
And then what we'll do is just refresh the page in Chrome.
Make sure we don't get an error.
Great.
So it found the file just fine.
Now let's go to paper genius's docs and look at tutorials so I actually didn't do this early on.
But I do want to read the description of what paper JSA is.
So it's an open source vector graphics scripting framework that runs on top of the age to my five canvas
.
It offers a clean scene graph slash document object model and a lot of powerful functionality to create
and work with vector graphics and Bezier curves all neatly wrapped up in a well-designed consistent
and clean programming interface.
So kind of a mouthful.
Basically it's a kick ass drawing library animation library graphics library.
That's really pretty popular.
There are a few of them out there so it's not it's not like a query where it's pretty much the one DOM
manipulation library.
The one event handling library.
There are a lot of animation in graphics things out there but paper is is I'm pretty confident saying
it's the most popular.
OK so let's go back to tutorials and take a look at getting started.
I think yes getting started working with paper.
Yes.
And we'll scroll down and take a look at their example here.
So what we could do is copy this entire thing in.
But I want to do it one piece at a time so that you see how it works.
So let's start by copying this canvas just copy the whole line and we'll put it in our body.
So canvas I.D. equals my canvas and if I refresh the page we won't see anything at all.
If we expected we would see there is a canvas there but if we go back let's copy this script text or
type because text size paper script canvas is my canvas.
And let's put that in here and paste.
So if we look at what's happening here there's some nice comments says that it creates a paper G-S path
to draw a line.
So we make a path and you're going to see a lot of syntax here that you've never seen.
And again that's the point.
The point is that I'm forcing you to see some new things to read the docs.
It can desensitize you to this feeling of I don't know what I'm doing I've never seen this code before
I don't know how it works.
That's kind of the point of the library.
You don't have to know how it works especially for something like animations.
Just be glad that someone else is taking care of it for you.
I definitely am it saved my life a lot of times.
So we create a new path here save it to a variable.
We change the stroke color to be black and then we create a point for the start at 100 comma 100 and
then we move our path to that start and then we draw a line to start plus 100 X and negative 50 y.
So I'll show you exactly what that does but it draws a line starting from 100 100 and then it moves
that line or it connects out first point to 300 comma 50.
So if we take a look make sure everything is working if we are fresh.
We end up with a line.
So the best thing to do when you have something new like this is play around.
So try changing this.
So it's red and start is now 0 100.
There we go we just moved our line or let's change this to be something more drastic like 500.
So you can play around with this all day long.
But what I want to really point out is that we're creating a paper script script not text so it's javascript
paper script and we're setting this canvas attribute canvas equals my canvas which is the name or the
ID that we assigned it.
So these have to match and the whole point of that is just to tell this paper script file where to draw
things.
What canvas to use.
So we can play around quite a bit more.
And I would highly recommend that you stop the video and take a look at the tutorials try some other
things.
So I'll just point you towards path's predefined shapes which is what we'll be using.
We're going to be making circles with our application here.
So this is what we'll need to do.
Let's just copy this code right here so Pat new path dot circle and then you have to give it a point
to make a circle.
And then the radius it looks like.
So you can see there's an explanation so it needs a center point x 100 y 70 and a radius of 50 and then
a fill color.
So let's take a look just copy this to the bottom of our code and see what happens.
Which is kind of what you do a lot with J S and similar libraries.
You just experiment.
So let's change radius to be 10.
There you go.
So we could also try doing another circle by just copying this down to another line.
Let's call it var circle 2 equals new path dot.
And let's make this one really large and purple.
So new point and let's put it at 50.
Come a 50 and it's going to be huge.
So it give it a radius of 300 and then circle to fill color equals purple.
Just like that refresh.
And you can see we end up with that gigantic circle that you actually can't tell how big it is because
our canvas hasn't taken up the entire width of our screen.
So let's do that next because we do want that we want our canvas to take up the entire width.
So I'll go and make a new style sheet so I added link tag here a Tref equals circle's dot SS which doesn't
exist.
And then let's save a file called Circle Stut see assess and what we'll do is add in canvas with 100
percent.
And let's also give it a background of black.
And if we are fresh you can see we're close but we have a few things.
The first of which is that our body doesn't actually go all the way down.
So our canvas takes up when 100 percent of the width.
But even if we give it 100 percent height right now
it's not going to actually change the way that we want it to.
Then we also have this margin that we want to get rid of.
So rather than spend too much time going over that I'll just show you what we need to do.
Well just set height to be 100 percent and margin to be zero.
And if I refresh the page now it takes up the full screen.
So if you want to go more into detail and understand exactly why we did that inspect the body before
we add this code in and then uncommented inspect the body again and you'll see what happens.
Basically we're just making sure that the body takes up the entire width and height and there's no margin
which means that our canvas will then expand to take up that entire space as well.
OK.
So we created a canvas now that's really the last thing I'll do in this video.
I just wanted to introduce you to how paperwork's we have paper script scripts.
We give it a canvas and then we put some code in here that you've never seen before.
A lot of this I've never seen before until I made this video or until I made this project for this video
.
I've definitely seen it before.
This exact video.
But the point is that it's new.
And that's why we're doing this.
It's a really important skill to be able to take code redox and basically copy it in and change it.
Great.
So in the next video I will be giving you a quick optional exercise so if you just want to get to the
project and skip the educational learning experience whatever you wanna call it.
But if you only get to kind of the payoff go ahead skip the next video.
I would recommend that you do it though.
We're not going to make the most impressive thing but I'm going to have you do an exercise with some
circles.
Very exciting.
I know.
OK.
I'll see you then.