1.5: Errors & Console – p5.js Tutorial

1.5: Errors & Console – p5.js Tutorial

[BELL RINGS] 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.

30 thoughts to “1.5: Errors & Console – p5.js Tutorial”

  1. Funny how you'd post this, because yesterday I made my first simple game with JavaScript and had a go at p5. So. many. error. messeges. I've got a lot to learn.

  2. Hi Daniel, I know this is unrelated to the content of this video, but I had a question about the p5js web editor:
    Is there a way to add sheets to your project folder so that you can spread your code across multiple sheets?

  3. Hi, Dan, I love your videos. I started using p5 in Brackets, it has some troubles with JSLint and ESLint but anyways Brackets let the program run in the browser, my problem is that it doesn't highlight functions or any command like createCanvas, rect, background and their parameters, it just type all letters in gray, do you know what could be the problem?

  4. I kinda have a problem, in the p5.js web editor, I see my console, but when i have an error or I use something like println(), I don't get anything down in the console, is there a way to fix this ?

  5. when I type in print(), my computer literally thinks I want to print out the page on a paper, while I actually just wanted to see it in the console, what went wrong??

  6. I'm having issues with print(). whenever I type print() in setup or draw is opens the print screen tab. I'mm on a windows 10 64 bit machtine) if anyone can help let me know. (It is also just the p5 web site that I have any issues.)

  7. function setup() {
    createCanvas(400, 400);

    function draw() {

    fill(250, 180, 160);
    rect(200, 200, 200, 50);
    rect(300, 200, 100, 100, 0, 50, 50, 0);

    line(355, 200, 365, 195);
    line(365, 195, 375, 205);
    line(375, 205, 385, 195);
    line(385, 195, 395, 205);
    line(395, 205, 400, 200);

    circle(100, 150, 120);
    circle(100, 250, 120);


Leave a Reply

Your email address will not be published. Required fields are marked *