Name: 1.3: Shapes & Drawing - p5.js Tutorial
Uploaded: 2020-03-28T18:21:25.000Z
Duration: 25 min 47 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

OK, it's time, it is time to start talking

You can see already that there's this function setup,

There's curly brackets, there's parentheses,

on create Canvas, parentheses, 400 comma 400,

I'm going to write that out in a generic way.

I'm going to say something like, instruction, another word

And the truth of the matter is, the actual, technical name

for what I'm writing here is a function name.

comma some other number, i don't know, comma some other number,

Well, let's not put that there, closed parentheses, semicolon.

This is the syntax for executing an instruction for the computer

that open and close, followed by a semicolon, and some number

That number of things could be zero, it could be one,

it could be two, it could be three, it could be four,

So, now, if we go back to create canvas, we can see,

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?

OK, are you back, did you think about it?

is for me just to say, well, why don't we

And nothing changed, why didn't it change?

By the way, there's this interesting button

I mean, it's not so bad, I'm happy to do it

But things might be a little more convenient

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]

So what those numbers define, is the width and height

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,

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.

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,

So, create Canvas, this is the function name.

I think earlier-- I didn't actually say this--

to do some exercises, and you said, do some jumping jacks,

for how I should execute the instruction.

The instruction is, create the canvas with the size of 400

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

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.