welcome to a followup Coding Challenge:

Quick Draw Again, thingamabob,

Quick Draw API Web Component edition.

So, previously in a Coding Challenge, I downloaded

a large data file from the Google Quick Draw data set.

I talked about what the Google Quick Draw data set is.

It's just a collection of millions and millions

of these doodles that people made playing

the Google Quick Draw game, and I created a node server

locally on my computer to open that very large data file,

and pass information about the drawings

to a JavaScript program that would read that information

and then replay the drawings in a canvas.

Basically, almost to the day that I released

that Coding Challenge, Google came out with something new

called the Quick Draw component,

and what the Quick Draw web component is,

it allows you to actually, using markup,

and importing a JavaScript file,

just actually embed Quick Draw doodles in a web page.

I'm not going to do that in this video.

What I'm going to do is actually show you

how to use the API directly to pull the data

from the drawing yourself so that you can draw it

in a canvas.

So what I'm going to do, just to be clear,

I know that wasn't clear at all,

I'm going to do exactly what I did

in the previous Coding Challenge

but instead of downloading a very large data file

and spitting out my own node server,

I'm just going to ask the Google API itself for a drawing.

And then I'm going to go eat lunch.

I should probably go eat lunch now.

Maybe pizza is one or something.

Actually I'm not a big pizza eater,

but we'll pick some food themed drawing,

and just to be sure that it's actually working

to do it this way, I am going to do this

in the p5 web editor so that I can be sure

that you can be sure that I'm not secretly downloading

a big file, running a node server somewhere.

Why would I do that though?

Okay, so here's the thing, it's a bit confusing.

Because this is so new, this API is available,

it's out there, but it's a bit confusing to use it,

so the first thing you're going to want to do is go to

this GitHub repository quickdraw-component,

and then down here somewhere in here,

you're going to want to find this,

join the Quick Draw API Google group.

Now by the time you're watching this, this may have changed,

but I will hopefully keep the code up to date,

but maybe this sign up process will have changed.

So as soon as you go

to the Google Quick Draw API Google group, I joined,

you'll end up at this page, click join.

You'll need some sort of Google account.

Then you're going to want to go to your Google API dashboard.

So here I am,

I'm at console.developers.google.com/apis/dashboard,

there are a lot of APIs there that you could look at,

and what I'm going to do is now search for Quick Draw.

I made a project by accident, which I didn't mean to,

but this is what I'm looking for,

Quick, Draw! Data API private.

Now, this will not appear to you unless you join

that Google group,

so that's a little bit of the confusing thing,

at least at the time that I'm doing this today,

November something, 2018.

It's the 25th, 26th, something like that, all right.

So, I'm going to click here to,

and I need to make a project,

so I'm going to call this project...

So I want to first create a project, try to click enable,

I'm going to call this Coding Train Test, I'm going to hit create,

and then I'm going to go back and search again for Quick, Draw,

Quick comma Draw,

and I'm going to grab this here.

Okay (grunts).

Ah, here we are.

Somehow I made it to the Coding Train Test project.

You want to create a project and get to your Coding Train,

well you're not going to call it Coding Train,

get to your project page.

Now,

I'm going to find that API.

It takes a minute for the project to actually be created.

I think I was going too quickly there.

I'm going to go to Quick Draw data API, ah ha, there we go.

Now I'm on this page.

Now I'm going to click enable.

Okay, so now I have this API enabled.

The next thing that I want to do is go here under credentials

because I'm going to need an API key,

so I'm going to go here under credentials.

Here's my API key, fantastic.

So here's the thing, I am going to regenerate this API key

as soon as I finish this video so you won't be able

to use it, you'll have to create your own,

and I'm going to copy it very quickly just over here.

Now in my code, I'm just going to add it

at the top as a comment so I always remember it.

Okay, so here's the thing, I should mention

that this while you can use the API,

I'm going to do that right now,

if you're going to use this for a large project,

you might want to actually consider self hosting the API,

which is kind of what I did in the previous video,

but actually using Google's code,

which is probably much more robust

and has a lot more possibilities.

But once I have my API key,

all I need to do, I'm going to scroll down here

to API middleware, I just need to go to this particular URL.

I'm going to use the load json function in p5,

I'm going to paste this in here.

So now what I want to do is I want to say drawing category.

I know that cat is category, I'm going to say ID.

So I could ask for a very specific drawing,

but I think I can actually just say random

to get a random one and then get my API key,

and then, is animated, I don't want animated,

and format equals, I want it json.

We want to get that json, so let's see,

if I take this URL now...

(scoffs) Not found.

(buzz) (ding)

All right, I'm back.

So interestingly enough, even though the documentation says

ID required, ID (number) or "random,"

I thought this means I can actually type random

into the URL query string, but maybe not,

because now if I go back here,

and I just zoom in up here and get rid of id=random,

just start with key, I can see, there we go,

each time I do this,

I'm going to get a random cat drawing here in json.

So look at this.

Ah, lovely, all right, so, great, we're not using this API.

So I can go back here, I can go back to my code,

and I'm going to say a constant URL equals.

So I'm just going to save this,

and obviously I would want to do something more,

I could do so much here by I could actually form the URL

with a particular category, but cat, meow, agory,

but right now I am just going to keep that, and in setup,

I'm going to say load json URL,

I'm going to give it a callback, got cat,

I'm going to write this got cat function drawing,

and I'm just going to say console.log drawing,

so let's see that in p5,

if

I actually, and I'm going to get rid of the draw function,

if I've actually got, there we go, drawing.

So this looks like, there it is,

so you can see down here in the console,

all that data came in.

So all that data came in so I've got the cat,

and now, guess what, I can draw it, okay.

So, let's just make this 255 255.

I wonder if this is the simplified data.

Looking back at the documentation,

I just realized is animated, if I set that to true,

I will get the data back that actually has

the timing information related to how the user drew

the drawing down to the milliseconds,

but in my previous coding challenge,

I didn't bother to use, I just used this simplified data,

which is just the X and Y values

of the particular path

that the user drew,

and it also is reduced normalized

to 255 by 255 pixels square.

So I want to use the simplified data just to make

my life easier, 'cause as I mentioned,

I need to go get something to eat.

Is pizza one of the categories?

I guess I'll try pizza.

Yeah, looks like pizza came in as something.

So now what I'm going to do here is in got cat,

which I'm now going to call got pizza,

got pizza, what I'm going to do,

I really, I could just go to my previous code, do I dare?

Github.com/codingtrainwebsite,

and I'm going to go to Coding Challenges all the way down

to quick coding challenge 122, Quick Draw, sketch.js,

and this is the code right here

where I in draw, where I draw that particular pattern.

So I'm going to grab that, oh this is terrible.

Look at this.

Basically, actually, here's the thing,

this whole thing, there's no reason for me to rewrite this.

Just to prove that this works, this is the entire code,

and I am going to go back to my code.

I'm going to paste my entire thing in here.

The only thing I'm going to change is instead

of my own node server slash cat,

I am going to go to the particular URL.

There might be some slight differences here,

but let's see what happens.

Blocked by CORS.

(buzz) (grunts)

I didn't have the CORS problem before.

Hi, I'm back, and I'm moving very quickly,

because the reason it wasn't working wasn't my code,

wasn't some mistake I made, wasn't the dreaded CORS error,

it was that I exceeded my quota.

Now how could I possibly have exceeded my quota?

Because I certainly did not make

something like 19 thousand API requests

in the last few minutes, and in fact,

somebody watching this,

this is why we can't have nice things, people,

must have taken the API key.

So I have a different API key,

and because I talked for too long,

it probably also just got used,

but let's hope it's here in this sketch, I'm going to run it.

429 error.

(buzz) So let me at least show you

what the error is.

I thought this was a CORS error,

but it's actually the server responded with the error 429,

and 429 is an issue with the key, so I'm going to conquer this.

I'm going away, I'm going to generate a new key,

and then I'm going to immediately run it

for the first time live before anybody can possibly get it.

(ding) All right,

I'm going to conquer you, internet.

Thank you to meiamsome for the suggestion.

What I'm going to do, I already started doing this,

I'm going to create an input field, key input.

I'm going to say key input = create input

with nothing in it.

Let me, I'll put on auto refresh here,

and let me uncomment this out, okay.

So now,

we should see there's this input field,

so what I'm going to do now is I'm going to say

key input.attribute,

this is all the p5 dom library,