More Mouse Interaction | Computer Programming | Khan Academy

More Mouse Interaction | Computer Programming | Khan Academy


In our last talk-through, we showed how you can animate a ball bouncing off the walls using the draw function and if statements. Let’s review. First, we set up some initial variables for position and speed of a ball. Then, in the draw function, which is that special function that gets called over and over when your program is running, we repaint the background and draw an ellipse on the canvas and we position that ellipse based on the position variable and the speed and how they affect each other. Now, without if statements, our ball just kept on going forever and ever, or until we pressed restart. So we added two if statements down here to check and see if the ball was near the right side of the screen or the left side of the screen, and if so, we change the speed to be positive or negative so that the ball basically would bounce back. So now we just have this ball, bouncing back and forth forever. So that was pretty cool, and there’s a lot of really cool animations that we can make with that. But now, I want to add user interaction to this program. See, right now this program’s like a TV show. if you gave it to a friend, and your friend didn’t know how to program, they couldn’t really interact with it. All they could do is watch it, which is cool, but it’s a lot more cool if they could actually do something. So, let’s give the user some ways to control it. Remember earlier we learned about two special global variables called mouseX and mouseY. Those variables return numbers that tell us about the current position of the user’s mouse and they’re a great way to make a program more interactive. So, let’s see. How can we use them? Well, we should use them inside the draw function somewhere. Because that’s the only code that’s called over and over as the program runs. Everything outside of draw is only called once, when the program first starts. So, it doesn’t make sense to use mouseX and mouseY there. The user hasn’t had a chance to interact with it. In draw, we’re drawing the ball 200 pixels down the screen right now. How about we just replace that with mouseY? Because that is the y position, right? So this way it will just add the y position dependent on where the user’s y is. Right? So check this out. By just moving my cursor up and down, I can change the line that the ball moves along. That’s pretty cool. But I want to use mouseX, too. So, how should I use that? Well, why don’t we just make another ball and have that ball going in the opposite direction: up and down. And there we’ll just have the user control the x position of that. So we kind of just do the reverse. We’ll say ellipse mouseX position 50 50. Alright? Check this out! Now, I’ve got these two balls that I control, and going in perpendicular directions. But, I’m still not happy. I want to give the user even more control. I want to give the user the power to start up the second ball. To actually bring it into existence, just by pressing their mouse. Well, then I need to figure out how to tell that the user is pressing their mouse. Thankfully, we have a super special boolean variable for just that. It’s called mouseIsPressed and we can use it inside an if statement. So, let’s see. This is our second ball. So we can say if mouseIsPressed, and then we’ll move the ellipse colon to there. So, what this is doing here, is telling the program that we only want to draw this ellipse if this is true and mouseIsPressed will only be true if the user is pressing their mouse. So, let’s try it. Ta da! So now I can make the ball appear whenever I press. So it’s zooming in from this parallel universe. In! In! In! It’s awesome! So, the interesting thing about this variable mouseIsPressed is that it changes based on what the user does, not based on what our program does. and since the draw function gets called repeatedly over and over, the output of our program will change over time just with a little bit of user input. With the combined power of if statements and mouseIsPressed, you have everything you need to make awesome things like buttons, and drawing programs. Woo hoo!

1 thought on “More Mouse Interaction | Computer Programming | Khan Academy”

  1. There's one little thing that bothers me. How might I explain why the ball continues to move in reverse when the condition " If (position > 375) " is only true for an instant? I can see it running through all the lines and evaluating the second "If" statement as false, but if the code is run many times per second then neither if statement is true for a short time.

Leave a Reply

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