0:00:00.840,0:00:05.641
For this section we're going to take the[br]techniques we've built up so far, with the

0:00:05.641,0:00:10.210
for-loop and the if-statement and the[br]average technique to detect color areas,

0:00:10.210,0:00:14.996
and put them together to do a real movie[br]special effect. So this special effect is

0:00:14.996,0:00:19.477
called blue screening. And I should point[br]out that what you think of as video data

0:00:19.477,0:00:23.905
is really just made of a series of regular[br]still images, just showed something like

0:00:23.905,0:00:28.493
twenty to 60 times per second. So for our[br]purposes we'll just do the special effect

0:00:28.493,0:00:33.294
on still images, and you can see how it'll[br]generalize to movies. So the idea is it'll

0:00:33.294,0:00:37.561
be a very simple model. Imagine I have the[br]stop sign image. So we've, we've talked

0:00:37.561,0:00:41.551
about the code to detect the red area[br]inside of here. So for the blue screen

0:00:41.562,0:00:45.830
effect, we're gonna have a second image[br]which I'll call the, the background image.

0:00:45.830,0:00:50.234
And the idea is, we'll detect the red[br]areas, as we've done before. But whenever

0:00:50.234,0:00:54.352
I get a pixel over here on the red area, I[br]wanna think about the sort of

0:00:54.352,0:00:59.043
corresponding pixel over from this other[br]image. And I'm gonna copy that pixel over

0:00:59.043,0:01:03.676
to sorta fill in all the red area over[br]here with pixels over here from the other

0:01:03.676,0:01:07.747
image. Sorry, it's a slightly more[br]detailed diagram of it. So, I'll do

0:01:07.747,0:01:11.959
examples in a little bit. But we're going[br]to have a for-loop where we're kind of

0:01:11.959,0:01:16.379
looping through this image. And we'll have[br]an if-statement which is going to identify

0:01:16.379,0:01:20.538
some of the pixels up here. So let's say[br]we've identified this pixel in the left

0:01:20.538,0:01:24.542
image. So that pixel has some x-y-coordinate and we haven't messed with the

0:01:24.542,0:01:28.650
x-y very much up to now but it, you know,[br]maybe x is 200 and y is 100 or whatever.

0:01:28.806,0:01:33.212
So what we want to do is get those two[br]numbers. And then find the corresponding

0:01:33.212,0:01:37.750
pixel over here from the other image. So,[br]maybe a (200,100), or whatever it is.

0:01:37.750,0:01:42.840
There's some pixel that matches up. So[br]once we've got that corresponding image, a

0:01:42.840,0:01:47.868
corresponding pixel from the other image.[br]Then we wanna copy it over, to set the

0:01:47.868,0:01:53.079
pixel over here. And you know, how's that[br]going to work, how do you copy a pixel

0:01:53.079,0:01:57.143
over? You have to think about, 'Well, what[br]defines a pixel? What makes a pixel look

0:01:57.143,0:02:01.029
the way it looks?' And the answer is it's[br]just the three numbers. It's just red,

0:02:01.029,0:02:04.965
green and blue. So we're going to write[br]code to sort of get the red value from

0:02:04.965,0:02:08.951
this pixel over here and then set that as[br]the red value over here. Likewise for

0:02:08.951,0:02:13.139
green and blue. And by setting all those[br]three numbers over we're going to make the

0:02:13.139,0:02:17.327
pixel over on this image just look exactly[br]the same as the pixel over here on this

0:02:17.327,0:02:22.184
side. So, here's some code, here's our[br]first code example to do this. And rather

0:02:22.184,0:02:27.493
than sorta describe the effect, I think in[br]this case I'll just run it so we can see

0:02:27.493,0:02:32.417
it, and then I'll talk about what the[br]lines do. So, here we see the sorta as

0:02:32.417,0:02:37.598
outlined before, the stop sign with all[br]its all the red areas of the stop sign.

0:02:37.789,0:02:42.970
We've substituted in pixels from the leaves[br]image instead. So let me point out the,

0:02:43.162,0:02:48.686
the, how the parts of this work. So first[br]off In all of examples up to now, I think

0:02:48.686,0:02:52.866
we've just opened one image, but it turns[br]out you can have multiple images. So here

0:02:52.866,0:02:56.588
I open a second image, for the leaves.jpeg, and I store that in a variable

0:02:56.588,0:03:01.232
called back. So then all this code we've[br]seen before. I'm just looping over the

0:03:01.232,0:03:06.259
stop sign and detecting the red pixels. So[br]the interesting action is here inside of

0:03:06.259,0:03:11.169
the if-statement. What do we do when we[br]have a red pixel. And it sorta breaks down

0:03:11.169,0:03:16.730
to three parts. So these first two lines[br]just call pixel.getX() and pixel.getY(), and

0:03:16.730,0:03:22.005
store the resulting values in variables x[br]and y. Now I don't think I've used getX()

0:03:22.005,0:03:26.694
and getY() up to now, but what tho-, what[br]those do is just go to a pixel and

0:03:26.694,0:03:31.840
retrieve whatever its x, y is out of it,[br]so very analogous to getRed() and getBlue().

0:03:32.311,0:03:37.904
So I'm just gonna store those in these[br]variables x y. And then on this line. I

0:03:37.904,0:03:42.681
take those two numbers, x and y. Actually[br]I'll sorta read it left to right here. So

0:03:42.681,0:03:47.340
I go to the back image, so that's the, the[br]leaves image. And I call getPixel, so I

0:03:47.340,0:03:52.116
wanna retrieve a pixel out of it. And then[br]I have to give it some x, y, and in this

0:03:52.116,0:03:56.775
case the x and y I wanna use is the x, y[br]that was set right here. So essentially,

0:03:56.775,0:04:01.433
it's the x, y of the pixel from the stop[br]sign image, saying, whatever that x, y is,

0:04:01.433,0:04:06.574
go get that s, the pixel at the same x, y[br]from the leaves image. So. Once we've got

0:04:06.574,0:04:12.017
that pixel, then I'm just going to start[br]another variable called pixel2. So

0:04:12.230,0:04:16.131
a natural question would be like, oh well[br]couldn't we just call that pixel? Well we

0:04:16.131,0:04:20.131
can't call it pixel, because we're already[br]using pixel to refer to the pixels from

0:04:20.131,0:04:23.984
the stop sign image. So, pixel2 just[br]seemed like sorta the most obvious other

0:04:23.984,0:04:29.122
name to use. All right, so at this point,[br]I've got pixel2 and pixel2 refers to

0:04:29.122,0:04:34.156
the pixel from the background image, from[br]the other image. And now, these three

0:04:34.156,0:04:39.003
lines do what I was describing before as a[br]copy. So let's just look at the first one.

0:04:39.003,0:04:43.445
So it says pixel.setRed. So we've[br]seen that, like, a 100 times. I'm gonna set

0:04:43.445,0:04:48.118
the red value of the pixel from the stop[br]sign image. And what, what am I gonna set

0:04:48.118,0:04:52.837
that red value to be? And what I'm gonna[br]set it to be, is, pixel2.getRed().

0:04:52.837,0:04:57.699
So I'm getting the pixel from the other[br]image, getting it's red value. So, 160, or

0:04:57.699,0:05:02.253
whatever it is. And I'm just gonna set[br]that into the stop sign image. So

0:05:02.253,0:05:07.176
repeating that for green and blue, we're[br]just, essentially just, we're copying the

0:05:07.176,0:05:11.787
three numbers over. So, in effect, this[br]copies the pixel. So, this is fairly

0:05:11.787,0:05:16.885
complicated. I want to do a few examples[br]of this. So let me do a second example.

0:05:16.885,0:05:22.109
This is a picture of baby Abby, when she's[br]like six months old. Happy little baby on

0:05:22.109,0:05:27.715
her bouncy chair. And later when she's a[br]teenager she can be mad at me for using

0:05:27.715,0:05:33.474
this example. So what I'm going to do is,[br]or, what I want to do in this case is,

0:05:33.690,0:05:39.089
notice the green areas of the bouncy[br]chair. I want to kind of copy over the

0:05:39.089,0:05:45.064
leaves so we get this kind of nature baby[br]leafy effect. And, as, as I recall, there

0:05:45.064,0:05:50.934
were basically two things that I needed to[br]do in the loop here. Well first I should

0:05:50.934,0:05:56.539
point out, so I'm, I'm going to call pixel.getGreen(), for the, the if-test. So

0:05:56.539,0:06:01.677
the first problem was this. Get the, get[br]pixel2. Get the corresponding pixel.

0:06:01.677,0:06:07.216
And here I'm going to write it just as one[br]line. So I say, back - so I go to the other

0:06:07.216,0:06:12.451
image - back.getPixel. And I'll sort[br]of space it out here. I want to get the

0:06:12.451,0:06:16.922
pixel from the other image, and then I[br]have to specify the x, y. And here what I

0:06:16.922,0:06:21.220
want to do is, well, I wanna specify the[br]x, y, of the pixel from the stop sign

0:06:21.220,0:06:25.863
image. And previously I did that by having[br]x, y variables, and well, that's fine. But

0:06:25.863,0:06:30.391
I'm, in this case I'm gonna compact it[br]down to just do it in one line. So really

0:06:30.391,0:06:34.804
I can just say, pixel.getX(). So pixel is[br]the pixel from the stop sign image. And

0:06:34.804,0:06:39.504
I'll just call getX() and that gets the[br]x-value and then I'll just, I'll put that

0:06:39.504,0:06:45.547
directly here inside of. The back.getPixel[br]call. So this it's the same idea as before

0:06:45.547,0:06:50.623
but I've just compacted it down to one[br]line. All right, so that one line sets

0:06:50.623,0:06:56.366
pixel2 to be the corresponding pixel.[br]And then the second thing we need to do in

0:06:56.366,0:07:01.776
the loop is this copy over operation, and[br]that is just literally the same so I'll

0:07:01.776,0:07:09.000
just, I'll copy that from up here.[br]Alright. So now get rid of the blank.

0:07:09.000,0:07:15.371
These blank lines are harmless. Alright,[br]so let's try, let's try that. Alright. So

0:07:15.371,0:07:21.579
you can see we have, we're getting a[br]little bit of the leaf data in here but

0:07:21.579,0:07:29.451
it's not it's a little thin. So we need to[br]make this a little smaller. .4 it's a

0:07:29.451,0:07:45.790
little bit more, I want more. .2. Just a little bit more and.

0:07:45.790,0:07:53.717
Too much. [laugh] All right. So let's try[br]1.05. Too much for me. Okay, I think

0:07:53.717,0:07:57.812
that's pretty good. So you could see, it's[br]sort of, you know, there was green arrows

0:07:57.812,0:08:01.554
over here. There's sort of the shadow area[br]that's, I mean, maybe just barely

0:08:01.554,0:08:05.448
greenish. And then there was some green[br]blankets over here that we sort of

0:08:05.448,0:08:09.240
sprinkled these leaves in. So it's, it's a[br]nice effect. Or, it's sort of eerie,

0:08:09.240,0:08:13.437
right, that we've gotten these pixels from[br]the leaf image, and sort of put them into

0:08:13.437,0:08:17.229
this other image, and it looks, well, not[br]totally realistic. But you could see

0:08:17.229,0:08:20.970
where, with tuning, you could get this[br]real effect. Alright, so let's try one

0:08:20.970,0:08:28.858
like the movies. So here is our movie star,[br]monkey. And I've taken a picture of monkey

0:08:28.858,0:08:33.765
in front of a blue background. It's just a[br]blue towel. You'll see that monkey is

0:08:33.968,0:08:39.322
brown and has kind of a light tummy here[br]and here, this banana is sort of a light

0:08:39.322,0:08:44.693
yellow. So if you think of brown and tan[br]and yellow, those are all kind of. On near

0:08:44.693,0:08:48.608
yellow, right? So there's a lot of[br]red/green used to make this up. Not a lot

0:08:48.608,0:08:52.946
of blue. So separating the monkey from the[br]blue background, in terms of, thinking of

0:08:52.946,0:08:57.126
it in terms of RGB, is gonna work pretty[br]well. So here's what I wanna use as the

0:08:57.126,0:09:01.676
background. This is a candidate for one of[br]the most famous pictures ever taken. This

0:09:01.676,0:09:05.697
is a picture taken by the Apollo 8[br]astronauts as they were, they were in

0:09:05.697,0:09:10.088
orbit. They were flying around the moon,[br]and as they came around here's, the Earth

0:09:10.088,0:09:14.585
loomed. Sort of showing the Earth just[br]over the horizon of the moon. Emphasizing it's

0:09:14.585,0:09:19.895
just a little lifeboat we're all on. So[br]what I want to do is start with the monkey

0:09:19.895,0:09:25.315
image, and for all these blue pixels, I[br]want to pull in, pixels from the moon

0:09:25.315,0:09:31.815
image. And so it'd look like the monkey is[br]like, on vacation on the moon. And so I'll

0:09:31.815,0:09:40.053
just grab. This code to get started. Let's[br]see. Okay, so what I wanna do is, for the

0:09:40.053,0:09:46.779
if, I wanna say if getBlue(). So I wanna[br]detect the blue background right? And if

0:09:46.779,0:09:53.590
it's the blue background, then I wanna[br]pull it over pixels from the, the moon. So

0:09:53.590,0:09:59.847
here our image is monkey back is moon.jpg I've got my if- statement. And

0:09:59.847,0:10:04.093
then, this code is unchanged,[br]right? It's just, get the corresponding

0:10:04.093,0:10:08.457
from, it's unchanged from the earlier[br]example. So just get the corresponding

0:10:08.457,0:10:12.529
pixel, copy over red, green, blue. So[br]that, that requires no change at all.

0:10:12.703,0:10:18.409
Alright, so let's try it. Alright, so it,[br]at 1.5 what's happening here is the if

0:10:18.409,0:10:23.953
statement is never firing. I've specified,[br]I've made the hurdle too high. Okay so

0:10:23.953,0:10:32.819
let's try 1.3. Oh, just a little teeny[br]hunt. So I'm too high. Let's try 1.1. Huh,

0:10:32.819,0:10:38.333
okay. So now you can see, you know, for s,[br]the bluishness of this part of the blue

0:10:38.333,0:10:43.847
background was maybe just a little bit[br]more, so we're getting that, but not down

0:10:43.847,0:10:49.081
here. So I need to try 1.0. Now it's[br]getting there. We have a little bit less,

0:10:49.081,0:10:54.595
so actually we can go under we can go[br]under 1 here so I'll try 0.9 as the

0:10:54.595,0:11:00.109
hurdle where I'm just lowering the hurdle.[br]Ooh, that's pretty good. See, there's a

0:11:00.109,0:11:05.651
little teeny bit of moon on his chin[br]there. 0.95. There we go, that's pretty

0:11:05.651,0:11:10.365
good. We could, we could tweak this[br][inaudible], I think, three, there's a

0:11:10.365,0:11:16.157
little bit of, there we go. I think that's[br]perfect. So, you can see that's, you know,

0:11:16.157,0:11:22.512
movie star in laser battles, spaceship,[br]whatever, like. All right. So just to

0:11:22.512,0:11:27.246
kinda summarize. In the code you're gonna[br]have two images instead of one and then

0:11:27.246,0:11:31.361
you loop through the main image and just[br]kinda the way we've done before,

0:11:31.361,0:11:36.151
identifying areas of some color. And then,[br]once you've identified an area that's in

0:11:36.151,0:11:40.717
the color you care about, then there's[br]this operation to locate the corresponding

0:11:40.717,0:11:45.282
pixel from the other image, and then copy[br]over its red, green, blue values to, to

0:11:45.282,0:11:49.678
get the effect done. And as you can[br]imagine. You know, it's pretty easy to

0:11:49.678,0:11:52.440
make up exercises that work on this[br]technique.