Hi.

So I have so far made three videos in this series

about learning to code from the very beginning

with p5 and the p5 web editor.

And I kind of have been avoiding showing

you what happens when you make a mistake, which I really

should not have done.

That's the thing I really should be showing you right from

the beginning, but I didn't.

And I also haven't mentioned to use

something called code comments.

And both of these things are fundamental to how

you might create a p5 sketch, one

that you might work on over a period time

and return to later.

So let's first look at the console and errors.

So there's this whole extra section

down here that I've ignored.

I've been talking about this is where you write your code,

the Play button executes the code,

and this is where you see the result of your code.

Well what do you see down here?

What you see down here is messages

that are things that are related to what's

happening in your code that might be a mistake

or something that you add that you want to specifically put

a message there.

So I'm going to show you.

There's a function called Print.

I'm going to say Print, and I'm going to say Hello.

And I'm putting this in Setup because I want this just

to happen at the beginning.

And this again, I will come back to later.

So this being in the code, suddenly in the console,

we have this down here.

The idea of the console is not something.

So if you're making a project that you imagine users

using, like a game, you wouldn't put the score of the game here.

You would want to draw the score somewhere on the canvas,

or there's actually a way you could

put the score below the canvas, something for the user

to ultimately see.

But if you just want to be able to see

what the score of the game is and kind of like for yourself

while you're developing, the console

is for you, the person who's writing the code,

or your friend who you're sharing the code with,

or your teacher, or whoever.

I mean, it's something that anybody using the p5 web editor

can see.

But when you've finished it and you put it

on your own website, which is maybe

something I'll show you how to do,

that console wouldn't necessarily appear.

So in addition to be on to put your own messages,

anything that you do wrong is going to be down there.

Now, one thing that's really important,

notice how noStroke has a capital S?

noStroke also doesn't even have any arguments in here,

like, it's just open and close parentheses,

because there's no way to modify it.

That's something I didn't mention.

Notice how there's comments here?

If I get anything wrong, like if I delete this comma,

look at this.

Now I'm also getting error messages in here.

Now this is-- maybe not.

[BUZZ]

Oh, buzz, look.

Error message.

So here's the thing.

Whenever you see the red error message.

First of all, just take a deep breath.

Sometimes that error message is lovely,

if it tells you exactly what's wrong and you can--

and it tells you how to fix it.

And this might be a case.

Uncaught SyntaxError missing parentheses after your argument

list, sketch line 11.

Oh look, line 11 missing parentheses.

Sorry.

You know what it really should say?

Missing comma.

So this is the thing.

The thing that's generating the error, the web editor,

the JavaScript language, the browser, all of these pieces

are figuring out what to put down there.

It doesn't always guess correctly.

So the nice thing is they can see like, oh, I

expected a parentheses.

We can kind of like see it there,

but we're going to have to guess.

What's wrong?

It's actually a comma.

Sometimes we'll get an error message

that totally makes sense.

I'm going to change this from strokeWeight with a capital W

to strokeweight with a lower case W. And this,

I'm not getting such a great error message,

but this is a really important one.

Uncaught ReferenceError. strokeweight is not defined.

Well, but why is it not defined?

I watched a video from Daniel Schiffman,

and he said that strokeweight is a function

from the p5.js library.

It's not part of the JavaScript language,

but it's a function of the p5.js library,

and I can call it in my code if I'm using the p5 web

editor, which is true.

But because programming is in JavaScript is case sensitive,

it doesn't know what it is without the capital W.

And notice how the editor is syntax highlighting it for you.

So strokeWeight, suddenly it turns blue.

This is, by the way, no different than me saying,

like, oh, I want to write a function called unicornmagic.

Uncaught ReferenceError unicornmagic is not defined.

Because it's not a function.

It's not part of the p5.js library or any other library

that I might be choosing to use as part of my project.

There are other functions that you can call up

by the way, that are just part of JavaScript

inherently, that you get when you use JavaScript.

And p5 adds functions to that.

So that's an error you're going to see a lot.

It's because you misspelled it.

Maybe you got a capital wrong, or it's just

something you thought was in p5 or some other library

you're using, but it's not there at all.

So here's an interesting thing.

I'm just going to take out all the semicolons,

or like some of them.

No error message.

I'm having like heart palpitations right now,

because the semicolons give me comfort.

But the truth of the matter is, the semicolons are somewhat

optional in JavaScript.

They indicate where the end of the line is.

The end of a line of code background 100 is--

where is it?

Where is it?

It's there.

But JavaScript can usually figure out where the end

the line of code is even if you don't

include this, the semicolon.

The weird thing is, I'm going to show you

something kind of interesting.

If I were to put, let's say, rectMode up here

on the same line, the code runs just fine the same way.

JavaScript actually thinks of that as two lines of code

because semicolon means the end of a line, then the next line.

But if I delete the semicolon now, all is lost.

It can't figure it out.

So this is why it's generally good practice

to use the semicolons.

It's like a safety net.

Like, I'm really explicitly saying where

the end of the line of code is.

But you might really just-- you should have fun

and just like not use the semicolons,

but I can't help it.

And also, I have to do the tidy code thing now.

There.

OK.

[BELL RINGS]

All right, I know I said at the beginning of this video

that I was going to talk about the code comments,

but I'm not going to.

That's going to be in the next video.

I'm going to do that separately so you

can look at them individually, and this video's title should

probably just say, like, Console and Error Messages, so you

won't turn up in your search.

All right, so if you want, the next thing

that I think is useful to you in like working

on your assignment, your project,

for this first set of videos is understanding

what code comments are and how to use them.

I'll do that in the next video.