[BELL]
Oh, hello there.
It is me, from the future, entering
into your playlist of Intro to Programming with p5.js.
In the previous video that you were watching
about object-oriented programming,
I was using a text editor known as the Atom text editor.
The p5 web editor didn't exist yet.
Now, if you started this whole playlist
from the very beginning, you'll notice
that I started with the p5 web editor,
because I made the intro videos just like a month ago.
And then the other videos about object were last year.
And some of them were two years ago.
The narrative follows, but the videos are all
made at different times.
So I'm stepping in here for a moment
just to show you a bit about working
with objects and classes in the p5 web editor.
And one of the things that you'll
want to do probably-- so this is the example
from the previous video, 6.3.
So I'm making 6.4 right now.
And what I want to show you here is,
what if I'm going to eventually make
a much more complex sketch.
And it's going to have bubbles and rainbows and unicorns
and cupcakes and puppies and turtles.
So I might have a class Turtle and a class Puppy and a class
Unicorn.
This one sketch.js file could get quite long and quite large.
So one of the things I could do is
I can actually make a separate JavaScript file.
I can call it anything I want.
I'm going to call it bubble.js.
And I can put the Bubble class in that file
and allow me to sort of know that when
I want to make changes to the bubble,
I go to the bubble file.
When I want to make changes to set up and draw,
I go to sketch.js.
When I want to make changes to the turtle, I go to turtle.js.
So that's what I want to show you.
It's not really necessary for this.
But it'll help you sort of scale up as you move forward.
Now, you can actually--
this isn't just only for putting classes
in separate JavaScript files.
It's just a good time for me to show you
that you can have multiple JavaScript files for one
sketch in the web editor.
All right.
This is where you want to look.
And I should also reference to you
Cassie Tarakajian, the creator of the p5 web editor,
made a nice 20-minute video about all
of the features, which I will also reference,
which goes through a lot of different pieces of the web
editor.
I'm just kind of highlighting this one thing.
So I want to go over here and click this.
And you can see now I have the project-folder.
And look, all of the secrets are revealed.
All this time you've just been working with sketch.js.
That's your JavaScript code.
But the sketch.js code is only executed
because it is referenced inside of this other file,
this hidden file, index.html.
This is actually just a plain old HTML file.
Maybe you don't know about HTML.
Maybe you do.
In my next playlist about p5, the p5 DOM library,
we get into what that HTML file is a bit more.
But if I look at it, we can see that-- ah, look at this.
There's this reference. script, there's a script.
Its source is the file sketch.js.
If I want to have a new JavaScript file,
I'm going to need to edit this file.
And I'm going to need to make a reference to button.js.
So I need to make a reference-- not button, bubble.
Whatever.
I was doing an example earlier that was a button.
bubble.
Once I've added that, I can then go here and back
to this little arrow right here.
I can click this.
And I can say Add file.
Are you seeing that?
And then I can zoom back out.
And I'm going to name this bubble.js.
And you can see it appeared right there.
I'm going to click on it.
It's empty.
I'm going to close this.
I'm going to go to sketch.js.
I'm going to grab my Bubble class, all of this code.
And I'm going to go over here.
I'm going to paste it in here.
I'm going to hit Save.
And now I'm going to run it again.
It's the same exact thing.
Nothing has changed.
The difference is my code for set up and draw
is just right here.
And my code for the Bubble class is now in a separate file.
So when it's time for me to think,
you know what, I want the bubble to move faster,
then I can just do this and change these numbers here.
I'm going to put on auto-refresh so
that it updates automatically whenever I make these changes.
So you can see, ah, it's going faster.
Then it's like slower, but mostly to the right.
And then I want to change the color a little bit to--
So I'm changing things.
But now, if I want to change stuff with the sketch,
I want to change where the bubble starts,
then I'm going to change this here.
So you can see I have now just reorganized my code.
So now you've wrapped up this section
on making classes and objects in JavaScript.
If you want a little exercise here, what I might suggest
is duplicate this sketch.
The URL to it will be in the video's description.
See if you can add yet another JavaScript file.
Maybe put like the mousePressed function in it.
Or maybe add some other sort of object, the turtle
that I keep referencing.
This little turtle that moves across the screen
can have a separate class.
Give that a try.
I will also note-- and I'm going to do this in a separate video
that's going to come in the next--
it's actually going to--
it will appear around Objects and Images or somewhere.
I've got to look where it should go.
But I'm going to do another video where I show you
how to add media assets to the project, which you can load.
So thanks for watching this.
And I will see you soon.
Goodbye.
[MUSIC PLAYING]