Transcript:
In this video, we’re just going to take a look at using processing in Python mode and get a feel for how it works and just kind of review what we looked at in class quickly. That was kind of, you know, a fast kind of introduction to the to how processing and python work, so if you’ve downloaded and installed processing, you just need to open it, and instead it make sure you’ve set it to Python mode if you haven’t downloaded it and installed it, you can check the other tutorials for how to get set up. This is the Python or the processing website. If you just go to the main processing page, you’ll be on the main page where you know. The reference manual also exists, but that reference manual is actually for the Java version. There’s lots of good information in there. I don’t know that the Python documentation is always as complete, so you might actually end up looking at the other reference manual sometimes, but just know that it’s in a different language. These these videos here are also excellent resources, but they mainly focus on. I think the older ones are Java, and then the latest ones are Javascript, but nonetheless they really go into various topics and explain other things that are, you know, really interesting, so you you could certainly get a lot out of them but again? You’ll just have to remember that the language will be different and you’ll have to kind of make some of those changes to kind of translate it to the Python version. The tab I just clicked gets us into the Python version of the documentation, and there’s both tutorials here and the reference manual and so I would strongly recommend having this reference manual open whenever you’re working on processing and the other resource for getting started is also I would also say as the examples folder that exists for processing and because we’re in Python mode we’re seeing the actual Python versions of the of the examples. Okay, so I think in class we quickly looked at a few of these the Gamefly, for instance, and you can see this is in Python. It’s a Python version of a function, and if we run the code, we’ll see Conway’s Game of Life running and this, you know, this is a great resource. It’s a great way to, you know, get a feel for how things work and what’s going on and and learning about learning about various things, you know, Of course, there is something to be said for trying to figure out things before you look at other people’s code, so you’ll just have to kind of gauge when you’re going to explore, and when you’re gonna try to solve a problem on your own without kind of Googling or going directly to whatever the answer might be, so let’s just get started with how we draw and put in processing and I open this documentation page for the Rectangle Command rect, and I’m just gonna copy that code and paste it in here. Remember that processing in a way is really just a graphical addition to Python we’re still working with the Python programming language, but a function like Rect doesn’t exist in Python in regular Python, and so we have something that allows us to draw a rectangle, which is kind of like the Graphical library that processing has added for us. You can do a lot more than that, but that’s one way to think about it, so we see this rectangle being drawn on this rather small screen, and if we’re wondering what these three parameter for different parameters are doing, we would go down here and look what the syntax is, and these explain what the parameters are turns out that in in processing we’re looking at a screen that has the origin in the top left corner. So when we’re drawing a rectangle that has the position of X equals 30 Y equals 20 That’s very close to the origin, but the origin is up here rather than down at the bottom bottom left. So X is, you know works as it normally does. Have you used to the origin being at the bottom corner? But Y is equal to 0 at the top of the screen in the top left corner and as Y increases in a positive manner, it goes down, so if I were to change this to 220 you’ll see that rectangle move down on the screen. So origin is top left and you get used to that fairly quickly. That’s not really a big deal. This size command allows you to change the size of the window That first is is Oakland. When you first run the code this this, you can only run once at the beginning of your beginning of your program. Okay, so Ill. Just keep going. I think we looked at drawing something. I’ll draw an ellipse in the same position as the rectangle, and you can see that the ellipse, despite having the same X and Y coordinates, is not position positioned exactly the same. So what’s happening here? The rectangle is being positioned by the upper left corner. So when we look at the X and Y coordinates were talking about this point in particular, the top left like the screen, the origins top left. So the kind of positioning point on the rectangle is top left as well. So that’s actually The coordinates. 30 X equals 30 y equals to 20 but when we draw an ellipse. The kind of control point or the positioning point is going to be the center of the ellipse. So what we’re going to see is an ellipse that has a center point right at that corner, and you can kind of see that that’s the case is a little hard to tell, because, of course, the ellipse is, the ellipse is drawn second. If we look at the flow here of the code going from top to bottom rectangle is being drawn first, so the rectangle appears on the canvas, and then the ellipse appears on top of it because it’s been second, so we can’t see this corner and if we want to kind of see it. What course we could flip that and do it that way. So now we can see that this corner is kind of right there on the on the top. Sorry in the in the center of this circle Question is drawing as a circle. This question came up in class. This is an ellipse, but it looks like a circle because we’re using a diameter. That is the same as so this. This is the X and the Y of the center. This is the X of the dimension, so the width and this is the height, so currently the diameter and the the diameter and the sorry, the horizontal diameter And I guess the vertical diameter. If you want to call that they are the same. It was 5050 I’m just gonna change that and redraw it and you’ll see that’s, you know, there’s your ellipse shape now because the two dimensions are not the same, So I’m just gonna continue. I’m going to use the fill command. These are all in the manual. So if you’re at all wondering what these are later on, you just go and find them in the manual. The fill command is a way of drawing a color inside the shape, so it uses the RGB colors, so we’re going to combine light in three components of red green and blue. It’s additive color mixing. So that’s red, full red. So the number that you put here can range from zero to 255 so is 8-bit number, so that’s all red, no green, no blue, so we’ll see a red ellipse and a red square and it’s like we’ve picked up a marker. We’ve were filling these shapes with this color of the marker that we picked up, and that color remains until it’s changed, so the ellipse was filled with the red. I changed that to green before I do the rectangle. So now the rectangles mean anything drawn after this rectangle will continue to be green until we change it again. The outline remains, you can see. Still, there’s an outline there. It’s a black outline. Let’s refer to as the stroke, and there’s different things. You can do to this stroke. You can change the width of it. You can change the color again. All all in the manual you can see, in this example. They’re changing the stroke of this rectangle to a color. That’s a lot of red and some green and no blue. If you want to select colors, there is a tool for that. Get the color selector under the tools, so you can just select a color here and you’ll see a corresponding red green and blue amount to to obtain that color. So I’m not sure we got green or yellow here, But if you were to copy these in here 226 247 90 247 I think it was 90 Then We’ll see that color in a rectangle, so so far, everything that we’ve been doing is kind of in this mode of running the sketch once and seeing some kind of result with no animation. There’s there’s no functions in this sketch or this program you’ll notice and so what Python and processing are doing here is when we hit the. Run button. It just goes from the top down to the bottom and runs each of the commands and trenin and draws this, and then it completes. There’s nothing that can be done at this point. We can’t detect any kind of mouse press or anything like that so. I’m going to make it quick change, so I’m going to change it to run a little more dynamically and what you can see here is. I’ve added two functions. The set up function is the first thing that processing will run. There might be some code above here that initialize’s some global variables, so it would run that first, but it then runs set up and once so it establishes a new screen of size 800 by 600 and then it starts drawing. It starts running the draw function repeatedly at the framerate of whatever the framerate is that this drawing is running at so probably at 60 frames per second. If you haven’t modified it, so we’ll just look at what that looks like. I mean, this currently looks exactly the same it. Doesn’t you might not, you know, we can’t tell. But it is redrawing the screen over and over again. I’ll do, I’ll just create an X variable. It’s a global variable. So so unfortunately, is the situation that we kind of have to get used to. We do have to create variables, global variables and processing frequently at least for the time being, so I’m going to use this global variable to position the ellipse. And you can see it there. I’ll just run that you’ll see there’s no errors, so the ellipses kind of moved over to the side. If I if I change that variable and run it again, you’ll see that it’s kind of move the ellipse from the edge over to the you know over a hundred pixels, so the animation. I’d like to accomplish is maybe to have it kind of scrolling across the screen, and this is where our understanding of global variables gets. It becomes a bit important lets. Move it ten pixels. Every time there’s gonna be a problem. We’re gonna see something happen here. So unbound local error local variable. X reference before assignment. This is strange because this is working. Fine, right, so something’s happened here. That’s caused this to become an error. Even though we know this variable exists up here and it was running fine until we tried to modify it. But this is the rule about how global variables work in Python so python. Has you know an interesting approach to this? You can’t modify global variables until you use the global keyword. You might be surprised to realize that the first case where we were using it without modifying it. It worked fine. It’s kind of a little kind of additional part of the rule. Is that if you want to just read this global variable, you want to access the value and and read it and not modify it. Then you’re allowed to do that. That’s no problem. It’s only when you go to modify it that you actually need to have have told. Python, yeah, you know what this is. A global variable? I realize that I’m gonna start modifying. It let me do that. You know, this kind of gives us permission to modify it. Okay, so that’s kind of an extension to our understanding of what global variables how the rules work. And there you can see. That ellipse is moving to the right. I’ll just move it. One pixel at a you can see this strange feature here That’s being kind of smeared across the screen. That’s really just that’s just a stroke that being left behind as each new ellipse is being drawn one pixel to the right. And so you know, one easy way to deal with that is to simply erase the screen and early- certainly might not be the most efficient way to deal with this, But this is gonna be our solution for now. Just erase the whole screen. Fill it with this gray color. This gray color here is just 200 200 200 turns out. I can just use a single value if I want to work with greyscale and erase that, and then modify, erase the screen entirely and redraw the new ellipse at the new position. Okay, so we positioned it initially at 100 pixels and we then drew it. I guess we modified it first to move it over one pixel. So we initially drew the ellipse at X equals 101 and then a moment later, you know, the frame redrew itself. You can see it’s moving about. I guess about 700 pixels and the you know, a few seconds that we’re watching it. Here gives you a rough idea of how quickly the frames are running behind the scenes, but that allows us to animate the the ellipse. I’m just gonna modify how I change the variable, so let’s continue to draw this ellipse at variable global variable X and let’s modify it instead using this function called mousepressed. So so remember, we have to say that it’s global and I’ll just modify it by a bit more than just 1 because it’ll be hard to see so this is not going to run continuously. You can see it’s not running in the draw loop, so it’s not moving. When does this actually execute? Well, it’s a built-in function if we go back to our manual and look for mousepressed, we’ll find it with all of these other functions that are dealing with input. So you know, we can deal with the mouse with the keyboard through these other functions. And when we look at our sketch here, you can, hopefully you can tell. I’m clicking there and each time I click, we’re redrawing the ellipse and a new position. The the modification of the variable occurs here. So when I click Mouse press function mouse press execute. I kind of get permission to modify the X, And I increase it by five, and then a moment later after this is finished a moment later, the draw Loop is going to be told to run again because remember, it’s running at 60 frames per second every 60th of a second. This draw loop has to run again, so it runs again, but this. X variable is different than it was on the last one. So we see on the last, you know, execution of the draw loop, so we see that ellipse move to the right five pixels, that’s. You know, our first kind of bit of interaction. We can do that in other ways. There’s actually a variable that that actually stores where the X where the mouse is at any point. In time, this is another way to deal with how we can interact or create interactive drawings. You can see as I move my mouse. The ellipse is redrawn to a new position. You can kind of see it lagging there. You can move my X. My mouse faster than the frame rate is is kind of catching up, but you can see it kind of stays right underneath at least in the X dimension. It stays right underneath the stays in line with the with the mouse. So I think that kind of covers everything that we talked about in our really fast Overview of how processing works in class, and it gives you some good starting points. I think you know at this point. The tutorials are really useful, and I’d be worth looking at those and kind of working through the code yourself and them in a slower fashion, certainly coordinate systems and shapes looking at the this, getting even the getting started page, though I think most of that is probably fairly fairly well understood at this point, but all of these all of these tutorials on the top here, as well as dealing with, you might want to look at the color tutorial as well and even this interactive interactivity tutorial all of those tutorials. I think are great starting points for working with processing and getting a feel for how it works and what you can do with it.