An image is a matrix of pixels.
Below is a snapshot of an image being viewed in the Jython Environment for Students (JES). The left top corner of the image below is coordinate x=1,y=1. The bottom right corner is x=635,y = 740)
A pixel is a color. Colors are defined with three attributes: how much red, how much blue, and how much green.
Pixel - {redValue, GreenValue, BlueValue}
A pixel is thus an example of a complex data type, an object. In this case, the object has three parts.
Each of the RGB attributes are between 0 and 255 (how much data is needed to store such an attribute?)
{0,0,0} is black.
{255,255,255} is white
What is Red? Blue? Green?
Here's how you can explore an image, including the value of each pixel, in the JES environment:
1. Load an image with a Python program (e.g., pic=MakePicture(filename)),
2. Choose Media Tools | Picture Tool. When the picture appears, click on it. The environment will display the x-y coordinate and RGB values for each pixel.
Here are some key functions provided by the JES environment:
makeColor(r,g,b) -> this returns a color, e.g.,
white=makeColor(255,255,255)
To make some other color, open a picture, use the Picture Tool, and click on a color to see what its RGB is. Then call makeColor with the same R,G, and B.
getPixel(pic,x,y) -> this returns a pixel from an image, e.g.,
pixel=getPixel(myPic,100,100)
Call getPixel when you want to modify some particular pixel. Generally, you'll call setColor after calling getPixel to make the change, see example below.
setColor(pixel,color) --> this modifies a pixel to be the given color, e.g.,
the following changes the pixel at 100,100 to white:
white=makeColor(255,255,255)
pixel=getPixel(myPic,100,100)
setColor(pixel,white)
getRed(pixel)
getGreen(pixel)
getBlue(pixel)
Use this when you want to see what color a pixel is and then change it, sort of like an x=x+1, e.g., the following will redden a pixel:
red = getRed(pixel)
setRed(pixel,red+20) # be careful here for overflow
repaint(pic) -->gets the system to redraw the picture.
Besides these functions, you'll also need to use nested loops. A nested loop is a while loop within a while loop. The outer loop is used to go through the columns of the image. We usually use "x" to denote the column. The inner loop goes through the rows of an image. We usually use y to denote the row.
Conceptually, you set x to 1, then, using the inner loop, go through the entire column (all the rows y). Then the outer loop sets x to 2, and you go through the entire 2nd column. The process is repeated until you've visited every pixel of the image.
Here's a program that draws a rectangle in the top-left corner, as in the above picture:
name=pickAFile()
pic=makePicture(name)
show(pic)
color=makeColor(255,255,255) # white
max=100
x=1
while x <max:
y=1
while y < max:
pixel=getPixel(pic,x,y)
setColor(pixel,color)
y=y+1
x=x+1
repaint(pic)
Note that the above program only works for a fixed part of an image (100x100). You can also perform operations based on the actual size of a JES picture by using:
getWidth(pic) -> this returns the width of the image.
getHeight(pic) -> this returns the height of the image
For example, to turn every pixel white, you'd just replace "x<max" in the above code with "x<getWidth(pic)" and "y<max" with "y<getHeight(pic)".
0. Copy the code above. Open JES and paste the code into the top window. You may need to fix the indentation in the file-- if so, do it very carefully. Save the file as whitebox.py. Click the Load button to run the program.
1. Write a program redEvenRows.py that draws red lines on every other row in a picture. You'll use a nested loop like above, but change the increment from 1.
2. Write a program lighten.py that lightens all pixel in a pic.
3. Use Google Image search to download an image of a beach scene, one that's bright and sunny. Then write a program sunset.py that turns it into a sunset scene (hint: one way to do it is to reduce the blue and green of each pixel).
4. Write a program grayscale.py to turn a color picture to black and white. You can turn a picture into black and white (grayscale) by modifying it so that all pixels have values such that red=green=blue. One formula for figuring out how dark each pixel should be is:
intensity = (red + green + blue)/3
where red, green, and blue are the values of the pixel in the picture with color.
5. Write a program that mirrors the left-side of an image onto the right side of the image. Test it with a 'main' that opens a pic and mirrors it.
6. Write a program that loads the image at http://cs.usfca.edu/~wolber/courses/110/JES/giantsScoreBoard.gif, then draws a personalized welcome greeting of your choice on the scoreboard. You may want to use the function "addRectFilled(pic,startx,starty,width,height,color)" as well as addText. For full credit, write the program using a function with a parameter that is the specific name to be drawn.
