# Image-9 Bluescreen2 Advanced

Here we'll look at more advanced Bluescreen techniques.

## Red Monkey / Blue Monkey

• The monkey image is especially easy to work with
• The monkey (redish) and the background (blueish) have practically nothing in common
• We can use red or blue to detect the monkey or background
• The body code below sets the monkey to be blue
• Challenge
•  1. Write if-code for a red > avg strategy to select the monkey (red-high)
•  2. Change to the flip of that (red-low)
•  3. Now write code for a blue-low strategy to select the monkey
• The computer is a world of perfect logic

 image = new SimpleImage("monkey.jpg"); back = new SimpleImage("leaves.jpg"); back.setSameSize(image); for (pixel: image) { avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3; if ( -your code here- ) { pixel.setBlue(255); } } print(image); image-bluescreen2-1

Solution code:

## Bluescreen Multi-Pass

• Make multiple changes to the image: change red and change blue
• Provided code detects red, put in leaves.jpg (back)
• Challenge
•   Add a second if-statement after the first (copy/paste)
•   Detect blue pixels, put in yosemite.jpg (back2)
•   The second if follows the first inside the loop
•   They are not inside one another, they are siblings
•   They are at the same indent level
• Three {..}: 1x for-loop, 2x if-statements

 image = new SimpleImage("stop.jpg"); back = new SimpleImage("leaves.jpg"); back.setSameSize(image); back2 = new SimpleImage("yosemite.jpg"); back2.setSameSize(image); for (pixel: image) { avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3; if (pixel.getRed() > avg * 1.7) { // select red (back) pixel2 = back.getPixel(pixel.getX(), pixel.getY()); pixel.setRed(pixel2.getRed()); pixel.setGreen(pixel2.getGreen()); pixel.setBlue(pixel2.getBlue()); } // Your code here } print(image); image-bluescreen2-2

Solution code:

## Post-Processing Paint

Here we have banana.jpg

• Suppose we want to show the banana having a dream about paris
• But we don't want to replace all the red brick
• This image is not well suited to bluescreen (banana vs. brick)
• We can "fix it in post" (Hollywood expression)
• Meaning manipulate the image in a paint program
• I created banana2.jpg as a copy to edit
• Crop the image to position the banana and the eiffel tower
• Put in blue circles artistically (demo)
• Now the code can just look for blue
• Can also use this to "fix" little areas discretely in the original image that are giving your bluescreen selection logic problems (like when you have little speckles you can't get rid of)

On the Mac, Preview has a primitive edit mode. 1. make a copy of your original file first, so you don't mess up the original. Open the copy in Preview. 2 Click the pencil to enter edit mode. 3 Click the circle to draw circles. 4 Click the colors, selecting blue and also a fill-color of blue. Draw/arrange blue circles or whatever. Windows has a similar simple paint program.

 image = new SimpleImage("banana2.jpg"); back = new SimpleImage("paris.jpg"); back.setSameSize(image); for (pixel: image) { avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3; if (pixel.getBlue() > avg * 1.3) { // select blue pixel2 = back.getPixel(pixel.getX(), pixel.getY()); pixel.setRed(pixel2.getRed()); pixel.setGreen(pixel2.getGreen()); pixel.setBlue(pixel2.getBlue()); } } print(image); image-bluescreen-3