For this section we're going to take the
techniques we've built up so far, with the
for-loop and the if-statement and the
average technique to detect color areas,
and put them together to do a real movie
special effect. So this special effect is
called blue screening. And I should point
out that what you think of as video data
is really just made of a series of regular
still images, just showed something like
twenty to 60 times per second. So for our
purposes we'll just do the special effect
on still images, and you can see how it'll
generalize to movies. So the idea is it'll
be a very simple model. Imagine I have the
stop sign image. So we've, we've talked
about the code to detect the red area
inside of here. So for the blue screen
effect, we're gonna have a second image
which I'll call the, the background image.
And the idea is, we'll detect the red
areas, as we've done before. But whenever
I get a pixel over here on the red area, I
wanna think about the sort of
corresponding pixel over from this other
image. And I'm gonna copy that pixel over
to sorta fill in all the red area over
here with pixels over here from the other
image. Sorry, it's a slightly more
detailed diagram of it. So, I'll do
examples in a little bit. But we're going
to have a for-loop where we're kind of
looping through this image. And we'll have
an if-statement which is going to identify
some of the pixels up here. So let's say
we've identified this pixel in the left
image. So that pixel has some x-y-coordinate and we haven't messed with the
x-y very much up to now but it, you know,
maybe x is 200 and y is 100 or whatever.
So what we want to do is get those two
numbers. And then find the corresponding
pixel over here from the other image. So,
maybe a (200,100), or whatever it is.
There's some pixel that matches up. So
once we've got that corresponding image, a
corresponding pixel from the other image.
Then we wanna copy it over, to set the
pixel over here. And you know, how's that
going to work, how do you copy a pixel
over? You have to think about, 'Well, what
defines a pixel? What makes a pixel look
the way it looks?' And the answer is it's
just the three numbers. It's just red,
green and blue. So we're going to write
code to sort of get the red value from
this pixel over here and then set that as
the red value over here. Likewise for
green and blue. And by setting all those
three numbers over we're going to make the
pixel over on this image just look exactly
the same as the pixel over here on this
side. So, here's some code, here's our
first code example to do this. And rather
than sorta describe the effect, I think in
this case I'll just run it so we can see
it, and then I'll talk about what the
lines do. So, here we see the sorta as
outlined before, the stop sign with all
its all the red areas of the stop sign.
We've substituted in pixels from the leaves
image instead. So let me point out the,
the, how the parts of this work. So first
off In all of examples up to now, I think
we've just opened one image, but it turns
out you can have multiple images. So here
I open a second image, for the leaves.jpeg, and I store that in a variable
called back. So then all this code we've
seen before. I'm just looping over the
stop sign and detecting the red pixels. So
the interesting action is here inside of
the if-statement. What do we do when we
have a red pixel. And it sorta breaks down
to three parts. So these first two lines
just call pixel.getX() and pixel.getY(), and
store the resulting values in variables x
and y. Now I don't think I've used getX()
and getY() up to now, but what tho-, what
those do is just go to a pixel and
retrieve whatever its x, y is out of it,
so very analogous to getRed() and getBlue().
So I'm just gonna store those in these
variables x y. And then on this line. I
take those two numbers, x and y. Actually
I'll sorta read it left to right here. So
I go to the back image, so that's the, the
leaves image. And I call getPixel, so I
wanna retrieve a pixel out of it. And then
I have to give it some x, y, and in this
case the x and y I wanna use is the x, y
that was set right here. So essentially,
it's the x, y of the pixel from the stop
sign image, saying, whatever that x, y is,
go get that s, the pixel at the same x, y
from the leaves image. So. Once we've got
that pixel, then I'm just going to start
another variable called pixel2. So
a natural question would be like, oh well
couldn't we just call that pixel? Well we
can't call it pixel, because we're already
using pixel to refer to the pixels from
the stop sign image. So, pixel2 just
seemed like sorta the most obvious other
name to use. All right, so at this point,
I've got pixel2 and pixel2 refers to
the pixel from the background image, from
the other image. And now, these three
lines do what I was describing before as a
copy. So let's just look at the first one.
So it says pixel.setRed. So we've
seen that, like, a 100 times. I'm gonna set
the red value of the pixel from the stop
sign image. And what, what am I gonna set
that red value to be? And what I'm gonna
set it to be, is, pixel2.getRed().
So I'm getting the pixel from the other
image, getting it's red value. So, 160, or
whatever it is. And I'm just gonna set
that into the stop sign image. So
repeating that for green and blue, we're
just, essentially just, we're copying the
three numbers over. So, in effect, this
copies the pixel. So, this is fairly
complicated. I want to do a few examples
of this. So let me do a second example.
This is a picture of baby Abby, when she's
like six months old. Happy little baby on
her bouncy chair. And later when she's a
teenager she can be mad at me for using
this example. So what I'm going to do is,
or, what I want to do in this case is,
notice the green areas of the bouncy
chair. I want to kind of copy over the
leaves so we get this kind of nature baby
leafy effect. And, as, as I recall, there
were basically two things that I needed to
do in the loop here. Well first I should
point out, so I'm, I'm going to call pixel.getGreen(), for the, the if-test. So
the first problem was this. Get the, get
pixel2. Get the corresponding pixel.
And here I'm going to write it just as one
line. So I say, back - so I go to the other
image - back.getPixel. And I'll sort
of space it out here. I want to get the
pixel from the other image, and then I
have to specify the x, y. And here what I
want to do is, well, I wanna specify the
x, y, of the pixel from the stop sign
image. And previously I did that by having
x, y variables, and well, that's fine. But
I'm, in this case I'm gonna compact it
down to just do it in one line. So really
I can just say, pixel.getX(). So pixel is
the pixel from the stop sign image. And
I'll just call getX() and that gets the
x-value and then I'll just, I'll put that
directly here inside of. The back.getPixel
call. So this it's the same idea as before
but I've just compacted it down to one
line. All right, so that one line sets
pixel2 to be the corresponding pixel.
And then the second thing we need to do in
the loop is this copy over operation, and
that is just literally the same so I'll
just, I'll copy that from up here.
Alright. So now get rid of the blank.
These blank lines are harmless. Alright,
so let's try, let's try that. Alright. So
you can see we have, we're getting a
little bit of the leaf data in here but
it's not it's a little thin. So we need to
make this a little smaller. .4 it's a
little bit more, I want more. .2. Just a little bit more and.
Too much. [laugh] All right. So let's try
1.05. Too much for me. Okay, I think
that's pretty good. So you could see, it's
sort of, you know, there was green arrows
over here. There's sort of the shadow area
that's, I mean, maybe just barely
greenish. And then there was some green
blankets over here that we sort of
sprinkled these leaves in. So it's, it's a
nice effect. Or, it's sort of eerie,
right, that we've gotten these pixels from
the leaf image, and sort of put them into
this other image, and it looks, well, not
totally realistic. But you could see
where, with tuning, you could get this
real effect. Alright, so let's try one
like the movies. So here is our movie star,
monkey. And I've taken a picture of monkey
in front of a blue background. It's just a
blue towel. You'll see that monkey is
brown and has kind of a light tummy here
and here, this banana is sort of a light
yellow. So if you think of brown and tan
and yellow, those are all kind of. On near
yellow, right? So there's a lot of
red/green used to make this up. Not a lot
of blue. So separating the monkey from the
blue background, in terms of, thinking of
it in terms of RGB, is gonna work pretty
well. So here's what I wanna use as the
background. This is a candidate for one of
the most famous pictures ever taken. This
is a picture taken by the Apollo 8
astronauts as they were, they were in
orbit. They were flying around the moon,
and as they came around here's, the Earth
loomed. Sort of showing the Earth just
over the horizon of the moon. Emphasizing it's
just a little lifeboat we're all on. So
what I want to do is start with the monkey
image, and for all these blue pixels, I
want to pull in, pixels from the moon
image. And so it'd look like the monkey is
like, on vacation on the moon. And so I'll
just grab. This code to get started. Let's
see. Okay, so what I wanna do is, for the
if, I wanna say if getBlue(). So I wanna
detect the blue background right? And if
it's the blue background, then I wanna
pull it over pixels from the, the moon. So
here our image is monkey back is moon.jpg I've got my if- statement. And
then, this code is unchanged,
right? It's just, get the corresponding
from, it's unchanged from the earlier
example. So just get the corresponding
pixel, copy over red, green, blue. So
that, that requires no change at all.
Alright, so let's try it. Alright, so it,
at 1.5 what's happening here is the if
statement is never firing. I've specified,
I've made the hurdle too high. Okay so
let's try 1.3. Oh, just a little teeny
hunt. So I'm too high. Let's try 1.1. Huh,
okay. So now you can see, you know, for s,
the bluishness of this part of the blue
background was maybe just a little bit
more, so we're getting that, but not down
here. So I need to try 1.0. Now it's
getting there. We have a little bit less,
so actually we can go under we can go
under 1 here so I'll try 0.9 as the
hurdle where I'm just lowering the hurdle.
Ooh, that's pretty good. See, there's a
little teeny bit of moon on his chin
there. 0.95. There we go, that's pretty
good. We could, we could tweak this
[inaudible], I think, three, there's a
little bit of, there we go. I think that's
perfect. So, you can see that's, you know,
movie star in laser battles, spaceship,
whatever, like. All right. So just to
kinda summarize. In the code you're gonna
have two images instead of one and then
you loop through the main image and just
kinda the way we've done before,
identifying areas of some color. And then,
once you've identified an area that's in
the color you care about, then there's
this operation to locate the corresponding
pixel from the other image, and then copy
over its red, green, blue values to, to
get the effect done. And as you can
imagine. You know, it's pretty easy to
make up exercises that work on this
technique.