[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]