Chapter 3: Modifying Pictures using

Loops

We perceive light
different
from
how
it
Color is continuous
actually is

Visible light is in the wavelengths between 370 and 730

nanometers

Thats 0.00000037 and 0.00000073 meters

But we perceive light with color sensors

that peak around 425 nm (blue), 550 nm

(green), and 560 nm (red).

Our brain figures out which color is which by figuring

out how much of each kind of sensor is responding
One implication: We perceive two kinds of orange
one thats spectral and one thats red+yellow (hits
our color sensors just right)
Dogs and other simpler animals have only two kinds of
sensors

They do see color. Just less color.

Luminance vs. Color

We perceive borders of

things, motion, depth

via luminance
Luminance is not the amount of

light, but our perception of

the amount of light.
We see blue as darker than
red, even if same amount of
light.

Much of our luminance

perception is based on
comparison to
backgrounds, not raw
values.

Luminanceisactually
colorblind.Completely
differentpartofthebrain
doesluminancevs.color.

Digitizing pictures as
bunches
of
little
dots

We digitize pictures into lots of

little dots
Enough dots and it looks like a
continuous whole to our eye
Our eye has limited resolution
Our background/depth acuity is

particulary low

Each picture element is referred to as

a pixel

Pixels
Pixels are picture elements
Each pixel object knows its color
It also knows where it is in its picture

Whenwezoomthe
pictureto500%,we
canseeindividual
pixels.

A Picture is a matrix
of
Its pixels
not a
continuous line of
elements, that is,
an array
A picture has two
dimensions: Width
and Height
We need a twodimensional array:
a matrix

Referencing a matrix
We talk about

positions in a
matrix as (x,y),
or (horizontal,
vertical)
Element (1,0) in
the matrix at left
is the value 12
Element (0,2) is 6

Encoding color
Each pixel encodes color at that

position in the picture

Lots of encodings for color
Printers use CMYK: Cyan, Magenta, Yellow, and blacK.
Others use HSB for Hue, Saturation, and Brightness

(also called HSV for Hue, Saturation, and Value)

Well use the most common for computers

RGB: Red, Green, Blue

Encoding RGB
Each component color

(red, green, and blue)

is encoded as a single
byte
Colors go from (0,0,0)
to (255,255,255)
If all three components are

the same, the color is in

greyscale

(200,200,200) at (3,1)

(0,0,0) (at position (3,0)

in example) is black
(255,255,255) is white

How much can we encode

in
8
bits?

Lets walk it through.

If we have one bit, we can represent two patterns:

0 and 1.
If we have two bits, we can represent four patterns:
00, 01, 10, and 11.
If we have three bits, we can represent eight
patterns: 000, 001, 010, 011, 100, 101, 110, 111

General rule: In n bits, we can have 2n

patterns

In 8 bits, we can have 28 patterns, or 256

If we make one pattern 0, then the highest value we

can represent is 28-1, or 255

Is that enough?
Were representing color in 24 (3 * 8) bits.
Thats 16,777,216 (224) possible colors
Our eye can discern millions of colors, so
its probably pretty close
But the real limitation is the physical
devices: We dont get 16 million colors out
of a monitor
Some graphics systems support 32 bits per

pixel

May be more pixels for color, or an

additional 8 bits to represent 256 levels of

translucence

Size of images
320 x 240
image

640 x 480
image

1024 x 768
monitor

24 bit color

230,400
bytes

921,600 bytes 2,359,296

bytes

32 bit color

307,200
bytes

1,228,800
bytes

3,145,728
bytes

>>>file=pickAFile()
>>>printfile
/Users/guzdial/mediasources/barbara.jpg
>>>picture=makePicture(file)
>>>show(picture)
>>>printpicture
Picture,filename/Users/guzdial/mediasources/barbara.jpg
height294width222

Whats a picture?
An encoding that represents an image
Knows its height and width
Knows its filename
Knows its window if its opened (via
show and repainted with repaint)

Manipulating pixels
getPixel(picture,x,y)getsasinglepixel.
getPixels(picture)getsalloftheminanarray.
(Squarebracketsisastandardarrayreference
notationwhichwellgenerallynotuse.)

>>>pixel=getPixel(picture,1,1)
>>>printpixel
Pixel,color=colorr=168g=131b=105
>>>pixels=getPixels(picture)
>>>printpixels[0]
Pixel,color=colorr=168g=131b=105

What can we do with a

pixel?

getRed, getGreen, and getBlue

are functions that take a

pixel as input and return a
value between 0 and 255
setRed, setGreen, and setBlue
are functions that take a
pixel as input and a value
between 0 and 255

We can also get, set, and

make Colors
getColor takes a pixel as input and

returns a Color object with the color at

that pixel
setColor takes a pixel as input and a
Color, then sets the pixel to that color
makeColor takes red, green, and blue
values (in that order) between 0 and 255,
and returns a Color object
pickAColor lets you use a color chooser
and returns the chosen color
We also have functions that can
makeLighter and makeDarker an input color

How do you find out what RGB

values you have? And where?
Use the MediaTools!

TheMediaToolsmenu
knowswhatvariables
youhaveinthe
CommandAreathat
containpictures

Distance between
colors?
Sometimes you need to, e.g., when deciding
if something is a close enough match
How do we measure distance?
Pretend its cartesian coordinate system
Distance between two points:

Distance between two colors:

>>>printgetRed(pixel)
168
>>>setRed(pixel,255)
>>>printgetRed(pixel)
255
>>>color=getColor(pixel)
>>>printcolor
colorr=255g=131b=105
>>>setColor(pixel,color)
>>>newColor=makeColor(0,100,0)
>>>printnewColor
colorr=0g=100b=0
>>>setColor(pixel,newColor)
>>>printgetColor(pixel)
colorr=0g=100b=0

>>>printcolor
colorr=81g=63b=51
>>>printnewcolor
colorr=255g=51b=51
>>>printdistance(color,newcolor)
174.41330224498358
>>>printcolor
colorr=168g=131b=105
>>>printmakeDarker(color)
colorr=117g=91b=73
>>>printcolor
colorr=117g=91b=73
>>>newcolor=pickAColor()
>>>printnewcolor
colorr=255g=51b=51

>>>file="/Users/guzdial/mediasources/barbara.jpg"
>>>pict=makePicture(file)
>>>show(pict)
>>>setColor(getPixel(pict,10,100),yellow)
>>>setColor(getPixel(pict,11,100),yellow)
>>>setColor(getPixel(pict,12,100),yellow)
>>>setColor(getPixel(pict,13,100),yellow)
>>>repaint(pict)

Butthatsreallydullandboringto
changeeachpixelatatime
Isntthereabetterway?

defdecreaseRed(picture):
forpingetPixels(picture):
value=getRed(p)
setRed(p,value*0.5)
Usedlikethis:
>>>file="/Users/guzdial/mediasources/barbara.jpg"
>>>picture=makePicture(file)
>>>show(picture)
>>>decreaseRed(picture)
>>>repaint(picture)

Our first picture

recipe works for any
def decreaseRed(picture):
picture
for p in getPixels(picture):
value=getRed(p)
setRed(p,value*0.5)

Used like this:

>>> file="/Users/guzdial/mediasources/katie.jpg"
>>> picture=makePicture(file)
>>> show(picture)
>>> decreaseRed(picture)
>>> repaint(picture)

How do you make an

omelet?
Something to do with eggs
What do you do with each of the eggs?
And then what do you do?
All useful recipes involve repetition
- Take four eggs and crack them.
- Beat the eggs until
We need these repetition (iteration)
constructs in computer algorithms too

Decreasing the red in

a picture

Recipe: To decrease the red

Ingredients: One picture, name it pict
Step 1: Get all the pixels of pict. For

each pixel p in the set of pixels

Step 2: Get the value of the red of pixel
p, and set it to 50% of its original value

Use a for loop!

Our first picture
recipe
def decreaseRed(pict):
allPixels = getPixels(pict)
for p in allPixels:
value = getRed(p)
setRed(p, value * 0.5)

The loop
- Note the
indentation!

How for
loops are
written
for is the name

def decreaseRed(pict):
allPixels = getPixels(pict)
for p in allPixels:
value = getRed(p)
setRed(p, value * 0.5)

of the command
An index variable is used to hold each of
the different values of a sequence
The word in
A function that generates a sequence
The index variable will be the name for
one value in the sequence, each time
through the loop
A colon (:)
And a block (the indented lines of code)

What happens when a for

loop is executed
The index variable is set to an item in

the sequence
The block is executed
The variable is often used inside the

block

Then execution loops to the for

statement, where the index variable gets

set to the next item in the sequence
Repeat until every value in the sequence
was used.

getPixels returns a
sequence
of
pixels
Each pixel knows
its color and
place in the
original picture
Change the pixel,
you change the
picture
So the loops here
assign the index
variable p to
each pixel in the
picture picture,
one at a time.

def decreaseRed(picture):
allPixels = getPixels(picture)
for p in allPixels
originalRed = getRed(p)
setRed(p, originalRed * 0.5)

or equivalently
def decreaseRed(picture):
for p in getPixels(picture):
originalRed = getRed(p)
setRed(p, originalRed * 0.5)

Do we need the variable

originalRed?
No: Having removed allPixels, we can also do without

originalRed in the same way:

We can calculate the original red amount right when we
are ready to change it.
Its a matter of programming style. The meanings are
the same.

def decreaseRed(picture):
for p in getPixels(picture):
originalRed = getRed(p)
setRed(p, originalRed * 0.5)
def decreaseRed(picture):
for p in getPixels(picture):
setRed(p, getRed(p) * 0.5)

Lets walk that

through slowly
Herewetakeapicture
def decreaseRed(picture):
for p in getPixels(picture):
originalRed = getRed(p)
setRed(p, originalRed * 0.5)

objectinasaparameterto
thefunctionandcallit
picture
picture

Now, get the pixels

def decreaseRed(picture):
for p in getPixels(picture):
originalRed = getRed(p)
setRed(p, originalRed * 0.5)

Wegetallthepixelsfrom
thepicture,thenmakepbe
thenameofeachoneoneat
atime
picture

Pixel,
color
r=135
g=131
b=105
p

Pixel,
color
r=133
g=114
b=46

Pixel,
color
r=134
g=114
b=45

getPixels()

Get the red value from

pixel

def decreaseRed(picture):
for p in getPixels(picture):
originalRed = getRed(p)
setRed(p, originalRed * 0.5)

Wegettheredvalueof
pixelpandnameit
originalRed
picture

Pixel,
color
r=135
g=131
b=105
p

Pixel,
color
r=133
g=114
b=46

Pixel,
color
r=134
g=114
b=45

getPixels()

originalRed= 135

Now change the pixel

def decreaseRed(picture):
for p in getPixels(picture):
originalRed = getRed(p)
setRed(p, originalRed * 0.5)

Settheredvalueofpixelp
to0.5(50%)of
originalRed
picture

Pixel,
color
r=67
g=131
b=105
p

Pixel,
color
r=133
g=114
b=46

Pixel,
color
r=134
g=114
b=45

getPixels()

originalRed = 135

Then move on to the

next pixel
def decreaseRed(picture):
for p in getPixels(picture):
originalRed = getRed(p)
setRed(p, originalRed * 0.5)

Moveontothenextpixel
andnameitp
picture

Pixel,
color
r=67
g=131
b=105

Pixel,
color
r=133
g=114
b=46
p

Pixel,
color
r=134
g=114
b=45

getPixels()

originalRed = 135

def decreaseRed(picture):
for p in getPixels(picture):
originalRed = getRed(p)
setRed(p, originalRed * 0.5)

SetoriginalRedtothered
valueatthenewp,then
changetheredatthatnew
pixel.
picture

Pixel,
color
r=67
g=131
b=105

Pixel,
color
r=133
g=114
b=46
p

Pixel,
color
r=134
g=114
b=45

getPixels()

originalRed = 133

def decreaseRed(picture):
for p in getPixels(picture):
originalRed = getRed(p)
setRed(p, originalRed * 0.5)

Changetheredvalueatpixelpto
50%ofvalue
picture

Pixel,
color
r=67
g=131
b=105

Pixel,
color
r=66
g=114
b=46
p

Pixel,
color
r=134
g=114
b=45
value = 133

getPixels()

And eventually, we do
all
We go pixels
from this
to this!

Tracing/Stepping/Walki
ng
through
the
program
What we just did is called stepping or

walking through the program

You consider each step of the program,
in the order that the computer would
execute it
You consider what exactly would happen
You write down what values each variable
(name) has at each point.
Its one of the most important debugging
skills you can have.
And everyone has to do a lot of
debugging, especially at first.

Once we make it work for one

picture, it will work for any
picture

Think about what we

just
did
Did we change the
defdecreaseRed(picture):
program at all?
Did it work for all
the different
examples?
What was the input
variable picture
each time, then?
It was the value of

whatever picture we
provided as input!

forpingetPixels(picture):
value=getRed(p)
setRed(p,value*0.5)

NOTE:Ifyouhavea
variablepictureinyour
CommandArea,thats
notthesameasthe
pictureindecreaseRed.

Read it as a Recipe
defdecreaseRed(pict):
forpingetPixels(pict):
value=getRed(p)
setRed(p,value*0.5)
Recipe: To decrease the red
Ingredients: One picture, name it pict
Step 1: Get all the pixels of pict. For

each pixel p in the pixels

Step 2: Get the value of the red of pixel
p, and set it to 50% of its original value

Lets use something with known red

to manipulate: Santa Claus

What if you decrease Santas red

again and again and again?
>>> file=pickAFile()
>>>
pic=makePicture(file)
>>> decreaseRed(pic)
>>> show(pic)
(Thats the first one)
>>> decreaseRed(pic)
>>> repaint(pic)
(Thats the second)

Youcanalsouse:
explore(pic)
toopentheMediaTools

If you make something you

like
writePictureTo(picture,filename)
Like:
Windows:
writePictureTo(myPicture,"C:/mediasources/mypicture.jpg")
MacOS:
writePictureTo(myPicture,/home/users/guzdial/med
iasources/my-picture.jpg")

Writes the picture out as a JPEG

Be sure to end your filename as .jpg!
If you dont specify a full path,

will be saved in the same directory as JES.

Whathappenedhere?!?

Increasing Red
Rememberthatthelimit
def increaseRed(picture):
for p in getPixels(picture):
value=getRed(p)
setRed(p,value*1.2)

forrednessis255.

Ifyougobeyond255,all
kindsofweirdthingscan
happenifyouhave
Modulocheckedin
Options.

How does increaseRed differ from

decreaseRed?
Well, it does increase rather than

decrease red, but other than that

It takes the same input
It can also work for any picture

Its a specification of a process thatll

work for any picture
Theres nothing specific to a specific
picture here.

Clearing Blue
defclearBlue(picture):
forpingetPixels(picture):
setBlue(p,0)
Again,thiswillworkforany
picture.
Trysteppingthroughthisone
yourself!

Can we combine these?

Why not!
How do we turn this

beach scene into a

sunset?
What happens at
sunset?

At first, I tried increasing

the red, but that made

things like red specks in
the sand REALLY prominent.

That cant be how it

really works

New Theory: As the sun sets,

less blue and green is

visible, which makes things
look more red.

A Sunset-generation
defmakeSunset(picture):
Function
forpingetPixels(picture):
value=getBlue(p)
setBlue(p,value*0.7)
value=getGreen(p)
setGreen(p,value*0.7)

Lightening and
darkening an image
def lighten(picture):
for px in
getPixels(picture):
color = getColor(px)
color =
makeLighter(color)
setColor(px ,color)

def darken(picture):
for px in
getPixels(picture):
color = getColor(px)
color =
makeDarker(color)
setColor(px ,color)

Creating a negative
Lets think it through
R,G,B go from 0 to 255
Lets say Red is 10. Thats very light
red.

Whats the opposite? LOTS of Red!

The negative of that would be 245: 255-

10

So, for each pixel, if we negate each

color component in creating a new

color, we negate the whole picture.

defnegative(picture):
forpxingetPixels(picture):
red=getRed(px)
green=getGreen(px)
blue=getBlue(px)
negColor=makeColor(255red,255green,255blue)
setColor(px,negColor)

Original, negative, negativenegative

Converting to
greyscale

We know that if red=green=blue, we get grey

But what value do we set all three to?

What we need is a value representing the darkness of

the color, the luminance

There are lots of ways of getting it, but one way
that works reasonably well is dirt simplesimply take
the average:

defgreyScale(picture):
forpingetPixels(picture):
intensity=(getRed(p)+getGreen(p)+getBlue(p))/3
setColor(p,makeColor(intensity,intensity,intensity))

Can we get back again?

Nope
Weve lost information
We no longer know what the ratios are
between the reds, the greens, and the
blues
We no longer know any particular value.

But thats not really the best

greyscale
In reality, we dont perceive red,

green, and blue as equal in their amount

of luminance: How bright (or non-bright)
something is.
We tend to see blue as darker and red

as brighter
Even if, physically, the same amount of
light is coming off of each

Photoshops greyscale is very nice: Very

similar to the way that our eye sees it

B&W TVs are also pretty good

Building a better
greyscale
Well weight red, green, and blue

based
on how light we perceive them to be,
based on laboratory experiments.
defgreyScaleNew(picture):
forpxingetPixels(picture):
newRed=getRed(px)*0.299
newGreen=getGreen(px)*0.587
newBlue=getBlue(px)*0.114
luminance=newRed+newGreen+newBlue
setColor(px,makeColor(luminance,luminance,luminance))

Comparing the two greyscales:

Average on left, weighted on
right

Lets use a black cat to compare

Average on left, weighted on

right

A different sunsetgeneration function

This one does the same
def
makeSunset2(picture):
reduceBlue(picture)
reduceGreen(picture)

def reduceBlue(picture):
for p in
getPixels(picture):
value=getBlue(p)
setBlue(p,value
*0.7)
def
reduceGreen(picture):
for p in
getPixels(picture):
value=getGreen(p)
setGreen(p,value
*0.7)

thing as the earlier

form.
Its easier to read and
understand: To make a
sunset is to reduceBlue
and reduceGreen.
We use hierarchical
decomposition to break
down the problem.
This version is less
inefficient, but thats
okay.
Programs are written for
people, not computers.

Lets talk about

functions
How can we reuse variable names

like
picture in both a function and in the
Command Area?
Why do we write the functions like
this? Would other ways be just as
good?
Is there such a thing as a better or
worse function?
Why dont we just build in calls to
pickAFile and makePicture?

One and only one

thing
We write functions as we do to

make them

general and reusable

Programmers hate to have to re-write

something theyve written before

They write functions in a general way so
that they can be used in many
circumstances.

What makes a function general and thus

reusable?
A reusable function does One and Only One

Thing

Contrast these two

programs

defmakeSunset(picture):
forpingetPixels(picture):
value=getBlue(p)
setBlue(p,value*0.7)
value=getGreen(p)
setGreen(p,value*0.7)
Yes,theydotheexact
samething!
makeSunset(somepict)
worksthesameinboth
cases

defmakeSunset(picture):
reduceBlue(picture)
reduceGreen(picture)

defreduceBlue(picture):
forpingetPixels(picture):
value=getBlue(p)
setBlue(p,value*0.7)
defreduceGreen(picture):
forpingetPixels(picture):
value=getGreen(p)
setGreen(p,value*0.7)

Observations on the new

makeSunset
Its okay to have more

than one function in the

same Program Area (and
file)
makeSunset in this one is
somewhat easier to read.
Its clear what it does

reduceBlue and
reduceGreen
Thats important!

defmakeSunset(picture):
reduceBlue(picture)
reduceGreen(picture)
defreduceBlue(picture):
forpingetPixels(picture):
value=getBlue(p)
setBlue(p,value*0.7)
defreduceGreen(picture):
forpingetPixels(picture):
value=getGreen(p)
setGreen(p,value*0.7)

Programsarewrittenforpeople,notcomputers!

Considering
variations
We can only do this because
reduceBlue and reduceGreen,
do one and only one thing.
If we put pickAFile and
makePicture in them, wed
have to pick a file twice
(better be the same file),
make the picturethen save
the picture so that the
next one could get it!

defmakeSunset(picture):
reduceBlue(picture)
reduceGreen(picture)
defreduceBlue(picture):
forpingetPixels(picture):
value=getBlue(p)
setBlue(p,value*0.7)
defreduceGreen(picture):
forpingetPixels(picture):
value=getGreen(p)
setGreen(p,value*0.7)

Does makeSunset do one and

only one thing?
Yes, but its a higher-level, more abstract

thing.
Its built on lower-level one and only one

thing

We call this hierarchical decomposition.

You have some thing that you want the computer
to do?
Redefine that thing in terms of smaller things
Repeat until you know how to write the smaller
things
Then write the larger things in terms of the
smaller things.

Are all the things named picture

the same?
What if we use this like

this in the Command Area:

>>> file=pickAFile()
>>>
picture=makePicture(file)
>>> makeSunset(picture)
>>> show(picture)

defmakeSunset(picture):
reduceBlue(picture)
reduceGreen(picture)
defreduceBlue(picture):
forpingetPixels(picture):
value=getBlue(p)
setBlue(p,value*0.7)
defreduceGreen(picture):
forpingetPixels(picture):
value=getGreen(p)
setGreen(p,value*0.7)

What happens when we use a

function
When we type in the Command Area

makeSunset(picture)
Whatever object that is in the Command Area variable

picture becomes the value of the placeholder (input)

variable picture in
def makeSunset(picture):
reduceBlue(picture)
reduceGreen(picture)
makeSunsets picture is then passed as input to

reduceBlue and reduceGreen, but their input

variables are completely different from makeSunsets
picture.
For the life of the functions, they are the same

values (picture objects)

Names have contexts

In natural language, the same word has

different meanings depending on

context.
Im going to fly to Vegas.
Would you please swat that fly?

A function is its own context.

Input variables (placeholders) take on the value of

the input values only for the life of the function

Only while its executing

Variables defined within a function also only exist

within the context of that function

The context of a function is also called its scope

Input variables are

placeholders
Think of the input variable as a

placeholder
It takes the place of the input object

During the time that the function is

executing, the placeholder variable

stands for the input object.
When we modify the placeholder by
changing its pixels with setRed, we
actually change the input object.

Variables within functions

stay within functions
The variable value in

decreaseRed is created
within the scope of
decreaseRed
That means that it only

exists while decreseRed is

executing

If we tried to print

value after running

decreaseRed, it would
work ONLY if we already
had a variable defined
in the Command Area
The name value within

decreaseRed doesnt exist

outside of that function
We call that a local
variable

defdecreaseRed(picture):
forpingetPixels(picture):
value=getRed(p)
setRed(p,value*0.5)

Writing real
functions
Functions in the mathematics

sense
take input and usually return output.
Like ord() or makePicture()

What if you create something inside a

function that you do want to get back

to the Command Area?
You can return it.
Well talk more about return later

thats how functions output something

Consider these two

functions
defdecreaseRed(picture):
forpingetPixels(picture):
value=getRed(p)
setRed(p,value*0.5)

defdecreaseRed(picture,amount):
forpingetPixels(picture):
value=getRed(p)
setRed(p,value*amount)

First,itsperfectlyokaytohavemultipleinputstoafunction.
ThenewdecreaseRednowtakesaninputofthemultiplierforthe
redvalue.
decreaseRed(picture,0.5)woulddothesamething
decreaseRed(picture,1.25)wouldincreasered25%

Names are important

This function

should probably be
called changeRed
because thats what
it does.

Is it more general?

Yes.

But is it the one

and only one thing

that you need done?
If not, then it may be

less understandable.
You can be too general

defdecreaseRed(picture,amount):
forpingetPixels(picture):
value=getRed(p)
setRed(p,value*amount)

Understandability
comes
first
Consider these two functions below
They do the same thing!
The one on the right looks like the other

increase/decrease functions weve written.

That may make it more understandable for you to write first.
But later, it doesnt make much sense to you

Why multiply by zero, when the result is always

zero?!?

defclearBlue(picture):
forpingetPixels(picture):
setBlue(p,0)

defclearBlue(picture):
forpingetPixels(picture):
value=getBlue(p)
setBlue(p,value*0)

Always write the program

understandable first
Write your functions so that you can

understand them first

Get your program running

THEN make them better

Make them more understandable to others

Set to zero rather than multiply by zero

Another programmer (or you in six months) may not
remember or be thinking about increase/decrease
functions

Make them more efficient

The new version of makeSunset takes twice as long

as the first version, because it changes all the
pixels twice