3.2: Built-in Variables (mouseX, mouseY) – Processing Tutorial

3.2: Built-in Variables (mouseX, mouseY) – Processing Tutorial


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 . 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

56 thoughts to “3.2: Built-in Variables (mouseX, mouseY) – Processing Tutorial”

  1. Just started the course Creative coding, instead of finishing week1 episode first, I'm watching all your videos now because it makes me entusiastic, as I am an absoluut programming noob. Fantastic videos!

  2. This reminds me of the good old days learning Assembly Language for the first time. Our exercise was to output a +5V out into the now obsolete Parallel Port. When I saw that baby light up, it was euphoric!

  3. Hi from France !
     is it possible to do the same thing but with an image in place of the rectangle ?

    Thank you're video are so helpful

  4. How do I PREVENT that "hidden" update at the end of draw??? I want to plot a complex math formula which takes about an hour to run and be able to WATCH it form, pixel-by-pixel, NOT wait the whole time (which for all I know, it is not plotting correctly) and then have the graph pop up. THIS WOULD SOLVE A PROBLEM THAT I HAVE HAD SINCE FIRST USING PROCESSING!!!!
    Thanks,

  5. I set background() in a setup(), not in draw(), so I got a beautiful vintage Internet Explorer animation 😀
    OMG I'm so stupid thats exactly what you're doing later in video!

  6. Anyone know how we find out about the numbering order for these videos ? I don't know if I'm missing any in the sequence and the people at Youtube haven't figured out a numerical ordering scheme based on titles yet.

  7. if you put background in setup(){},then you draw the rectangle at mouseX,mouseY, the distace between the rectangles will vary depend on the speed i drag my mouse, so i think the processing keeps track of the mouse in some interval,not always keeps track of the mouse,right?

  8. When I run the code with background() in setup(), the initial rectangle is always on the top left corner of the sketch, even if my mouse is not there. What is causing this and how can I remove it?

    PS: I just noticed Dan also have it in his output but how do i remove it ?

  9. Processing is an open-source computer programming language and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching non-programmers the fundamentals of computer programming in a visual context. The Processing language builds on the Java language, but uses a simplified syntax and a graphics user interface.

  10. Excellent course, excellent books, excellent lecturer. Very enjoyable. Hope I wind up learning how to program.

  11. mm didnt we agree that first two parameters 4:10 refer to the x,y at the top why when we wrote mouse,x,y it went to the middle?

  12. The possibilities are truly endless
    I could spend a whole week experimenting with all I know after watching this video

  13. Hello, I have really been learning a lot from your lectures, I just got one challenge at the moment. I have been able to move my shapes (rectangle) using mousX, mouseY COORDINATION i can`t seem to do the same with my triangle. please assist me?

  14. Sir have u already make video of how mouseX and Y can manipulate using innerHTML.txt ? Its like the output of other function is the input of mouse position. If u make already please give me the link. I am ur active follower.

  15. I'm sorely tempted to download this and edit out all the important bits and just send back a compilation of his irrelevant tangents and random noises.

  16. Hi Mate….You are an amazingTeacher, from my personal experience I have seen very few persons, who has this kind of teching ability, as I am since long with academic profession. Good luck and keep smiling….

  17. I think the word background is misleading. Canvas would have been more appropriate IMHO.
    A background is what is behind the foreground so redrawing it shouldn't erase the foreground because it something else and independent from the foreground.
    However, redrawing a canvas (or window, or whatever) redraws everything inside it because it embeds everything else.
    Of course, you won't rename the function, I was just pointing out that this was unintuitive for me to get at first because it makes little sense.
    I also have a hard time with the "draw" concept as a loop by default. It seems odd and very different than anything I've seen before.
    Something that is looping without me asking it to loop is kind of unexpected.
    Intuitively, it feels like a waste of resources, especially if looping when nothing new.happens.
    And if only one thing happens, it still loops the entire block which seems like a memory killer.
    But I'm commenting as I watch. This will probably make more sense later I suppose.
    Just that, so far, it's very disturbing.

  18. I'm doing this on my lab and saying: "uuuuu" "aaaaa" "woooow" good thing that everybody is wearing headphones XD

Leave a Reply

Your email address will not be published. Required fields are marked *