CS101: Introduction to Computers and Computing
CS101: Introduction to Computers and Computing

Lab 12: Programming Lab 5: Editing Pictures With Python Functions

There are 3 parts to this lab:

Part 1: Boot computer into Ubuntu operating system, printout grade sheet, and create folder.

Part 2:  Review the use of print command, variables, and functions using the Jython programming language.

Part 3: Use Jython programming language to create new functions to open and edit pictures.

Part 4: Check all tasks are complete, email assignment to instructor and self, shut down computer, and staple together and turn in grade sheet and code printouts.

Lab Directions:
Part 1: Boot computer into Ubuntu operating system and printout grade sheet.
When you first start your computer it will be running the MacOS operating system and your screen will look like this:

Current Desktop

For our project we will be using the Ubuntu operating system running in a virtualization environment called VMware Fusion.  In a moment we will be starting the VMware Fusion software.  Once VMware Fusion starts running your screen will look like this:

Ubuntu in pause mode.

To unsuspend Ubuntu just click the white arrow in the middle of the screen. Once Ubuntu is
unsuspend then on the left side of the screen click on the Firefox web browser icon as shown below ...

Click the Firefox icon.

... and once the web browser is running reopen these directions.

To start the software running click on the dock icon called VMware Fusion shown below:


Fusion Icon


Once your computer is running Ubuntu and you have opened today's lab directions in Firefox your screen should similar to the one below:

Drag the
                    lab directions window to the right side of the                    Desktop.

To setup your computer to work more efficiently drag the directions to right side of the screen as shown below:

move directions to
                    right side of screen

For this lab, and each of the remaining labs that require you to complete a project, there will be a grade sheet.  The grade sheet informs you of the tasks you are required to complete in that day's lab and how many points each of the tasks are worth towards the 100 points available for the project.

You are about to download and open the
Python2GradeSheet.xls spreadsheet file using LibreOffice Calc.  When it opens in Calc your screen will look like this:

 Type your
                    name in cell B1 and lab section number in celll f1.

To download today's grade sheet click on the following link: 


In the now open spreadsheet click in cell B1, type your name, and press return on your keyboard.  Next click in cell F1, type your lab section number, and press the return key on your keyboard.   The spreadsheet should now contain your name and lab section number similar to the spreadsheet below:

Type your name in cell
                    B1 and lab section number in celll f1.

Now click once on the grade sheet window to make Calc the active program. 
At the top of the Calc window  select File menu > Print as shown below...

file
                    menu print

... to open the following dialog box:


print box


Select either the By Cabinet or the By Door printer and then click on the OK button.

Now walk up to the printer you selected and place one piece of paper at a time into the manual feed tray and retrieve your printout of the grade sheet.

Close the grade sheet by clicking the red close window button in the upper left corner of the window as shown below...

click red button

... and when the following dialog box appears...

click the don't save
                    button


... select Close without saving.


Your screen should now look like this:

Drag the lab
                      directions window to the right side of the                      Desktop.

Look over grade sheet printout to find the requirements for today's lab.  If you have any questions about the grading ask your instructor. Later in lab we will need to save several items that need to turned in for grading so we will need to create a folder on the desktop.  Right click on the Desktop next to the Firefox icon on the Launcher and from the menu that appears select New Folder as shown below to create a folder on the Ubuntu desktop:

Create a folder on the
                    desktop by right clicking.

A new untitled folder will appear on the desktop as shown below:

new untitled folder on
                    desktop

Ubuntu computers make new folders with the name untitled folder.  Since untitled folder is already highlighted you can replace untitled folder with the name you desire by just starting to type the new name (if your folders name accidentally becomes not highlighted just right click on the the folder and select Rename).  Use the following format for naming the folder: 

lastname_firstinitial_python2

(i.e. John Smith would call his folder smith_j_python2)


When done your folder should look like this (with of course your own name):

Folder named first name
                    last name first intial.

When done your computer screen should look similar to this:

just directions


Part 2:  Review the use of print command, variables, and functions using the Jython programming language.
In our last programming lab we used a version of Python called Jython to create our first function (program).  Jython is designed to make learning the Python language easier and to allow creation of programs that use multimedia such as sounds, photos, and movies.  In today's lab we are going to create functions that can be used to edit pictures taken with a digital camera. 

To start the Jython programming environment, find the following icon on the Dock at the bottom of the screen...

python icon

... and click once.

Once JES starts running it will look like this:

jes start screen

Move and re-size your windows so your screen looks like this:

jes window moved into place

Remember that the JES window is divided into two areas.  The top part is the Program Area. This area is simply a text editor where you create your programs. The bottom part is the Command Area where you can issue commands for the computer to follow.

In our first Jython programming lab we learned the following very important and powerful programming concept:

A VALUE STORED IN A VARIABLE CAN BE USED BY ANOTHER FUNCTION AS ITS INPUT VALUE (PARAMETER)!

Let's review how we learned this important concept. 

At the beginning of the previous Jython lab we learned to use the print command.  The print command tells Jython to display what follows the command.  For instance, the print command...

print
                statement

...will display the value of 9 as shown below:

output

We also learned that along with being able to display numeric values, the print command can also display text strings.  Text strings are just characters enclosed in quotes as shown below:

text string

For review let's practice some print statements by writing the output from the following print commands on your grade sheet:

Question 1: print 4 / 2 * 5 + 3
Question 2: print 6 + 7 * 3 * 4
Question 3: print 'bob' + 'sue'
Question 4: print 'bob + sue'


In the last programming lab we then learned how to store values in the computers memory using variables.  For example, the following command...

create a
                variable

...will create a place in the computers memory called x and store the value of 9 at that location.  We can verify that the value is stored in the computers memory at the location called x by typing the command print x and observing the output as shown below:

x = 9

Let's practice creating and using variables by entering the following commands and writing their output on your grade sheet:

Question 5:
x = 8
print x

Question 6:
x = 6
print x + 4

Question 7:
a = 4
b = 7
print a * 2 + b

Question 8:
inputNumber1 = 4
inputNumber2 = 7
print inputNumber1 * 2 + inputNumber2

Question 9:
a = 'bob'
b = 'sue'
print a+b

Question 10:
name1 = 'bob'
name2 = 'sue'
print name1+name2

In the last programming lab we also learned how to call (run) some of Jython's built-in functions (programs).  We first called the square root function with the following command:

sqrt
                function

We also learned that when a function in Jython is called, it expects an input value and creates an output value.  The input value to a function can also be called a parameter and is always surrounded by parentheses.

For instance, the square root function takes in the value of a number and returns the value of the square root of the number.  In the following square root function call, the input value (parameter) is 4...

sqrt
                function

  ...and the output value is 2 as shown below:

the output 

This is when we learned our very important concept of:

A VALUE STORED IN A VARIABLE CAN BE USED BY ANOTHER FUNCTION AS ITS INPUT VALUE (PARAMETER)!

To review this concept, let's try storing the value of 16 in a variable and then using the variable's name as the input value (parameter) for the square root function.  At the command prompt enter the following command:

set number
                to 16

Jython just created a place in the computer's memory called number and stored the value of 16 in that location.    Let's see if the square root function can access this value as its input value (parameter) with the following command:

number to
                square root

You should see the following output returned from the square root function:

output from
                function

Since we had already stored the value 16 in the computers memory at the location named number, the square root function accessed this location and used the value stored there (16) as the input value (parameter).

Let's practice storing values in variable's and then using the stored values as the input value (parameter) for Jython's built-in square root function.  After you entered the following commands, write the output on your grade sheet:

Important Note: Due to the way computers process numbers with decimal points, these type of numbers are referred to as 'floating point numbers'.  Some of the output values below will be floating point numbers.  You can round the floating point numbers to four decimal places when writing them on your grade sheet.

Question 11:

x = 8
print sqrt(x)

Question 12:
inputInteger = 6
print sqrt(inputInteger)

Question 13:
a = 4
b = a * 3
print sqrt(b)

Question 14:
inputNumber1 = 4
inputNumber2 = 7
x =  inputNumber1 * 2 + inputNumber2
print sqrt(x)

Question 15:
a = 'bob'
print sqrt(a)
(On your grade sheet explain why we got an error with the above commands)

Question 16:
inputInteger = 10
inputInteger = inputInteger + 10
print sqrt(inputInteger)

In our last lab after we learned the concept of...

A VALUE STORED IN A VARIABLE CAN BE USED BY ANOTHER FUNCTION AS ITS INPUT VALUE (PARAMETER)!

...we created our own function to demonstrate the concept.  For review purposes we will now recreate that function.

If you recall a function is a set of commands that Jython will execute when called.  At the end of our first Jython lab we created a function called calculateSquareRoot.  Follow the steps below to create the function and run the function:

Step 1) In the Program Area recreate the calculateSquareRoot function by typing in the following:

delete the s

Once you have typed in the function we will need to call the function in order for it to run.

Step 2) We need to save the program to disk.  Select File menu > Save Program as shown below:

resave your code

When the Save dialog box opens it will look like this...

save 2

...double click on the Desktop folder to display the contents in the dialog box as shown below...

save dialog box

...and then double click on your folder, so that your Save dialog box looks similar to this:

desktop

Lastly, at the top of the Save dialog box type in the following name...

lastname_firstinitial_functions
(For example John Smith would use the name: smith_j_functions)

... and now your Save dialog box should look similar this:

save 1

... and then click on the Save button.

Step 3) We need to load the program into the computer's memory.  In the gray area separating the Program Area from the Command Area click once on the Load Program button as shown below:

click the
                    load button

A message in the Command Area should inform you that the program is now loading into the computer's memory as shown below:

program loaded

Step 4) We need to call (run) our function.  In the Command Area type the following command to call our new calculateSquareRoot function...

type
                command

... and press the return key.

(If you get an error you will need to correct the error, re-save, and reload your function before you reissue the function call)

Pressing the return key issues the call command and the calculateSquareRoot function starts to run. 

When the Input dialog window appears, enter 4 and click OK as shown below:

enter 5 into box

Since you input the value of 4 the calculateSquareRoot function should return 2 as its output value as shown below:

output

The following diagram summarizes how our calculateSquareRoot function works:

update

This also means that our our really big concept of...

A VALUE STORED IN A VARIABLE LOCATION CAN BE USED BY ANOTHER FUNCTION AS ITS INPUT VALUE (PARAMETER)!

...can now be augmented with the following information...

A VALUE output by the function requestInteger was STORED IN A VARIABLE LOCATION called integerInput and CAN BE USED BY ANOTHER  FUNCTION called sqrt AS ITS INPUT VALUE (PARAMETER)!

Part 3: Use Jython programming language to create new functions to open and edit photos.
We can now use this important programming concept in the rest of today's lab to help us create functions that can open and edit photos.

First we will need a photo.  We will now use the computer's built in camera to take a photo of yourself.

At the left side of your screen locate the Cheese Webcam Booth icon as shown below...

textedit icon


... and click on the icon to open Cheese Webcam Booth.

The following window will appear showing a live shot of what the built in camera at the top of the computer is currently viewing as shown below:

photo booth window

In the middle of the window, below the image of your, click once on the box with the words Take a Photo...

click on take a photo

.... to snap a photo of yourself. Your photo will appear at the bottom of the Photo Booth window (you can take more then one photo until you have one you like).  Like in the example below of Augusta Ada King, Countess of Lovelace, who is often credited by computer historians as the worlds first computer programmer as she worked on the analytical engine with Charles Baggage in the 1830's and 1840;s.

 normal photo

Find the photo you like best, right click on the photo and select Save As... as shown below:

drag photo to desktop

When the window appear first change the name to photo.jpg as shown below...

name
                  it photo.jpg

... and then select Desktop as the place to save the photo by double clicking on the Desktop icon and once your screen looks the similar to the one below....

click on
                  save

... before you click on Save.

Click once on the red button in the upper left corner of the Cheese Webcam Booth window to exit the application. Your screen should now look similar to the one below (if your photo is not on the Desktop ask your instructor for help):

quit photo booth


IMPORTANT NOTE: JYTHON REFERS TO PHOTOS AS PICTURES.  IN THE FOLLOWING DIRECTIONS YOUR PHOTO WILL BE REFERRED TO AS BOTH A PHOTO AND A PICTURE.

Now that we have our photo we will need to use 3 of Jython's built-in functions to open and display the new photo.  We will be able to accomplished this task through the use of the concept...

A VALUE STORED IN A VARIABLE LOCATION CAN BE USED BY ANOTHER FUNCTION AS ITS INPUT VALUE (PARAMETER)!

If we look at the 3 commands we will be using to open our picture we can see how twice we passed values stored in a variable as the input value to the next function:

passed values

Let's now use this 3 command sequence to open our photo using Jython.  Let's first select our file on the disk and store its location in a variable called chosenFile by typing the following command...

create
                variable

...and then pressing the return key.

When the Pick A File dialog box opens as shown below...

pick a file dialog box

...double click on the Desktop folder to open and reveal its contents and then click once on the file called photo.jpg...

select your photo

  ...and then click on Open.

The second function we will use to open your photo knows how to take a file containing a picture and actually construct a picture.  This function needs to be passed an input value (parameter).  In order for the makePicture function to be able to construct the picture it needs to know where the picture is stored as a file.  Fortunately, we just stored this information in the variable chosenFile.  This means we can easily have the function makePicture access the variable called chosenFile by typing the following command...

type
                command

... and pressing the return key.

We should now have the picture generated by the function makePicture stored in the variable picture.  To actually see the picture displayed we need to pass this information to the show function.  We can do this by typing in the following command...

show
                picture

... and pressing the return key. 

Your picture should now open in its own window like the one below:

picture displayed

Close the picture by clicking the red button in the upper left corner.

Now that we know the commands to open and display our picture we can start creating a function to edit the picture.  However, in order to successfully create the function we need to learn a bit about computer graphics.

When Photo Booth snapped your picture it stored the ones and zeros it used to represent your photo in a JPEG file. JPEG stands for Joint Photograph Expert Group.  The JPEG file format is an international standard for how to store images with high quality but take up little space when stored.  We renamed the file photo.jpg because JPEG files on the computer always end with the file extension .jpg 

As we learned in lecture when you look at a computer screen (like the one you are using in lab today) you are actually viewing many very small colored squares.  These colored squares are called 'pixels', which is short for 'picture element'.  The computer places so many of these very small pixels on the screen that your eye just blends all of them together as one big picture.  Therefore, the color of each of these squares on the screen determines what is displayed on the screen. 

Each pixel on a screen has the ability to produce three colors: red, green, and blue.  We call this the RGB color model.  To make a pixel pure red the computer just activates the red part of the pixel.  The computer can also just activate the green or blue parts of the pixel to make a pixel pure green or pure blue. 

How does a computer make a pixel colors that are not pure red, green, or blue?  To make a pixel some color other then red, green, or blue the pixel 'mixes' its red, green, and blue colors together as needed. Technically, the pixel cannot actually mix the colors together.  A pixel relies on your eye to do the mixing.  For instance, if a pixel needs to be purple it will turn on both its red and blue elements.  These red and blue elements are so small your eye cannot see them individually.  Instead, your eye will mix the red and blue elements together and perceive the pixel to be purple.

When the computer stored your photo as a JPEG file it actually stored what color to make all the pixels it captured.  To see the information about each pixel in your photo Jython actually has tools you can use to explore your photo.  To do this we need to call the explore function.   The explore function needs as its input value the picture the computer created earlier with the makePicture function.  Good thing we stored this information in the computer's memory at the variable location called picture.  To explore our picture, type the following in the Command Area...

explorer
                photo

...and when you press the return key the following window should open:

explore window

When the built-in camera on the computer took your picture it captured a resolution of 640 x 480.  Resolution refers to how many pixels make up your picture.  A resolution of 640 x 480 means your picture is 640 pixels wide and 480 pixels high as shown below:

resolution of picture

When you know the resolution of your photo, you can figure out how many total pixels are in your picture by multiplying the number of pixels your picture is wide by the number of pixels your picture is high.  In the case of our photo you can times 640 x 480 to calculate that the picture has a total of 307,200 pixels.  Our picture has that many pixels and it is still considered a low resolution photo.

You can also refer to individual pixels in your picture by referring to the pixels across your picture as the x-axis and the pixels down your picture as the y-axis as shown below:

x y axis

If you look at the top of your photo open in the explorer window you can see the X and Y boxes as shown below:

x y plot

When your photo opens the X and Y coordinates at the top of the window are both set to zero as shown below:

x y plot

This means to find the pixel at 0 on the x-axis you would start with the pixel in the top left corner of your photo and count over 0 pixels.  To find the pixel at 0 on the y-axis you would start with the pixel in the top left corner of your photo and count down 0 pixels.  This means that when X and Y are both set to zero it is referring to the pixel in the top left corner of your picture.  If you click somewhere in your picture it will tell you on which pixel you have clicked.  For example, in the picture below notice that the X box has the value of 124 and the Y box has the value of 191.  This means the user has clicked on the pixel located 124 pixels from the top of the picture on the x-axis, and 191 pixels from the left side of the picture on the y-axis as shown below:

x and y coordinates

We mentioned earlier that each pixel in your picture is a mixture of red, blue, and green colors.  The explorer window will let you see the red, green, and blue values for the pixel you have selected.  Each pixel has a value for each of the three colors between 0 and 255.  A pixel that had a value of 0 for red would have absolutely no red in the pixel.  If a pixel had a value of 255 for red the pixel would contain the most red a pixel could possible possess.  Right under the X Y boxes you can see the value of red, green, and blue for the pixel you have currently selected and the color those values produce when you eye 'mixes' the three colors together as shown below for the pixel at x = 124 and y = 191:

pixel color values

Armed with the above information about JPEG pictures we can now figure out what the computer stores in the JPEG file it created when you took your photo.  When your photo is displayed on screen you are really looking at a bunch of pixels.  Each pixel in your picture needs to know 3 color values:

1) How much should it activate the red element of the pixel between the values of 0 to 255.
2) How much should it activate the green element of the pixel between the values of 0 to 255.
3) How much should it activate the blue element of the pixel between the values of 0 to 255.

This means we could change a picture by changing values of red, green, and blue of its pixels.  Let's give it a try.

In the window that we are currently using to explore our picture enter 0 for both the x and y coordinates as shown below:

set both x and y to
                  zero

Now make a mental note of the RGB values for the pixel in your own photo located at coordinates (0,0).  For example, the RGB values for the pixel located at location (0,0) for our example picture are R:108 G:95 B:89 as shown below and highlighted by a red box for these directions (of course the RGB values for the pixel in your photo at coordinates (0,0) will be different then our example photo):

rgb values

If we could change the red, green, and blue color values all to zero, our pixel would list the values as R:0 G:0 B:0.  It turns out that a pixel with a color value of R:0 G:0 B:0 would have no red, no green, or no blue in the pixel.  A pixel with no color turns out to be a black pixel.  Let's turn our pixel located at coordinates (0,0) to black by changing the color values to R:0 G:0 B:0

In order to change the color values of our pixel we need access to the those values.  We can get access to those values by placing each pixel's information from your photo into an array.  An array is a new programming concept.  An array is just a list of data with positions assigned.

In order to change a pixel's color in our picture we need to ask the computer to create an array that contains the red, green, and blue values for each pixel in our picture.  Since the picture has 307,200 pixels it will be a long list to write, but a computer can do it very quickly.  The computer will create the array by reading each pixel's color values starting with the pixel in top left corner of the picture.   The color values for this pixel will be stored in the [0] location of the array as shown below:

[0] = R:108 G:95 B:89

After it places the color values for the first pixel of our picture in the first location of the array the computer will then continue reading values for pixels along the whole first row of the picture.  The computer will continue by getting the color values of the first pixel in the second row of your picture.  The computer will continue reading each row pixels into the array until it gets to the color values for the last pixel in the lower right hand corner of the picture.  Earlier we calculated that your photo contained 307,200 pixels.  This means that the color values of pixel 307,200 will be placed into the array at location [307,199] as shown below:

[0] = R:108 G:95 B:89
[1] = R:134 G:121 B:178
[2] = R:189 G:178 B:234
[3] = R:243 G:183 B:12
[4] = R:73   G:216 B:145
[5] = R:13   G:147 B:171
[6] = R:134 G:116 B:23
.
.
.
.
[307,197] = R:133 G:14   B:92
[307,198] = R:254 G:137 B:158
[307,199] = R:143 G:116 B:172

Let's now have the computer create the array we just described.   The array we going to create is a list of all the photo's pixels color values.  Values can be stored at a named location in the computer's memory as a variable.  This means we can store our array in a variable location called pixels.  To do this we will call on one of Jython's built-in functions called getPixels. When we call the getPixels function we will have as its input value (parameter) our picture currently stored in the variable location called picture.  To accomplish this task type in the following command...

type
                command

... and press the return key.

We should now have your photo's pixels color values in the array.  The array should be stored in the variable location called pixels.  Let's use a few commands to check the array actually exists with the correct values in the correct locations.  The [0] location in our array should contain the color values for the first pixel in our picture.  The first pixel in our picture is at the x y coordinates of (0,0).  We currently have our picture open in Jython's explorer window and we have the x y coordinates set to (0,0).  Make the explorer window active and make a mental note of the RGB values for the pixel located at coordinates (0,0) so we can see if they indeed change.  For example, the RGB values for the pixel located at location (0,0) for our example picture are R:108 G:95 B:89 as shown below and highlighted by a red box for these directions:

rgb values

These values should be at location [0] in our new array stored at the location called pixels.  To check this is the case type the following command to ask Jython to display the color values stored at location [0] in the pixels array (make sure to use brackets and NOT parentheses)...

check
                location [0]

...and when you press the return key you should see output displaying the exact RGB values as the first pixel of your photo.  Below are the values for location [0] in our pixels array:

rgb values of first
                pixel

Notice that the RGB values stored in the [0] location of the pixels array rgb valuesare an exact match of the values listed in the example explorer picture shown below and highlighted in red for these directions:

rgb values

This is proof that our array contains the color values for each pixel of our picture. 

Now that we have the color values for each pixel in our picture in an array stored at the location called pixels we can get back to work on our original goal.  Our goal was to turn the pixel located at coordinates (0,0) to black by changing the color values of the pixel to R:0 G:0 B:0 (remember that no red, green, or blue in a pixel will result in a black pixel). It turns out that Jython has a built-in function that will make this task very easy.  The function's name is setColor.  Let's call the setColor function by typing the following command...

setColor
                function

...and the pressing the return key.  To check if the command worked we can tell Jython to show us the values now stored at location [0] on the pixels array by typing...

print
                pixels

...and after pressing the return key the following output should be displayed:

output of
                0,0,0

Let's see if the change in the array values at location [0] has had any effect on our picture.  Make the window that you are using to explore your picture active and see if the RGB values have changed for the pixel located at x y coordinates (0,0).  You will be disappointed to find the values have not changed as shown in the example picture below and highlighted in red for these direction:

rgb values

Why doesn't the pixel have the values R:0 G:0 B:0?  The reason we cannot see the new values at x y location (0.0) is because the picture currently open in the explore window was created before we changed the values in the array.  All we need to do to see the new values is to close the picture by clicking the red button in the upper left corner and then typing the following command to reopen our photo in the explore window:

explorer
                photo

When the picture reopens in the explore window the pixel located at x y coordinates (0'0) should now have RGB values of R:0 G:0 B:0 as shown below and highlighted red for these directions:

the new values

Close the explore window by clicking the red button in the upper left corner.

The function we used to change the first pixel to black was setColor function.  This function call is a bit different then any function call we have used so far because it has two input values, input 1 and black, separated by a comma as shown below:

setColor
                function

It turns out that functions can have many values passed to them as input. 

The problem is that our new black pixel is very small and hard to see.  Let's try changing the first 10 pixels in our photo to black by changing the first 10 values in the array called pixels to R:0 B:0 G:0.   We can do this buy entering the following nine commands (keep in mind that by hitting your up arrow on the keyboard will bring up all the commands you have used so far starting with the most recent.  That means, after you have entered the first command hit the up arrow to bring it back up and edit it to the second command to save a bunch of typing):

10 commands

Let's reopen our picture by typing the following command again...

explorer
                photo

... and then pressing the return key.  Even after turning the first ten pixels black it is still hard to see them in the explorer window.  This demonstrates just how small the individual pixels really are in the picture.  Fortunately, the explore window has a zoom function that can help us.  With the explore window active, and the x y coordinates still set to (0,0), click on the Zoom menu and select 500% as shown below:

zoom to 500%

You should now see your 10 black pixels in the upper corner as shown below:

10 black pixels

Close the explore window by clicking the red button in the upper left corner.

Let's save a copy of our photo.  To save our photo to disk we will need to use another one of Jython's built- in functions.  The function that knows how to save our file to disk is the writePictureTo function.  It is another function that has two input values.  The first value the function needs is the contents of the computer's memory you would like to save.  The second input value is the file path to where you would like the information saved.  Here is the command to enter:

writeto command

After the command is issued the following file should now be on your Desktop:

new file

We used the setColor function to change the first 10 pixels of our photo to black.  What if we wanted to change the rest of the pixels in out photo to black?  We already have made the first 10 pixels black.  This would mean we just have 307,190 pixels to go!  We need a way for the computer to do all the needed commands and calculations without us having to type in a command for each pixel we wanted to change.  Fortunately, there is a computer programming concept that is ideal for the task: loops.

You will recall that we used a loop in our last Alice project.  A loop is a set of instructions that is run until a certain condition is met.  In our last Alice lab we used a loop to make a bunny hop a certain number of times.  The first loop we created had the bunny hop 5 times.  The loop would run, telling the bunny to hop each time through the loop, until the condition of  5 times through the loop was meet. 

To edit the RGB values for all 307,200 pixels in our picture we can use a for loop.  A for loop has a simple condition to meet before it will stop running.  A for loop will do what you instruct it to every location in an array before it stops looping.  In our case we can build a for loop which will change the RGB values to R:0 G:0 B:0 for each of our 307,200 locations in our pixels array.

We will need to define a new function that can contain our for loop.  We already have the function calculateSquareRoot in the Program Area.  In Jython you can have more then one function defined in the Program Area so we will create our new function below the calculateSquareRoot function. 

In the Program Area, click at the end to the calculateSquareRoot function and press the return key twice to create a blank line below the function as shown below:

create blank line

Press the large delete key twice to delete the two spaces that are now at the beginning of line 5.  To define our new function, type in the following command as shown below:

type first line

The command we just typed in will define our new functions name as makeAllPixelsBlack.  Press the return key once to drop down a line and then indent two spaces and type the following commands into our new function:

new command

The commands you just entered are the commands to tell Jython to create a for loop.  Let's take a look at how these commands works. 

The first command first command creates a spot in memory called pixels and creates an array that contains the RGB values for all the pixels in our picture. We represented that array in these directions like this:


[0] = R:108 G:95 B:89
[1] = R:134 G:121 B:178
[2] = R:189 G:178 B:234
[3] = R:243 G:183 B:12
[4] = R:73   G:216 B:145
[5] = R:13   G:147 B:171
[6] = R:134 G:116 B:23
.
.
.
.
[307,197] = R:133 G:14   B:92
[307,198] = R:254 G:137 B:158
[307,199] = R:143 G:116 B:172

The for in the first command tells the function that we are going to do something for every item on our array.  What we are going to do to each item on the array is contained in the second command.  The second command command one says for each item on the array in pixels set the color to black. When the for loop runs it will take the first item on the array in pixels:

[0] = R:108 G:95 B:89

and change it to this:

[0] = R:0 G:0 B:0

The for loop will then start working through the rest of the array.  Eventually, the for loop will reach the condition of setting the last location in the array (location 307,199) to R:0 G:0 B:0 and the for loop will stop looping.   At which point every pixel in the photo should be black.  Let's see if this is the case by calling our new function and seeing if it changes all the pixels in our photo to black.

Let's do our three steps to call our new function.

Step 1) Select File menu > Save as shown below:

save program


Step 2) We need to load the program into the computer's memory.  In the gray area separating the Program Area from the Command Area click once on the Load Program button as shown below:

click the load button

A message in the Command Area should inform you that the program is now loading into the computer's memory as shown below:

program loaded

Step 3) We need to call our function.  In the Command Area type the following command to call our new makeAllPixelsBlack function and pass it the input value of the information still stored in the computers memory under the name picture...

type
                command

... and press the return key.

Then we will need to explore our picture again by typing the following command...

explore
                picture

When the picture opens in the explore window every pixel should be black as shown below:

all black pixels

An all black photo is proof that our for loop changed the values of all 307,200 locations in the array to R:0 G:0 B:0.  It also demonstrates how much faster the computer could change all 307,200 locations in the array then we could change 10 locations typing commands by hand.  This shows how powerful a for loop can be when programming.

Close your explore window.

Our for loop has successfully changed all the color values of our picture's pixels to the value R:0 G:0 B:0 (the value for black).  Does this mean we now have an all black photo to work with for the rest of lab?  No, it does not.  All we changed, using our for loop, was the color values of our pixels stored in the computer's memory at a spot named picture.  We have not changed the color values of our pixels that are stored in the file called photo.jpg saved on the Desktop.  This means we just have to reload the information stored in our photo.jpg file on the Desktop into our spot in memory called picture.  If you have not already, close all windows containing any version of your photo. To reload our color values from the photo.jpg file on the Desktop into our spot in memory called picture we need to re-issue the following 3 commands (and selecting our photo.jpg file after the first command):

passed
                  values


As you can see, since we never saved the changes we made to the array, our original file on the Desktop still contains the original RGB values for our photo.

Close the window containing your photo.

A function to turn a photo black is not very useful when editing photos.  Let's use a for loop to create a more interesting photo editing function.  Instead of creating a function that changes the Red, Green, and Blue values for each pixel in our photo to zero let's try changing just one value, the blue value, to zero.  To create this function we can use another of Jython's built-in functions called setBlue.  As you might have guessed the setBlue function can be used to set just the blue value of a pixel. 

To make our new function we can start with a copy of our makeAllPixelsBlack function.  Highlight the makeAllPixelsBlack function as shown below....

copy the function

... and then select Edit menu > Copy as shown below:

copy the function


Now click after the end of the makeAllPixelsBlack function to deselect the text.  Press the return key two times to create a blank line and then press the delete key four times to move the insertion point to the left margin. 

Select Edit menu > Paste to paste a copy of the function as shown below:

paste function

Now edit the function as shown below:

edited function

As you can see the new function clearBlueValues will still use a for loop to edit our photo quickly.  The for loop will create an array containing all the RGB values for each of the 307,200 pixels in your picture.  It will then use the variable called pixels to keep track of the locations in the array as it changes the the color value for blue in each location to zero.  The function clearBlueValues will have the effect of removing any blue from your photo.

Let's give our new function a try by using our three step process. 

Step 1) Select File menu > Save as shown below:

save program


Step 2) We need to load the program into the computers memory.  In the gray area separating the Program Area from the Command Area click once on the Load Program button as shown below:

click the load button

A message in the Command Area should inform you that the program is now loading into the computer's memory as shown below:

program loaded

Step 3) We need to call our function.  In the Command Area type the following command to call our new clearBlueValues function and pass it the input value of the information still stored in the computers memory under the name picture...

type
                command

... and press the return key.

Then we will need to explore our picture again by typing the following command...

explore
                picture

The effect the new function has on your picture should be similar to this in that now the Countess Lovelace as a distinct yellowish look about her:

photo with no blue

Notice how no matter what pixel you select in your photo the blue value for the pixel will be zero as shown below and highlighted in red for these directions:

pixel with zero blue
                  value

Close the explorer window containing your photo.

Part of programming is documenting your program.  Documenting your program means placing comments in the program that explain what it is the program code is doing.  Comments are not for the computer to run.  Comments are for other programmers to read so they can better understand what the program is doing.  We will place a comment in the program that documents who made the program and what it does.  Comments are proceeded by a # sigh.  A # sign tells the computer that the line is a comment and not an instruction for the program.  In the Program Area click once at the beginning of the code and type the following two comment lines (adding the date, your name, and your lab section number in the correct places) as shown below:

add comments

Notice that the comment lines turned green.  This is Jython's way of telling us that these lines are comments and not part of the program. 

You can now create two new functions each for 10 extra credit points.  Whenever you test a new function you have created, you will need to first reopen your photo.jpg file on the Desktop by issuing the following 3 commands:

passed                  values

Extra Credit:

Jython has two other built-in functions called setRed and setGreen.  Using the same techniques we just used to create clearBlueValues create the following two functions: 

1) For 10 points, create a function called clearRedValues that uses a for loop to set the red values for every pixel in your picture to zero.

2) For 10 points, create a function called clearGreenValues that uses a for loop to set the green values for every pixel in your picture to zero.

We will now printout our functions.

Select File menu > Save to save your code as shown below:

save program

We will now printout your program for grading.  Select File menu > Print as shown below...

print code

... when the Print dialog box appear select either By Cabinet or  By Door as your printer as shown below...

select printer


...and then pick out the printer you would like to use...

select printer

... and then click on the Print button.

That is all the programming we will be doing today.

It is very important you now exit the JES program by selecting File menu > Exit as shown below:

quit jes

Part 4: Check all tasks are complete, email assignment to instructor and self, shut down computer, and staple together and turn in grade sheet and code printouts.
Your desktop should now look like this:

just directions

We need to now drag your two photos into your folder as shown below:

drag
                  photo.jpg into folder

 

drag
                  10blackpixels.jpg into folder

Open your folder on the desktop by double clicking.   When your folder opens make sure it contains the following 5 items shown below:

check the
                    contents of your folder

If you are missing any items ask your instructor for help.  Close the window containing your folder items.

Now look over your grade sheet to make sure you have completed all items.  If you are unsure of any of the steps ask your instructor for help.

Your screen should look similar to this:

just
                        directions


Next we will compress a copy of your folder so that we can email it to both yourself as a backup and to your instructor for grading. Right click on our folder and select Compress... as shown below:

compress your folder

Make sure that the dialog box that appears is setup similar to the one shown below...

click create

... and then click on Create. A confirmation box will open as shown below...

click ok

... click Close.

A compressed version of your folder and files will show up on the desktop as shown below:

compressed file

Follow the steps below to send the new compressed folder to yourself and your instructor:

Step 1) Click the following link to open the SSU login page, in a new tab, to login to your online SSU email account (or other online email account).

Step 2) Create a new email.

Step 3) Fill in the subject for the email as:

lastname_firstinitial_Python2
(example: smith_j_Python2)

Step 4) Attach the compressed folder to the new email.

Step 5) Address the email to your instructor's email address (highlight and copy the email address for your instructor from the list below):

Mr. Carter's lab section's use this email address = cs101carter@cs.sonoma.edu

Mr. Caruso's lab section's use this email address = carusor@sonoma.edu

Step 6) CC the email to yourself.

Step 7) Send the email.

Once you have emailed in your assignment make sure you have your two printouts. You will turn these into your instructor with the grade sheet stapled to the top.

Lastly, to exit out of Ubuntu running in VMware Fusion and shut down the computer place your mouse at the top of the screen and wait until the VMware Fusion menus appear and then select Apple menu > Shut Down... as shown below...
Select shut down.

... and when the following dialog box appears select Shut Down as shown below:

Select Shut Down

End of Lab.