0:00:01.372,0:00:02.835 In our last talk-through, 0:00:02.835,0:00:05.308 we showed how you can animate[br]a ball bouncing off the walls 0:00:05.308,0:00:07.805 using the draw function and if statements. 0:00:07.805,0:00:09.033 Let's review. 0:00:09.033,0:00:12.436 First, we set up some initial variables[br]for position and speed of a ball. 0:00:12.436,0:00:15.064 Then, in the draw function,[br]which is that special function 0:00:15.064,0:00:17.567 that gets called over and over[br]when your program is running, 0:00:17.567,0:00:20.731 we repaint the background[br]and draw an ellipse on the canvas 0:00:20.731,0:00:24.126 and we position that ellipse[br]based on the position variable 0:00:24.126,0:00:27.468 and the speed[br]and how they affect each other. 0:00:27.468,0:00:28.905 Now, without if statements, 0:00:28.905,0:00:31.116 our ball just kept on going[br]forever and ever, 0:00:31.116,0:00:33.061 or until we pressed restart. 0:00:33.061,0:00:36.823 So we added two if statements down here[br]to check and see 0:00:36.823,0:00:39.844 if the ball was near[br]the right side of the screen 0:00:39.844,0:00:41.299 or the left side of the screen, 0:00:41.679,0:00:44.093 and if so, we change the speed[br]to be positive or negative 0:00:44.093,0:00:46.172 so that the ball[br]basically would bounce back. 0:00:46.172,0:00:49.806 So now we just have this ball,[br]bouncing back and forth forever. 0:00:50.135,0:00:51.355 So that was pretty cool, 0:00:51.355,0:00:53.368 and there's a lot[br]of really cool animations 0:00:53.368,0:00:55.005 that we can make with that. 0:00:55.005,0:00:57.697 But now, I want to add user interaction[br]to this program. 0:00:57.697,0:01:00.026 See, right now,[br]this program's like a TV show. 0:01:00.026,0:01:01.614 if you gave it to a friend, 0:01:01.614,0:01:03.866 and your friend didn't know[br]how to program, 0:01:04.182,0:01:05.577 they couldn't really interact with it. 0:01:05.577,0:01:07.835 All they could do is watch it,[br]which is cool, 0:01:07.835,0:01:10.533 but it's a lot more cool[br]if they could actually do something. 0:01:10.533,0:01:13.574 So, let's give the user[br]some ways to control it. 0:01:13.574,0:01:15.335 Remember earlier, we learned 0:01:15.335,0:01:20.032 about two special global variables[br]called mouseX and mouseY. 0:01:21.231,0:01:22.708 Those variables return numbers 0:01:22.708,0:01:26.100 that tell us about the current position[br]of the user's mouse 0:01:26.100,0:01:28.597 and they're a great way[br]to make a program more interactive. 0:01:28.597,0:01:31.201 So, let's see. How can we use them? 0:01:31.201,0:01:34.571 Well, we should use them[br]inside the draw function somewhere. 0:01:34.571,0:01:36.763 Because that's the only code 0:01:36.763,0:01:39.482 that's called over and over[br]as the program runs. 0:01:39.902,0:01:43.027 Everything outside of draw[br]is only called once, 0:01:43.027,0:01:44.572 when the program first starts. 0:01:45.173,0:01:48.104 So, it doesn't make sense[br]to use mouseX and mouseY there. 0:01:48.104,0:01:50.632 The user hasn't had a chance[br]to interact with it. 0:01:50.632,0:01:56.969 In draw, we're drawing the ball[br]200 pixels down the screen right now. 0:01:56.969,0:02:00.574 How about we just replace[br]that with mouseY? 0:02:00.574,0:02:02.533 Because that is the y position, right? 0:02:02.980,0:02:07.832 This way it will just add the y position[br]dependent on where the user's y is. 0:02:07.832,0:02:10.101 Right? So check this out. 0:02:10.101,0:02:11.661 By just moving my cursor up and down, 0:02:11.661,0:02:14.535 I can change the line[br]that the ball moves along. 0:02:14.936,0:02:16.200 That's pretty cool. 0:02:16.200,0:02:19.906 But I want to use mouseX, too.[br]So, how should I use that? 0:02:19.906,0:02:22.068 Well, why don't we just make another ball 0:02:22.068,0:02:26.268 and have that ball going[br]in the opposite direction: up and down. 0:02:26.268,0:02:30.535 And there we'll just have[br]the user control the x position of that. 0:02:30.535,0:02:38.270 So we kind of just do the reverse.[br]We'll say ellipse mouseX position 50 50. 0:02:39.967,0:02:41.970 Alright? Check this out! 0:02:41.970,0:02:46.934 I've got these two balls that I control,[br]and going in perpendicular directions. 0:02:48.731,0:02:53.429 But, I'm still not happy.[br]I want to give the user even more control. 0:02:53.429,0:02:57.865 I want to give the user the power[br]to start up the second ball. 0:02:57.865,0:03:02.100 To actually bring it into existence,[br]just by pressing their mouse. 0:03:02.100,0:03:04.201 Well, then I need to figure out 0:03:04.201,0:03:07.769 how to tell that the user[br]is pressing their mouse. 0:03:08.170,0:03:12.874 Thankfully, we have a super special[br]Boolean variable for just that. 0:03:12.874,0:03:18.336 It's called mouseIsPressed[br]and we can use it inside an if statement. 0:03:18.336,0:03:22.137 So, let's see. This is our second ball. 0:03:22.137,0:03:26.920 So we can say if mouseIsPressed, 0:03:26.920,0:03:31.545 and then we'll move[br]the ellipse colon to there. 0:03:32.138,0:03:34.440 So, what this is doing here, 0:03:34.440,0:03:39.301 is telling the program[br]that we only want to draw this ellipse 0:03:39.301,0:03:44.093 if this is true and mouseIsPressed[br]will only be true 0:03:44.093,0:03:46.526 if the user is pressing their mouse. 0:03:47.003,0:03:50.002 So, let's try it. Ta da! 0:03:50.002,0:03:53.367 So now I can make the ball appear[br]whenever I press. 0:03:53.367,0:03:55.830 So it's zooming in[br]from this parallel universe. 0:03:55.830,0:03:58.963 In! In! In! It's awesome! 0:04:00.096,0:04:04.730 So, the interesting thing[br]about this variable mouseIsPressed 0:04:04.730,0:04:07.634 is that it changes based on[br]what the user does 0:04:07.634,0:04:09.934 not based on what our program does. 0:04:10.333,0:04:13.362 and since the draw function[br]gets called repeatedly over and over, 0:04:13.362,0:04:16.264 the output of our program[br]will change over time 0:04:16.264,0:04:18.564 just with a little bit of user input. 0:04:18.975,0:04:22.264 With the combined power[br]of if statements and mouseIsPressed, 0:04:22.264,0:04:23.861 you have everything you need 0:04:23.861,0:04:27.067 to make awesome things like buttons,[br]and drawing programs. 0:04:27.067,0:04:28.136 Woo hoo!