Placeholder Image

Subtitles section Play video

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

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it