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.