Green Screen

Example of Solving
a Programming Problem

Green Screen
Need to figure out exactly how to do
before we can program it

This problem is too

large to do by hand
(2,073,600 pixels)

Work Smaller Example: 2x2 Image

Foreground Image

Output Image

Background Image

Work Smaller Example: 2x2 Image

Foreground Image

Output Image

Background Image

Work Smaller Example: 2x2 Image

Foreground Image

Output Image

Background Image

Work Smaller Example: 2x2 Image

Foreground Image

Output Image

Background Image

Work Smaller Example: 2x2 Image

Foreground Image

Output Image

Background Image

Write Down What We Just Did: Step-By-Step

fgImage

I started with the foreground image I wanted (fgImage)

Write Down What We Just Did: Step-By-Step

fgImage

bgImage

and with the background image I wanted (bgImage)

Write Down What We Just Did: Step-By-Step

fgImage

Output Image

bgImage

I made a blank image of the same size (output)

Write Down What We Just Did: Step-By-Step

fgImage

Output Image

bgImage

I looked at the first pixel in fgImage

Write Down What We Just Did: Step-By-Step

fgImage

Output Image

bgImage

It was red, so I set outputs corresponding pixel to red

Write Down What We Just Did: Step-By-Step

fgImage

Output Image

bgImage

I looked at the second pixel in fgImage

Write Down What We Just Did: Step-By-Step

fgImage

Output Image

bgImage

It was green, so I looked at same position in bgImage

Write Down What We Just Did: Step-By-Step

fgImage

Output Image

bgImage

and set outputs corresponding pixel to bgImages pixel

Write Down What We Just Did: Step-By-Step

fgImage

Output Image

bgImage

I looked at the third pixel in fgImage

Write Down What We Just Did: Step-By-Step

fgImage

Output Image

bgImage

10

It was green, so I looked at same position in bgImage

Write Down What We Just Did: Step-By-Step

fgImage

Output Image

bgImage

11

and set outputs corresponding pixel to bgImages pixel

Write Down What We Just Did: Step-By-Step

fgImage

Output Image

bgImage

12

I looked at the fourth pixel in fgImage

Write Down What We Just Did: Step-By-Step

fgImage

Output Image

bgImage

13

It was blue, so I set outputs corresponding pixel to blue

Step-By-Step Instructions for This 2x2 Image

but we want any image of any size
1

I started with the foreground image I wanted (fgImage)

12

and with the background image I wanted (bgImage)

I made a blank image of the same size (output)
I looked at the first pixel in fgImage
It was red, so I set outputs corresponding pixel to red
I looked at the second pixel in fgImage
It was green, so I looked at the same position in bgImage
and set outputs corresponding pixel to beImages pixel
I looked at the third pixel in fgImage
It was green, so I looked at the same position in bgImage
and set outputs corresponding pixel to beImages pixel
I looked at the fourth pixel in fgImage

13

It was blue, so I set outputs corresponding pixel to blue

3
4
5
6
7
8
9
10
11

Find Patterns (Generalize Step-By-Step Approach)

Doing almost the same thing for each pixel
1

I started with the foreground image I wanted (fgImage)

12

and with the background image I wanted (bgImage)

I made a blank image of the same size (output)
I looked at the first pixel in fgImage
It was red, so I set outputs corresponding pixel to red
I looked at the second pixel in fgImage
It was green, so I looked at the same position in bgImage
and set outputs corresponding pixel to beImages pixel
I looked at the third pixel in fgImage
It was green, so I looked at the same position in bgImage
and set outputs corresponding pixel to beImages pixel
I looked at the fourth pixel in fgImage

13

It was blue, so I set outputs corresponding pixel to blue

3
4
5
6
7
8
9
10
11

Find Patterns (Generalize Step-By-Step Approach)

When fgImages pixel is green, we use bgImages pixel

6
7
8
9
10
11

I looked at the second pixel in fgImage

It was green, so I looked at the same position in bgImage
and set outputs corresponding pixel to beImages pixel
I looked at the third pixel in fgImage
It was green, so I looked at the same position in bgImage
and set outputs corresponding pixel to beImages pixel

Find Patterns (Generalize Step-By-Step Approach)

When fgImages pixel is not green, we use fgImages pixel

I looked at the first pixel in fgImage

It was red, so I set outputs corresponding pixel to red

12

I looked at the fourth pixel in fgImage

13

It was blue, so I set outputs corresponding pixel to blue

Find Patterns (Generalize Step-By-Step Approach)

1

I started with the foreground image I wanted (fgImage)

and with the background image I wanted (bgImage)

I made a blank image of the same size (output)

Look at the first pixel in fgImage and if it is green,

Look at same position in bgImage
set outputs corresponding pixel to bgImages pixel
Otherwise: set outputs corresponding pixel to that pixel

I looked at the second pixel in fgImage

It was green, so I looked at same position in bgImage
set outputs corresponding pixel to bgImages pixel
Otherwise: set outputs corresponding pixel to that pixel

I looked at the third pixel in fgImage

It was green, so I looked at same position in bgImage
set outputs corresponding pixel to bgImages pixel
Otherwise: set outputs corresponding pixel to that pixel

Look at the fourth pixel in fgImage and if it is green,

Look at the same position in bgImage

Observe:
repetition for each pixel

Find Patterns (Generalize Step-By-Step Approach)

I started with the foreground image I wanted (fgImage)

and with the background image I wanted (bgImage)

I made a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

Find Patterns (Generalize Step-By-Step Approach)

Step-by-step directions for any images:
An algorithm
1

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

Try on Different Inputs

What if we made a mistake?
Try on different inputs to catch/fix mistakes early
1

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

Try on Different Inputs

fgImage

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

Try on Different Inputs

fgImage
bgImage
1

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

Try on Different Inputs

fgImage
output
bgImage
1

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

currentPixel

Try on Different Inputs

fgImage
output
bgImage

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

currentPixel

Try on Different Inputs

fgImage
output
bgImage

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

currentPixel

Try on Different Inputs

fgImage
output
bgImage

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

currentPixel

Try on Different Inputs

fgImage
output
bgImage

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

currentPixel

Try on Different Inputs

fgImage
output
bgImage

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

currentPixel

Try on Different Inputs

fgImage
output
bgImage

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

currentPixel

Try on Different Inputs

fgImage
output
bgImage
1

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

currentPixel

Try on Different Inputs

fgImage
output
bgImage
1

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

currentPixel

Try on Different Inputs

fgImage

Is this what we expected?

output

bgImage
1

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4

Ready to Code!
Algorithm appears to work!
Next: implement it in code

Start with the foreground image I want (fgImage)

and with the background image you want (bgImage)

Make a blank image of the same size (output)
For each pixel (currentPixel) fgImage
1.Look at currentPixel and if it is green,
Look at same position in bgImage
and set outputs corresponding pixel to bgImages pixel
2.Otherwise: set outputs corresponding pixel

3
4