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.