Today: image co-ordinates, range, nested range, make drawing to figure out co-ords

Strategy Note: Detail Oriented

• "Detail Oriented" - frequently seen on the resume!
• Book: Thinking Fast and Slow, by Kahneman
• Mostly your brain is not paying much attention and that's fine
• Get to Aqua-Stripe problem below...
  Slow down and work the details
  Do not do it in your head
  Make a diagram to plot how the details fit together
  Then write the key line

Image Coordinate System

Previously loaded image into memory like this. Now look at the x/y coordinate scheme of the pixels.

image = SimpleImage(filename)

• image.width, image.height - int number of pixels
  e.g. image.width is 200, image.height is 100
  (like pixel.red - these are Python "properties")
• Origin x=0 y=0 is at upper left
• x grows right
• y grows down
• This coordinate scheme is like typesetting lines of text
• Zero based indexing
  First element is index 0
• Q: Say width is 100, what is the rightmost pixel's x value
• A: it's not 100! it's 99
  Super common mistake in zero-based world
• width 100, height 50 drawing, (x, y) pixels:
  (0, 0) pixel at upper left
  (99,0) at upper right
  (99, 49) at lower right
• These x,y values are all fundamentally int numbers
  There's no pixel at x=2.5
  Using a float value to address an x,y will fail with an error
  Talk about float values later

image.get_pixel(x, y)

• An image function that accesses one pixel
• image.get_pixel(x, y)
• Returns a reference to the pixel at x,y
• Store reference in a variable, use .red .green on it
• Typically we use "pixel" as the variable name for this

# For the pixel at x=4 y=2 in "image",
# set its red value to 0
pixel = image.get_pixel(4, 2)
pixel.red = 0

Goal: Loop Over All the Coordinates

Step 1: range() function

for x in range(10):

• Today: want to write a loop where x = 0, 1, 2, 3, ...99
• 1-parameter range(n) function
• range(10) represents the series:
  0, 1, 2, ... 8, 9
• Start at 0, go up to but not including the n parameter
• range(10) = 0, 1, 2, .. 9
• range(5) = 0, 1, 2, 3, 4
• range(n) = 0, 1, ... n-1
• range(n) works in a foreach loop
• Works well with zero-based indexing

Generating all x,y numbers for an image

• Say image width is 100, height is 50
• Basic plan to use range() to generate all x,y numbers
• for x in range(image.width):
  x will range over 0, 1, 2, .. 99
• for y in range(image.height):
  y will range over 0, 1, 2, .. 49

Nested Loops

• Nested loops are a little advanced
• Each run the loop body is called an "iteration" of the loop
• What happens if we place a loop inside another?
• An "outer" loop
• An "inner" loop
• Try it in this example

Example: Darker-Nested

> Darker Nested

Here is a version of the previous darker algorithm, but written using nested range()

def darker(filename):
    """
    Darker-image algorithm, modifying
    and returning the original image.
    This version uses nested range loops.
    Demo - this code is complete.
    """
    image = SimpleImage(filename)
    for y in range(image.height):
        for x in range(image.width):
            pixel = image.get_pixel(x, y)
            pixel.red *= 0.5
            pixel.green *= 0.5
            pixel.blue *= 0.5
    return image

• Use nested y/x loops to hit every pixel in an image
• Nested loop sequence:
• 1. Outer loop does first iteration, e.g. y = 0
• 2. Inner loop does all its iterations, x = 0, 1, 2, 3 ...
  This gives us all y=0 coords: (0, 0), (1, 0), (2, 0), .. (99, 0)
• 3. Outer loop does second iteration, y = 1
• 4. Inner loop does all iterations again: x = 0, 1, 2, 3 ...
  This gives us all y=1 coords: (0, 1), (1, 1), (2, 1), .. (99, 1)
• The effect is going through the rows top to bottom. Each row going left to right - like reading English text
• Demo: add in inner loop: print('x:', x, 'y:', y)
  print() like this is a debugging trick we'll build on later
  See a line printed for each pixel, showing the whole x,y sequence
  Only do this with small images like we have here
  Otherwise it's too much output
• Demo: try making x too limited, range(image.width - 20)
• Demo: what if we swap the roles of the y/x loops?
  It works fine, just a different order of the pixels
  Goes through the columns left-right. For each column, top to bottom

Here is a picture, showing the order the nested y/x loops go through all the pixels - all of the top y=0 row, then the next y=1 row, and so on.

Good news: this is our first nested loop. We'll do more later. It happens that the y/x nested loop for an image is idiomatic - it's the same every time, so you can just kind of use it while you get used to it.

Note: How to Make 2 Pixels Look The Same?

• Suppose variables a and b refer to two pixels in an image
• Make pixel b look the same as a .. how?
• Pixels look the same if they have the same RGB numbers
• Make b look the same as a with three =

b.red = a.red
b.green = a.green
b.blue = a.blue

The following approach looks reasonable but does not work - changes the variable b to point to the same pixel as a

b = a

Create Out Image

Thus far the coded has changed the original image. Now we'll create a new "out" image and write changes to that.

image = SimpleImage(filename)

# 1. create a 100 x 50 iamge
out = SimpleImage.blank(100, 50)

# 2. More realistic, create out image same size
# as original
out = SimpleImage.blank(image.width, image.height)

Code With Two Images

In the code below, we have two images "image" and "out" - can get a pixel in either one

# pixel (10, ) in original image
a = image.get_pixel(10, 0)

# pixel (10, 0) in out image
b = out.get_pixel(10, 0)

Example: Darker Out

> Darker Out

Establish the basics on this one, do something interesting on the next one.

Darker algorithm, but creating a separate out image.

def darker(filename):
    """
    Darker-image algorithm, but create a new
    "out" image the same size as the original.
    Copy dark pixels to out and return it.
    Demo - this code is complete.
    """
    image = SimpleImage(filename)
    # Create out image, same size as original
    out =  SimpleImage.blank(image.width, image.height)
    for y in range(image.height):
        for x in range(image.width):
            pixel = image.get_pixel(x, y)
            pixel_out = out.get_pixel(x, y)
            pixel_out.red = pixel.red * 0.5
            pixel_out.green = pixel.green * 0.5
            pixel_out.blue = pixel.blue * 0.5
    return out

• Standard nested loops go through all x,y
• "pixel" points into original image
• "pixel_out" points into out image
• Copy over the data
• Return "out" when done

Challenge - Aqua Stripe

> Aqua Stripe

For the Aqua Stripe problem, produce an image with a 10 pixel wide aqua stripe on the left, with a copy of the original image next to it, like this:

Drawing to think about coordinates...

1. Make out image - 10 pixels wider than original

See solution below

2. Produce the aqua stripe

• What are the x,y coordinates for that
• The blank image is white
• How to make aqua?
  White is 255 255 255
  Set red to 0
  That leaves blue and green at 255 = aqua!

3. Loop To Copy Over Original - Drawing!

How to copy the data from the original to the right side of the output? Need to think about the x,y values, which are not the same in the two images.

For x,y in original, what is the corresponding x,y in out?

Make a little chart (here "x" means in the original image)

pt   x     x_out
A    0     10
B    99    109

What's the pattern?
x_out = x + 10

Now we can write the key get_pixel() line below, to figure pixel_out for each original pixel.

Aqua Stripe Solution

def aqua_stripe(filename):
    """
    Create an out image 10 pixels wider than the original.
    (1) Set an aqua colored vertical stripe 10 pixels wide
    at the left by setting red to 0.
    (2) Copy the original image just to the right
    of the aqua stripe. Return the computed out image.
    """
    image = SimpleImage(filename)
    # Create out image, 10 pixels wider than original
    out = SimpleImage.blank(image.width + 10, image.height)
    # Create the 10-pixel aqua stripe
    for y in range(image.height):
        for x in range(10):
            pixel_out = out.get_pixel(x, y)
            pixel_out.red = 0
    # Copy the original over - make drawing to guide code here
    for y in range(image.height):
        for x in range(image.width):
            pixel = image.get_pixel(x, y)
            pixel_out = out.get_pixel(x + 10, y)  # the key line
            pixel_out.red = pixel.red
            pixel_out.green = pixel.green
            pixel_out.blue = pixel.blue
    return out

Experiments: try +11 instead of +10 - get bad-coord exception, Try +9, and image shifted slightly to left, can try the diff-stripes slider.

Strategy

It's hard to write that get_pixel() line just doing it in your head. We make a drawing to get the details exactly right.

Generality Trick

Notice that our drawing was not general - just picking width = 100 as a concrete example. A single concrete example was good enough to get our thoughts organized, and then the formula worked out actually was general.

Off By One, OBO

A common form of error in these complex indexing algorithms is being "off by one", like using x = 100 when x = 99 is correct. You'll make those errors sometimes, but with a drawing, you can try to do it perfectly the first time.