Remember this program right? We just finished [with] this
It's a dynamic
program. It has one line of code that executes its set up a bunch of lines of code [that] happen over and over again and
Draw repeating repeating repeating and what's the result this static rectangle that just sits there in the window?
So what is it that? We want to do we want to figure out? How do we animate that rectangle?
how do we introduce this idea of variation into a program and truly what we're leading up to is this idea of learning about a
fundamental concept of
Computation this idea of a variable a program that stores data over time in the game context that data could be
the scores of different players the level that a player is on it could be the
Positions of things over as they're moving right any program [that] has something moving you've got to store its position
What is its size, and if it's growing? What is its new size, there is data
Associated that a program is storing a Processing sketch is storing whenever it runs that stuff is being stored in the computer's memory
[so] that's what we're leading up to but we're going to kind of start in a simpler way just by kind of sneaking in on
this idea of
variation into our processing sketch, so
What if for [example] we could say?
[erase] this block of code thing here. We have we're writing this
Rectangle and we're writing. We're drawing this we're calling the function rectangle
We're drawing a rectangle at 100 comma 100 with the size of 50 comma 20 what if instead of saying that I could just say?
it ah I'm going to draw a rectangle at
the Mouse's
x position
Comma 100 comma 50 count of 20 wouldn't that be nice, right?
Instead of saying oh, I want to draw a rectangle [at] this specific value
I just want to say draw that rectangle where the mouse [is] at the mouse's x position
So if we were to type this into processing I am almost certain we would get an error which would say something like unexpected token void
You know missing a blah blah blah. It doesn't know what this is
But the but in fact we can do exactly the same thing
I don't know where I was going with this, but we can actually do this instead of saying the mouse is x position
We can go over here and look at this program, and we can actually say
Mouse x look at that it turned this
Beautiful pink color it turned this beautiful pink color right this blue color is for a function
We think of it as a command rect mode [center] stroke 255 mouse x isn't a command a function
it's a variable it's a word that stands for a number. mouseX
stands in for whatever the current value of the mouse's
x position is and because Processing knows about this word. It turned it pink for us all I forgot the cameras are going [up]
And and and and it's great, I've just excuse me for a second
I'm going to come and say hi to you. Hi, and I'm going to turn this off and turn it back on and
Someday I'll edit that out, but I can't right now okay, so um so this is great now
Let's actually they were had a big exciting moment here. We had a little pause
I'm gonna go back, and I'm gonna run this program. [I'm] gonna run this program. Oh my goodness. Look at this look at this holy
Holy Moly right you know I don't I'm getting excited by just this rectangle moving on the screen, but I don't know it's really not that
great what can we do um so we have this rectangle now moving on the screen right because its
Position where it's being drawn right? It's drawing it draw the rectangle draw the rectangle draw the rectangle at any moment
It's and draw the rectangle where the mouse x is where the mouse x's as I move it we get this new rectangle
this is pretty super darn exciting so we now see how we can introduce this idea of
variation into a processing sketch
So let's see let's think about some other [things] well for one one thing
I'll [just] going to do here really briefly is I can add. You know mouse y here?
And so now I'm moving this rectangle with where [its] x position
And it's y position is wherever the mouse is. By the way we can start to get a little crazy
I don't know why I decided to do this, but what if I were to write something like?
height
- mouse [y] we can start to add oh
I got this I wrote the word oh height and I
Explain with that then so here look at this look at this thing about this for a second, right?
I just introduced the idea of these what's called a built-in variable
A built-in variable is a word that stands in for a value, and there are just a small number of them
There's mouse x mouse y. There's another one. There's width and height
When we set up that Processing window
we gave it a width of 640 in a size of 360 we could use those values again later in our program
But what if we change the size of the window?
Someday then we're going to have to find wherever we put those numbers everywhere else and rewrite and change those as well
we can
dynamically access the current width and height of our sketch window through key words width and height and so if I do something like height
[minus] [mouse] y you know think what's going to happen, okay?
Well, what mouse y is zero and the height is 360 360 minus zero is 360 so when the mouse is at the top?
It'll actually draw it at the bottom and vice versa. Let's run this sketch, and [we] can see look. It's kind of inversely its
Location [its] vertical location is inverse to the mouse value so we can see this is kind of like actually kind of fun to to
know
Anyway, so [I] [wish] there whatever nevermind sorry
Okay, so back [to] what we were talking about
We have I'm putting it back to just mouse x minus y so we can see there are other built-in variables all of which
We could find and I think even if I right-click on this I can say find in reference right down here
you can see there's a find in reference so if I wanted to look up mouseX or mouseY but certainly in the reference if
You go to the Processing reference all these are going to be documented there?
Okay, so this brings us to another interesting point
Let's run this and remember. I think in the previous video. We talked about okay
Well size should definitely go and set up because size is an initialization condition of our program. It's what we do at the beginning
Right the rectangle should definitely go and draw because we want to try [this] stuff all the time while the program is running
Where should background go couldn't really decide. [we] just picked an arbitrary decision. We put background in draw.
Well, let's think for a moment. What happens if I put background in [setup]
Okay, so think for in your mind pause, pause and think what's going to happen. ok maybe you paused, maybe you didn't
let me give you a little help
when background was in draw
Every time before we do the rectangle. We would draw the background who would wipe the background clean with a solid color now
What does it mean to put background in [setup] [setup] the code and setup only ever execute once when the program first begins?
We're only drawing the background once when the program first begins. What will happen let's run this sketch
We can see that look we have a history of
Every single rectangle ever right because if we don't clear the background if we don't wipe it every time before we draw the next rectangle
We're leaving the pixels we filled in there previously
So this is this this is a very like simple thing right if we put background and setup
We're kind of always seeing everything we draw on top of itself over and over again if we put background and draw
then we are wiping clean the frame that the
We are wiping clean the window every [time] through draw which gives us that illusion of motion
Right wipe the background draw the rectangle wipe it draw the rectangle a little further over
Right [there] draw the rector and a little further over that gives us this illusion of motion
And you might actually be asking yourself the question when background was in draw
How come I don't see like all these steps how come I don't see draw the background
[I] see in blank background, then I see the rectangle [dentist] a black round there to see the red camel [darkness] in the background
Right and we're almost like flicker the reason why you don't see that is processing
Only updates what you see at the very?
End of draws almost as if there's an invisible line of code right here that says update the screen
So all of this stuff accumulates through draw and when you get to the end it updates
This is why if I put background at the end?
We'll never see [that] rectangle right no matter. What we do
It's always wiping it at the end of draw which is what we clearly don't want to do in this case
This is [a] bug in our program essentially
Okay, so I've shown you mouse x and mouse y
I'm going to
Very quickly show you one other thing
Which is that in addition to mouseX mouseY, there are two other built-in variables?
Which are called a pmouseX and pmouseY so if we look at this sketch?
but whatever
To do this, but if we look at this sketch
What's happening here draw a line from P mouse x p mouse y to mouse x mouse y?
So so what does that mean?
Let's come over here for a second. [oh]
Come over here with me. Let's come over here for a second. This is our processing window [and]
This is our mouse our mouse is here at one moment in time [at]
Another moment in time. We move the mouse and maybe it ends up over here
So this is kind of like time equals zero
And this is kind of like time equals one those are the mouse positions as if we're moving it
Well this we know at the current time we can think of as mouse x mouse y
Processing always stores for us the Previous mouse position and mouseX and mouseY position
So if this is the previous one
What does it mean to draw a line between the two it means draw that line?
but if what if we do this over and over again
Always draw a line from previous to current previous to current what happens if the mouse moves over here
And then the mouse moves over here and the mouse moves over here, so this is [the] [beginnings]
this is a you can almost like one line of code create a drawing app in processing now actually the
work that the
Possibilities here are endless what you can do with creating drawing
drawing applications in terms of
colors and thickness and [brushstrokes] in and
Saving drawings and manipulating them later and also that I almost want to just like stop and always talk about that for a while
But we can't but [weird], but this is saying you might think about if you're looking for an idea for a project
But here we have this very simple idea draw from previous to current let's see what happens when you do that
if we run this program
We can see look. Oh look at this
You can kind of see it there, right?
There's that blind from previous to current why am I not seeing that continuous line because I forgot
Backgrounds in draw this is a case where [we] absolutely want background to be in setup because we want to be able to see
That continuous line, we don't want to ever erase what we've drawn so here. We can see look
Right now it's always doing it you know later
we want to see like how [can] I do it only when I click the mouse we're going to start this so much more for
Us to look at and understand in terms of adding logic and stuff to a program
But this is a nice little example of something else you can do
So what have we got now? We've got all the tools to draw
I don't know. Why there's nothing over here to look at we've got all the tools to draw in a processing window
rectangle ellipse
stroke fill background
we now understand how to control the flow of
things at the beginning and things happen in Draw
We can we see that we can start to vary the program a little bit
But really, what's the only [thing] that we have so far to vary our program mouseX, mouseY maybe pmouse
X, pmouseY. so anyway here, but so you don't have a lot so far
but you [know] essentially what I would say to you but
We're going to look at what we're trying to get much further than this we want to be able to introduce all
Sorts of other variables our own variables
Events that happens when the mouse is when the run up and the mouse is clicked or a key is pressed
So we're going to get to all that but right now
I would say to you see if you can manipulate your processing sketch just with the current mouse location in the previous mouse location
you know
These values don't have to be used just for locations of things on the screen
what if you control [the] fill right the color of something when the mouse moves to the right it becomes more red it moves to
Down it becomes more blue. How would you do that?
how could you control the
Thickness of this line based on how fast you're moving it right the speed at which you move the mouse is somehow
Related to the difference between the current location in the previous location
how could you vary its thickness as it moves by the way is a clue to [that] there's a
We haven't looked at there's a function processing called strokeWeight()
look that up in the reference stroke weight allows you to control almost the
Thickness of this line right is it a very thick line you're drawing thin or is it very very thick right
So that's something you could look at do it and in the next [video]. What we're actually going to look at [where]
the next thing we're to look at is how to
control how to make things not, but when you click the mouse
And when we press a key so we just look very briefly at events in the next video
so try that, and I hope you enjoy it and
You know also do something else enjoyable that [has] nothing to do with the computer because it's probably good idea to okay [good]. Bye