Hello again.

It's me from the future inserting myself

into your play list of videos.

I am making a video to go right here in between 7.7 and 7.8.

I don't know how you ended up here,

but that's the intended point of watching between these two

in this tutorial series.

So what I'm going to show you-- but you could also just

be here because you want to know how to add images to the P5 Web

Editor.

So this is in a series about object-oriented programming

in 7.8.

This next video, I look at how to use an image and an object

and then have multiple objects each showing a different image.

All sorts of fun.

But in both of these videos, I'm using the Atom text editor

And just opening up my JavaScript P5 sketch

in the Chrome browser directly.

And now, I want to show you how to do this-- oh and here--

in the P5 Web Editor.

So I'm going to create a new sketch.

Well, let me just save this and create a new sketch.

I'm going to hit OK because that's something else going on.

And, OK, so what I want to do is just look at let's say,

I've made this beautiful sketch.

It is this beautiful rectangle.

It is this lovely shade of gray.

But what I really want is a kitten to appear there.

Oh, I just so happen to have this nice directory

of little tiny kitten images.

I like this one.

And what I want to do is load this kitten

JPEG into my sketch.

So code-wise, there are two functions

that I need to know about.

One is a function called load image,

and another is a function called image.

So I might as well talk about those two

while I'm here, although I think I probably talk about those

in the next video as well.

But more importantly, the purpose of this video

is how do I actually get this image--

this image-- into this sketch.

So once again, this is a time for me

to go over here and reveal, pull back the curtain

of the P5 Web Editor.

I've done this before when I made a second JavaScript file.

We can see that there's also an html file and a style.css file.

What goes on in these files are things

that I get into in a future playlist about the P5 Dom

library.

So I want to look for that little arrow

again and click Add File, just like what

I did before when I added a new JavaScript

file, like bubble.js.

but now instead of typing in a new file,

I actually am just going to drag a file over here

into this region.

I could also click here, and it's

going to open up a kind of like finder thing.

But I'm just going to come over here.

I'm going to grab my kitten--

this lovely little kitten.

I'm going to drag it over here.

And then it's going to upload.

It is done, and we can see kitten2.jpg is now

part of this project.

You should realize though there is a limit.

I can't remember if it's 5 megabytes or 10 megabytes.

You can't upload really big files to the Web Editor

at present.

Maybe in the future, we'll figure out

ways of managing the data so that you can.

So now, just to finish this off, I

said I want to have a variable called image.

And that's the image where I want

to-- that's the variable where I want to load the file into.

And then, once I have that, I want

to draw that image to the canvas.

Of course, it's giving me an error now--

cannot read property width of undefined--

cannot read property width of undefined because the image is

not there.

So I need to actually load the image.

And you might think, OK, well, there's a load image function.

So why not just use load image and in quotes reference

the name of that JPEG?

Well, this doesn't work because I cannot call P5 functions

outside of setup or draw.

It doesn't actually know what a P5 function is.

So what I could do is then say, all right,

well, image needs to be a global variable.

I'm over explaining this, but I think

it's worth noting all this.

So let me put load image in setup.

And ther, it worked.

There's the image of the kitten.

Why did this work though?

Weird.

Let me draw on this again.

Did you see how the kitten wasn't there at

first for like a little bit?

What if I say here no loop?

The kitten doesn't appear.

The kitten's being loaded in setup

and then being drawn in draw.

So one of the things you have to start getting used to

is the asynchronous nature of JavaScript.

And this will come more and more as you go into the videos

about working with data and the DOM library.

But when we asked to load an image,

it's not going to be immediately ready.

It takes some time for it to go and grab those pixels

and load them into memory.

And there's ways of using something

called a callback, which I will get to in a future video.

But the best way for you to do this right now

is to use a function called preload.

And preload is a special function.

It's kind of like the prequel to setup.

Setup is where everything begins.

But before setup, we have preload.

And what preload does is it is a place where

you can load any media or data assets

and make sure they are already before setup and draw happen.

So, in this case, even with no loop,

that kitten's always going to be there.

And just incidentally while we're here,

we should note that the image function

drawing this particular image, which maybe I

should be more clear about my variable naming

and name it kitten, this is exactly

like the rectangle function.

I am drawing a rectangle at 0, 0.

The only difference is I'm filling that rectangle

with the pixels from that image.

But I can do things like give it a width and height.

And you can see I have stretched the kitten.

These could be variables.

And you can see now it's going to resize.

It's just a rectangle.

I could do things like say x and have a variable called x.

And I could say x plus plus.

And now the kitten is slowly moving.

I could change the y-value.

So it's just another thing to draw that you can rotate

and twist and color and turn and all that.

And in the next video, if you are here,

if you happen to be watching this

as part of this playlist, what I'm actually going to show you

in the next video--

you can sort of see it in the thumbnail--

is to make a whole bunch of objects that are images

and animate them around the window.

So I hope to help this clarify a little bit

about using the P5 Web Editor with all

these other surrounding videos.

And if I didn't get it right here or you're confused,

please let me know in the comments.

And I look forward to seeing you in a future video.

[BELL RINGING]

[MUSIC PLAYING]