[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.37,0:00:02.84,Default,,0000,0000,0000,,In our last talk-through,
Dialogue: 0,0:00:02.84,0:00:05.31,Default,,0000,0000,0000,,we showed how you can animate\Na ball bouncing off the walls
Dialogue: 0,0:00:05.31,0:00:07.80,Default,,0000,0000,0000,,using the draw function and if statements.
Dialogue: 0,0:00:07.80,0:00:09.03,Default,,0000,0000,0000,,Let's review.
Dialogue: 0,0:00:09.03,0:00:12.44,Default,,0000,0000,0000,,First, we set up some initial variables\Nfor position and speed of a ball.
Dialogue: 0,0:00:12.44,0:00:15.06,Default,,0000,0000,0000,,Then, in the draw function,\Nwhich is that special function
Dialogue: 0,0:00:15.06,0:00:17.57,Default,,0000,0000,0000,,that gets called over and over\Nwhen your program is running,
Dialogue: 0,0:00:17.57,0:00:20.73,Default,,0000,0000,0000,,we repaint the background\Nand draw an ellipse on the canvas
Dialogue: 0,0:00:20.73,0:00:24.13,Default,,0000,0000,0000,,and we position that ellipse\Nbased on the position variable
Dialogue: 0,0:00:24.13,0:00:27.47,Default,,0000,0000,0000,,and the speed\Nand how they affect each other.
Dialogue: 0,0:00:27.47,0:00:28.90,Default,,0000,0000,0000,,Now, without if statements,
Dialogue: 0,0:00:28.90,0:00:31.12,Default,,0000,0000,0000,,our ball just kept on going\Nforever and ever,
Dialogue: 0,0:00:31.12,0:00:33.06,Default,,0000,0000,0000,,or until we pressed restart.
Dialogue: 0,0:00:33.06,0:00:36.82,Default,,0000,0000,0000,,So we added two if statements down here\Nto check and see
Dialogue: 0,0:00:36.82,0:00:39.84,Default,,0000,0000,0000,,if the ball was near\Nthe right side of the screen
Dialogue: 0,0:00:39.84,0:00:41.30,Default,,0000,0000,0000,,or the left side of the screen,
Dialogue: 0,0:00:41.68,0:00:44.09,Default,,0000,0000,0000,,and if so, we change the speed\Nto be positive or negative
Dialogue: 0,0:00:44.09,0:00:46.17,Default,,0000,0000,0000,,so that the ball\Nbasically would bounce back.
Dialogue: 0,0:00:46.17,0:00:49.81,Default,,0000,0000,0000,,So now we just have this ball,\Nbouncing back and forth forever.
Dialogue: 0,0:00:50.14,0:00:51.36,Default,,0000,0000,0000,,So that was pretty cool,
Dialogue: 0,0:00:51.36,0:00:53.37,Default,,0000,0000,0000,,and there's a lot\Nof really cool animations
Dialogue: 0,0:00:53.37,0:00:55.00,Default,,0000,0000,0000,,that we can make with that.
Dialogue: 0,0:00:55.00,0:00:57.70,Default,,0000,0000,0000,,But now, I want to add user interaction\Nto this program.
Dialogue: 0,0:00:57.70,0:01:00.03,Default,,0000,0000,0000,,See, right now,\Nthis program's like a TV show.
Dialogue: 0,0:01:00.03,0:01:01.61,Default,,0000,0000,0000,,if you gave it to a friend,
Dialogue: 0,0:01:01.61,0:01:03.87,Default,,0000,0000,0000,,and your friend didn't know\Nhow to program,
Dialogue: 0,0:01:04.18,0:01:05.58,Default,,0000,0000,0000,,they couldn't really interact with it.
Dialogue: 0,0:01:05.58,0:01:07.84,Default,,0000,0000,0000,,All they could do is watch it,\Nwhich is cool,
Dialogue: 0,0:01:07.84,0:01:10.53,Default,,0000,0000,0000,,but it's a lot more cool\Nif they could actually do something.
Dialogue: 0,0:01:10.53,0:01:13.57,Default,,0000,0000,0000,,So, let's give the user\Nsome ways to control it.
Dialogue: 0,0:01:13.57,0:01:15.34,Default,,0000,0000,0000,,Remember earlier, we learned
Dialogue: 0,0:01:15.34,0:01:20.03,Default,,0000,0000,0000,,about two special global variables\Ncalled mouseX and mouseY.
Dialogue: 0,0:01:21.23,0:01:22.71,Default,,0000,0000,0000,,Those variables return numbers
Dialogue: 0,0:01:22.71,0:01:26.10,Default,,0000,0000,0000,,that tell us about the current position\Nof the user's mouse
Dialogue: 0,0:01:26.10,0:01:28.60,Default,,0000,0000,0000,,and they're a great way\Nto make a program more interactive.
Dialogue: 0,0:01:28.60,0:01:31.20,Default,,0000,0000,0000,,So, let's see. How can we use them?
Dialogue: 0,0:01:31.20,0:01:34.57,Default,,0000,0000,0000,,Well, we should use them\Ninside the draw function somewhere.
Dialogue: 0,0:01:34.57,0:01:36.76,Default,,0000,0000,0000,,Because that's the only code
Dialogue: 0,0:01:36.76,0:01:39.48,Default,,0000,0000,0000,,that's called over and over\Nas the program runs.
Dialogue: 0,0:01:39.90,0:01:43.03,Default,,0000,0000,0000,,Everything outside of draw\Nis only called once,
Dialogue: 0,0:01:43.03,0:01:44.57,Default,,0000,0000,0000,,when the program first starts.
Dialogue: 0,0:01:45.17,0:01:48.10,Default,,0000,0000,0000,,So, it doesn't make sense\Nto use mouseX and mouseY there.
Dialogue: 0,0:01:48.10,0:01:50.63,Default,,0000,0000,0000,,The user hasn't had a chance\Nto interact with it.
Dialogue: 0,0:01:50.63,0:01:56.97,Default,,0000,0000,0000,,In draw, we're drawing the ball\N200 pixels down the screen right now.
Dialogue: 0,0:01:56.97,0:02:00.57,Default,,0000,0000,0000,,How about we just replace\Nthat with mouseY?
Dialogue: 0,0:02:00.57,0:02:02.53,Default,,0000,0000,0000,,Because that is the y position, right?
Dialogue: 0,0:02:02.98,0:02:07.83,Default,,0000,0000,0000,,This way it will just add the y position\Ndependent on where the user's y is.
Dialogue: 0,0:02:07.83,0:02:10.10,Default,,0000,0000,0000,,Right? So check this out.
Dialogue: 0,0:02:10.10,0:02:11.66,Default,,0000,0000,0000,,By just moving my cursor up and down,
Dialogue: 0,0:02:11.66,0:02:14.54,Default,,0000,0000,0000,,I can change the line\Nthat the ball moves along.
Dialogue: 0,0:02:14.94,0:02:16.20,Default,,0000,0000,0000,,That's pretty cool.
Dialogue: 0,0:02:16.20,0:02:19.91,Default,,0000,0000,0000,,But I want to use mouseX, too.\NSo, how should I use that?
Dialogue: 0,0:02:19.91,0:02:22.07,Default,,0000,0000,0000,,Well, why don't we just make another ball
Dialogue: 0,0:02:22.07,0:02:26.27,Default,,0000,0000,0000,,and have that ball going\Nin the opposite direction: up and down.
Dialogue: 0,0:02:26.27,0:02:30.54,Default,,0000,0000,0000,,And there we'll just have\Nthe user control the x position of that.
Dialogue: 0,0:02:30.54,0:02:38.27,Default,,0000,0000,0000,,So we kind of just do the reverse.\NWe'll say ellipse mouseX position 50 50.
Dialogue: 0,0:02:39.97,0:02:41.97,Default,,0000,0000,0000,,Alright? Check this out!
Dialogue: 0,0:02:41.97,0:02:46.93,Default,,0000,0000,0000,,I've got these two balls that I control,\Nand going in perpendicular directions.
Dialogue: 0,0:02:48.73,0:02:53.43,Default,,0000,0000,0000,,But, I'm still not happy.\NI want to give the user even more control.
Dialogue: 0,0:02:53.43,0:02:57.86,Default,,0000,0000,0000,,I want to give the user the power\Nto start up the second ball.
Dialogue: 0,0:02:57.86,0:03:02.10,Default,,0000,0000,0000,,To actually bring it into existence,\Njust by pressing their mouse.
Dialogue: 0,0:03:02.10,0:03:04.20,Default,,0000,0000,0000,,Well, then I need to figure out
Dialogue: 0,0:03:04.20,0:03:07.77,Default,,0000,0000,0000,,how to tell that the user\Nis pressing their mouse.
Dialogue: 0,0:03:08.17,0:03:12.87,Default,,0000,0000,0000,,Thankfully, we have a super special\NBoolean variable for just that.
Dialogue: 0,0:03:12.87,0:03:18.34,Default,,0000,0000,0000,,It's called mouseIsPressed\Nand we can use it inside an if statement.
Dialogue: 0,0:03:18.34,0:03:22.14,Default,,0000,0000,0000,,So, let's see. This is our second ball.
Dialogue: 0,0:03:22.14,0:03:26.92,Default,,0000,0000,0000,,So we can say if mouseIsPressed,
Dialogue: 0,0:03:26.92,0:03:31.54,Default,,0000,0000,0000,,and then we'll move\Nthe ellipse colon to there.
Dialogue: 0,0:03:32.14,0:03:34.44,Default,,0000,0000,0000,,So, what this is doing here,
Dialogue: 0,0:03:34.44,0:03:39.30,Default,,0000,0000,0000,,is telling the program\Nthat we only want to draw this ellipse
Dialogue: 0,0:03:39.30,0:03:44.09,Default,,0000,0000,0000,,if this is true and mouseIsPressed\Nwill only be true
Dialogue: 0,0:03:44.09,0:03:46.53,Default,,0000,0000,0000,,if the user is pressing their mouse.
Dialogue: 0,0:03:47.00,0:03:50.00,Default,,0000,0000,0000,,So, let's try it. Ta da!
Dialogue: 0,0:03:50.00,0:03:53.37,Default,,0000,0000,0000,,So now I can make the ball appear\Nwhenever I press.
Dialogue: 0,0:03:53.37,0:03:55.83,Default,,0000,0000,0000,,So it's zooming in\Nfrom this parallel universe.
Dialogue: 0,0:03:55.83,0:03:58.96,Default,,0000,0000,0000,,In! In! In! It's awesome!
Dialogue: 0,0:04:00.10,0:04:04.73,Default,,0000,0000,0000,,So, the interesting thing\Nabout this variable mouseIsPressed
Dialogue: 0,0:04:04.73,0:04:07.63,Default,,0000,0000,0000,,is that it changes based on\Nwhat the user does
Dialogue: 0,0:04:07.63,0:04:09.93,Default,,0000,0000,0000,,not based on what our program does.
Dialogue: 0,0:04:10.33,0:04:13.36,Default,,0000,0000,0000,,and since the draw function\Ngets called repeatedly over and over,
Dialogue: 0,0:04:13.36,0:04:16.26,Default,,0000,0000,0000,,the output of our program\Nwill change over time
Dialogue: 0,0:04:16.26,0:04:18.56,Default,,0000,0000,0000,,just with a little bit of user input.
Dialogue: 0,0:04:18.98,0:04:22.26,Default,,0000,0000,0000,,With the combined power\Nof if statements and mouseIsPressed,
Dialogue: 0,0:04:22.26,0:04:23.86,Default,,0000,0000,0000,,you have everything you need
Dialogue: 0,0:04:23.86,0:04:27.07,Default,,0000,0000,0000,,to make awesome things like buttons,\Nand drawing programs.
Dialogue: 0,0:04:27.07,0:04:28.14,Default,,0000,0000,0000,,Woo hoo!