OK we'll welcome back.
So in this video we're going to take what we've done already and we're going to animate it slightly
.
So eventually what we want to happen is that for every key press we get a circle in a random location
with a color and that color animate slightly.
And we also get the size animation.
So I don't know if you could pick up on the color changing but it's it's pretty sleights for just adding
a little bit to the hue.
But either one of those will do for us to start.
We're going to start actually just changing the color of these circles and we're actually going to start
simpler by just changing the color of one circle.
So not all of them that will come later.
So if we go to Paperchase go back to tutorials and you look at animation at the bottom.
First thing that you can do is take a look at some of the examples.
Here's an example.
And you can see it's really really simple actually to do the animation.
What we do is we define something in this case a rectangle.
In our case it will be a circle and then there's this on frame and whatever code we put in here will
run on every frame of the animation.
So in this case every frame of this animation we're rotating that rectangle three degrees or in this
case which is what we're going to use every frame we're adding one to the hue of this circle that we
defined up here.
So let's try this out.
Let's go ahead and make a new circle not inside the key down.
So this will just always be there when the page loads.
So we'll call it var animate circle equals new path dot circle and will have it be new points and let's
make this circle at 300 comma 300 and the radius.
Let's make it larger 100.
Just like that.
And then we'll do animated and what's called animated circle rather than animate dot fill color and
set it to be red to start just like that.
Great.
So it's not going to be animated yet but if you refresh we get one big circle and every time I hit a
key we get smaller circles that are random.
Now we need to add in our animation and it's really simple as we saw function on frame and we can pass
in or out except this event argument.
If we wanted to do something with each frame if we wanted some data about it we don't actually need
that.
And then all of do in here is to animated circle dot fill color that you plus equals one.
And this is straight from that example.
So every time animation requests a new frame which isn't up to us so we're not deciding the frame rate
how often this code is called.
Anytime there's a new frame which paper just takes care of we're adding one to the hue of her animated
circle.
Let's refresh and there we go.
So really really simple to do that sort of an animation.
We can also do animations though wherever changing position of something and that is a little bit more
complicated.
This one happens to be even more complex this example because they're not just animated something from
one point to another point and it's also not accelerating evenly.
So it's a little more complex but still only a few lines.
Here's another example of moving things.
Some other animations.
What we're going to do though is use something they don't show and the examples here that I spend a
little bit of time digging into the docs what we want to do is just scale each one down every frame
.
So what we do is basically when I press a key we make a circle.
Let's say it starts out as 300 by 300 or 300 radius excuse me when I hit that character every frame
or shrinking it a little bit by basically scaling it by point nine nine point nine eight.
I forget the exact number but we're multiplying it by a smaller size every frame and it just shrinks
and shrinks so it disappears.
So I'll show you how that works.
Let's go back to our code we have the circle still animating and inside of on frame rather than just
adding one to the hue.
What we'll do is do animated circle
dot scale which is a method that I found and we can multiply by any fraction that we want if we just
leave it at one it will stay the same size so we won't actually see it.
But if we do something like point nine and we refresh There we go every frame changes hewe by 1.
And it scales by point nine or 90 percent of what it was in the previous frame.
So if we change that to something like Point 9 9 to be a slower transition down and if we change it
to something like point five it's going to shrink very very quickly.
So every frame it gets half as big as it was in the previous run.
So I think what I went with was Point 9 to start.
So we'll leave it at that.
And now we have a single circle changing color and shrinking what we want to do next is when I hit these
other keys.
You want those circles to do the same thing and that's a little bit more complicated.
But honestly the code here it will stay the same all that's different is that we need to do this for
every circle that's on the page.
And this is probably the most drastic change that will make what will actually do is have an array of
circles and every time we press a key We'll add that circle in that new array because right now we're
not actually keeping track of all the circles we need to save all of them somehow.
So that on frame right here in this function we can then refer back to every circle that already exists
and animated.
So we'll keep this code.
But what we want to do is loop through an array that doesn't exist so we'll just call it circles.
So for var i equals zero Ayas less than Circle StarLink.
Plus plus what we want to do is do circles.
I fill color does here.
So we'll just start with the fill color just at the very beginning.
So I'll just copy this line.
So it's not going to work yet because circle's doesn't exist.
But the idea is that on every frame we loop through all circles in this array and we add one to each
one hue every frame.
And you might think that that's pretty intense and it is it's a lot of stuff happening but paper just
takes care of it.
But we'll also be adding in a small optimization towards the end so I'll show you what I mean in a future
video.
But for now this is what we'll do.
And all we have to do now is actually add this circle that we're making into the circles array so we
can define that array for our circles is an empty array to start and then when you press a key on key
down we'll just do circles up push this new circle in circle stop push this new path out circle at this
random point.
Right now we have a radius of 10 and resetting the kill fill color as orange.
So we're just pushing that circle that we already had into this circle's array.
And then we're updating every circle.
So there might be one circle there might be 20 circles.
There might be 100 circles at any given time.
We loop through all of them and add one to each queue and if we take a look right now and refresh it
doesn't quite work yet.
And this brings up a really interesting point about how push works.
So if I open the console it tells me I cannot read Prakriti hue of undefined mind 24 which is right
here.
So it's not somehow it's not reading that Hugh property of Phil color saying Phil code doesn't exist
.
So let's do a constant log circles.
And you'll see what the problem is.
If I open this up it's stopped because we had an error.
But we actually added orange the string into the array not the actual new circle.
And that's because what we're pushing in is not just a new circle we're making the new circle.
And then we're setting the fill color to be orange.
So the last thing that was returned was the string orange.
So the end result is that we're just pushing in orange every time.
Which is not what we want.
So we'll make a new variable we'll call it our new circle and then we'll do new circle dot fill color
separately equals orange and then we'll push in New Circle.
So rather than editing this out I do think it's an important error to see.
Totally caught me off guard for a moment there but it's important to understand how that works where
we have those those chained methods on top of one another where we had passed that circle and then dot
fill color equals orange and we just added that whole thing into the array with push.
We were just adding orange in.
So we need to fix it.
So hopefully this does it.
And actually I know it does but if we are fresh and take a look now add in new circles randomly placed
and they all enemy the Heugh animate so just perfect.
Now let's update this to work with size.
So it's actually just this exact same line that we have here.
I'll get rid of our constant not log.
Except we want circles.
I.
OK.
So before I show you if it works let's just review what we did.
So when you hit any key we add in a circle at a random point 2 we make a random point to make a new
circle with that random point 10 pixel radius and lets actually change that to match what we have in
the solution which is five hundred and then we're selling the fill card to start as orange which will
change eventually.
And then we push that into an array called circles.
Then every time a new frame is called Every animation frame we're looping through all circles.
And for each one we're adding one to the hewe and we're multiplying the size of the scale by point nine
.
So we're shrinking it just by tiny bit every frame.
But there are so many frames that it actually shrinks pretty quickly and we can get rid of our animated
circle now that starts on page load.
We don't want to start with a black screen.
And then when you hit a key we add a circle.
So let's try it.
There we go.
So this is almost exactly the same way.
Here is the sound.
One big difference is that the color says these every key has an assigned color here so Q Is this blue
a darker blue half.
Is it gray.
So on our it's a purple right now here we're setting everyone to start is orange and then changing the
hue.
So we will need to fix that but I mean wait to do that until we add in sound.
So we're done for now.
There is a small optimization that will make it the end because right now we're never removing those
circles from the circle array.
So even if you know after 10 seconds that circle has gone even after three seconds we don't see it.
Technically it's still in that array.
So that's not ideal.
If we had ten thousand circles that we had created and we don't see any of them we don't want to be
looping over all of them.
So in the last video I'll show you how we can remove a circle when we know that it's gone or when we
know that it's no longer feasible.
OK so next up we'll work with sound