OK.

Hi.

So before, I know I said that in the next-- if you watched

the previous videos, I said in the next video

I'm going to start coding.

Apologies.

I'm not going to start coding just yet.

I'm going to do one more thing.

I'm going to show you how to get set up with the web editor

itself.

So the first thing you want to do is go to a web browser.

I'm using the Chrome web browser.

And I'm on a Mac, but you could be on any other computer,

and using a different web browser as well.

You want to go to the URL editor.p5js.org.

That's where you want to go.

You can follow along, and go there right now.

What you're going to see is something that looks like this.

This is the web editor.

And you can actually just start coding.

But I'm going to show you what these things mean.

But, like, what if I change this background number to zero?

And then I run up here and there's this button here.

This button that looks like a play button, like I'm

going to play on my old-timey VCR.

Well really, this is going to run that code.

And I'm going to see, oh look at this.

There's a square with a black background over there.

What if I change this to 100?

And I click play again.

Ooh, the color of that changed.

What if I say 100, comma, zero, comma, 200.

Now the color's purple.

So I'm off-- the train is off the tracks.

But I'm going to come back and explain

what all these things are, how you type them, why you

type them, and what they mean.

Later.

But the thing is, like, this is my opus now.

I have made this beautiful, wonderful p5 sketch,

and I want to share it with the world.

I can't.

I can't.

I could go to File, and I can click Save.

But it says, in order to save sketches,

you must be logged in.

So at the moment, the editor doesn't

have any way to save something without you having an account.

You can play around, but what you want to do

is go to sign up.

And you might already have an account, you can go to log in.

I'm going to click sign up.

And here, what you can do is you can create a username,

and email, and a password.

If you don't have your own email address,

you know, and you have a parent, or somebody else

that you can ask to use their email address to sign up.

That's what I would suggest doing.

So you want to create that account.

You don't need to use your email other than just

for the signing up.

So once you've signed up, and you've logged in, you're now--

I'm going to leave this.

You're going to see something like this.

Now I created an account called Coding Train.

And it will say hello, comma, the username that you picked.

So you'll see that.

You can go into here, under my account.

You can see there's things like my sketches, my assets.

This is something that will--

I'm going to show you how you can use images, and sounds,

and upload videos to the editor.

Those are things that would appear in my assets.

Settings, which I'm going to show you in a minute.

But now, we're in p5 itself.

Now I want to go back to my beautiful opus where--

I don't know why yet, but somehow I changed some numbers,

and I've got this beautiful color over there.

Now I can go to File, Save.

Once I've done that, this URL up here

is a URL forever that is my sketch.

And in fact, I can go right up here to Sketch--

no.

File, Share.

And you can see.

Look.

Now I can share the code for my sketch here.

I can actually share a full-screen version

of the sketch.

Let's look at this.

Look at, here's my beautiful sketch.

And I'm going to show you how to make more interesting things.

And then share them without the code.

And then this is something called an embed.

So if you have a blog, this is something

where you can actually take your sketch,

and embed it into something else.

I'll come back and show you this stuff, maybe,

again as we get further along.

I'm not going to worry about it too much right now.

OK.

So we've got it.

Oh, here's the thing.

What is the name of this project?

What is the name of this project?

If I zoom in here.

The name of the project is Unbiased Shoe.

So this is one of my favorite things about the p5 web editor.

It will auto generate a name of each sketch for you.

Now the truth of the matter is, you probably

want to have some practice of renaming, and naming it

something that describes what it actually is.

I can click this pencil icon, and I can call

it Coding Train Editor Demo.

I can hit Enter.

And now the sketch has that name.

The URL-- this name is not part of the URL

for sharing that sketch.

It's just a name for you to keep track of if you ever

go to, for example, File, Open.

And I could see.

Look.

These are other sketches.

Now, Measly Friend is some sketch

I must have created that I forgot to rename.

10PRINT is something that I was creating.

So you can see these are the sketches that I have made.

I could go and browse my other ones.

OK.

Now, here's the thing.

For me to make my tutorials, I want

to adjust a few settings visually

for how it looks to make it easier for the viewer

to see it.

And so, I'm going to go here under Settings.

And one thing I could do under Settings,

I've already changed the text size to 36.

I'm going to go to this high contrast theme.

And then I'm going to close, x here.

And we're going to see, this is a nice high contrast theme.

It has a dark background.

It also is easily viewable for anyone who's colorblind,

and any visual impairments.

So I think it's going to be nice for the video tutorials

to use that theme.

I also would prefer to make sure that I'm not standing in front

of the code by accident.

So I'm usually a little bit weird

that I'm going to happen to mention in this video.

I'm going to move the code window to the other side.

This is not a feature of the editor.

I have someone-- a Coding Train contributor sent me some code.

Then I was able to hack the browser,

and I can put the code on the other side.

And I can see the preview over here.

So I am going to--

sorry.

If you bear with me for a second.

I am now-- in my videos, I'm going

to have it look like this.

At some point, that might become a feature of the editor

if other people need this ability to flip

where the locations are.

Or if you really need to know how to do that,

I'll provide some instructions in the video description

about how to add a little button to your web browser

to flip this back and forth.

But I'm going to leave it this way.

I think this is going allow me to code in a way

that you can see the code over here.

And if I'm standing in front of the output every so often,

no big deal.

One more quick thing that I want to mention, actually.

Thank you to some live viewers who pointed this out.

If you don't want to sign up for a new account,

you can actually log into the p5 web editor with an account

that you already have with Google, or with a website

called GitHub.

Which if you don't know what that is,

I have some other videos you could watch.

But you don't see those on the sign up page.

So those don't show here, but if you go to the login page,

you can see these options here.

Log in with GitHub, or log in with Google.

So that's another way of logging into the editor.

OK.

Again, this was not comprehensive.

If you want a comprehensive overview

of all of the features of the web editor,

I will link to the processing foundation playlist.

There's three videos about p5, and the web editor.

Cassie, the creator of the web editor, does an overview.

Mathura talks about the accessibility features.

And there's a video about education with p5 from Saber

as well.

So, OK.

So now, if you somehow made it to the end

of this long rambling video, I will really

code in the next video.

In the next video, I'm going to talk about what are

the commands, the instructions?

What is the syntax of JavaScript with the p5.js library

to get things to appear right over here?

See you there.

[UPBEAT MUSIC]