So, thank you for coming back. If you--
If you really made it through that entire, uhm, last video.
Here we are again and we're going to take a big leap now.
We're gonna do something, uhm,
even more exciting than we thought was even ever possible in the previous
video. OK.
So, eh-- Here I am. I gotta get myself situated here.
What do we got? We got a Processing sketch, with variable declared at the top.
It's given initial value 50 and now we're drawing that circle at 50,
at 50, at 50, at 50, at 50, at 50, at 50. Right?
For ever and ever we got-- that's why the circle is always there.
We now want to move that circle.
We needed a new assignment operation. We have an assignment operation that's in
'setup' that's giving it its initial value.
Now we need an assignment operation in 'draw'.
Move the circle 1 pixel, right? If the circle was at pixel
50, move it to 51. If it's at 51 move it to 52. Right?
Increment the circle's X location by 1.
How we gonna write that code? How are we going to write that code?
Okay. Rethinking, rethinking...
One of the most relaxing activities you can do in your life is...
It's a little better when you buy it yourself and not recording videos just...
quietly and, like, thoroughly, uhm,
clean a whiteboard. Anyway, okay, so...
We have 'draw'. It's looping
over and over again. Run this code, go back to beginning, run this code.
And we have this circle that is right now being drawn
at pixel location 50 which is the value of 'circleX'.
What we want to do is wanna say: 'Hey, every time through 'draw'...
let's give 'circleX' a new value.
What should its new value be? It should be its current value
plus 1.
Now, this assignment operation, this expression might look a little strange
to you. Almost as if it's
some sort of weird paradox. Like: 'No! Nothing can equal itself plus 1...
That doesn't make any sense.'
But we have to remember: what an assignment operation does
is evaluate the right side of an equation.
This pen is squeaking like crazy and I have another one.
I had another-- Here we go. It's evaluate the right hand side of the equation
and take the result of that value, ah, much better,
and store it in the left hand side. So if 'circleX' currently
has the value of 50, we evaluate 50 + 1
which becomes 51 and then that gets stored
and 'circleX' is now 51. And if..
what's happening in that beginning of 'draw'?
We are drawing circle a-- we're drawing an ellipse
at 'circleX'. Then, we come back here
and draw it at 51.Then, 51 + 1 is 52.
Then, we come back here and draw it at 52 then increment that by 1.
This is the process. This is the type of thing, this is like,
such a simple, little, like basic scenario. All it's doing
is moving that circle left to right. But this is the foundation of everything
you might ever possibly want to do.
It's coming up with an algorithm, what is the logic behind what I'm doing
and implementing that through code. So, uhm--
So let's take a look at adding this into our program.
So, where are we going to do that? We could say: oh, should I put it up
here?
Or maybe I should put it at the bottom. It actually in many ways
doesn't really matter.
One thing that I often like to do is separate out. We can say like this is my
drawing stuff.
And this is my, like, logical, manipulation and I don't know what, like--
Moving, er, variables.
I don't know what I'm saying. I really have no idea, but--
drawing stuff plus-- just like logic over here. Let's call it logic, for a second.
You don't have to separate this but I'm
gonna do that just for, uhm, kinda keeping our code nice and clean.
So, I'm gonna say: circleX = circleX + 1;
We're going to run it and look: there it is, the circle is moving.
It's so nice and lovely. Hello. Goodbye.
It's gonna leave and its gonna be sad, because you know: +1,+1,+1
+1. It's still actually incrementing. Over and over again. Going further and further.
In Processing, by the way, it doesn't matter: you can tell it to draw something
at a pixel value that is not within the window. It--
You will not see it appear. It's not like suddenly appear over here
in our computer screen
but it is sort of being done in the sort of mind of Processing.
So we can say: look at this circleX = circleX + 1.
We did it. Now we have the animation. Okay.
So there are a few additional items here that I want to discuss.
Number 1. is: what if we wanted to go twice as fast?
That-- that's pretty easy: circleX = circleX + 2;
Let's move 2 pixels every frame. What if we wanted to go ten times as fast?
circleX = circleX + 10; Now we're going
10 pixels per frame. We can see it zoom right of the screen.
What if we wanted to go half as fast?
Okay, circleX = cirrcleX + 1;
What is half of 1? 0.5
We run this and-- Oookay, look at this. Look at that message.
'cannot convert from float to int this.' This is what we mean by using a strictly
typed language. All of the sudden, we introduced a floating-point value:
0.5, a decimal number, but yet we declared our variable
a type integer and an integer cannot be 1.5, 2.5.
However, we can make this work by
changing the value of circleX to a float. Now,
you might just suddenly feel like awesome dive right in, run it, let's do it
but
if you really think about this for a moment you'll start to
think, like, something is horribly wrong here.
What-- what's happening--
I mean, I have a window in the computer
There is a window in the computer and we said: I can draw something at like
pixel 50, 180, right? And we put our circle there
and there it is pixel 50, 180. What if I said to you:
draw this circle at pixel 50.5, 180.
Well, you would say like: No!
Absolutely not. I showed you no such thing.
There's no such thing as pixel 50.5.
There's pixel 50 and there's pixel 51, but there's no pixel
50.5, like, I counted those pixels on the screen
1,2,3,4,5 right? But, here's the thing:
even though there is technically no pixel 50.5, pixel 50.8,
Processing allows you to use floating point values, when you want to draw
something in the window
and what it does secretly is it just lops of the decimal point.
So, if you asked to draw something 50.5, you will get it at
really at pixel 50. Now, why is this so useful?
Let's think about this idea of a circle moving quickly,
or slowly, okay?
These could be its values every frame: pixel 50, 51, 52,
53, 54, 55, right? If we wanted to move faster
50, 55, 60, 65, right? Move five pixels per frame.
But, what if we do this: 50,
50.5, 51, 51.5, 52
52.5, right? It won't actually
be drawing the circle at pixel 50.5.
It will just draw it at the pixel 50 twice. But if its running
30 frames per second and we draw it at the same location twice,
it's going to appear as if it's moving more slowly. Now, we could implement all sorts
of crazy logic, we could try sort of change, there's a function in Processing
called frameRate which would actually slow frame rate of the entire application down.
But this is now we want. What if we want one thing moving really fast
and one thing moving really slow? We need to manipulate, uhm,
the locations and sizes of things. Using floating-points
allows us to have more precision over the speed
and, uhm, kinda new ones of hell things happen
visually in our program. So, this is kinda like a long explanation but
What I'd say is-- I would suggest to you right now:
that for the time being just use the float for everything.
There are cases where you absolutely want a whole number, but in the case
of drawing a pixel, drawing shapes at
locations, drawing sizes of shapes, manipulating the sizes.
We really want to use floats and let's take a look at that over here.
So, once we have float and I run it,
we can see that's moving half as fast.
And if I say 0.1...
You know it's really moving really slowly.
But it's moving. And you can't tell that it's really sitting
at the same-- I mean if you kinda like look at it really really carefully maybe you
can but
the frame rate is fast enough it just looks like it's inching its way along.
And you can even do stuff like
point, I don't know I'm kinda going crazy here, 0.01.
We can say: Okay, it's moving, but it's moving so slowly we can barely perceive it.
So, but, you know, if we-- If I went to, like,
take a walk around outside for a little bit clear my head, come back, it'd probably
be quite a bit further along
on the screen. Okay, so floating-points allow you to do a lot. Okay.
This is good, good place to stop.
We've done quite a bit here, even though it seems like we've barely done anything.
We just have this little circle moving.
What I would say to you right now, is: go to your sketch,
you have variables you declared at the top, make them floats.
give all those variables initial values
and then try manipulating those values. Can you make
something grow, can you make something shrink, can you make something change color?
What can you do with variables at this point?
Uhm, and-- in the next video we're going to look at how we can actually
give things random values to create certain other
er, additional variation in our programs. And then of course
at some point, in the next set of videos we need to
figure out how to get this thing to turn around when it hits the edge.
Right? How do we have a conditional, a condition in our code--
How do we say:
if that circle reaches the edge, turn around and move the other way.
Right? Instead of saying circleX + 1 now say circleX - 1
How do we make that happen? That's where we're going towards here. But, at first,
we just wanna get used to having variable, storing data and
that sort of thing. Okay. Uhm, actually, hello!
What I forgot to say was: a simple exercise you might do with this
is just add the Y component to it, right? Take this program
add circleY, add certain-- give circleY initial value and give circleY
an initial speed as well, increment circleY by some value
and see if you can get to move in addition to the x-axis along the y-axis.