CMSC 110 (Introduction to Computing)

Spring 2016

Assignment #6

Due by 11:40 am on Monday April 18, 2016

Task: Write a Processing program that generates a collage of images.

The collage should be created by applying image processing techniques to draw modified copies of the same image (or the same set of images) at multiple locations on your sketch window. At least four distinct modifications of the source image(s) should be used to create your collage.

For example, you may load your source image four times into separate PImage objects and then modify the colors of one to create distinct appearance, i.e. creating Warhol-esque variations, or draw each pixel (or pixel block) with another representation of a certain size with colors from the original image (Image Visualization). Each modified PImage can then be drawn multiple times on your sketch at various locations, rotations and sizes to form your collage.

Step 1: Create at least 4 processed images (as PImage) from the original, using distinct image processing techniques.  Example PImage modifications include:

• Simple Filters - pixel color is set depending on its own color
• mapping to grayscale, sepia, negative
• modifying brightness, contrast, color and transparency
• check out Processing's tint() for alternatives (note that this is for inspirations only, you are not allowed to use tint(), and must implement from scratch)
• Pixel math - pixel color is set as a weight average of itself and another (from another image)
• Add/subtract images
• Blend images
• check out Processing's blend() for alternatives (note that this is for inspirations only, you are not allowed to use blend(), and must implement from scratch)
• Area-based filters - pixel color is set depending on the neighbors
• highpass filter - sharpen areas with rapid intensity changes (sharpen)
• lowpass filter - blur areas with rapid intensity changes (blur)
• noise removal
• Dilation/erosion - morphological operation expanding/shrinking bright regions
• Image segmentation - pixel color is set depending on some threshold (note that those listed here also use filtering techiniques, simple color filters for posterizeing and area-based filters for edge detection and feature extraction typically, so they technically belong to more than one categories)
• thresholding color values - posterize, histogram, etc
• check out processing's filter() for alternatives (note that this is for inspirations only, you are not allowed to use filter(), and must implement from scratch)
• edge detection
• feature extraction - lines, edges, ridges, blobs, faces, etc
• Image visualization
• pointillism
• other representations such as letters, symbols, shapes, fragments of other images etc
• extrusion and other 3D transformations

You are highly encouraged to checkout the tutorials on Image Processing on www.processing.org, which can be found there:

• http://processing.org/learning/topics/ (look under Image Processing)
• https://processing.org/tutorials/pixels/

Requirements:

1. All modifications must be performed on the individual pixels of the original PImage.
2. You may not use existing Processing image processing functions like filter(), tint(), and blend().
3. Among the required 4 images to create, you must implement at least one technique from "Image visualization" and one from "Area-based filters". Any one that fits the category will do, it does not have to be one that is listed.
4. The other two (or more) can be your choice, but you are only allowed a simple filter once.

Step 2: Create a collage from the set of processed images you generated in step 1.

• Copy, resize, crop and sample the images at will to create fragments. Useful functions:
• img.get(x, y, width, height) - returns a rectangular region of the PImage img starting at (x, y), with the specified width and height
• Arrange the fragments in your sketch window to create a meaningful composite. Use transformations liberally. Useful functions:
• translate()
• rotate()
• scale()
• pushMatrix()
• popMatrix()
• image()
• imageMode()
  

What to produce:

1. The program
   
2. A write-up with your name, course and assignment number and a paragraph about the sketch, its inspiration, and how you designed and implemented it. Include a brief discussion about your experience working on this assignment. It should be a separate document and left in the sketch folder.
   
3. A gif/jpg/png image of your sketch. Place in the sketch folder.

What to hand in:

• Submit a hard copy of 1, 2 and 3. This hard copy is due at the start of class on the due date.
  
• Submit an electronic copy of the entire sketch folder (remember to include any images you use, as your program won't work without the originals!), the screenshot and the writeup via Dropbox shared folder as usual. Please place the screenshot and write-up in the sketch folder.