OK.
Welcome back.
So as I mentioned in this video will actually start working on a pet attack clone here.
So the first thing we want to do is figure out how to add a circle which we've actually already seen
but we want to do a few things at a Circle when the user hits any key actually in my case I'm only doing
it for her kids.
It works the same way for any other key.
So when a user hits the key at a circle and then we also need to figure out the animation of that circle
.
And lastly we want to add that circle to a random coordinate.
So to start we'll just hit a key and add a circle to the middle of the screen.
So let's go to the paper japes docs and take a look at interaction and look at keyboard interaction
.
And I know it seems like well I didn't know where to look here but the first time I came here it took
me a lot longer to find that I just went through most of these and searched for keyboard basically trying
to say that most likely if I was doing this again by myself and I hadn't prepared for this video it
would've taken me a lot longer to find that I might've done a search anyway so that's scroll down and
just look at some of the examples.
This first one quick here to focus and then press some keys and it tells you what key was pressed and
when it was released as well.
So right now I'm pressing K and then releasing it.
And if you look at the code it's really easy just on key down and Anchia up.
So it's not there's no document on at event listener there's no Jay queery event listeners behind the
scenes there are documented at event listeners happening.
But for paper script we just have to write this super simple line so we can take that actually just
copy this will do key down for our app.
We want the sound to play immediately.
So as I press the key not when I am released thinking that's a little bit slower it's sort of like a
piano that when you hit a piano or the noise the sound that is generated is generated right when you
press the key or right afterwards not when you release.
So Will do key down.
I copied that and we'll start by just making a new circle so we need this code.
But we just want one so we don't need the loops anymore.
Get rid of that and we'll make that new circle on key down.
So this process is pretty realistic where you're taking different pieces and you're just kind of fitting
them together.
So I found this in the docs on key down.
You can get rid of that.
And I found this in the docs as well and we do need to change this X and Y aren't defined.
So let's just do it at 100 comma 100 and let's make Phil color orange.
So on down run this code.
And again it's very different than what we've seen or we have documented an event listener.
And then we would have to add in some element.
So we'd have to do like document dot query selector some element like a div dot add event listener and
then we'd have to tell it click or key press or key up.
It's a lot more code.
This is done for us with Paperchase really simple.
So on key down let's see what happens.
I'm going to press the key and we end up with a circle and every time I press 1 I do get another circle
.
You just can't see it.
So now let's work on this so that we are adding a circle to a random place on the screen.
And the way that we do that actually took me a little bit of work to find that we could do it ourselves
where we generate two numbers basically from zero all the way up until the maximum width of our screen
and then the other number from zero up until the maximum height of our screen.
And that's not too much work but we do have to figure out the width and height and the dimensions which
if you go to Paperchase and if we look at where you reference.
And then when that's open look in view.
And again I just found this a few days ago I took a little bit.
But if we look at you and we look at bounds and or maybe it's size the size of the visible area and
project coordinates.
So if we did something like consul that log view size which again I just found here and refresh the
page and see what we get we get height and width so we can take that height and width.
So you're not size dot height and then cancel that log you that size start with and we could use that
refresh and I prosequi.
Currently the view that size is six hundred ninety two by seven hundred.
But if I resize it you'll see that changes next time.
Persecutee.
So we can use that to generate those two points that we need.
But the other thing that we can do is there's actually a built in method that I found that will make
us a random points so I'll show you that as well.
So rather than having to do math at random which gives us something between 1 0 and 1 non-inclusive
and then we have to multiply that and shift it up or down.
It's kind of kind of a pain.
So what we'll do instead is use this nice paper J S way that I found looks like this.
So I'll make a maximum points so the maximum point that we can add a circle to is going to be new point
view dot size.
And then we want with comma that size dot height.
So x and y are maximum X or maximum y.
So that makes our max points and I'll show you if we do a constant alt log Max point
there we go
and let's actually add our circle to max point.
So instead of making a new point here at 100 Kamo 100 we'll just give it Max point.
OK.
So let's try that out now and get rid of those to refresh the page.
I hit a key.
See we get one right down here in the bottom right corner.
And if I resize and do it again and I hit a key we now get our maximum point right here.
So this is nice because as that window changes as the the visible area on this canvas changes our maximum
point changes so we're not always generating a random number between you know our screen dimensions
or even the window size because as soon as the visible area it's not even the entire window but just
the visible area on the canvas changes our maximum point changes.
OK so we have that.
Now what we want to do is take that maximum point and we're going to generate a random point.
So we'll just call it random point and there's a method point dot random and that will give us a random
point between 0 and 1 non-inclusive just like mascot Rande except with one line.
We get a point object.
So it's basically doing this.
New points math dot random comma math dot random and then we want to take that make another variable
that we'll call just point and it's equal to max points times random point just like that.
So we're multiplying those two points together.
It's kind of a lot of weird math but basically we're generating a point between 0 0 and 1 1 but technically
it would be point 9 9 9 9 and so on.
So let's say we generate a point as point five point five then the next thing that we do is we have
our max point which will always be the very maximum that we could make.
So something like 12 80 by 720 or whatever our window size is 600 by 300 and then we multiply them together
and we end up with a new point that is in this case 300 comma 150.
So this is how we can generate a max or a random point that exists on the viewable area.
Are they currently visible area of the canvas.
OK so now let's just change this so that it goes to points.
Let's take a look now refresh.
Hit any key and we end up with random circles.
Every time you press a key.
Whoops.
And if I resize the window let's make it halfway across.
Every time I press the key we still see it.
So it's not generating points over here anymore which is nice.
So that if the window happens to resize the user doesn't have to refresh to get new a new visible area
to get kind of calculated numbers.
Okay great.
So that's how we generate a circle which you already see in but it's how we generate a circle when the
user hits a key any key.
And we talked about how to make a random point in the next video.
We'll see how we can do some simple animations by first changing the colors of these points and having
them fade to different hues different colors.
And then also by shrinking them down.
So we'll see that the next video and then we'll go back and add in sound.
In the last video