Placeholder Image

字幕列表 影片播放

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