Hear they're welcome back.
So in this unit we're making probably my favorite thing ever.
It's this simple but fun toy.
Using animation and an animation library some graphics some audio and audio library.
And we're going to make a simple simple clone of that pad a tap app that I showed you early on where
you can hit keys on your keyboard and each key corresponds to a sound that is played and a little animation
and are just going to be simple.
We're not going to have a bunch of different animations.
I'll show you what it looks like.
Every key has its own sound.
And when I hit that key the sound is played and we get a colored circle through every key has its own
color and then the circles animate.
They basically shrink down.
So I'll show you what I mean and turn it up a bit.
We're going to make this movie isn't the same sound here.
Yes it's pretty fun but.
But the reason that we're doing this is not just because it's a fun project.
We're doing it because we have to use libraries here and we're going to use two libraries and mentioned
one is called Paper genius and another is called How they're genius.
And I just want you to see what the process is like when you incorporate a library into your code.
And whenever I'm writing curriculum whether it's for an evening course or a six month or a three month
course or an online course I always make sure that there's some there's some project or some assignment
that forces students to do a little bit of digging into the docks of a library or figuring out how to
incorporate some external code into their own app.
And I usually try and make it into something that's kind of fun sort of a toy maybe or a cool interactive
demo.
So I've done things with audio before with animations but also with the webcam and face tracking and
head tracking.
There are libraries that can do pretty much anything now with the browser it's it's really impressive
.
This one though is really fun.
Again we're taking two libraries Paperchase and how lurgy as we use paperchase to help out with graphics
and animations.
So they have some really really fun examples.
If you click on Showcase actually and on paper Jasc dot showcase they show you some real use cases where
people have used paper just in the wilds of clear cut examples.
There's some fun toys I really love this one here can probably play with this for hours.
Something is just very relaxing about this to me.
So fun things that we can do with paperchase.
Again anything that Paperchase does we can do on our own without Paperchase but it's a lot of work.
So I'll show you what I mean.
The code here.
So I hit a key in this case the letter P to make that circle and to shrink it down like that to do that
animation and also notice it it changes color a little bit.
I don't know if you can see that but it goes from purple or blue down to purple.
Or if I do another one this goes from yellow down to green.
That animation and that transition without paper J us might be 50 lines.
Maybe we could get by with 20 or so lines with paper.
Yes.
It's less than five.
It's really really simple.
Same thing with Hausler so howler helps us play audio.
We can do all of this without however just like we can do all of J queery everything that it does and
we can get by without j queery it just often means that we have to write more code.
So this plays a sound Here's an example we're going to do something very similar to this where we're
just going to play a sound when you hit a key and each key has its own unique sound so I'm hitting q
q always plays that noise and it always is that light blue color transition to a darker blue.
One last note is that the circles are in a random respond in a random location every time you press
that key.
So the location is not set doesn't correspond to the key just the color and the sound that's played
.
Okay great.
So in the next video we'll get started.
One thing I do want to point out before we get started is that all of these sound that you hear play
them all really.
Yes some really nice sounds.
We actually can use them in this project together.
I've included them as a download.
I'll show you here if you download the sound zip file.
There's a bunch of sounds.
Twenty something sounds in that file.
So there's some really nice sounds there and we actually can use all of those.
They're from an open source project and ghetto.
It's actually what patta tap uses or what Pedda tap actually is.
It's this neuronal synchrony on get her.
So it has animations if you want to look at those animations that we're not going to do.
So a lot more complex but it also has all the sounds.
So what I did is I just took the sound from this a folder right here all of these sounds and I zipped
them together.
There are a lot more if you want to choose different sounds you can go to get haven't download this
but I like the sounds that are in that a folder.
Also point out the license here.
We can use it MIT license take a look at it if you like.
Really nice sound so I'm not sure who made them if the creator here made them.
But there's some really really good sounds that we'll be using and they're identical to what patta tap
uses.
So download those.
It looks like this just a directory with a bunch of sounds.
And we'll be using that in the next few lessons.
So we go ahead and get started in the next video and I'll just leave you the last few seconds here and
make something on this CD
.