[BELL RINGING]
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]