 Good day all. Matt Roberts here. I just wanted to do a quick video to demonstrate the use of these Von paper tracing of memory use of variables In processing. So I've got a very simple example here, which is a ball Moving down the screen or a circle moving down the screen and it moves from the top and continues all the way down this is very common processing code to demonstrate variables because we have a Variable y which represents the y position of that circle and that y gets incremented each time So the y position of the circles being incremented each time draw gets called So it moves down the screen excuse me What I'm going to do is I'm going to make it so instead of starting at the top of the screen the Ball actually starts halfway down the screen. I'll be explicit. I'll write 400, but I might otherwise write with the divided by 2 Let's put 400 down here as well Just to make this program a bit simpler So we got the same program, but now the ball starts halfway down what I really wanted to demonstrate though was tracing it on paper So that we can understand what's happening in the memory is this program executes So the program executes top to bottom ish kind of it actually goes does the top to the bottom Then does the void set up once and then does the draw over and over again. That's how processing programs always go So what happens when this line is executed into y equals zero? It's the declaration of a variable and what that means in processing is a piece of memory a slot of memory is going to be set aside and Named y This is how I draw that in a diagram this set of memory this little space in memory has been set aside for us and The name y is referencing that or pointing to that or or going towards that now once we set aside the memory something has to go in there and with Processing the initial value for an integer will just be zero You can really think of these things just been filled in with zeros when they're set aside So after that first line all this has happened in memory Oh, by the way, this is my my standard sheet for tracing it out processing programs If I've got my own notebook, I can just draw this myself. I've all got a version of this on island for you as well This here is the processing window if I ever want to draw what's going on on the screen And this here is the bank of memory already set out for me In this space for me to put the names of the various banks of memory over on the left So this body memories been given the name y And zero has appeared in there just from that first line now the second line does nothing at all because it's empty The third line is the start of setup so that that will run now. What happens here on line for Well, we're saying Why should now be equal to 400 the variable y should be equal to 400 so From a memory point of view that means the bucket that y is pointing to the thing named y Should no longer have a zero in it It should now have 400 in it So it's like that gets Raised and a 400 gets put in there So now in y is 400 The next thing that happens is the size of the screen gets set Well, that doesn't change memory at all then the draw function is called the background gets made black I guess my screen gets filled in in some sense Then why gets set to y plus one what happens here from a memory point of view is that We're going to be putting this is what equality means putting a new value into y Y equals means put a new value in y But what value should I put in there? It's going to be this and to find out what this is I first have to work out what y is So when I want to know what y is I look it up in the memory. So I look up y in the memory and it's 400 So 400 plus 1 equals 401 So now I know that this section here really means 401 At least the first time round and So y equals 401 means Erase whatever was in y before and put in 401, please So now y contains 401 the next line is to draw an ellipse on the screen at x position 400 Y position of whatever's inside with a variable y well what's inside the variable y is 401 So I go to x position 400 and y position 401 and I draw a little ellipse Then the draw function goes again So we look back around to the top of the draw function and Background gets called again just goes out the whole screen and y gets set to y plus one So that means look up y 401 add one to it 402 put that back inside y So now inside y is the number 402 and Then the call to ellipse comes go across the 400 down to 402 draw the circle So you can see we're going to be drawing circle circle circle circle over and over a little bit further down the screen Now this is a lot more to keep track of if you can understand what's going on just from the processing program itself Then all well and good But soon enough you'll have to start thinking more about what's happening in memory and it's good to practice on these simple examples Whether it's just one bucket in memory with one name and its value is changing as it goes You're also welcome to come with your own notations for doing this Whatever works for you often people will just have They might draw. Oops. Sorry. They might draw y and Just say y is 400 and then rub out that 400 and change it to a 401 and Rub that out and into a 402 That's okay in this case when we're just doing simple variables that works really well We're using this version because when we get to compound data This this still works and compound data doesn't work quite so well with the simpler ones Just wouldn't show you that as a demo practice this on more complicated programs Keep it in your toolbox for when you're struggling to understand what's going on in a program That's it for now