Placeholder Image

字幕表 動画を再生する

  • Okay. Here we are.

  • We have done so much already, but yet so

  • little! We have so much more to go! But today is a moment, a big moment.

  • If you were waiting to do something real. To really sink your teeth into

  • programming. This is the moment we're really going to do that.

  • We're going to talk about, in this video: variables. Now,

  • why do we need a variable? Well, first, where are we so far even?

  • We've kind of got the idea we can write these functions, issue these commands to

  • draw something on the screen, based on numbers.

  • We now understand that there's a flow, that the program begins,

  • that it runs and it loops over time. We also

  • understand that we can vary what we draw each time, right?

  • We could say: 'hey, draw something at the mouse location'. But

  • is this really what we want to do? Let's give ourselves a new goal.

  • You thought we were going to have an exciting goal and in many ways

  • perhaps it is, but...

  • Okay, so let's take a look for a second. This is ultimately...

  • Gonna run this little application that was made in Processing.

  • Take a look at this beautiful

  • Processing sketch: it's so nice, just cute and it's simple and

  • fun and, well, whatever. I don't know what I'm saying.

  • Okay, so here we go... What's happening?

  • There's a white circle and it's bouncing around the screen.

  • This is our goal now. Now, the first thing we should notice about this

  • is I'm not moving the mouse, right? I don't have the mouse here trying to, like,

  • move it around.

  • It is moving autonomously, but we know we need to vary

  • where we draw it each frame. Draw it here, draw it there, draw it here, draw it there,

  • draw it here, draw it there...

  • Right? Draw at this X-Y, then this X-Y, then this X-Y.

  • We need some mechanism

  • for dynamically storing, for storing the dynamic value, which is its location.

  • This is a variable. 'mouseX' is a variable

  • it's a word, a name that stands for the

  • X location of the mouse. Now we need a new variable:

  • 'circleX' we'll call it, that stands for the current location of the circle.

  • But if I go into a Processing sketch and this isn't,

  • uhm, this is not the code for that bouncing ball,

  • but this is the code we're gonna start with, right? We have this...

  • we have this sketch, that all it does is draw a circle at

  • 0, 180 over and over again. What if I go and type in,

  • right, if I go and type in mouse X. This is where we've been.

  • Right, no problem now it's where the mouse is, aha...

  • I if I go and type in 'circleX'.

  • First of all, it doesn't turn pink. Processing has no idea what 'circleX' is

  • and if I run it, it says at the bottom: can't find anything

  • can't... cannot find anything

  • named 'circleX'. This is saddest error message ever to

  • happen in our life. Processing can't-- it doesn't know, it needs our help.

  • It needs us to say:

  • This is what circle X is, this is how I'm going to use it,

  • go and be happy and draw your circles at circleX.

  • So that's really where we're gonna go. What is a variable?

  • A variable is... Okay, technically speaking

  • a variable is-- Computer has this thing called RAM. This is gonna be my

  • brilliant drawing of the computer's RAM.

  • RAM stands for Random Access Memory.

  • It's the memory of the computer you, some.. you might think of it as the

  • brain of the computer. Though that's quite flawed in many ways.

  • But it's a place where information is stored. Somewhere, in the computer's memory

  • is the value

  • of 'mouseX', right? The computer is always storing where the mouse currently is,

  • because lots of programs need access to that.

  • What we want to do is create our own variable.

  • 'mouseX' is a built-in variable. We can figure this as

  • a built-in.. Oh, I'm totally off...

  • I need a new, uhm, I need a new..

  • a piece of tape to show me where I can draw, but--

  • 'mouseX' is known as a built-in variable,

  • meaning: Processing just knows what is almost magically.

  • Of course, that was implemented by somebody.

  • What we need now is a pointer

  • to some place in the computer's memory

  • that we're gonna call 'circleX'. That we're going to store some value.

  • And what is this? We're gonna call this a user

  • defined variable.

  • So we learned about built-in variables. Forgot to turn the timer on. It's few minutes so far

  • and now, uhm, we want to talk about

  • user-defined variables. We're going to make up our own variable

  • and if we can make up one variable, that means we can make up

  • a thousand variables, ten thousand variables. We can start to create

  • enormously complex programs that are storing vast amounts of information

  • for tons of things.

  • But we're gonna start with one variable, for one circle's location. Okay.

  • So, whenever we're going to use a user-defined variable in our program...

  • Again - why? To store information we talk about, this data of a program,

  • locations of things, colours of things, a score,

  • a level, all sorts of stuff... We need to do this in three steps.

  • Where am I going to do this? The first step...

  • Ah, we'll just do this over here. What we're going to say is:

  • we have to declare the variable.

  • Can you see that? Yes, you can. Declare that--

  • Our intention is to have a variable.

  • The second step is to

  • initialize the variable.

  • Meaning: we're going to have a variable and this is going to be

  • its first value. The value that is holding onto that. It's stored in when the

  • program begins.

  • And the third step: use the variable.

  • Now, technically speaking...

  • I would suggest, I would argue, that this third step is optional.

  • I mean, it's all optional. None of us has to do any of this if we don't want to

  • or don't need to in our lives. But certainly...

  • if we've decided, we've made the choice that we're going to declare variable,

  • initialize it,

  • it would make sense to use that variable. It's kind of, like

  • if a variable is declared and initialized in the forest,

  • but is it used? Does it make

  • a pixel on the screen? I don't know where is that going? But

  • uhm, but but but but certainly we cannot use a variable without having

  • declared it.

  • And there are some cases where, you know, well, let's not get into that. Let's just

  • I, you know, so sometimes... I would like to just sort of start over but I'm

  • just-- I'm on a mission which is just record no matter what this--

  • this lesson. So, uhm, you know also there are some indices where we don't have

  • to initialize the variable. Maybe it just gets a default value by accident,

  • but I think it's very good practice

  • if we're going to say we're going to use a variable, to always know and declare

  • and initialize exactly what that first value is going to be. Okay.

  • So, these are our three steps. I'm going to do this very slowly, right?

  • We know we want, eventually,

  • to be able to do something like this: To draw our ellipse,

  • at 'circleX'. Draw our ellipse at 'circleX'.

  • And 'circleX' is our variable. This is, in a way, step 3.

  • This is using the variable. But we missed the two most--

  • the two important steps we need if we're using a variable. We must declare

  • and initialize. Okay. So how do we... let's start with 'declare'.

  • How do we declare a variable? Well, we say,

  • with written proclamation: 'this is our variable'.

  • We have to give it two things. We have to give it a type

  • and a name.

  • Followed by a semicolon. So this is the syntax

  • for declaring a variable: a type followed by a name.

  • Now, what is this thing we're saying is a type?

  • We mean by that: data type.

  • Now, some languages and, in fact, this is perhaps

  • one thing about writing in Processing, which is Java, which makes getting

  • started a little bit harder,

  • is that it's a strictly typed language. Meaning, when you say you're going to use

  • a variable, I need to say: 'I'm going to use a variable of this type'. Meaning, a number,

  • a bunch of-- you know, a string of characters.

  • Uhm, all sorts of possibilities. A lot of languages allow you to just say:

  • 'Eh, it's a variable, put the stuff in it'. You know, you don't need to know

  • what type it is. You'll know what type it is when I

  • give you the value and it'll be up this type. But we have a strictly typed language.

  • We need to always declare the type.

  • What are some possible types?

  • 'int' is a possible type. Meaning, integer or a whole number like -3,

  • 0, 14, 291, etc.

  • That is a possible type.

  • 'float' is a possible type. Meaning, a decimal number or floating-point

  • number. A decimal number, something like 2.3, say, 9317...

  • That's a great, that's a lovely... One of my favourite floats.

  • -0.111113, right.

  • These are all possible floats. And you know what?

  • There's a lot of other data types, too. There's 'char' for a character,

  • 'byte' which is a value between 0 and 255. I could keep going.

  • But we don't really need to worry ourselves with the, all the

  • possible types. You can look them up in the Processing reference.

  • We're gonna start

  • just by thinking of two possibilities 'int' or 'float'. This will

  • kind of get us, get us going. The truth of the matter is when we're beginning,

  • in this beginning process of learning to program graphics in Processing:

  • all we really need is 'float' and we'll see that in a moment.

  • But, uhm, for now let's think about 'int'. Let's start with integer.

  • So, type. The type of

  • our variable: 'int' and now we need a name.

  • So, what is that name? That name can be

  • absolutely anything your heart desires.

  • Uhm, 'striped kitty cat'.

  • That's the name of my variable. Uhm, 'Cleopatra', that's the name of my variable.

  • Uhm, 'blueberry pancakes' that's the name of my variable. You see--

  • it can be anything you want. But most of the time

  • you want a variable name that,

  • that works with what it is you're using it for. So we know our intention is

  • to create this variable that's going to be used to store

  • the X location of our circle.

  • So we're going to pick the variable name 'circleX'. We might have picked

  • just a name 'X'. There are very few

  • rules in terms of what names you can and cannot use.

  • Uhm, you must start-- your variable names can have letters and numbers in them.

  • But you cannot start with a number. Other things are:

  • the convention is to always have

  • your variable name be lower case. And--

  • the other thing you probably want to do is avoid using

  • words that are obviously keywords for other things in Processing.

  • Like perhaps you don't want your variable name to be

  • 'setup' or 'draw' or 'mouseX', for example,

  • because those are reserved essentially for other things in Processsing.

  • But 'circleX'

  • is a perfectly, lovely variable name, that makes us very happy

  • and

  • it's not too long to type, it says what it's doing, it's an integer.

  • We're in good shape. So now we can walk over to our program

  • and we need to figure out

  • where do we--, where do we put this variable declaration.

  • Well, the answer to that question, right now at this moment for us

  • is going to be: at the top of our program. So the true--

  • the truth is we're going to see as we create more and more complex programs

  • variable declarations can happen in all sorts of places.

  • But for now we're going to say: 'hey, all of the variables

  • we intend to use, they all become, they all are-- they're all declared at the top of the

  • program. I listed my variables: 'circleX', 'circleY', 'circleWidth',

  • 'circleHeight', 'circleSpeed'. All these things that I might

  • start using to store the data of how the circle is going to move and be drawn,

  • they would all be up here at the top.

  • Okay. So, that is step one. Step two is

  • initialize the variable. We need to get that variable

  • an initial value. Uhm, this, by the way,

  • is a new kind of line of code-- Something I didn't really mention.

  • I really feel like today I'm totally just talking to myself. I need to check

  • this recording.

  • Eh. But, uhm, something I--

  • that, that you might have noticed, is that we've been writing

  • lines of code. All of our lines of code have actually been function. Eh.

  • Have been function calls. This is a kind of line of code,

  • that we've been writing. Uhm, line

  • 100, 50, 200, 100, right.

  • This is a function call: function name, arguments, semicolon.

  • We are about to learn about a new kind of a line of code that we can write.

  • So far, all over our programs have only had function calls.

  • Size, background, line, fill, stroke. We are going to write

  • a line of code known as an assignment operation.

  • An assignment operation is something

  • equals something semicolon. We are going to

  • assign the value of something to some other values and that's what we do

  • when we initialize a variable.

  • 'circleX'

  • equals 50. We are assigning

  • the value of 'circleX', we are assigning fift--

  • We-- we are setting 'circleX' equal to 50.

  • We're assigning-- I kinda have trouble

  • using the word 'assign' in the sentence here. I'm sure you could just

  • pause video and be like:

  • 'here's what it is'. Uhm, but we're assigning circleX's value to 50, okay?

  • So, uhm, this may seem like so obvious but it's really important to

  • realize that we're not--

  • we're not sort of asking like is 'circleX' equal to 50.

  • We're not calculating something at 'circleX'. We're just saying: whatever is over here

  • store that value of 50.

  • And, in fact, we could have done-- we can do an assignment operations

  • mathematical calculations here. So I could say 50

  • + 5 * 2, right?

  • Now, why would I do that? I would have just written 60

  • if I wanted to do that, but we're gonna start to see sometimes

  • you might want to have an assignment operation with a more complex thought.

  • Okay, but I digress a little bit as I am..

  • Have to do here and we are now-- This is our initialization.

  • We are assign--, writing an assignment operation.

  • The 'circleX' is set to the value of 50. So let's go,

  • look at where we wanna write that line of code in our program.

  • Okay, we want 'circleX' to begin its life

  • with the value of 50. Look at the flow of our program.

  • We have a declared variable, 'setup' happens once, 'draw' happens over and over

  • again.

  • We want to initialize circleX's value in 'setup'. That's where we'll give it

  • its first value. 'circleX' equals 50.

  • We run this program, oh my goodness, this is super amazing and wonderful.

  • We have a user-defined variable, we declared it, we gave it a type, we gave it

  • initial value, now we're using it and the circle is at the value of 50.

  • This is going to open up huge amount of possibilities. This is fantastic.

  • Okay, a bit, oh--

  • That's probably making weird sounds on the microphone. Okay.

  • So, a bit--, ah, again-- Any questions?

  • When I do this live you can ask a question. Okay, so, uhm--

  • I want to mention.. there's a few things we need to mention here.

  • Number one is, ah, look, ah--

  • Look, these were--

  • We separated these two steps. We declared this variable in 'set--'

  • at the top of our program, we initialized it in 'setup'

  • and as we see, we're using the variable right where we said:

  • ellipse(circleX, ..., etc).

  • We're doing that in 'draw'.

  • So, this is sort of like I really nice simple scenario. It is as simple as it gets:

  • declare the variable, give it initial value, draw something at that value.

  • But the truth of the matter is... the, the--, these--

  • how these things are happening. It's going to be a lot more flexible as we

  • look at more complex examples.

  • Now, let me say a couple things here. One is--, one thing I'll say is...

  • It, it-- you know this-- this first two steps can, in

  • most cases, be combined into one line of code, right?

  • I don't need to say: int circleX and then circleX = 50.

  • I can write this all out as... So steps...

  • 1 and 2 combined. This is what you're going to find you're doing a lot

  • is int circleX = 50. Right?

  • So this is just doing all of that in one step:

  • declaring a new variable named 'circleX' of type int and its initial value is 50.

  • Great, now... So now we've seen that and that's one thing

  • I wanted to-- That's one thing I wanted to say. Uhm, okay.

  • So, let's, uhm... We can change that-- You know, the thing is though

  • Hah!

  • You can do that. I kind of like it this way, because, you know, I'm the anon

  • retentive Processing programmer apparently, but...

  • There are some scenarios where you want to do something more with your code that's

  • happening in 'setup' and you need to actually initialize the value separately

  • from declaring it.

  • This obviously is not that case. Okay. So where are we? Uhm, somebody,

  • again will please download this and edit. I think you probably can take

  • 3 or 4 minutes out of this video where I lose my train of thought.

  • But okay. What are we doing? We want to have

  • that circle move. That's what we're going to look at

  • in the next video. We are going to take this circle

  • and start to move it, start to assign new values to it in 'draw'.

  • We're gonna look at how we can use random, to do also some other things.

  • We're going to start to see what happens when we manipulate the value

  • of variable in 'draw'. So, what I would suggest to you as a little exercise...

  • I mean, this was kind of a long explanation just of the basics

  • of what a variable is and setting it up.

  • Uhm, go to your program, make-- set yourself up with a simple sketch.

  • A sketch that has, you know, one or two shapes

  • and think of what the parameter of that shape is its location, its size, its color

  • and see if you can start to declare some variables. Make 2 or 3 variables

  • at the top of your program.

  • Set those-- initialize those variables, use those variables when you draw those shapes

  • and run it. Make sure you have no syntax errors, see if you can get used to that.

  • Now, we didn't do floats.

  • We didn't actually look at, we can have

  • a variable that's of type 'color'. Which if you look through the Processing examples

  • you'll see some of that.

  • So, that's something I should probably fill in a video at some point.

  • But, uhm, in the next video we're gonna start to see

  • a bit more about manipulating the-- the values of variables

  • in 'draw' by moving that circle and also by using random.

  • Okay. Thanks and I'm going to stop this now.

Okay. Here we are.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

A2 初級

処理チュートリアル - 4.0 変数 (Processing Tutorial - 4.0 Variables)

  • 47 2
    Ting Chia Chi に公開 2021 年 01 月 14 日
動画の中の単語