In this assignment, you will implement various image processing algorithms that will enhance your understanding of how to manipulate images to achieve interesting visual effects. Completing this assignment lets you gain practical experience in applying different image processing techniques.

Base Code

Once you downloaded the base code and the image files from Piazza and started a local web server, click here to see if you can open c_images.html. Be sure to also put the image files to the same folder. Make sure to start a local web server if the link does not work. You will need to extend this base code to implement the tasks outlined below using GLSL (and a bit of JavaScript).

Task 1: Adjustment

Implement a fragment shader where you can adjust brightness and contrast adjustments, and also perform greyscale conversion as explained in lectures. Allow the program to switch between different modes of adjustment (brightness, contrast, and greyscale conversion) according to the value of adjustmentType (0: original, 1: brightness, 2: contrast, 3: greyscale) where the "original" refers to the unaltered image (same for the following tasks). Pick the parameters of each adjustment so that adjustments are clearly visible.

Task 2: Composition

Implement add, subtract, multiply, and over operators to composite two images in a fragment shader. Allow the program to switch between different operators according to the value of compositionType (0: original, 1: add, 2: subtract, 3: multiply, 4: over). For the over operator, use the alpha value equals to brightness (EDIT: Sep 22, it was originally saying "1 - brightness". See the announcement on Piazza for more details) of the image that is being blended onto the original image.

Task 3: Filtering

Implement box blur and bilateral filters as explained in lectures in a fragment shader. Allow the program to switch between different filters according to the value of filterType (0: original, 1: box, 2: bilateral). Pick the parameters so that adjustments are clearly visible, and make sure to clamp inside the image whenever you attempt to access pixels outside the image.

Task 4: Color transfer

Implement a simple color transfer by the method of Reinhard et al. as explained in lectures. You may perform some calculation outside in a fragment shader if needed, but use a fragment shader to compute the final image. Allow the program to switch between the original image and the resulting image of color transfer according transferType (0: original, 1: color-transferred). The base code provides a function to read texture values and store them into an array.

Task 5: Demo

Combine multiple features implemented from at least two of the tasks above to generate a new image from the input images. Be creative in your approach, and consider how different effects can interact to produce unique visual results. Document your thought process and the techniques used in your README file. Feel free to expand your code as needed.

Submission

The submission process for this assignment is basically the same as the one for Assignment: Warm-up. See Assignment: Warm-up for instructions about how to prepare your submission. If you are doing something extra, be sure to document them in your README.md or README.txt file. If your changes are so radical that your modified program is incompatible with the original specification for each task, you must include a "compatibility mode" that makes the interface behave like the requirements here, or consider creating an entirely separate code.