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