INFT1004 Visual Programming

Lecture 5 More Image Manipulation (Guzdial & Ericson chapter 5)

INFT1004 - SEMESTER 1 - 2012

Week 1 Week 2 Week 3 Week 4 Recess Week 5 Week 6 Week 7 Week 8 Week 9 Week 10 Week 11 Week 12 Week 13 Mar 4 Mar 11 Mar 18 Mar 25 Apr 1 - Apr 7 Apr 8 Apr 15 Apr 22 Apr 29 May 6 May 13 May 20 May 27 Jun 3 Introduction Programs, Arrays and Iteration Working with x and y coordinates Selection

LECTURE TOPICS

Mid Semester Recess Period More Picture Techniques Sound and Arrays More Sound and Arrays Program Design and Strings Lists, Files and Modules Web, Representations, Steganography Turtles and Other Classes Revision and Look Ahead No formal classes - MUST be available normal & supplementary period
Assignment due 3:00 Tuesday May 21 Practical Test 2 in Lab class Practical Test 1 in Lab class

Mid Year Examination Period

Lecture Topics and Lab topics are the same for each week

INFT1004 - SEMESTER 1 - 2012

Week 1 Week 2 Week 3 Week 4 Recess Week 5 Week 6 Week 7 Week 8 Mar 4 Mar 11 Mar 18 Mar 25 Apr 1 - Apr 7 Apr 8 Apr 15 Apr 22 Introduction Programs, Arrays and Iteration Working with x and y coordinates Selection

LECTURE TOPICS

Mid Semester Recess Period More Picture Techniques Sound and Arrays More Sound and Arrays
Practical Test 1 in Lab class

29 Program Design and lab Strings you are You Apr must attend the Week 9 May 6 Lists, Files and Modules registered in or you will not be Week 10 May 13 Web, Representations, Steganography ableMay to do the practical test Week 11 20 Turtles and Other Classes Week 12 Week 13 May 27 Jun 3 Revision and Look Ahead No formal classes

Practical Test 2 in Lab class Assignment due 3:00 Tuesday May 21

Mid Year Examination Period

- MUST be available normal & supplementary period

Revision Simple & Object Types

With simple types (eg int, float, string) Assignment gives the value of the expression on the right to the variable on the left
number = 8 sum = 10 + number

Revision Simple & Object Types

With object types Assignment makes the variable on the left a name (or another name) for the object on the right
myFile = newFile

myFile newFile
6

Revision - Functions
Programs are made up of one of more functions If we want a function to take arguments, we include corresponding parameters when defining it Whenever we find the same piece of code appearing several times in a program, we should extract it, define it as a function, and replace the multiple occurrences with multiple calls to the function If there are variations between the occurrences, we use parameters and arguments to deal with the variations
7

Revision - sequence, selection and iteration

The statements in a function or a loop will be executed in the order theyre written When working out what the code does, be sure to note the effect of each statement before going on to consider the next

sequence

Revision - sequence, selection and iteration

Within a sequence of statements, a loop iterates (repeats) the statements in its body, as many times as specified

sequence

loop

Revision - sequence, selection and iteration

In a selection statement, the program chooses which bits of code to execute depending on the value of a boolean condition

selection loop

sequence

10

Revision forms of selection

Selection is done with the if statement The body of an if statement is executed if the condition is true If theres an else part, the body of the else is executed if the condition is false

11

Revision forms of selection

If we want to test multiple options, we generally use elif, an abbreviation of else if The first body of an elif that has a true condition is executed (all preceding conditions must be false) After any body (if, elif, else) is executed, the rest of the if sequence is skipped

12

Revision - Comments
Your programs must include three kinds of comments:
1.A comment at the start of every program (collection of functions), saying who wrote it, and when, and why 2.A comment at the start of every function, explaining briefly what it does 3.A comment with every bit of code that another programmer might find easier to understand if its explained

Do not write comments to explain what will be obvious to a reasonable programmer!

13

Oversight makeEmptyPicture()
Earlier lectures overlooked something thats pretty important in image manipulation Weve always manipulated an image itself, changing the original Sometimes one might want to keep the original and work with a copy

14

Oversight makeEmptyPicture()
Once you have the height and width of a picture, makeEmptyPicture(width, height) can give you a new picture of the required size You can then copy (the colours of) the pixels from the original to the copy, and then manipulate the copy without altering the original

15

Oversight makeEmptyPicture()
width height

makeNewPicture(width, height)

16

Oversight makeEmptyPicture()
So you can use this to: 1) create a new picture and 2) copy (the colours of) the pixels from the original to the copy 3) manipulate the copy without altering the original

17

More Image Manipulation

Theres very little new programming in this lecture Instead we revise the programming weve done by seeing some more approaches to manipulating images Well see how to blend images, subtract background, use chromakey, and draw and write on images

18

Blending images
To get the effect of transparency, looking through one somewhat transparent image at another image, all we have to do is average the colours of the corresponding pixels.

19

Blending images
To overlay picture 1 and picture 2, we change the pixels of picture 1 to be the averages of the pixels of the two pictures If we do a 50/50 average we get half of each picture; different proportions give different apparent transparency

20

Blending images
To overlay picture 1 and picture 2, we change the pixels of picture 1 to be the averages of the pixels of the two pictures If we do a 50/50 average we get half of each picture; different proportions give different apparent transparency
newPic1Pixel = (oldPic1Pixel*0.5) + (pic2Pixel*0.5)
newPic1Pixel
0 1 2 3 4 5 0 1 2 3 4 5 0 1 2 3 4 5

oldPic1Pixel
0 1 2 3 4 5 0 1 2 3 4 5

pic2Pixel
0 1 2 3 4 5

21

Transparent overlay
Lets overlay a picture of a butterfly on a picture of a bridge
480 422

640

497

butterfly1.jpg bridge.jpg
22

Transparent overlay
We need to specify at which coordinates of picture 1 (bridge) to start overlaying picture 2 (butterfly) We need to specify how transparent to make picture 2
xstart ystart 50% transparent

23

Conditions

70% transparent

40% transparent

24

Conditions
If we want picture 2 to be 70% transparent, we blend the colour channels to be 70% of the pixel from picture 1 and 30% from picture 2
70% picture 1

30%

70% transparent picture 2

(oldPic1Pixel*0.7) + (pic2Pixel*0.3) 25

Conditions
picture 1

If we want picture 2 to be 40% transparent, we blend the colour channels to be 40% of the pixel from picture 1 and 60% from picture 2
40%

60%

40% transparent picture 2

(oldPic1Pixel*0.4) + (pic2Pixel*0.6) 26

Conditions
In general, if we want picture 2 to be n% transparent, we blend the colour channels to be n% of the pixel from picture 1 and (100 n)% from picture 2
picture 1

n%

(100 - n)%

n% transparent picture 2

(oldPic1Pixel*(n/100)) + (pic2Pixel*(100-n)/100)

27

Example
e.g. if we want picture 2 to be 80% transparent, we blend the colour channels to be 80% of the pixel from picture 1 and (100 80)% from picture 2
picture 1

n%

(100 - 80)%

80% transparent picture 2

(oldPic1Pixel*(80/100)) + (pic2Pixel*(100-80)/100) (oldPic1Pixel* 0.8)) + (pic2Pixel* 0.2)

28

Example
See transparency() in lecture5demo.py
def transparency(pic1, pic2, xstart, ystart, proportion): # Overlay pic2 on pic1, starting at coordinates xstart and ystart of pic1, # with proportion determining the transparency (0-100) of the overlay for x in range(0, getWidth(pic2)): for y in range(0, getHeight(pic2)): # x and y are coordinates in pic2; add xstart and ystart to get the matching coords in pic1 pix1 = getPixel(pic1, xstart + x, ystart + y) pix2 = getPixel(pic2, x, y) # Blend the channels: proportion% of pic1 and (100-proportion)% of pic2 newRed = getRed(pix1) * proportion / 100 + getRed(pix2) * (100 - proportion) / 100 newGreen = getGreen(pix1) * proportion / 100 + getGreen(pix2) * (100 - proportion) / 100 newBlue = getBlue(pix1) * proportion / 100 + getBlue(pix2) * (100 - proportion) / 100 newColour = makeColor(newRed, newGreen, newBlue) # And apply this new blended colour to the pixel of pic1 setColor(pix1, newColour) repaint(pic1) 29

Fading
The book blends one picture into another by doing a section of picture 1 alone, a section of 50/50 transparency, and a section of picture 2 alone This is worth examining to see how they manage the coordinates of picture 1, picture 2, and the new picture (They paint to a new picture, whereas were altering picture 1)

30

Fading
0%
picture 2

transparency

100%

But were going to do something quite different: A full fade, from 0 transparency at the top of picture 2 to 100% transparency at the bottom
31

Fading
0% 0

transparency

y coordinate

100%

getHeight(picture2)

Every y value needs its own transparency level

32

Fading
0% 0

transparency

y coordinate

100%

getHeight(picture2)

How do the transparency levels relate to the coordinates? proportion = 100 * y / getHeight(pic)
33

Varying transparency levels

How do we work that out? By problem solving looking at what were given and using it to work out what we want You cant avoid problem solving in programming! See fadeIn() in lecture5demo.py

34

Subtracting Background
When we overlaid the picture of the butterfly on the bridge, the picture of the butterfly was a rectangle that included background

35

Subtracting Background
When we overlaid the picture of the butterfly on the bridge, the picture of the butterfly was a rectangle that included background It might be good to get rid of the background, and only overlay the butterfly itself (the foreground) That is, we want to subtract the background from the picture To do this, we need to know which pixels are background and which are foreground
36

Subtracting Background
If we have one picture of the background alone, and one of the background with foreground . . . We can compare the two, and choose only the pixels that are different

background

background + foreground

37

Subtracting Background
That way, we get just the foreground pixels.

background + foreground

foreground

38

Subtracting Background
Which we can overlay on a third picture, (a new background)

foreground

foreground + new background

39

Where it falls over

Ive used a gif butterfly with transparent background to illustrate overlaying background and foreground. If you use this in the real world say you take a picture of something in front of a background and then a separate picture of the background - you may encounter a couple of problems.

foreground + background

background
40

Where it falls over

Shadow is really background, but its different from the background picture, so it registers as foreground The problem with shadow can be fixed with direct lighting
shadow

41

Where it falls over

Another problem is that any colour in the foreground that is very similar to the background registers as background The problem with similarity between foreground and background can be fixed only if we can ensure there is no such similarity

some foreground colours match background colours

42

Chromakey
Chromakey is a technique for subtracting background that relies on the background being as close as possible to a single colour . . . And a colour that doesnt occur very often in the foregrounds that we tend to work with

Why dont weather forecasters wear blue shirts?

43

Chromakey
Because theyre filmed against a blue background, and blue is then eliminated from the picture in a background subtraction

(green is also used a lot neither blue or green occur in skin colours but watch what you wear)
44

Chromakey
If the foreground is photographed against a blue background . . . The function becomes simpler, because its always comparing with the same colour . . . And the result is a lot cleaner

45

Drawing on pictures
Like most programming languages, JES lets us add certain features directly to a picture
addLine(pic, x1, x2, y1, y2) addRect(pic, x1, y1, w, h) addRectFilled(pic, x1, y1, w, h) addOval(pic, x1, y1, w, h) addOvalFilled(pic, x1, y1, w, h)
a line from (x1, y1) to (x2, y2) a rectangle of width w and height h starting at (x1, y1) a filled rectangle an oval that fits in a rectangle of width w and height h starting at (x1, y1) a filled oval

All of these can take an additional argument, colour

46

Drawing on pictures

47

Writing on pictures
addText(pic, x, y, string)
the string (of text) starting at location (x, y)

This, too, can take an additional argument, colour Does the top of the string or the bottom of the string line up with the vertical coordinate y? How would you find out? To alter the font or size see Ch16 page 398 and look at the JES Pictures function addTextWithStyle()

48

Writing on pictures

49

Moving on from pictures

Thats all for pictures for the time being. Next week well start working with sound files The MediaTools program will be very useful for that, so if you havent yet installed it, now would be a good time

50