CS 171/CSCI E-64 Midterm

Due Date: Wednesday March 5, 2007, noon EST


You can find the master solution on the Google Groups page under the Files listing.

Please edit this html page to include your answers for each of the questions below. You do not need long, expository responses. Concise sentences and/or bulleted statements are preferred.

To submit your assignment, rename the directory you downloaded as lastname_firstinitial_midterm, include all images and programming assignments in the directory, zip the directory, and send the zip file to miriah@seas.harvard.edu. Late exams will not be accepted unless you discuss this with us prior to the deadline.


Academic Honesty

You are welcome to consult the lecture materials, your textbooks and notes, and online resources, but we expect you to work on this midterm independently. Do not discuss this exam with your classmates or others, and do not send questions over email. Any violation of this policy will result in an automatic zero points for the midterm.


1. Design Critique (20 points)

Every year the National Science Foundation (NSF) holds a Visualization Challenge. The entries span a variety of categories and cover a breadth of topics. The winning entry from 2007 in the category of Information Graphics is a visualization entitled Modeling the Flight of a Bat. Analyzing this visualization, answer each of the following questions in several sentences or descriptive bullets:
      1. Who is the intended audience?
      2. What is the taxonomy of the data?
      3. What insights and/or comparisons does the visualization enable?
      4. What design principles does the visualization utilize?
      5. How does this visualization use color? size? shape? other techniques?
      6. Can you suggest any improvements?
      7. Do you like or dislike this visualization? Why?


2. Visualization Design (20 points)

You just graduated and decided to start a small company with your buddy Fred. The company you are proposing to venture capitalists will sell toy airplanes made out of beer cans, the design of which you and Fred perfected in your dorm room over the years. You began selling your planes online last January, producing two different models --- those made from Coors Light cans (product 1) and those made from Pabst Blue Ribbon cans (product 2).

You discovered your planes were a hit over seas, and want to target the UK by hiring your British friend Charles who used to live down the hall. You need money to pay him to make the beer can airplanes from his flat in London and to market the toys locally.

The sales data you collected on the number of airplanes sold for January -- June is:

Coors Light Airplanes (product 1) PBR Airplanes (product 2)
Jan 400 510
Feb 525 405
Mar 255 480
Apr 520 240
May 270 520
June 240 530

You would like to show the venture capitalists that you should expand the production of PBR airplanes, and perhaps try out a new beer brand to replace the Coors Light planes. So, Fred came up with the image below to include in your Power Point presentation to the venture capitalists on Wednesday afternoon:

Having studied good design principles, you realize that there is much to improve on this chart! Please do a quick, high-level sketch of a new visualization design of this data using any type of drawing program you like (Power Point, Photoshop, Illustrator, etc), or, draw by hand and snap a photo or scan. Give a short justification of your design choices, and include a link to your image. Don't forget to place the image file in the midterm directory.


3. Color (20 points)

Part 1

RGB to Gray Scale Conversion

There are two options to convert an RGB image (ie. red (R), green (G) and blue (B) value in the range [0.0, 1.0] per pixel) into a gray scale image (ie. intensity (I) value in the range [0.0, 1.0] per pixel):

1. I = (R + G + B)/3
2. I = 0.299 * R + 0.507 * G + 0.114 * B

Why does the second option provide better results?

Gamma Correction and Color Spaces

In which of the two color spaces would you do the gamma correction (RGB or HSB)? Why?

Illuminated Colored Objects

Assume the following scenario --- you have a colored object and you illuminate it with two projectors with different light colors. What is the perceived color in the following situations:

1. The object is blue and one projector projects red while the other projector projects green. What's the color of the object? What changes if you project green with both projects? What about red? Explain why.

2. The object is magenta and one projector projects green while the other projects blue. What is the color of the object? Explain why.

Part 2

Download and run the following sketch: Color_Sketch.

1. You should see an 8 x 4 grid of black squares on a white background. At the crossings you can see "gray" circles. Explain this effect.

Next, you will modify the Color_Sketch. Before you get started you will want to familiarize yourself with the following three Processing functions: colorMode(), color() and map(). You will only be making changes to the defineColors() function.

IMPORTANT: Make only changes to the code between "// 2.? BEGIN" and "// 2.? END" markers. You do not need to introduce more lines. Just remove the comment "//" and fill in the lines step by step.

2.1 Fill the part between the //2.1 BEGIN and //2.1 END markers. Fill the RGB colors there in the following order: black, red, green, blue, yellow, cyan, magenta and white. Run your code to test it.

2.2 Fill the part between the //2.2 BEGIN and //2.2 END markers. Fill the RGB colors there so that they represent gray levels: From black to white. Run your code to test it.

2.3 Fill the part between the //2.3 BEGIN and //2.3 END markers. Fill the HSB colors there in the following order: black, red, green, blue, yellow, cyan, magenta and white. Run your code to test it.

2.4 Fill the part between the //2.4 BEGIN and //2.4 END markers. Fill the HSB colors there so that they represent gray levels: From black to white. Run your code to test it.

Export your sketch and zip the sketch directory. Rename the zipped file to lastname_firstinitial_MT_3.zip and include it in your midterm hand-in directory. We will only grade a zipped applet folder which is complete (ie. contains the code files as well as the applet).


4. Convolution (20 points)

For this part of the midterm you will compute 2D convolution, which is an extension of the 1D convolution you did in homework 1. Although the 2D convolution is done as in the lecture and similar to the homework, we need to briefly define how to handle boundary conditions before getting started.

Boundary conditions are again handled by bleeding the values when a convolution kernel falls outside of the data table. The following image shows how values near the corner of a data table are bled across the boundary --- black lines indicate the data table while gray lines indicate the bled values outside of the data table.

FewBook

Part 1

For the first part of this question you will compute the missing values of the convolution of the Filter with the Data, handling the boundary as described above. Most of the Result has already been computed (numbers rounded to one digit accuracy) such that you can check that you are performing the convolution correctly. Please compute the values at A, B, and C and list them below.
FewBook

Part 2

In this part of the question you will implement 2D convolution to denoise an image. We provide the Processing framework to do this in the zip file convolution.zip.

The framework loads an image and decomposes it into its red, green and blue component such that the filters can be applied to each color one at a time. It also adds noise to the image and calls convolution functions (which are not yet implemented) to compute the convolution with various filters. Finally it displays the images. Pressing 'o' shows the original image; pressing 'n' shows the noisy image; pressing 'l' shows the convolution of the noisy image with a bilinear filter; and pressing 'g' shows the noisy image convolved with a Gaussian filter. You'll notice that pressing 'l' and 'g' results in a black image --- this is because the convolution is not yet implemented in the sketch.

You will implement two convolution functions in the code. Please DO NOT change the rest of the code since this might introduce unrelated problems (and makes it hard for us to correct). However, you are of course allowed to add helper functions if you need them (even though we do not think they are necessary).

First you will implement the convolution with the following bilinear filter.

FewBook

The corresponding data table is already implemented and is called linearFilter, and you can use it in the function convolveWithLinearFilter().

Second you will implement the general convolution function convolve(). It takes a data array and an nXn filter table (you may assume that n is an odd number). It should compute the convolution of the data with the filter and return the result. Although this sketch uses it only to compute the convolution with the provided Gaussian filter you should implement it such that it works for any size filter.

Export your sketch and zip the sketch directory. Rename the zipped file to lastname_firstinitial_MT_4.zip and include it in your midterm hand-in directory. We will only grade a zipped applet folder which is complete (ie. contains the code files as well as the applet).

For Fun

If you implement the convolve() function correctly, you can also experiment with so other filters.


5. Perception (20 points)

Part 1


Modern digital cameras have their CCD sensor laid out as in the side figure. For a single pixel, the sensors for the red, green, and blue components are arranged in a 2x2 block, like the one highlighted in the figure.


a) What is most peculiar about this choice of sensor layout?


b) Give a physiologically-motivated justification for this choice.


Part 2

Consider the simplified scenario in which the luminance-response function of the three kinds of cones (blue, green, and red) are the ones shown in Figure 1. As you know from class, a light source is described by a function of wavelength that indicates the luminance (a measure of "brightness") that it emits at each wavelength. Consider the light source given by the luminance function in Figure 2. This function is integrated against the luminance-response functions of the sensors to obtain the three values (perceived blue, perceived green, and perceived red) that are perceived by the sensors of the viewer.

Two light distributions are said to be metamers if they have different luminance functions, but produce the same perceived color in the viewer.



Figure 1: The three response functions for the blue, green, and red sensors in this idealized eye.



Figure 2: The luminance curve (luminance as a function of wavelength) for a specific light source.


a) Give a description (in words or with a simple diagram) of another luminance curve that is a metamer of the curve shown in Figure 2 for the response functions in Figure 1.


b) If you are given a perceived color, how many associated metamers does it have? (i.e. how many light distributions will produce the same color?)



Extra Credit (10 points)

Poetry on the Road is an international literature festival which is held every year in Bremen, Germany. Each year, the visual theme for the festival is generated by a computer program that turns text into images. In 2006, the designer Boris Muller encoded poems by assigning quantitative values to the words in a poem, and mapping links between words in a circular arrangement. You can find his design, and an interactive Processing applet, here.

For the extra credit, you will design your own poetry visualization and implement the design in Processing (or some other programming language/API of your choosing, as long as we can run it!). You may use the same encoding scheme for a poem as that of Muller, or, come up with your own.

Visualizing text is a challenging problem, and we will grade your design mostly on its ability to provide insight into a poem (whatever insight it is that you are after). We will also award points for simplicity and elegance of design, and a good use of design principles.