Graphics With Processing III
COMP 1010 Home > Back to Extra Labs
Step 1: Loading and displaying the image
Create a new Sketch called Lab3 and save it. Locate the folder where the sketch is stored and place this image file inside. The setup function should look like this:
PImage img; void setup() { img = loadImage("Stairs3.jpg"); size(480,320); frameRate(10); }
The PImage object 'img' will hold our image file while we are working on it. The loadImage() function takes the name of the image file that we are loading in. It will load .gif, .jpg, .tga, and .png files. Note that the image must be in the same directory with the sketch.
Next we will draw the image in our sketch window. Create a draw function like this:
void draw() { background(0); image(img,0,0); }
Here we are just colouring the background black and then drawing the image in the top left corner - (0, 0). You can now run the sketch. The window should contain the picture of the green stairs from the Wiki home page.
Step 2: Brightness adjustment
We will now create several functions that will allow us to adjust the brightness of our image. First we will create the bright() function.
void bright(int val) { img.loadPixels(); color temp; for(int i=0; i < img.pixels.length; i++) { img.pixels[i] = color(red(img.pixels[i]) + val, green(img.pixels[i]) + val, blue(img.pixels[i]) + val); } img.updatePixels(); }
This function loops through every pixel in the image and changes its brightness. It does this by changing each colour of the pixels by the same amount. Before you access the img.pixels[] array you must always call loadPixels. This alerts Processing that are going to be reading and possibly changing the array. Likewise, after you are done modifying the pixel data you must call updatePixels(). This lets the runtime know that you are done with the array and it will copy the data to the active image.
Next we will create a keyPressed() function. This built in function activates whenever a key is pressed. The 'key' system variable allows you to tell what key was pressed. Your keyPressed() should look like so:
void keyPressed() { if(key == 'b') //lower brightness bright(-10); else if(key == 'B') //increase brightness bright(10); }
Here we are using the 'b' key to change the brightness of the image; a lowercase 'b' will lower the brightness and an uppercase 'B' will increase it.
You can now run the sketch and test your brightness function.
Step 3: Inverting the Image
Now we are going to create a function that inverts the colours of the image. Call this function invert(). Invert does not need to accept any parameters. The function will look similar to bright() (you can copy, paste, and rename it) except for the line where the colours are changed. The inversion function (since the colour values are between 0 and 255) will look like this:
... img.pixels[i] = color(255 - red(img.pixels[i]), 255 - green(img.pixels[i]), 255 - blue(img.pixels[i])); ...
Now you can add a few lines into your keyPressed function to enable your inversion routine.
... else if(key == 'i') //invert image colours invert(); ...
Run the sketch to make sure the colours get inverted.
Step 4: Changing The Image Contrast
The last image manipulation we will be performing is changing the contrast of the image. The formula for the contrast adjustment is:
value = (value - 0.5) * (tan ((contrast + 1) * PI/4) ) + 0.5;
Say you are increasing the contrast; this formula would adjust the brightness higher if the pixel were brighter than half the max brightness value and lower if the pixel is darker than half of the max. This has the effect of setting the darker and light pixels farther apart in relative brightness.
The contrast() function will again look similar to brightness(). The line that manipulates the pixels should look like this:
img.pixels[i] = color(((red(img.pixels[i])/255.0 - 0.5) * (tan ((val + 1) * PI/4)) + 0.5)*255, ((green(img.pixels[i])/255.0 - 0.5) * (tan ((val + 1) * PI/4)) + 0.5)*255, ((blue(img.pixels[i])/255.0 - 0.5) * (tan ((val + 1) * PI/4)) + 0.5)*255);
We must change the value from a (0-255) range to a (0-1.0) range here for this formula to work. The contrast function should take a float that determines the value of the contrast change from -1.0 to 1.0. All you need to do now is add in the lines in keyPressed() (use 'c' and 'C' to adjust the contrast -0.1 and 0.1) and run the sketch.
Step 5: Reloading The Original Image/Saving Your Edited Image
We will now add the ability to reload the original image, and save the edited image. Add these cases in your keyPressed():
... else if(key == 'o') //reload original image img = loadImage("Stairs3.jpg"); else if(key == 's') //save the altered image file img.save("newimage.jpg"); ...
The first entry will reload the original image from the file and reset all of the changes that have been done. The second one adds the functionality to save the edited image. The save function accepts the name of the new file as a parameter.
Your image editing application is now complete. The full source is available here. For an extra challenge you could try adding zooming, panning, cropping and GrayScale conversion. Have fun!