INFT1004 Visual Programming

Lecture 3 Working with x and y coordinates (Guzdial & Ericson chapter 4)

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

Revision
The = symbol indicates an assignment statement. It takes the value on the right and assigns it to the name (variable) on its left count = 5 sum = sum + number name = Keith" weight = 13.57

Revision
Variables can be of many different types Some are simple types, eg int, float, string - if you print one of these, you get its value

int string float

month = 10 name = Keith" height = 193.57 myPictureFile = pickAFile() myPicture = makePicture(myPictureFile)

5

Revision
Variables can be of many different types Some are simple types, eg int, float, string - if you print one of these, you get its value Others are various types of object, eg file, picture, pixel - if you print one of these, you get its description
int string float file picture

month = 10 name = Keith" height = 193.57 myPictureFile = pickAFile() myPicture = makePicture(myPictureFile)

6

Simple types, value copying

Weve said that the assignment statement assigns the value of whats on the right to the variable thats on the left In fact this is a simplification!
month = birthMonth name = myName height = playersHeight myPictureFile = selectedFile myPicture = myFace
7

Simple types, value copying

If whats on the right is a simple type, its value is indeed given to the variable on the left They remain as two distinct quantities, each with the same value
month = birthMonth name = myName height = playersHeight myPictureFile = selectedFile myPicture = myFace
8

Simple types, value copying

If whats on the right is a simple type, its value is indeed given to the variable on the left They remain as two distinct quantities, each with the same value
birthMonth = 4
before assignment month birthMonth 4

month = birthMonth
after assignment month birthMonth 4 4
9

Simple types, value copying

If whats on the right is a simple type, its value is indeed given to the variable on the left They remain as two distinct quantities, each with the same value
birthMonth = 4
before assignment month birthMonth 4

month = birthMonth
after assignment month birthMonth 4 4
10

Object types, reference copying

If whats on the right is an object type, the variable on the left becomes a name (or another name) for the object on the right

month = birthMonth name = myName height = playersHeight myPictureFile = selectedFile myPicture = myFace
11

Object types, reference copying

If whats on the right is an object type, the variable on the left becomes a name (or another name) for the object on the right Theres still just a single object, which can be referred to in two different ways: it has two references This distinction is sometimes very important!
myPicture = makePicture(face) before assignment myFace myPicture myPicture = myFace after assignment myFace myPicture
12

Object types, reference copying

file1 = pickAFile() pic1 = makePicture(file1) pic2 = pic1 pixel = getPixel(pic2, x, y)

ValueReferenceCopy.py, on Blackboard, illustrates the difference

13

Revision functions
We write functions in the program area, starting them with def If we want to pass arguments into a function, we use corresponding parameters in the function definition Indentation is vital in Python: it tells Python which statements are part of which other statements
def showPicture(filename): myPicture = makePicture(filename) show(myPicture)

14

Revision functions
We can call a function, ie get it to run, by entering its name (and arguments if required) in the command area of JES >>> showPicture(caterpillar.jpg)

15

Revision functions
We can call a function, ie get it to run, by entering its name (and arguments if required) in the command area of JES >>> showPicture(caterpillar.jpg)

We can also call a function from within another function, by including the call in the definition of the other function
def showPicture(filename): myPicture = makePicture(filename) show(myPicture)
16

Revision arrays
An array is a collection of items of the same type, all with the same name, distinguished by having different indexes An array with n items has indexes from 0 to n 1
height 173 166 181 187 192 203 175 index 0 1 2 3 4 5 6
192

n-1

17

Revision arrays
To write an element of an array we write the array name followed by the index in square brackets For example, if an array called height has 25 elements, they range from height[0] to height[24]
height 173 166 181 187 192 203 175 index 0 1 2 3 4 5 6
192

24

18

Revision arrays
Its possible (and incredibly useful) to use a variable as the index: we can then talk about height[i], which means different elements when i has different values
height 173 166 181 187 192 203 175 index 0 1 2 3 4 5 6
192

24

i=3 height[i]

i=4 height[i]

19

Revision loops
The for statement loops (iterates) through all the items in a collection
pixels = getPixels(myPic)

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

pixels

If we use getPixels() to get an array of all the pixels in a picture, we can use for to do the same thing to each of them in turn 20

Revision loops
This is how we can process a whole picture, pixel by pixel range(_,_) is a function that produces another sort of collection We can use for to iterate through the items in a range

21

Important new point sequence

Something we talked about in the first week is the important concept of sequence Programming is like dressing the order you do things can be important!
22

Important new point sequence

If the body of a function or a for statement has, say, 10 statements, they will be executed in the order theyre written Order is often very important the same statements in a different order can do different things (sometimes it may not matter)

23

Important new point sequence

These commands have a slightly different order
1 2

x y x y

= = = =

5 2 x * y x * y

x y y x

= = = =

5 2 x * y x * y

Lets use a technique called desk-checking to compare these:

24

Important new point sequence

1

x 5 2 x * y x * y x

x y x y
2

= = = =

x y y x

= = = =

5 2 x * y x * y
25

Important new point sequence

1

x 5 2 x * y x * y 5

x y x y
2

= = = =

x = = = = 5 2 x * y x * y

x y y x

26

Important new point sequence

1

x 5 2 x * y x * y 5

y 2

x y x y
2

= = = =

x = = = = 5 2 x * y x * y

x y y x

27

Important new point sequence

1

x 5 2 x * y x * y 5

y 2

x y x y
2

= = = =

10

10 = 5 * 2

x = = = = 5 2 x * y x * y

x y y x

28

Important new point sequence

1

x 5 2 x * y x * y 5

y 2

x y x y
2

= = = =

10 20 x y 20 = 10 * 2

x y y x

= = = =

5 2 x * y x * y
29

Important new point sequence

1

x 5 2 x * y x * y 5

y 2

x y x y
2

= = = =

10 20 x y

x y y x

= = = =

5 2 x * y x * y

30

Important new point sequence

1

x 5 2 x * y x * y 5

y 2

x y x y
2

= = = =

10 20 x y 2

x y y x

= = = =

5 2 x * y x * y

31

Important new point sequence

1

x 5 2 x * y x * y 5

y 2

x y x y
2

= = = =

10 20 x y 2 10

x y y x

= = = =

5 2 x * y x * y

5 10 = 5 * 2
32

Important new point sequence

1

x 5 2 x * y x * y 5

y 2

x y x y
2

= = = =

10 20 x y 2 10 50 50 = 5 * 10
33

x y y x

= = = =

5 2 x * y x * y

Important new point sequence

1

x 5 2 x * y x * y 5

y 2

x y x y
2

= = = =

x is 10 y is 20

10 20 x y 2 10 50

The order (sequence of instructions) is important Just swapping two statements here creates very different answers

x y y x

= = = =

5 2 x * y x * y

x is 50 y is 10
34

Learn to Desk-check
x x y x y = = = = 5 2 x * y x * y 5 2 10 20 y

Checking is an xexcellent y way to debug your programs. (Its 5 easy and low tech) x = 5
y = 2 2 It can be a very helpful way to work out y = x * y 10 answers in an Exam! x = x * y 50
35

2 Desk

Pixel coordinates
So long as we want to do the same thing to every pixel in a picture, getPixels() does a fine job (it returns an array of all the pixels) If we want to process just some of the pixels, we need to work with their x and y coordinates y x
0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 24

24

36

Pixel coordinates
x
0 1 2 3 4 5 6 7

width is 25
24

getWidth(picture) will give you the width

0 1 2 3 4 5 6 7

y getHeight(picture) will give you the height

24

height is 25
37

Pixel coordinates
x
The x (horizontal) coordinate starts from 0 at the left and goes to 1 less than getWidth() at the right The y (vertical) coordinate starts from 0 at the top (not the bottom) and goes to 1 less than getHeight() at the bottom
0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7

width is 25
24

24

height is 25
38

Ranges of pixels
Compare these chunks of code, which achieve exactly the same result: for pixel in getPixels(pic): setRed(pixel, getRed(pixel) / 2) for x in range(0, getWidth(pic)): for y in range(0, getHeight(pic)): pixel = getPixel(pic, x, y) setRed(pixel, getRed(pixel) / 2)

39

Nested loops
for x in range(0, getWidth(pic)): for y in range(0, getHeight(pic)): pixel = getPixel(pic, x, y) setRed(pixel, getRed(pixel) / 2) This example has two nested loops, ie one loop inside another (look at the indentation) Think how this works: for each value of the outer loop x is 0 ... getWidth(pic)-1) the program goes through each value of the inner loop y is 0 ... getHeight(pic)-1

40

Nested loops
for x in range(0, getWidth(pic)): for y in range(0, getHeight(pic)): pixel = getPixel(pic, x, y) setRed(pixel, getRed(pixel) / 2)

So if the outer loop has a range of 200, and the inner loop has a range of 400 (picture is 200 pixels wide and 400 high) There will be 80,000 iterations!

41

Nested loops
for x in range(0, getWidth(pic)): for y in range(0, getHeight(pic)): pixel = getPixel(pic, x, y) setRed(pixel, getRed(pixel) / 2)

So if the outer loop has a range of 200, and the inner loop has a range of 400 (picture is 200 pixels wide and 400 high) there will be 80,000 iterations! (200 x 400)

Nested loops are very common in processing pictures, because pictures have two dimensions
42

Try this
Just to see how the nested loops work
for x in range(0, 6): for y in range(0, 11): print (x= + x + ,y= + y + )

43

Different ranges
def centreBlock(pict): midx = getWidth(pict) / 2 midy = getHeight(pict) / 2 for x in range(midx20, midx+20): for y in range(midy20, midy+20): pixel = getPixel(pict, x, y) setColor(pixel, cyan)

centreBlock

44

Different ranges
often we dont want to use the full range of pixels def centreBlock(pict): midx = getWidth(pict) / 2 midy = getHeight(pict) / 2 for x in range(midx20, midx+20): for y in range(midy20, midy+20): pixel = getPixel(pict, x, y) setColor(pixel, cyan)

45

Arithmetic with coordinates

So far, whatever ranges x and y go through, weve just dealt with the (x, y) pixel Some more interesting effects require a little more work with the coordinates

46

Horizontal Reflection

Reflect about the middle of the picture

Horizontal Reflection

Horizontal Reflection
x For a horizontal reflection, we need to copy the colour of the pixel at (x, y) to the pixel at (x, height 1 y) y
height is 16
0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

width is 25
24

Horizontal Reflection
x For a horizontal reflection, we need to copy the colour of the pixel at (x, y) to the pixel at (x, height 1 y) y
height is 16
0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

width is 25
24

pixel(1,2) copied to pixel(1, 16-1-2) = pixel(1,13) pixel(5,5) copied to pixel(5, 16-1-5) = pixel(5,10) pixel(19,1) copied to pixel(19, 16-1-1) = pixel(19,14)

Vertical Reflection

Reflect about the centre of the picture

Vertical Reflection

Vertical Reflection
x
0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 24 25

width is 50
49

height is 8

For a vertical reflection, we need to copy the colour of the pixel at (x, y) to the pixel at (width 1 x, y)

Vertical Reflection
x
0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 24 25

width is 50
49

height is 8

For a vertical reflection, we need to copy the colour of the pixel at (x, y) to the pixel at (width 1 x, y)

pixel(3,1) copied to pixel(50-1-3, 1) = pixel(46,1) pixel(22,5) copied to pixel(50-1-22, 5) = pixel(27,5) pixel(11,7) copied to pixel(50-1-11, 7) = pixel(38,7)

Problem solving
This brings us back to the idea of problem solving! Its not enough to be able to write code; You need to be able to look at the problem, work out how to solve it, and then write the code that implements your solution

55

Problem solving
This brings us back to the idea of problem solving! Its not enough to be able to write code; You need to be able to look at the problem, work out how to solve it, and then write the code that implements your solution

This is not a maths course, but you will need to be able to figure out number relationships like the ones on the previous slide (computers are designed to do maths)
56

Comments in code
Round about now, bits of our programs are reaching the point where we might have trouble reading and understanding them Comments in code are really helpful in this regard A comment in the code begins with the # symbol Python just ignores it; its there for the people who read the program, to help them understand it

57

Comments in code
Even if you understand a program when you write it, you can have trouble understanding it a few weeks later So even if you think youre the only one who will ever read your code, include comments in it

58

What comments to include

In this course we insist on 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!

59

Functions returning things

A function like halveRed() halves the red values of all the pixels in the picture that is its argument halveRed(myPic)

halveRed picture

60

Functions returning things

A function like makePicture() produces a result that can be assigned to a variable myPic = makePicture(myFile)
makePicture

file picture

61

Functions returning things

In the terminology of functions, makePicture() returns a value myPic = makePicture(myFile)
makePicture

file picture

We can get a function to return a value by including a return statement, with the value, as the last statement in the function definition
62

A function that returns a value

def sumTo(n): sum = 0 for i in range(1, n+1): sum = sum + i return sum With this function loaded, sumTo(10), say, will return a value of 55

63

A function that returns a value

def sumTo(n): sum = 0 for i in range(1, n+1): sum = sum + i return sum

That value can then be assigned to a variable or used in other ways z = sumTo(13) print 3 * sumTo(100)
64

A function that returns a value

65

Programs in the book

Armed with what weve done here, the book shows (and explains) programs to . . .
reflect an image about its horizontal centre line

reflect an image about its vertical centre line

reflect just a selected part of an image

66

Programs in the book

When working with these programs, note the benefit of using the setMediaPath() function of JES It tells JES where to start looking for files (so you dont have to supply the whole path) Also, we can then use getMediaPath()as part of a filename in a function (remember set the media path first)

67

Programs in the book

When working with these programs, note the benefit of using the setMediaPath() function of JES It tells JES where to start looking for files (so you dont have to supply the whole path) Also, we can then use getMediaPath()as part of a filename in a function (remember set the media path first) Be aware there are some slight variations in the way file paths are specified in Mac and Windows
C:\ip-book\mediasources\beach.jpg (Windows) Desktop/ip-book/mediasources/beach.jpg (Mac)
68

Copying pictures to new pictures

With the picture manipulation weve done so far, the original picture is changed (not the file that the picture is in, but the picture object that were working with in JES) Sometimes we might want to retain the original and produce an altered copy

original

69

Copying pictures to new pictures

We can start the copy as a blank picture (the examples in the book use 7inx95in.jpg or 640x480.jpg) Then we copy the colour of each pixel from the original to the corresponding pixel in the copy . . . . . . and return the copy

original

blank copy

70

Why copy the colour?

We cant copy the actual pixel, because that pixel is a component of the object that is the original picture Likewise, the copy picture has its own pixels (all of which happen to be white) Remember: object types, reference copying If we write pixel2 = pixel1, we just get two references to the same pixel But if we change the colour of some of those white pixels, by copying the colour of the pixels in the original, we get a copy of the original picture
71

Two sets of coordinates

All of the copying functions in the book keep track of two sets of coordinates: the coordinates of the source pixel being copied from, and the coordinates of the target pixel being copied to
If these were always the same, we could use the same variables for both

pixAx=3 pixAy=2
0 1 2 3 4 5 0 1 2 3 4 5

pixBx=5 pixBy=3

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

picA

picB

72

Two sets of coordinates

But the functions do different sorts of copying, in which the target coordinates arent the same as the source coordinates We use loops to work through the source coordinates, and explicitly calculate the target coordinates
If these were always the same, we could use the same variables for both

pixAx=3 pixAy=2
0 1 2 3 4 5 0 1 2 3 4 5

pixBx=5 pixBy=3

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

picA

picB

73

Programs in the book

Copying to the same position on the target the source and target pixels are the same Copying to a different position on the target every target pixel is further along and further down than the corresponding source pixel Cropping a picture while copying it taking only a selected range of source pixels

74

Programs in the book

Making a rotated copy Copying from pixel(x, y) in the source to pixel(y, x) in the target Copying and scaling down only copy one pixel in two (actually, one in four) Copying and scaling up make four copies of every pixel, in a 2x2 square (though you have to read the detail carefully to realise that thats what its doing)
75

Functions to avoid repeated code

The collage demonstration in the book makes a really important point The first version has a large chunk of code repeated five times with minor variations For the second version, that large chunk of code has been rewritten as a function in its own right, and the collage function just calls that function five times with varying arguments

76

Functions to avoid repeated code

The collage demonstration in the book makes a really important point The first version has a large chunk of code repeated five times with minor variations For the second that largechunk chunkof ofcode code has Whenever youversion, find a significant been rewritten as rewrite a function ina its own right, being repeated, it as function, with and the collage just vary, calls and that replace function the five arguments for function the bits that times with varying repeated chunks arguments with repeated calls to this new function

77