OK.
I'd like to do a little dance at the beginning of this video.
In this video, I am planning to talk about JSON exclusively.
What is this data format, JSON?
What does it look like?
What does it mean?
And if you happen to have data in a JSON format, how could
you use that data in a program that you're writing,
so that it runs in the web browser and JavaScript using
the p5.js library?
OK.
So I have some information that I talked about
in the previous video.
If you watched that previous video, by the way, thank you.
That was kind of you.
OK, so, let's say, the scenario that I'm
posing here-- this will be interesting--
so you're interested in flowers, and you
looked all over the internet.
You couldn't find any information about flowers.
But you have this book all about flowers.
Here's something you could actually do--
novel concept-- you could just type the data yourself
into a file to use in your program.
So let's first think about how that might work.
So actually, even before I start doing anything over here,
let's do that just even in our code, right.
So you know-- you know how to program, or at least I do.
I think you do, if you've been watching the videos, hopefully,
because I don't know if I'm doing a good job or not.
But you might say to yourself like, "Ah, I
am going to make this object called flowers,
and it's going to have a name.
I'm just going to say it's a flower.
It's going to have a name like "sunflower".
And it's going to have a color, which is--
I always want to do color, and then I
realize there's a problem.
I should just admit that there's a problem here.
So what I started doing, by the way, was
I want to use the p5.js color function,
which is so nice, that I could make a nice yellow color,
which yellow is red and green, I think.
But that's not going to work up here.
The color function is only available once I'm actually
in Setup, once the page has loaded.
So I'm going to make that global variable.
And I'm going to make my object here, sorry.
So name, sunflower.
Color is-- and let's not name it color,
because that's a keyword.
Let's name it col is color.
How do you make yellow?
Red and green, I think that's right.
How about like some red, and a little bit more green, right?
So I've now--
Whoops, and there's no semicolon there.
So I've now made data.
I've made an object, a JavaScript object.
It has data in it.
So I could add all sorts of other data,
like what's the average height of a sunflower,
and what season do sunflowers grow,
and what's most popular latitude longitude in the world
where sunflowers appear.
I could keep adding all that data as these key value pairs.
And I could do something like, say,
"Oh, now I'm going to draw a black background."
And then I'm going to say fill by the flower's color.
And I'm going to draw a text on the screen with the flower's
name at pixel value 10, comma 50.
And I could say createCanvas 400, 400.
So you know, if I were to run this sketch, we could see,
look at that.
I've got my text called yellow sunflower.
I have the yellow sunflower text right there on the screen.
So this is working with data.
This is actually working with data in JavaScript Object
Notation, because that's a JavaScript object,
and the notation is the syntax of JavaScript.
So actually, working with JSON data
is exactly what you already know how
to do if you've been programming in JavaScript.
So I want to come back over here,
and then put our brains back in the scenario.
So you have your encyclopedia of flowers,
and you're starting to put all the data into a data file.
So one of the pitfalls of this here is this works,
but it's not so great.
Like what if I had like 1,000 different flowers
or huge amounts of data?
I wouldn't want to have all of that just in my code.
I want that to be somewhere else.
You know, eventually I might want
that to be served up by this like web server
somewhere that's an API that's just sending everybody
in the world data about flowers, because wouldn't that be nice.
But here at this moment, I'm just using it for myself.
The thing that I would want to do
is put the data in a separate file.
So let's look at how we might do that.
Now there's one thing that's different, which is that--
somebody correct me on the internet
if I'm wrong about this--
but one thing that you need to do
once you move the data to a separate file, first of all,
you need to create a file.
And I'm going to call it like flower.json.
So our sketch files have been called
sketch.js, because they're JavaScript files,
files with JavaScript code in them.
Now I'm making a new file.
Its extension is .json because it's JSON data.
But this is a data file, important difference.
There is no code in here.
It might have the same syntax as this,
but there's nothing to execute.
There's no code to run in there.
It's just information that can be loaded into an object.
The point is, this is no longer going
to be written directly here.
Flower is somehow going to equal "load this particular file."
So the difference is, there's no variable name in this file.
It's just an object.
So the file starts with a curly bracket,
ends with a curly bracket.
And then, the other thing that's important is, if you notice,
name is a string, so the name's--
sorry, name is the property of flower,
and its value is "sunflower," a string in quotes.
But in the JSON file, you'll want these property names
to also be in quotes.
So you'll see that what I want to do is say "name" sunflower.
And the other thing that I can't do, right--
I did this in my program-- is I executed the color function
here.
But I could do something different,
like I could say its "red" value is 255.
Its "green" value is like 200.
And its "blue" value is 0.
So notice the syntax here.
It's an object.
And this should be in quotes.
It's a bunch of key value pairs, property name, value.
So a flower has a name.
It's sunflower.
A flower has a red value.
It's 255.
All of this is a list of these properties,
all separated by commas.
The last one has no comma after it.
And then a close curly bracket.
Now as I go through more and more examples,
you're going to see that this file can get enormously more
complex.
It can have arrays built into it.
It can have objects nested in other objects.
And I'm so excited to look at all of those scenarios.
But right now I'm going to keep it very, very simple.
But the reason why I'm mentioning the syntax so
specifically is one comma out of place, one quote out of place,
your program won't work.
And often, you're not going to get such a great error message.
So you know, we have to sort of like think about
and look at like how you can deal with that.
But one way of dealing with it is just
be really, really careful as you kind of enter your data
into a JSON file.
So you know, I pretend I'm reading my flower encyclopedia.
I found all this information.
I'm going to format the data so I can use it.
So I've come back over here.
How am I doing on time?
Seven minutes, you're watching a video for seven minutes.
That's really quite impressive on the internet.
And I'm going to go over here to this Plus.
And I'm going to hit that Plus which is going
to allow me to add a new file.
And the new file is going to be called flower.
I was saying flowers, because ultimately I
kind of want this file to be a list
of different kinds of flowers.
But right now I'm kind of being simple,
so I'm just going to say flower.json.
And I'm going to do exactly what I said.
I'm going to say "name"--
oops, "name" colon "sunflower", "r" is 255, "g" is 200,
and "b" is 0.
Now, so you can see here, now I have
this file called flower.json, and it's got the data in it.
Now I hopefully did that correctly.
But let's say you're not sure if you did it correctly.
Well, there happens-- there's a lot of these tools online.
There's a lot of tools online that
allow you to validate or check the syntax of a JSON file
to make sure it's valid.
So I'm going to very quickly just copy paste this,
and go to Chrome.
I'm going to open up Chrome, and I'm going to go to JSON--
I'm going to Google JSON formatter,
and just click on the first thing that comes up.
I'm going to paste the data into this box.
And I'm going to click Process right here, which is going
to validate and check my JSON.
And it says "valid."
And you can even see it sort of like syntax highlighted it,
and did some things with it.
And we might look at this later, and some other ways
you could do this.
But this, I'll try to include a link
to this particular tool in either like an annotation,
or in the comments below.
So this is something you might want to do.
And now, once we've done that, the question is now,
here under sketch.js, how do you change, right?
I don't want to say flower equals this stuff right
here in the code.
I want to say flower equals the stuff that's in that file.
How do I get the stuff that's in that file?
So the way that you do that is with a function
called loadJSON.
So this process of saying like, I don't want to type the code.
I want var flower to equal this stuff is accomplished with this
function loadJSON();.
So I believe I talked in some video--
link below or link in an annotation, I like to do that--
about loadImg();.
There's also a function for load table.
There's load sound, if you're using the p5 sound library.
So this is just yet another way of grabbing
some sort of external piece of information,
could be a text file, a JSON file, an mp3 file, a movie
file, an image file, loading it for use in your sketch.
In this case, loadJSON(); takes everything in the JSON file,
and essentially makes all of that as the data stored in that
variable.
And then I can access it exactly the same way
I would normally in JavaScript, as if I had written
all that data into the variable itself, hard-coded in the code.
I hope that makes sense.
So now, but there's a couple pitfalls with this.
The question sort of now arrives like,
where do you put that loadJSON(); code?
It would make sense to put it right here, right?
Instead of this, if I comment-- oops--
I'm going to like put this down here and comment it out.
I would say loadJSON ("flower.json");.
So this would make sense to you.
You're just going to say hey, instead
of setting it equal to this stuff directly,
let me load it from the file.
And then of course, one thing I would have to change
is flower.r, flower.g, flower.b, right,
because I don't have a color.
I have a RGB.
So this should work.
It's not going to work.
I don't think it's going to work.
Let's try it.
So you can see-- ah!
Uncaught TypeError.
Cannot read property "toString" of undefined.
That's a very sad error.
There's a couple things sad about that error.
I don't know what--
Line 15,085?
That's not a-- I don't have 15,000 lines of code.
So it's reporting to you something that's happened deep
into the p5.js library.
And essentially, the issue is I am
trying to access properties of a flower object
that doesn't exist.
But it should exist.
I loaded it right there.
This is the time where I like to om, meditate, and remember
that JavaScript is always asynchronous, something
like that.
I'm trying to introduce singing into the videos.
I think that's probably a terrible idea.
But we'll see.
So in other words, I've asked to load that data.
And that data is going to take some time.
It's on the hard drive.
The gnomes in the computer have to go
and dig into the hard drive and find it, and pull it back up.
But draw, boom, is happening immediately.
So what I need to do is I need to enforce.
There's a couple things.
I need to enforce that the data is loaded before I start
trying to draw with the data.
And a quick way to do that, which is ultimately
not the way that I'm going to show you in all of the videos,
but at least we're getting started.
A quick way of doing that is using the preload function.
So function preload(), you know, everything is event-based.
And you know, the events that are happening here in this
particular sketch is preload() ("flower.json");.
So the preload is the first thing that runs,
and then everything that in preload when it finish--
anything that's loaded in preload
when it finishes loading, setup that runs, and then draw runs.
So this is a way of guaranteeing that by the time
we get to draw, that data will be in that particular variable.
I really hope this works now.
And you can see it does, and you can
see I have my text of the sunflower there on the screen.
So this just sort of wraps up a kind of very basic start of OK,
there's a loadJSON(); function.
What is JSON?
What is the syntax?
There's a loadJSON(); function that allows me to load that
stuff that's in the file into a variable.
And then I can use the stuff in that file in the same way
that I do in just about any JavaScript, any p5 sketch
that I've ever done before.
So what do I need--
what's missing here, a couple of things.
One is I think we need to increase the order
of complexity of the JSON file.
Like this isn't really getting us very far.
There's not a lot of data here, you're
not usually going to see JSON files that look this simple.
They're going to have tons of information in them.
Every-- 10 recent New York Times articles,
who wrote the article, all the comments for each article,
an ID for the article, a word count for the article,
there's lots of information, and arrays, and nested objects.
So what I want to do in the next video
is look at some more complex data,
and how it might be formatted, and how
you can kind of do some detective work to figure out
how to access that data.
What I would suggest to you, if you want to do an exercise
before you work--
go to the next video, is pick something that interests.
You try to make a JSON file for it.
Put some data in it.
See if you can load that data and display
something based on that data.
I'm sure you could think of something more interesting
than just what I've done here.
And something else that I'll mention,
which I'll show in the beginning of the next video,
is there is a wonderful GitHub repository.
What's GitHub?
Oh my god, what's Git?
I need to make a video about that.
But I don't know.
Whoops, I'm in the wrong place here.
I'm trying to open something.
I just can't find--
Oh, Chrome, that's what I was trying to open.
This is a GitHub repository maintained by Darius Kazemi.
Hopefully I pronounced his name correctly.
And what it is, is it's a whole lot of JSON
files all about different topics,
that people have manually made or pulled together
from different sources and contributed.
So let's say you're interested in art.
I could click here, "isms," and this
is like a big list of all sorts of like kinds
of "isms," like lettrism, luminism, lyrical abstraction
"ism."
So anyway, I encourage you--
I'll put a link.
Another place you can do, if you're
like don't want to feel like typing out your own data set,
is go to this repository.
Look at the different JSON files there,
try to copy paste one of them into your code.
See if you can get access to it.
Then I'm going to look at one from this particular set
named--
I have one about birds that I have in mind
that I'll look at in another example, of other context.
Then-- you know, this is perhaps for another time--
but you might think about contributing back.
If you've made the most wonderful flowers.
Is there a flowers one in here?
Let's look.
Flower, code, oh, yeah, there;s fireworks, flowers.
Look at this!
I needed this.
So here's a list of flowers, anyway.
You might make your own data set and contribute it back
to this place for other people to use as well.
So thanks for watching.
And in the next video, I'm going to pull another JSON file.
There's a bit more complexity to it,
because that's going to help us.
And we're all on this train.
We're going to get to this point of we
don't have this local file.
We're actually getting the JSON data
from Instagram, or The New York Times, or some other source
[INAUDIBLE] that you might find.
OK.