1.3: Shapes & Drawing – p5.js Tutorial


[BELL RINGING] Hello! OK, it’s time, it is
time to start talking about, and writing some code. What’s going on here? You can see already that
there’s this function setup, function draw. What is that stuff? There’s curly brackets,
there’s parentheses, let’s hold off on
that for a second. Let’s not get too
worked up about that. Let’s focus– just
for a moment– on create Canvas,
parentheses, 400 comma 400, closed parentheses, semicolon. I’m going to write that
out in a generic way. I’m going to say something
like, instruction, another word for that might be command. And the truth of the matter
is, the actual, technical name for what I’m writing
here is a function name. Function name. Instruction,
parentheses, some number, comma some other number, i don’t
know, comma some other number, comma dot, dot, dot. Well, let’s not put that there,
closed parentheses, semicolon. This is the syntax for executing
an instruction for the computer to follow. The name of the
instruction, parentheses that open and close, followed
by a semicolon, and some number of things in between. That number of things could
be zero, it could be one, it could be two, it could
be three, it could be four, it depends. So, now, if we go back to
create canvas, we can see, look, the instruction
is create Canvas, parentheses, 400 comma 400. So, ask yourself– pause
the video for a second– what does 400 mean,
and what does 400 mean? I mean, it means the number
400, but why is it number 400? What is it doing? OK, are you back, did
you think about it? Well, one way to try
to figure this out is for me just to say,
well, why don’t we just change the number to 200? And nothing changed,
why didn’t it change? Because it ran the
program already. I have to tell it to
rerun the program. It’s half as wide,
but just as tall. By the way, there’s
this interesting button over here, auto refresh. So, notice how I
changed the code and then I had to run it again. That was a little
bit inconvenient. I mean, it’s not so
bad, I’m happy to do it as often as I need to. But things might be a
little more convenient if I select that. Because, now, what if
I change this to 300, change this to 400, why
don’t I change this to 800. It’s always going to
update the drawing– the result of the
instructions– here, [INAUDIBLE] if I have that auto
refresh clicked. I’m going to go back
to 400, and 400. So what those numbers define,
is the width and height of this thing called the canvas. This is the drawing
canvas, it’s the thing that we’re going to write
instructions to draw stuff into, move things around,
interact with things all, eventually. And the syntax for making this
is create Canvas 400, 400. Interestingly, what
happens if I delete this? So, p5, by the way, will always
put a canvas there for you. If you forget to
say, create Canvas, it made a canvas there for you. But it just didn’t know
how big to make it, so it picked some arbitrary
size, probably 100 by 100. But let’s put that back,
there’s 400 by 400. There’s a really important
thing that I want to talk about, but let’s come back over here. So, create Canvas, this
is the function name. Let’s use the real terminology. You can think of
it like a command. Create Canvas,
that’s your command. These are called the arguments. I think earlier– I
didn’t actually say this– but if you were
giving me instructions to do some exercises, and you
said, do some jumping jacks, I would say, how many? You need to modify– you need to provide parameters– for how I should
execute the instruction. The instruction is, create the
canvas with the size of 400 by 300 pixels. Meaning, create
area on the screen that I can draw to that’s 400
pixels wide, 300 pixels high. If the concept of pixels is new
to you, on a computer screen, every single color that you see
is– if you zoom way into it– is a single dot. Now, there’s all sorts of
weird, funny business going on because we have all these
high density displays, now, that have multiple
pixels, for every pixel. But all of that
aside, the idea, here, is if I were to zoom way in– way, way, way, in–
and count all the dots, there would be 400 of them. And there’s 400 wide and
let’s change this to 300, just so we can see that’s
a little bit different, 400 by 300. So this is the idea. Now, we have to ask a
really important question, I’ve totally forgotten
to bring this up. What is the difference
between JavaScript– and we haven’t really gotten
to the drawing stuff yet, but don’t worry we will– JavaScript and p5? Is create canvas p5
or is it JavaScript? Is 400 comma 300 p5
or is it JavaScript? This is not an easy
question to answer. And it’s a question that
I hope will resolve itself for you over time, as you
program more, and more. And learn about other
libraries– besides p5– that work with the
JavaScript language. But, the key thing is here, the
language, the syntax, the fact that you need parentheses,
and commas, and semicolons, and names of functions go here. That is the JavaScript language. To call a function
in JavaScript is to write the function name,
followed by parentheses, with commas for the
arguments, and a semicolon. That’s JavaScript. Create Canvas is a
function that exists, that is defined
inside of the library. So, if you did not have p5, if
you weren’t using the p5 web editor, you were in
some other environment and you wrote create
Canvas, you might get an error message
saying, I don’t know what create Canvas is. All programming
environments and editors allow you to import
other libraries. But the p5 web editor
has done this for you. So the fact that we can
execute p5 commands, write create Canvas– and
there’s a lot more of them– means, is because we’re
using the p5 library. The way we execute that
command, where the semicolon, goes where the parentheses,
go where the commas go, that is all the JavaScript
language, itself, the syntax. I hope that gives a little bit
of clarity, there’s more to it than that, you’ll have
many more questions. But, hopefully, I’ll keep
answering that as we go. All right, so, now, where can
I find out about other commands that I can write,
besides create Canvas? And when I say commands,
I really mean functions. But I like to use the
word command at least at the beginning, because
it’s a little clearer to talk about what we’re
actually doing here, you and me. But, technically, these are
functions that we’re calling. All right, so, the
answer to that question is the p5.js website. If I go to the
p5.js website and I click on this link
called Reference, this link on Reference
has every single function that’s part of the p5 library. So, somewhere on here
I could do a Find, we can find create Canvas. And I could click
on create Canvas and learn more
about create Canvas. This is known as
the documentation. Programming languages,
and programming libraries, and frameworks, all– they should, at least–
have documentation where you go to read about how
the thing is supposed to work. I could make, like, thousands
of thousands of videos and just go through every one
of these, and explain it to you. But learning to
program is not just learning how to write the
instructions and the syntax. It’s learning how to
read documentation. So the functions
that I want you– if you’re watching this video
series, which I guess you are– to follow first, are the ones
that are under 2D primitives. This is where we’re
going to start. There are lots of functions
that– go and explore them all, don’t listen to me– but
for your first exercise after you watch this video,
just limit yourself to triangle. Rect, which is
short for rectangle, quad, which is any shape
that has four vertices to it, four sides, edges. Point, which is a single
point line, which is a line. Ellipse which is a
fancy name for circle, but it could be
sort of squashed. And arc, arc could probably
need it’s own video to talk about how arc works. But you can explore these
and experiment with them. Let’s just make a guess, let’s
start with rect for rectangle. And let’s not even
click on it yet. I’m just going to go over here. And now, I need to talk
about what Setup a Draw are, what are these blocks
of code, why did they start with the curly
bracket and end a bracket? I’m going to come back to that. For right now, we
should understand that Setup is the place
where create Canvas go. At the beginning, we’re
going to set up our canvas. Draw is the place where
I’m going to put my stuff to draw stuff to the canvas. There’s more to it than
that, but that’s the way to think about it right now. So I’m going to go in here and
I’m going to zoom back out, R-E-C-T, find out
what it means to me. I’m going to put some
numbers in there. Shout them out, I
can’t hear you, sorry. I’m going to say
like, 100, 50, 25– nothing’s there
yet– 75, 85, 75. Oh, look at that, suddenly
there’s a rectangle there. So, even just through
guessing, right, we know the name of the
instruction, rectangle, rect, R-E-C-T. We know that we
need to then put maybe, some numbers in between
parentheses and then end with a semicolon. We could just try,
it’d be weirdly, like, could I put another
number there? I messed up, could I put
another number there? Oh, yeah, oh, look at that. What did that do? So what’s going on? So, you know what, I’m
going to actually take the time to explain the
rectangle function to you. Then we’re to look at
the reference page. And then I don’t
need to do really, the other ones because you can
then, do this for yourself. You could type the command in,
you can type the numbers in, you can play around and guess. You can read the reference
page and try to fix it. Then you could ask me
questions in the comments and hopefully, I’ll be
able to respond to you. OK, so I need to give
myself a little space, here. And what I want to do is
draw the canvas for you. Then, what I want to do is,
write out this function rect, and I’m going to say 100. What did I put,
actually in here? I put 100, 50, 25, 75. 100, 50, 25, 75. So how do these
arguments define the way to draw a rectangle, right? R-E-C-T means draw a rectangle. Here are the properties of the
rectangle that I want to see. In order to understand
what these numbers mean, we need a little bit
of background knowledge about this two dimensional
space, itself, of the canvas. We need to think
about something called a Cartesian coordinate system. So, a Cartesian
coordinate system– named for the French
mathematician Rene Descartes– Cartesian is a way of describing
a two dimensional space. And saying, like, this spot
can be identified by this quote unquote, x,y position, or
this horizontal and vertical position. If you’ve taken some type
of math or geometry– depending on where you are,
and your learning the world journey– you might have seen a
graph that looks like this. With some ticks on
it, up and down. And you might have
learned, like, oh, this is something
called the x-axis, and this is something
called the y-axis. And if I say, here’s
a point 3 comma 4– and this is somehow, the point
0, 0, the origin, the center– 3 comma 4 would
be 1, 2, 3, go up. And then 1, 2, 3, 4
refers to this position, right here, within the
Cartesian coordinate system. A 2D canvas being
drawn by p5 is also a Cartesian coordinate
system, but it’s a little bit confusing. Because this default– the
standard way that coordinate system, and with pixels and
computer graphics define– does not look exactly like this. The equivalent of this
0, 0 being the origin is actually up here,
at the top left. And this is the
x-axis, horizontal. This is the y-axis. So if I were to say, 3 comma
4, and try to find that pixel, I would have to go 1, 2,
3 pixels over and 1, 2, 3, 4 pixels down. 3 comma 4 would be
this pixel, right here. But, truth of the
matter is, those are really, really tiny, right? This is very similar to
a piece of graph paper, and that might be a way of
kind of like playing, you know? You could stop and go get
a piece of graph paper. And try to, like, you know,
draw a big canvas on it, and try to position
where things are. That’s the idea of
what we’re doing, here. The pixels are really
tiny in many ways. So you have to more
imagine like, this is zero, this is pixel zero. And the width is 400– and this is going to this is
going to make you a little bit crazy– the last pixel is
actually pixel 399. Oh, that’s so weird. Think about that, though. And I’m a little bit
off on a tangent, here but it comes
up again and again. Let’s say it’s 5 pixels
wide, there are five pixels. But the first pixel is 0. 0,1, 2, 3, 4. Five fingers, but
only got up to four. So this is, like,
foreshadowing, this is going to come up
but again and again. Counting from zero
is a thing that we do a lot in programming, which
is a little bit different. Because remember when I
was like, 1, 2, 3, 4, 5? They’re five things, but
they’re 0, 1, 2, 3, 4. All right, so, pixel
zero, pixel 399. So what does this mean, 150? This is the x location
of the rectangle, and 50 is the y location
of the rectangle. So let’s just guess, maybe
pixel 100 is about, over here. Pixel 50 is about, over here. So, that’s this pixel,
here, that’s 150. This is the width
of the rectangle, and this is the height
of the rectangle. Maybe that’s about 25 pixels,
maybe that’s about 75 pixels. So that is how we
define the rectangle. The first two arguments are
the x,y of the top left, the third argument is the width,
and the last argument there, is the height. And there we see the rectangle. I clearly didn’t
draw this perfectly, but if we come back
here, we can see that’s exactly what
you see, right here. And I could start changing
these numbers around. And I could say, 150
and I could say 75, and I can move it over to 175. And it’s going to be over there,
and I can move it up to zero, and it’s going to be there. So, you can see, this is what
you can play around with, now, changing those numbers. I got to get something
off my chest. What we’re doing, here,
seems like, this is what programming is, are you crazy? It would be so much easier
for me to do this in insert, you know, commercial
software that makes images or drawings here. That I don’t want a
buzz market for free. [INAUDIBLE] Anyway,
the answer is true. This is only just the
way I want to start. The whole point
of programming is to write algorithms and
instructions for saying things like, spin around, move up
and down, bounce off the edge. How could I turn
this into the game pong, where that’s actually the
paddle that moves up and down? I’m going to get there. So this is a little bit of– not
really how programming works– but it’s a good place to get
started, and feel comfortable. And so, basically, you know,
what your assignment is, if you choose to
accept this assignment, is to make your own drawing. Make your own drawing, maybe
make a drawing of somebody, a friend of yours or
someone in your family. A little portrait of
them or self-portrait. Or do something abstract, or
draw a landscape, or something that– I won’t be [INAUDIBLE]. So just try to make a drawing. All I did was show
you a rectangle. I’ve been talking for,
like, two and a half hours, all I got was this
rectangle on the screen. So how are you going
to do more than that? I’m going to leave you
to it, a little bit. And let me show you
how to get further. I’m going to go the
p5 reference and I’m going to click on the
rectangle function, right? This is where I am, remember,
p5.js.org/reference. I’m going to click on
the rectangle function. And first, we’re to see
here’s a nice little example. So, at the very least, I could
just take this and copy it. Shoot, I have to go back here. I could copy it into my
code and we could see– OK, does that look the
same as what’s here? Yeah, kind of, this
is a smaller canvas, but it’s the right idea. Oh, look, there’s like another
argument, and it’s round, and there’s all the others. So this is what you can explore. But the point, here, is
that what I want to look at is, this is what’s
really important. This is known as documentation. This is saying, this is
the name of the function and these are the arguments. X, y, w, h, these
are other arguments. The reason why they’re
in these square brackets is they’re optional. So you have to use
an x,y within height, you can optionally
add more arguments. And here, it’s going to
tell you what they are. X is the x-coordinate
the rectangle. That’s exactly what I
explained to you over here. Y is the y-coordinate, W is
the width, H is the height. And then there’s these
other optional ones for rounding the edges. And I’m going to not
worry about that too much. Rectangle is maybe
not the best one to start with, because of
the extra added complication. But I could easily just go over
and now, click on say, Line. Oh, look at this, this
is what it looks like. The function name as line,
it takes four arguments, this is what I get. What are those arguments? x1, y1, x2, y2. X is the x-coordinate,
the first point, y1 is the y-coordinate,
the first point. Oh, yeah a line is a thing
that connects two points. Look at that, I’ve connected
to points with a line. So, now, I can come back here. And by the way, oh my God,
z, I could get in the 3D. Let’s not get the
3D, right now, we’ll save that for another time. So I’m going to go
back to the editor. And I’m going to say something
like, line 0, 0, 400, 400. There you go, look at that. There is a line. Oh, and maybe I
want it to be 400, 300 because I wanted to
go to the other side. Or I want it to actually
be, like, 0, 50. There’s the line, right? You could see now,
that line is appearing. It is a line that connects two
points, zero comma 50, and 400 comma 300, now, OK. Something is really
bothering me about the code. Don’t be like me, don’t be
me, be much more forgiving and relaxed about the world. But I cannot tolerate the
fact that this line of code, right here, is
starting over here. And this one is starting
a little bit over here. I’m kind of joking around. And look there’s a
space here, but there’s no space after this comma. One thing that is
important to note is, this is going to
work, no matter what. If your code doesn’t line up,
or you put a lot of spaces in, or a few spaces in. These types of
things, white space– meaning space, and
return, and tabs, and all those sorts
of things– do not affect the way the code runs. But they do kind of make the
code a little less readable. And p5 has a really
nice feature under Edit. Tidy Code– which you
can also do Shift Tab– which will kind of fix the
indentation and white space for you. So I’m going to press
Shift Tab right now. And everything is all lined up. So, I encourage you
to use Shift Tab, you know, Save, after
you’ve done that. I didn’t mention, by the way,
that you can see when it’s last been saved right up here. It says, just now,
that’ll change until like a minute later. And it also has Auto Save,
which you can adjust here in the settings. Auto Save on and
off, that’s sort of an important little feature
just to quickly mention. All right, so, I’m almost
ready to finish this video. First of all, why is
the background pink? And why is the rectangle
white, and the line is black? Well, I haven’t talked
about color, at all. So that’s the topic
of the next video. These are arguments that
define the dimensions and the location of shapes. But those arguments don’t
seem to define the color. So we have to look at
how do we define color. The clue to that is
somewhere in here, right? Background, the function must
be setting the background color. So, That’s coming, play
around with that on your own, if you want. But that’s what I’ll talk
about in the next video. The other thing is– look at this– the
line looks like it’s going over this rectangle. What happens if I take
this line of code? I’m going to use command x for
Cut, and command v for paste. Now, look at this, zoom on in. The line is behind
the rectangle. So layering, the
layering of the shapes– what appears on top or behind– has to do with the order
of these lines of code. The order that the
code happens is, very important to
how a program runs. Not so important right now,
just drawing some shapes, playing around, experimenting. But this is a
crucial concept that will come up, especially once
you want to animate this stuff. So that’s going to come. How does this
square move around, how can I interact
with the mouse? And the order is going to
become even more important then. OK, so here’s your assignment. Make your own picture. Don’t listen to me, and
use whatever you want. But if you want the
constraint, use only what’s here under 2D primitives. and maybe not arc,
or play with arc. And I’ll have to make a
video about arc or something. And can I show you
one more thing, do I want to show
you one more thing? I think something
will be really useful. I gotta show you one more thing. Where is this one? OK, attributes. These are some other
functions that you might be interested in exploring. And I’m going to come back
to stroke weight, for sure, some of these as we
talk about color. But at least one
rectMode, and ellipseMode are kind of important. So I’m going to just show
you something about rectMode. Remember how I said that
this x,y defines the top left location of the rectangle? Sometimes it’s much
more convenient to draw where a square rectangle is
by setting the center of it. And let me show you
what I mean by that. For example, the center
of this canvas, right? What’s the center of the canvas
if it’s 400 wide and 300 high? The center is 200 by 150, right? So I’m going to put this
rectangle at 200, 150. And then I’m going to make
it 150 wide and 150 high. That’s weird, oh, it’s
not in the center. Oh, but the top left
is in the center. But what if I want
the rectangle, itself, to be center? Well, I could figure
out the math of that. I go, OK, so then
it’s, like, 125, maybe? It’s, like, that’s
shifting it over. But I can use an attribute,
and the attribute rectMode is another function, I
can type center in here. This is an instruction,
a function, to set the mode of drawing
a rectangle to center. Which means– now look at it–
there it is, in the center, OK? So, maybe, in your
exercise you might want to use rectMode in
ellipseMode, as well. We could click on this, and we
could see look, there’s corner, there’s corners, there’s
a radius, there’s center. So there’s a few other ways of
defining how a rectangle is. But I think, for the
most part, you’re just going to want the
default way, which is corner, or center, which is center. OK, you know, when I said I
was going to do these videos, I sort of imagined doing a whole
bunch of, like, two or three minute ones. I’ve completely failed at this. This has became kind of
a long one about drawing. But hopefully you’ve
got the basic idea, and I look forward to
seeing what you make. You can share links
to the p5 sketches you create after, watching
this video, in the comments. So, I’ll click on
them, and look at them, and that’ll be exciting, OK? Thanks for watching and
see you in the next video, where I’ll talk about color. [BELL RINGING] [MUSIC PLAYING]

98 Comments

Add a Comment

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