[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.84,0:00:05.64,Default,,0000,0000,0000,,For this section we're going to take the\Ntechniques we've built up so far, with the
Dialogue: 0,0:00:05.64,0:00:10.21,Default,,0000,0000,0000,,for-loop and the if-statement and the\Naverage technique to detect color areas,
Dialogue: 0,0:00:10.21,0:00:14.100,Default,,0000,0000,0000,,and put them together to do a real movie\Nspecial effect. So this special effect is
Dialogue: 0,0:00:14.100,0:00:19.48,Default,,0000,0000,0000,,called blue screening. And I should point\Nout that what you think of as video data
Dialogue: 0,0:00:19.48,0:00:23.90,Default,,0000,0000,0000,,is really just made of a series of regular\Nstill images, just showed something like
Dialogue: 0,0:00:23.90,0:00:28.49,Default,,0000,0000,0000,,twenty to 60 times per second. So for our\Npurposes we'll just do the special effect
Dialogue: 0,0:00:28.49,0:00:33.29,Default,,0000,0000,0000,,on still images, and you can see how it'll\Ngeneralize to movies. So the idea is it'll
Dialogue: 0,0:00:33.29,0:00:37.56,Default,,0000,0000,0000,,be a very simple model. Imagine I have the\Nstop sign image. So we've, we've talked
Dialogue: 0,0:00:37.56,0:00:41.55,Default,,0000,0000,0000,,about the code to detect the red area\Ninside of here. So for the blue screen
Dialogue: 0,0:00:41.56,0:00:45.83,Default,,0000,0000,0000,,effect, we're gonna have a second image\Nwhich I'll call the, the background image.
Dialogue: 0,0:00:45.83,0:00:50.23,Default,,0000,0000,0000,,And the idea is, we'll detect the red\Nareas, as we've done before. But whenever
Dialogue: 0,0:00:50.23,0:00:54.35,Default,,0000,0000,0000,,I get a pixel over here on the red area, I\Nwanna think about the sort of
Dialogue: 0,0:00:54.35,0:00:59.04,Default,,0000,0000,0000,,corresponding pixel over from this other\Nimage. And I'm gonna copy that pixel over
Dialogue: 0,0:00:59.04,0:01:03.68,Default,,0000,0000,0000,,to sorta fill in all the red area over\Nhere with pixels over here from the other
Dialogue: 0,0:01:03.68,0:01:07.75,Default,,0000,0000,0000,,image. Sorry, it's a slightly more\Ndetailed diagram of it. So, I'll do
Dialogue: 0,0:01:07.75,0:01:11.96,Default,,0000,0000,0000,,examples in a little bit. But we're going\Nto have a for-loop where we're kind of
Dialogue: 0,0:01:11.96,0:01:16.38,Default,,0000,0000,0000,,looping through this image. And we'll have\Nan if-statement which is going to identify
Dialogue: 0,0:01:16.38,0:01:20.54,Default,,0000,0000,0000,,some of the pixels up here. So let's say\Nwe've identified this pixel in the left
Dialogue: 0,0:01:20.54,0:01:24.54,Default,,0000,0000,0000,,image. So that pixel has some x-y-coordinate and we haven't messed with the
Dialogue: 0,0:01:24.54,0:01:28.65,Default,,0000,0000,0000,,x-y very much up to now but it, you know,\Nmaybe x is 200 and y is 100 or whatever.
Dialogue: 0,0:01:28.81,0:01:33.21,Default,,0000,0000,0000,,So what we want to do is get those two\Nnumbers. And then find the corresponding
Dialogue: 0,0:01:33.21,0:01:37.75,Default,,0000,0000,0000,,pixel over here from the other image. So,\Nmaybe a (200,100), or whatever it is.
Dialogue: 0,0:01:37.75,0:01:42.84,Default,,0000,0000,0000,,There's some pixel that matches up. So\Nonce we've got that corresponding image, a
Dialogue: 0,0:01:42.84,0:01:47.87,Default,,0000,0000,0000,,corresponding pixel from the other image.\NThen we wanna copy it over, to set the
Dialogue: 0,0:01:47.87,0:01:53.08,Default,,0000,0000,0000,,pixel over here. And you know, how's that\Ngoing to work, how do you copy a pixel
Dialogue: 0,0:01:53.08,0:01:57.14,Default,,0000,0000,0000,,over? You have to think about, 'Well, what\Ndefines a pixel? What makes a pixel look
Dialogue: 0,0:01:57.14,0:02:01.03,Default,,0000,0000,0000,,the way it looks?' And the answer is it's\Njust the three numbers. It's just red,
Dialogue: 0,0:02:01.03,0:02:04.96,Default,,0000,0000,0000,,green and blue. So we're going to write\Ncode to sort of get the red value from
Dialogue: 0,0:02:04.96,0:02:08.95,Default,,0000,0000,0000,,this pixel over here and then set that as\Nthe red value over here. Likewise for
Dialogue: 0,0:02:08.95,0:02:13.14,Default,,0000,0000,0000,,green and blue. And by setting all those\Nthree numbers over we're going to make the
Dialogue: 0,0:02:13.14,0:02:17.33,Default,,0000,0000,0000,,pixel over on this image just look exactly\Nthe same as the pixel over here on this
Dialogue: 0,0:02:17.33,0:02:22.18,Default,,0000,0000,0000,,side. So, here's some code, here's our\Nfirst code example to do this. And rather
Dialogue: 0,0:02:22.18,0:02:27.49,Default,,0000,0000,0000,,than sorta describe the effect, I think in\Nthis case I'll just run it so we can see
Dialogue: 0,0:02:27.49,0:02:32.42,Default,,0000,0000,0000,,it, and then I'll talk about what the\Nlines do. So, here we see the sorta as
Dialogue: 0,0:02:32.42,0:02:37.60,Default,,0000,0000,0000,,outlined before, the stop sign with all\Nits all the red areas of the stop sign.
Dialogue: 0,0:02:37.79,0:02:42.97,Default,,0000,0000,0000,,We've substituted in pixels from the leaves\Nimage instead. So let me point out the,
Dialogue: 0,0:02:43.16,0:02:48.69,Default,,0000,0000,0000,,the, how the parts of this work. So first\Noff In all of examples up to now, I think
Dialogue: 0,0:02:48.69,0:02:52.87,Default,,0000,0000,0000,,we've just opened one image, but it turns\Nout you can have multiple images. So here
Dialogue: 0,0:02:52.87,0:02:56.59,Default,,0000,0000,0000,,I open a second image, for the leaves.jpeg, and I store that in a variable
Dialogue: 0,0:02:56.59,0:03:01.23,Default,,0000,0000,0000,,called back. So then all this code we've\Nseen before. I'm just looping over the
Dialogue: 0,0:03:01.23,0:03:06.26,Default,,0000,0000,0000,,stop sign and detecting the red pixels. So\Nthe interesting action is here inside of
Dialogue: 0,0:03:06.26,0:03:11.17,Default,,0000,0000,0000,,the if-statement. What do we do when we\Nhave a red pixel. And it sorta breaks down
Dialogue: 0,0:03:11.17,0:03:16.73,Default,,0000,0000,0000,,to three parts. So these first two lines\Njust call pixel.getX() and pixel.getY(), and
Dialogue: 0,0:03:16.73,0:03:22.00,Default,,0000,0000,0000,,store the resulting values in variables x\Nand y. Now I don't think I've used getX()
Dialogue: 0,0:03:22.00,0:03:26.69,Default,,0000,0000,0000,,and getY() up to now, but what tho-, what\Nthose do is just go to a pixel and
Dialogue: 0,0:03:26.69,0:03:31.84,Default,,0000,0000,0000,,retrieve whatever its x, y is out of it,\Nso very analogous to getRed() and getBlue().
Dialogue: 0,0:03:32.31,0:03:37.90,Default,,0000,0000,0000,,So I'm just gonna store those in these\Nvariables x y. And then on this line. I
Dialogue: 0,0:03:37.90,0:03:42.68,Default,,0000,0000,0000,,take those two numbers, x and y. Actually\NI'll sorta read it left to right here. So
Dialogue: 0,0:03:42.68,0:03:47.34,Default,,0000,0000,0000,,I go to the back image, so that's the, the\Nleaves image. And I call getPixel, so I
Dialogue: 0,0:03:47.34,0:03:52.12,Default,,0000,0000,0000,,wanna retrieve a pixel out of it. And then\NI have to give it some x, y, and in this
Dialogue: 0,0:03:52.12,0:03:56.78,Default,,0000,0000,0000,,case the x and y I wanna use is the x, y\Nthat was set right here. So essentially,
Dialogue: 0,0:03:56.78,0:04:01.43,Default,,0000,0000,0000,,it's the x, y of the pixel from the stop\Nsign image, saying, whatever that x, y is,
Dialogue: 0,0:04:01.43,0:04:06.57,Default,,0000,0000,0000,,go get that s, the pixel at the same x, y\Nfrom the leaves image. So. Once we've got
Dialogue: 0,0:04:06.57,0:04:12.02,Default,,0000,0000,0000,,that pixel, then I'm just going to start\Nanother variable called pixel2. So
Dialogue: 0,0:04:12.23,0:04:16.13,Default,,0000,0000,0000,,a natural question would be like, oh well\Ncouldn't we just call that pixel? Well we
Dialogue: 0,0:04:16.13,0:04:20.13,Default,,0000,0000,0000,,can't call it pixel, because we're already\Nusing pixel to refer to the pixels from
Dialogue: 0,0:04:20.13,0:04:23.98,Default,,0000,0000,0000,,the stop sign image. So, pixel2 just\Nseemed like sorta the most obvious other
Dialogue: 0,0:04:23.98,0:04:29.12,Default,,0000,0000,0000,,name to use. All right, so at this point,\NI've got pixel2 and pixel2 refers to
Dialogue: 0,0:04:29.12,0:04:34.16,Default,,0000,0000,0000,,the pixel from the background image, from\Nthe other image. And now, these three
Dialogue: 0,0:04:34.16,0:04:39.00,Default,,0000,0000,0000,,lines do what I was describing before as a\Ncopy. So let's just look at the first one.
Dialogue: 0,0:04:39.00,0:04:43.44,Default,,0000,0000,0000,,So it says pixel.setRed. So we've\Nseen that, like, a 100 times. I'm gonna set
Dialogue: 0,0:04:43.44,0:04:48.12,Default,,0000,0000,0000,,the red value of the pixel from the stop\Nsign image. And what, what am I gonna set
Dialogue: 0,0:04:48.12,0:04:52.84,Default,,0000,0000,0000,,that red value to be? And what I'm gonna\Nset it to be, is, pixel2.getRed().
Dialogue: 0,0:04:52.84,0:04:57.70,Default,,0000,0000,0000,,So I'm getting the pixel from the other\Nimage, getting it's red value. So, 160, or
Dialogue: 0,0:04:57.70,0:05:02.25,Default,,0000,0000,0000,,whatever it is. And I'm just gonna set\Nthat into the stop sign image. So
Dialogue: 0,0:05:02.25,0:05:07.18,Default,,0000,0000,0000,,repeating that for green and blue, we're\Njust, essentially just, we're copying the
Dialogue: 0,0:05:07.18,0:05:11.79,Default,,0000,0000,0000,,three numbers over. So, in effect, this\Ncopies the pixel. So, this is fairly
Dialogue: 0,0:05:11.79,0:05:16.88,Default,,0000,0000,0000,,complicated. I want to do a few examples\Nof this. So let me do a second example.
Dialogue: 0,0:05:16.88,0:05:22.11,Default,,0000,0000,0000,,This is a picture of baby Abby, when she's\Nlike six months old. Happy little baby on
Dialogue: 0,0:05:22.11,0:05:27.72,Default,,0000,0000,0000,,her bouncy chair. And later when she's a\Nteenager she can be mad at me for using
Dialogue: 0,0:05:27.72,0:05:33.47,Default,,0000,0000,0000,,this example. So what I'm going to do is,\Nor, what I want to do in this case is,
Dialogue: 0,0:05:33.69,0:05:39.09,Default,,0000,0000,0000,,notice the green areas of the bouncy\Nchair. I want to kind of copy over the
Dialogue: 0,0:05:39.09,0:05:45.06,Default,,0000,0000,0000,,leaves so we get this kind of nature baby\Nleafy effect. And, as, as I recall, there
Dialogue: 0,0:05:45.06,0:05:50.93,Default,,0000,0000,0000,,were basically two things that I needed to\Ndo in the loop here. Well first I should
Dialogue: 0,0:05:50.93,0:05:56.54,Default,,0000,0000,0000,,point out, so I'm, I'm going to call pixel.getGreen(), for the, the if-test. So
Dialogue: 0,0:05:56.54,0:06:01.68,Default,,0000,0000,0000,,the first problem was this. Get the, get\Npixel2. Get the corresponding pixel.
Dialogue: 0,0:06:01.68,0:06:07.22,Default,,0000,0000,0000,,And here I'm going to write it just as one\Nline. So I say, back - so I go to the other
Dialogue: 0,0:06:07.22,0:06:12.45,Default,,0000,0000,0000,,image - back.getPixel. And I'll sort\Nof space it out here. I want to get the
Dialogue: 0,0:06:12.45,0:06:16.92,Default,,0000,0000,0000,,pixel from the other image, and then I\Nhave to specify the x, y. And here what I
Dialogue: 0,0:06:16.92,0:06:21.22,Default,,0000,0000,0000,,want to do is, well, I wanna specify the\Nx, y, of the pixel from the stop sign
Dialogue: 0,0:06:21.22,0:06:25.86,Default,,0000,0000,0000,,image. And previously I did that by having\Nx, y variables, and well, that's fine. But
Dialogue: 0,0:06:25.86,0:06:30.39,Default,,0000,0000,0000,,I'm, in this case I'm gonna compact it\Ndown to just do it in one line. So really
Dialogue: 0,0:06:30.39,0:06:34.80,Default,,0000,0000,0000,,I can just say, pixel.getX(). So pixel is\Nthe pixel from the stop sign image. And
Dialogue: 0,0:06:34.80,0:06:39.50,Default,,0000,0000,0000,,I'll just call getX() and that gets the\Nx-value and then I'll just, I'll put that
Dialogue: 0,0:06:39.50,0:06:45.55,Default,,0000,0000,0000,,directly here inside of. The back.getPixel\Ncall. So this it's the same idea as before
Dialogue: 0,0:06:45.55,0:06:50.62,Default,,0000,0000,0000,,but I've just compacted it down to one\Nline. All right, so that one line sets
Dialogue: 0,0:06:50.62,0:06:56.37,Default,,0000,0000,0000,,pixel2 to be the corresponding pixel.\NAnd then the second thing we need to do in
Dialogue: 0,0:06:56.37,0:07:01.78,Default,,0000,0000,0000,,the loop is this copy over operation, and\Nthat is just literally the same so I'll
Dialogue: 0,0:07:01.78,0:07:09.00,Default,,0000,0000,0000,,just, I'll copy that from up here.\NAlright. So now get rid of the blank.
Dialogue: 0,0:07:09.00,0:07:15.37,Default,,0000,0000,0000,,These blank lines are harmless. Alright,\Nso let's try, let's try that. Alright. So
Dialogue: 0,0:07:15.37,0:07:21.58,Default,,0000,0000,0000,,you can see we have, we're getting a\Nlittle bit of the leaf data in here but
Dialogue: 0,0:07:21.58,0:07:29.45,Default,,0000,0000,0000,,it's not it's a little thin. So we need to\Nmake this a little smaller. .4 it's a
Dialogue: 0,0:07:29.45,0:07:45.79,Default,,0000,0000,0000,,little bit more, I want more. .2. Just a little bit more and.
Dialogue: 0,0:07:45.79,0:07:53.72,Default,,0000,0000,0000,,Too much. [laugh] All right. So let's try\N1.05. Too much for me. Okay, I think
Dialogue: 0,0:07:53.72,0:07:57.81,Default,,0000,0000,0000,,that's pretty good. So you could see, it's\Nsort of, you know, there was green arrows
Dialogue: 0,0:07:57.81,0:08:01.55,Default,,0000,0000,0000,,over here. There's sort of the shadow area\Nthat's, I mean, maybe just barely
Dialogue: 0,0:08:01.55,0:08:05.45,Default,,0000,0000,0000,,greenish. And then there was some green\Nblankets over here that we sort of
Dialogue: 0,0:08:05.45,0:08:09.24,Default,,0000,0000,0000,,sprinkled these leaves in. So it's, it's a\Nnice effect. Or, it's sort of eerie,
Dialogue: 0,0:08:09.24,0:08:13.44,Default,,0000,0000,0000,,right, that we've gotten these pixels from\Nthe leaf image, and sort of put them into
Dialogue: 0,0:08:13.44,0:08:17.23,Default,,0000,0000,0000,,this other image, and it looks, well, not\Ntotally realistic. But you could see
Dialogue: 0,0:08:17.23,0:08:20.97,Default,,0000,0000,0000,,where, with tuning, you could get this\Nreal effect. Alright, so let's try one
Dialogue: 0,0:08:20.97,0:08:28.86,Default,,0000,0000,0000,,like the movies. So here is our movie star,\Nmonkey. And I've taken a picture of monkey
Dialogue: 0,0:08:28.86,0:08:33.76,Default,,0000,0000,0000,,in front of a blue background. It's just a\Nblue towel. You'll see that monkey is
Dialogue: 0,0:08:33.97,0:08:39.32,Default,,0000,0000,0000,,brown and has kind of a light tummy here\Nand here, this banana is sort of a light
Dialogue: 0,0:08:39.32,0:08:44.69,Default,,0000,0000,0000,,yellow. So if you think of brown and tan\Nand yellow, those are all kind of. On near
Dialogue: 0,0:08:44.69,0:08:48.61,Default,,0000,0000,0000,,yellow, right? So there's a lot of\Nred/green used to make this up. Not a lot
Dialogue: 0,0:08:48.61,0:08:52.95,Default,,0000,0000,0000,,of blue. So separating the monkey from the\Nblue background, in terms of, thinking of
Dialogue: 0,0:08:52.95,0:08:57.13,Default,,0000,0000,0000,,it in terms of RGB, is gonna work pretty\Nwell. So here's what I wanna use as the
Dialogue: 0,0:08:57.13,0:09:01.68,Default,,0000,0000,0000,,background. This is a candidate for one of\Nthe most famous pictures ever taken. This
Dialogue: 0,0:09:01.68,0:09:05.70,Default,,0000,0000,0000,,is a picture taken by the Apollo 8\Nastronauts as they were, they were in
Dialogue: 0,0:09:05.70,0:09:10.09,Default,,0000,0000,0000,,orbit. They were flying around the moon,\Nand as they came around here's, the Earth
Dialogue: 0,0:09:10.09,0:09:14.58,Default,,0000,0000,0000,,loomed. Sort of showing the Earth just\Nover the horizon of the moon. Emphasizing it's
Dialogue: 0,0:09:14.58,0:09:19.90,Default,,0000,0000,0000,,just a little lifeboat we're all on. So\Nwhat I want to do is start with the monkey
Dialogue: 0,0:09:19.90,0:09:25.32,Default,,0000,0000,0000,,image, and for all these blue pixels, I\Nwant to pull in, pixels from the moon
Dialogue: 0,0:09:25.32,0:09:31.82,Default,,0000,0000,0000,,image. And so it'd look like the monkey is\Nlike, on vacation on the moon. And so I'll
Dialogue: 0,0:09:31.82,0:09:40.05,Default,,0000,0000,0000,,just grab. This code to get started. Let's\Nsee. Okay, so what I wanna do is, for the
Dialogue: 0,0:09:40.05,0:09:46.78,Default,,0000,0000,0000,,if, I wanna say if getBlue(). So I wanna\Ndetect the blue background right? And if
Dialogue: 0,0:09:46.78,0:09:53.59,Default,,0000,0000,0000,,it's the blue background, then I wanna\Npull it over pixels from the, the moon. So
Dialogue: 0,0:09:53.59,0:09:59.85,Default,,0000,0000,0000,,here our image is monkey back is moon.jpg I've got my if- statement. And
Dialogue: 0,0:09:59.85,0:10:04.09,Default,,0000,0000,0000,,then, this code is unchanged,\Nright? It's just, get the corresponding
Dialogue: 0,0:10:04.09,0:10:08.46,Default,,0000,0000,0000,,from, it's unchanged from the earlier\Nexample. So just get the corresponding
Dialogue: 0,0:10:08.46,0:10:12.53,Default,,0000,0000,0000,,pixel, copy over red, green, blue. So\Nthat, that requires no change at all.
Dialogue: 0,0:10:12.70,0:10:18.41,Default,,0000,0000,0000,,Alright, so let's try it. Alright, so it,\Nat 1.5 what's happening here is the if
Dialogue: 0,0:10:18.41,0:10:23.95,Default,,0000,0000,0000,,statement is never firing. I've specified,\NI've made the hurdle too high. Okay so
Dialogue: 0,0:10:23.95,0:10:32.82,Default,,0000,0000,0000,,let's try 1.3. Oh, just a little teeny\Nhunt. So I'm too high. Let's try 1.1. Huh,
Dialogue: 0,0:10:32.82,0:10:38.33,Default,,0000,0000,0000,,okay. So now you can see, you know, for s,\Nthe bluishness of this part of the blue
Dialogue: 0,0:10:38.33,0:10:43.85,Default,,0000,0000,0000,,background was maybe just a little bit\Nmore, so we're getting that, but not down
Dialogue: 0,0:10:43.85,0:10:49.08,Default,,0000,0000,0000,,here. So I need to try 1.0. Now it's\Ngetting there. We have a little bit less,
Dialogue: 0,0:10:49.08,0:10:54.60,Default,,0000,0000,0000,,so actually we can go under we can go\Nunder 1 here so I'll try 0.9 as the
Dialogue: 0,0:10:54.60,0:11:00.11,Default,,0000,0000,0000,,hurdle where I'm just lowering the hurdle.\NOoh, that's pretty good. See, there's a
Dialogue: 0,0:11:00.11,0:11:05.65,Default,,0000,0000,0000,,little teeny bit of moon on his chin\Nthere. 0.95. There we go, that's pretty
Dialogue: 0,0:11:05.65,0:11:10.36,Default,,0000,0000,0000,,good. We could, we could tweak this\N[inaudible], I think, three, there's a
Dialogue: 0,0:11:10.36,0:11:16.16,Default,,0000,0000,0000,,little bit of, there we go. I think that's\Nperfect. So, you can see that's, you know,
Dialogue: 0,0:11:16.16,0:11:22.51,Default,,0000,0000,0000,,movie star in laser battles, spaceship,\Nwhatever, like. All right. So just to
Dialogue: 0,0:11:22.51,0:11:27.25,Default,,0000,0000,0000,,kinda summarize. In the code you're gonna\Nhave two images instead of one and then
Dialogue: 0,0:11:27.25,0:11:31.36,Default,,0000,0000,0000,,you loop through the main image and just\Nkinda the way we've done before,
Dialogue: 0,0:11:31.36,0:11:36.15,Default,,0000,0000,0000,,identifying areas of some color. And then,\Nonce you've identified an area that's in
Dialogue: 0,0:11:36.15,0:11:40.72,Default,,0000,0000,0000,,the color you care about, then there's\Nthis operation to locate the corresponding
Dialogue: 0,0:11:40.72,0:11:45.28,Default,,0000,0000,0000,,pixel from the other image, and then copy\Nover its red, green, blue values to, to
Dialogue: 0,0:11:45.28,0:11:49.68,Default,,0000,0000,0000,,get the effect done. And as you can\Nimagine. You know, it's pretty easy to
Dialogue: 0,0:11:49.68,0:11:52.44,Default,,0000,0000,0000,,make up exercises that work on this\Ntechnique.