INFT1004 Visual Programming: Programs, Arrays and Iteration (Guzdial & Ericson Chapter 3)

INFT1004 Visual Programming
Lecture 2 Programs, Arrays and Iteration (Guzdial & Ericson chapter 3)
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
Last week we used getPixel() pix = getPixel(myPic, 7, 7)
0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
Revision
Last week we used getPixel() pix = getPixel(myPic, 32, 32) Remember . . . pix is a name that we made up The = symbol indicates an assignment statement, which takes the value on the right and assigns it to the name (variable) on its left
5
Arguments
When we call a JES function, we type its name and a pair of parentheses We might also need to type some values within the parentheses these are called arguments
Arguments
makePicture ( __ )
requires a single argument, a file name
getPixel( __, __, __ )

requires three arguments, a picture name, an x coordinate, and a y coordinate
7
Arguments
If we call a function with the wrong number or types of arguments, JES will tell us weve made an error The error message can be helpful, but you might have to work to understand it.
Names and types

pix = getPixel(myPic, 32, 32)
Every name refers to an item of a particular type pix on the Revision slide is an item of type pixel How do we know? Try >>> print pix
Names and types

Python doesnt understand the English meaning of a name. It doesnt tell the type of an item by its name. It decides the type by whats assigned to it. If we typed pix = 3.13 pix would be a float (because 3.13 is a float)
10
Names and types

Its important to choose names that help us, the readers, know what they refer to The names we make up should be meaningful and informative Personally I would avoid a lot of abbreviation unless names have very short scope (you only need them for a few lines)
11
Working with Colours

Another type of item is color (with the US spelling) Try.. >>> myColor = getColor(pix) >>> print myColor
12

>>> myColor = pickAColor() We can do a lot of things with colours once we understand how colours can be expressed as red, green, and blue values with each value in the range 0 to 255
13

>>> myColor = makeColor(255,255,0) >>> setColor(pix, myColor) >>> explore(myPic) >>> myColor = pickAColor()
14
Colour channels
getRed() find the individual getGreen() channels of a pixel getBlue()
15
Colour channels
getRed() find the individual getGreen() channels of a pixel getBlue() setRed() setGreen() alter the individual setBlue() channels of a pixel
16
Colour channels
getRed() find the individual getGreen() channels of a pixel getBlue() setRed() setGreen() alter the individual setBlue() channels of a pixel >>> >>> >>> >>> setRed(pix, 0) print pix pixGreen = getGreen(pix) print pixGreen
17
Programs in JES
Until now weve entered commands in the command area (interaction area) of JES Now were going to write programs in the program area
program area
command area
This is also called the interactions area
18
Programs in JES
A program consists of one or more functions
def pickAndPlay(): myFile = pickAFile() mySound = makeSound(myFile) play(mySound)
19
Programs in JES
Every function has the following structure

the word def (for define) a name a meaningful and informative name a pair of parentheses, possibly empty, possibly with arguments a colon (indicating that more is to follow) a body the instructions to say what the function should do this must be indented from the def
20
Programs in JES

21
Programs in JES

22
Programs in JES

23
Programs in JES

24
Arguments and parameters

def showPicture(filename): myPicture = makePicture(filename) show(myPicture) As weve seen, some functions take arguments. When we write a function that will take arguments we include parameters to match to each argument. These functions need to be defined to have parameters (some have no parameters) Parameters are part of the signature of the function.
25

def showPicture(filename): myPicture = makePicture(filename) show(myPicture) So, parameters are used to specify the things that a function needs (these are decided by the programmer when they write the function) For example, when somebody wrote the showPicture function, they included a single parameter and they called it filename.
26

A parameter is a name that is used within the function definition to represent the argument (which only gets supplied later)
parameter
def showPicture(filename): myPicture = makePicture(filename) show(myPicture)
27

A parameter is a name that is used within the function definition to represent the argument (which only gets supplied later)
parameter
Then in the body of the function we use the name filename when we want to refer to the parameter
28

argument
parameter
>>> showPicture(caterpillar.jpg) The arguments are expressions provided when the function is called.
29

When we use (call) a function with parameters, we need to include arguments that correspond to each parameter def showPicture(filename): myPicture = makePicture(filename) show(myPicture)
argument parameter
>>> showPicture(caterpillar.jpg)
30
How does that work?

The parameter is a placeholder When writing the function, the programmer needs to say do this with the argument thats passed in But the programmer doesnt know what the argument will be called; it could be myFile, file1, fred, etc
31
How does that work?

So the programmer uses a parameter when writing the function. When the function is called, the parameter (eg filename) becomes another name for the argument (eg caterpillar.jpg); So whatever the programmer said should be done with the parameter (filename) is done with the argument (caterpillar.jpg). def showPicture(filename): myPicture = makePicture(filename) show(myPicture)
argument parameter
>>> makePicture(caterpillar.jpg)
32
Are we ready to write a program?

def yellowLine(picture): pixel = getPixel(picture, setColor(pixel, yellow) pixel = getPixel(picture, setColor(pixel, yellow) pixel = getPixel(picture, setColor(pixel, yellow) pixel = getPixel(picture, setColor(pixel, yellow) pixel = getPixel(picture, setColor(pixel, yellow) 40, 30) 41, 30) 42, 30) 43, 30) 44, 30)
33
A program
Note: yellowLine is defined with one parameter called picture
34
Loading the program

Try yellowLine(myPicture) Note: yellowLine is called here with the argument called myPicture
35
Loading the program

Try yellowLine(myPicture)
The programs written in the program area, but JES cant yet run it
36
Loading the program

First you have to Load the program; this tells JES to take note of any functions defined in the program and be ready to use them And before you load the program you must save it!
37
Loading the program

Choose a sensible location Give the program a sensible name Give the name a .py extension
38
Loading the program

>>> yellowLine(myPicture) >>> explore(myPicture)
39
Iteration
That was a lot of code just to turn five pixels yellow One of the most powerful aspects of programming is the ability to tell the program to repeat the same thing over and over, with minor variations This is called iteration Were going to see how to alter large numbers of pixels with less code than we used in yellowLine() But first we need to know about arrays
40
Arrays
An array is a collection of items all of which have the same name but each of which has a different index, an identifying number
height 173 166 181 187 192 203 175 index 0 1 2 3 4 5 6
Note: the first element has index 0, the second has index 1,
41
Arrays
An array is a collection of items all of which have the same name but each of which has a different index, an identifying number
height 173 166 181 187 192 203 175
height[0] height[3]
If i has the value 6, this is height[i]

42
getPixel() gives us a pixel

getPixel() gives us a single pixel from a picture
pix = getPixel(myPic, 3, 2)
pix
0 1 2 3 4 5 0 1 2 3 4 5
43
getPixels() gives us an array

getPixels() gives us an array containing every pixel from the picture!
pixels = getPixels(myPic)
0 1 2 3 4 5 0 1 2 3 4 5
pixels
44
getPixels() gives us an array

getPixels() gives us an array containing every pixel from the picture!
pixels = getPixels(myPic)
0 3 15 35
0 1 2 3 4 5 0 1 2 3 4 5
pixels
This is one you probably dont want to print, unless youre very patient (Though you could try it on a small picture, say 150x150)
45
Range
Range is an interesting function that gives us all the values in the range we specify (sort of) >>> print range(1, 10) >>> print range(1, 100)
46
Range
In fact, as you see, it gives us all the integer values from the first one (inclusive) to the last one (exclusive) That is, it gives us all the values from the first to one less than the last.
There is a good reason for this, but its tricky, so for now its easiest just to accept it
47
The for statement

The for statement is a powerful iteration statement for pixel in getPixels(picture): value = getRed(pixel) setRed(pixel, value * 0.5)
48
The for statement

The for statement is a powerful iteration statement for pixel in getPixels(picture): value = getRed(pixel) setRed(pixel, value * 0.5) It takes the form: the word for a variable name the word in some collection of things a colon the body (indented)
49
The for statement

50
The for statement

51
The for statement

52
The for statement

53
The for statement

54
What the for statement does

The for statement basically does its body for every single one of the values in the collection That is . . .
it assigns the variable to the first value and does the body then it assigns the variable to the next value and does the body then it assigns the variable to the next value and does the body and so on until its done the body for every value in the collection
for pixel in getPixels(picture): value = getRed(pixel) setRed(pixel, value * 0.5)

55
Checking the for statement

Try this function def showSquares(n): for i in range(1, n+1): print i, i*i
Note the increasing indentation . . . the body of the function must be indented from the def the body of the for statement must be indented from the for
56

def showSquares(n): for i in range(1, n+1): print i, i*i
Try not indenting the body and see if you can explain what seems to be a strange error message
57

Try this function def showSquares(n): for i in range(1, n+1): print i, i*i colon
In general, a colon signals that indentation will follow
58
Iteration within the picture

Now were ready to try altering lots of pixels with not much code; try this . . . def cyanBlock(picture): pixels = getPixels(picture) for i in range(10000, 20000): setColor(pixels[i], cyan)
59
Iteration within the picture

Now were ready to try altering lots of pixels with not much code; try this . . . def cyanBlock(picture): pixels = getPixels(picture) for i in range(10000, 20000): setColor(pixels[i], cyan) See how the combination of arrays, range(), and iteration allow us to change lots of pixels with just a few lines of code
60
Explore, show, and repaint

explore() is useful when we want to examine individual pixels of a picture, but it can be annoying that it opens a new window every time we call it - Instead try >>> show(myPic) >>> repaint(myPic)
61
Explore, show, and repaint

explore() is useful when we want to examine individual pixels of a picture, but it can be annoying that it opens a new window every time we call it - Instead try >>> show(myPic) >>> repaint(myPic)
Even show(myPic) has a strange quirk: it sometimes seems to show a previous version of the picture. So maybe we should just stick with repaint() unless we particularly want to use the features of explore()
62
Reminders from JES

Losing track of all the names youve used? Type showVars()in the command area This can sometimes be very helpful
63
Reminders from JES

Forgetting just how a function is meant to be used? 1. Click on it in the program area and then 2. Click on the Explain button in the lower right
64
Reminders from JES

Note that this only works for inbuilt functions, and only when theyre in the program area
65
Saving altered pictures

Want to save a copy of a picture youve altered? >>> writePictureTo(myPic, "newfile.jpg") This will save the new file in the same directory that you picked the old file from
66
An array is a collection
Weve used for to visit every number in a range But a range is only one kind of collection An array is another kind of collection.
67
An array is a collection
If we use for with an array of pixels, it will visit every pixel in the array pixels = getPixels(myPic) for pixel in pixels: <do something to pixel> This is what well now do as we manipulate pictures in various ways
68
Halving a colour
def halveRed(picture): pixels = getPixels(picture) for pixel in pixels: redVal = getRed(pixel) setRed(pixel, redVal / 2) This gives every pixel in the picture a new red value thats half the red value it had before (It doesnt alter the values in the green or blue channels)
halveRed
barbara.jpg
69
Doubling a colour
def doubleGreen(picture): pixels = getPixels(picture) for pixel in pixels: greenVal = getGreen(pixel) setGreen(pixel, greenVal * 2) This gives every pixel in the picture a new green value thats double the green value it had before (It doesnt alter the values in the red or blue channels)
doubleGreen
barbara.jpg
70
Doubling a colour
Remember a color has a maximum value of 255 200 * 2 = 400 ???
71
Doubling a colour
Remember a color has a maximum value of 255 400 modulo 255 = 145 200 * 2 = 400 ??? max 255 = 255
72
Doubling a colour
Remember a color has a maximum value of 255 400 modulo 255 = 145 200 * 2 = 400 ??? max 255 = 255 What really happens actually depends on how the options are set - either to wrap colours (modulo) or not see Edit/Options & modulo.
73
Adjusting a colour
def adjustBlue(picture, amount): pixels = getPixels(picture) for pixel in pixels: blueVal = getBlue(pixel) setBlue(pixel, blueVal * amount) This gives every pixel in the picture a new blue value thats amount times the blue value it had before It can be used to increase (amount > 1) or decrease (amount < 1) blue values, depending on the value of amount (and how the Modulo option is set)
74
Always be aware of types

If you're to understand the programs in the lectures and the book, one of the things you must stay on top of is the type of each object.
75

In the methods we've just looked at, picture is a picture object (not, for example, a file object) pixels is a collection, the collection of all the pixels in the picture pixel is an individual pixel; but each time through the loop it's a different pixel greenVal, redVal, and blueVal are integers
76

In the methods we've just looked at, picture is a picture object (not, for example, a file object)
Always be sure you know the type of every item! pixels is a collection, the collection of all the
pixels in the picture
pixel is an individual pixel; but each time through the loop it's a different pixel greenVal, redVal, and blueVal are integers
77
Negative
Some of you might be familiar with photographic negatives, although they dont exist in digital photography The negative has colours the exact opposite of the normal picture
78
Negative
In RGB terms, the opposite of a colour is 255 minus that colour in each of the three channels To make a negative, set the red to 255 minus what it was set the green to 255 minus what it was set the blue to 255 minus what it was >>> negRed = 255 currentRed >>> negGreen = 255 currentGreen >>> negBlue = 255 - currentBlue
79
Function to negate a picture

def negate(picture): pixels = getPixels(picture) for pixel in pixels: setRed(pixel, 255 getRed(pixel)) setGreen(pixel,255 getGreen(pixel)) setBlue(pixel, 255 getBlue(pixel))
Unlike the doubling, this one wont have colour values wrapping around. Why not?
80
Using functions well

Every function should have just one purpose and do just one thing! If you want a function to do several things, each of which is clearly defined . . . 1. write a function for each of those things 2. then write another function that calls each of them in turn
See the sunset() function in the text This is called 'functional decomposition' . . . taking the task to be done and decomposing it into subtasks, each in its own function
81
Greyscale
In RGB terms, black, grey, and white all have one thing in common equal red, green, and blue values
red = 0 green = 0 blue = 0
red = 60 green = 60 blue = 60
red = 120 green = 120 blue = 120
red = 180 green = 180 blue = 180
red = 255 green = 255 blue = 255
82
Greyscale
To turn a colour picture into a greyscale picture, we need to set red, green, and blue to the average of their original values (add up red, green, blue and divide by 3)
greyVal = (getRed(pixel) + getGreen(pixel) + getBlue(pixel))/3 setRed(pixel, greyVal) setGreen(pixel, greyVal) setBlue(pixel, greyVal)
All this, of course, in a loop in a function so that each pixel in the image is changed.
83
Whats not in this lecture

Guzdial & Ericson go into a lot of detail explaining colour, vision, perception, and related topics Those explanations will really help you to understand why some of these functions work the way they do In this lecture weve concentrated on the programming aspects of the chapter But the extra explanation in the chapter will put the programming into a perspective where it makes sense from the point of view of understanding images and how to manipulate them In other words read the chapter!
84

INFT1004 Visual Programming: Programs, Arrays and Iteration (Guzdial & Ericson Chapter 3)

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

INFT1004 Visual Programming: Programs, Arrays and Iteration (Guzdial & Ericson Chapter 3)

Загружено:

Авторское право:

Доступные форматы

INFT1004 Visual Programming

Lecture 2 Programs, Arrays and Iteration (Guzdial & Ericson chapter 3)

INFT1004 - SEMESTER 1 - 2012

Mid Year Examination Period

getPixel( __, __, __ )

Names and types

Names and types

Names and types

Working with Colours

Working with Colours

Working with Colours

This is also called the interactions area

Every function has the following structure

Every function has the following structure

Every function has the following structure

Every function has the following structure

Every function has the following structure

Arguments and parameters

Arguments and parameters

Arguments and parameters

def showPicture(filename): myPicture = makePicture(filename) show(myPicture)

Arguments and parameters

def showPicture(filename): myPicture = makePicture(filename) show(myPicture)

Arguments and parameters

def showPicture(filename): myPicture = makePicture(filename) show(myPicture)

Arguments and parameters

How does that work?

How does that work?

Are we ready to write a program?

Note: yellowLine is defined with one parameter called picture

Loading the program

Loading the program

Loading the program

Loading the program

Loading the program

height 173 166 181 187 192 203 175 index 0 1 2 3 4 5 6

height 173 166 181 187 192 203 175

If i has the value 6, this is height[i]

getPixel() gives us a pixel

getPixels() gives us an array

getPixels() gives us an array

The for statement

The for statement

The for statement

The for statement

The for statement

The for statement

The for statement

What the for statement does

for pixel in getPixels(picture): value = getRed(pixel) setRed(pixel, value * 0.5)

Checking the for statement

Checking the for statement

Checking the for statement

In general, a colon signals that indentation will follow

Iteration within the picture

Iteration within the picture

Explore, show, and repaint

Explore, show, and repaint

Reminders from JES

Reminders from JES

Reminders from JES

Saving altered pictures

getPixel( , , __ )