Today: variables, digital images, RGB color, for loop

106A Debug Steps, 1 and 2

PSA - What is "done" for a homework?

Variables - 2 Things To Know

More details about variables in the Python Variables section in the Python guide.

A Python variable has a name and stores a value. We'll start with two rules of variables.

1. Creating a Variable

A variable is created in the code by a single equal sign = like this which creates a variable named x: 

...
x = 42
...

The variable is set at the moment the line runs.

As a drawing, think of the variable as a little box, labeled with the variable's name, containing a pointer to the value stored.

alt: variable x points to value 42

2. Reading A Variable

After a variable is created, its name can appear in the code, e.g. x, and that use follows the arrow, retrieving whatever value was stored earlier. The name appears in the code as a bare word, no quote marks or anything.

Here's a little example. Suppose we set a variable named color to hold the value 'red'. Then subsequent lines can use color, and that retrieves the stored color.

alt: variable color points to 'red' 

color = 'red'
# instead of bit.paint('red')...
bit.paint(color)
bit.move()
bit.paint(color)

This paints 2 squares 'red', or whatever value was assigned to color on the first line.

Optional - All Blue Variable

We're not doing this one in class, but you can try it on your own to see a variable in action.

> all-blue

Go back to our all-blue Bit loop. Change the code to use a color variable as below. The variable color is set to hold the value 'blue', and the later lines just paint whatever color is in the color variable. This version paints the whole row blue. 

def all_blue(filename):
    bit = Bit(filename)
    color = 'blue'
    bit.paint(color)
    while bit.front_clear():
        bit.move()
        bit.paint(color)
    bit.right()

Look at the lines bit.paint(color) lines - they refer to the variable by its name, following the arrow to retrieve 'blue' or whatever was stored there.

Q: How would you change this code to paint the whole row red?

A: Change line 3 to color = 'red' - the later lines just use whatever is in the color variable, so now they will paint red with no other change.

Python Math Expression + Evaluation

Math expressions and evaluation

You would think that computer programs have a lot of math at their core. It's true! Python can evaluate mathematical expressions, like a calculator can. Python follows the order of operations, so multiplication and division (* /) are evaluated before addition and subtraction (+ -). Other than that, the math is done from left to right. The math here looks a lot like regular mathematics, so we're not going to spend a lot of time explaining it.

So what will Python make of this expression? 

1 + 2 * 3

The answer is 7, since Python does the multiplication before the addition. The official terminology is that Python "evaluates" the expression, computing a value from the expression.

Interpreter / Hack Mode >>>

The Python "interpreter" is a program on your laptop which makes Python work on your laptop. More details later on that. However, there is a way you can type code right at the interpreter to see what it does.

Try the >>> Hack Interpreter - there's a button for this at the bottom of each problem page on the experimental server. You type a little expression at the ">>>" prompt and hit the enter key. Python evaluates it, prints the resulting value on the next line. We'll use this more as we get into more Python features.

So the ">>>" is the Python interpreter. You type Python code to it directly, see what it does. Not a good way to get work done, but an excellent way to try little phrases of code to see what they do.

Variable Expression Demo

We can use the interpreter to try out the claims about variables and math expressions.

1. Variable Set / Get

>>> x = 11
>>> x
11

2. Expression

>>> 4 + 2 * 5 + 1
15

3. Variable + Expression

>>> x = 6
>>> 1 + 2 * x   # evaluates to what?

The answer is 13. The appearance of x in the expression is just an example of a variable - just retrieves whatever value was set to that variable, in this case 6.

Images - Numbers - Code

alt: picture of poppy

Digital Images - Pixels

See pebbles-zoomed.png

RGB Color Scheme

Live RGB LED Demo

Aside: Color Perception - Yikes!

Image Structure in the Computer

Image Made of Pixels

alt: image made of pixels

Image Loading Code

This line loads an image into Python memory, and sets a variable named image to point to it, ready for Python to work on it. 

# Load an image from the filesystem
# into memory in variable named "image".
# Now the image can be manipulated by code.

image = SimpleImage('flowers.jpg')

alt: image variable points to image structure in memory

Have an Image, How To Change it?

alt: picture of poppy

Say we have loaded an image variable as shown above. Now we want to write code to change the image in some way.

For example, let's say we want to set the blue and green values in each pixel of the image to 0. This will leave just the red values. This is called the "red channel" of the image - an image made of just its red lights.

Preamble: pixel.red = 0

Suppose we have a variable pixel that refers to one pixel inside an image. (We'll show how to obtain such a pixel variable in the next step.)

alt: pixel variable points to one pixel

Then the syntax pixel.red or pixel.blue or pixel.green refers to the red or blue or green value 0..255 inside the pixel.

The code below sets the red value of the pixel to 0, using the = similarly to above. 

pixel.red = 0

Change Whole Image - for loop

The "red channel" of an image is just the red lights, with blue and green all turned off. Here is the code to make the red channel of an iamge using a "for loop". 

def red_channel(filename):
    image = SimpleImage(filename)
    for pixel in image:
        pixel.green = 0
        pixel.blue = 0
    return image

Here is a link - you can try running it first, then we'll see how it works

> Image1 Red

How It Works - Big Picture

For loop syntax: 

for variable in collection:
    # use variable in here

Image For Loop Operation

alt: for loop, sets variable to point to each element in the collection, 1 for each iteration of the loop

Image Foreach Observations

Side trip about math

Update Variable: x = x + 1

What does this do: 

x = x + 1

x = 6
x = x + 1

alt: change x from 6 to 7

Example - Make Image Darker

> Image1 Darker 

    for pixel in image:
        pixel.red = pixel.red * 0.5
        pixel.green = pixel.green * 0.5
        pixel.blue = pixel.blue * 0.5
        # or shorthand form:
        # pixel.red *= 0.5

Relative Variable Shorthand: += -= *=

Shorthand way to write x = x + 1 

x += 1

Shorthand for x = x * 2 

x *= 2  # double x

For these image problems, that looks like 

pixel.red = pixel.red * 0.5  # long form
pixel.red *= 0.5             # shorthand for above

>>> x = 10
>>> x += 3
>>> x
13
>>> x *= 2
>>> x
26

Image1 Puzzles

> Copper Puzzle

Loop over the image, write code to change pixels, recovering the hidden image. Nick solves part, then students try to type code for the rest.

> 5-10-20 Banana Puzzle

5-10-20 puzzle: The red, green, and blue values are too small by a factor of 5 10 20. But we do not know which factor goes with which color. Figure it out by experimenting with code to modify the image with various factors (i.e. guessing and running it).

Image Coordinate System

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

image = SimpleImage(filename)
x,y grid of pixels for example image width=100 and height=50

image.get_pixel(x, y)

# 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
alt:get_pixel(x,y) returns reference to that pixel

Goal: Loop Over All the Coordinates

Step 1: range() function

for x in range(10):

Hack/Demo: Try In Interpreter

Demo (or you can try it). The print(xx) function in this context just prints out what is passed to it within the parenthesis. 

>>> for x in range(10):
        print(x)
0
1
2
3
4
5
6
7
8
9
>>>

So here, we can see that foreach works with range, running the body once for each element.

Generating all x,y numbers for an image

Nested Loops

for y in range(image.height):
    for x in range(image.width):
        # access x,y in here
        pixel = image.get_pixel(x, y)
        pixel.red = 0

Nested in Interpreter

>>> for y in range(4):
        for x in range(5):
            print('x:', x, 'y:', y)
x: 0 y: 0
x: 1 y: 0
x: 2 y: 0
x: 3 y: 0
x: 4 y: 0
x: 0 y: 1
x: 1 y: 1
x: 2 y: 1
x: 3 y: 1
x: 4 y: 1
x: 0 y: 2
x: 1 y: 2
x: 2 y: 2
x: 3 y: 2
x: 4 y: 2
x: 0 y: 3
x: 1 y: 3
x: 2 y: 3
x: 3 y: 3
x: 4 y: 3

Example: Darker-Nested

> Darker Nested

Here is a version of the previous darker algorithm, but written using nested range(). Nested loops generate all the x,y. In the loop, the image.gix_pixel() function is called to get a reference to the pixel for each x,y. 

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

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.

alt: nested loop order, top row, next 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.