The goal of this assignment is to give you some experience processing images yourself.
We’ll provide you with code that will load an image into the web browser, and call your functions to change the image when a button is pressed, and show the results. You don’t have to use our framework code, but it will make things easier.
You need to write functions that take images as input and provide images as output. You need to do a few simple image operations. But you can do fancier ones too. You must describe what your functions do (in canvas for the handin), and each must work with a button (so you press the button and something happens). Some examples as part of the framework code.
Due: Normally the assignment is due on Thursday, but since we didn’t get to discuss image processing in class, you get a “free” extension – we won’t count your assignment as late providing it is turned on or before the last day of class (December 15th). Note: if you assignment is not turned on or before December 20th, it may not be graded.
Note: this assignment will make a lot more sense after the lecture on Thursday, December 10th, when we’ll talk about the practical issues in doing these things.
Handin: You should use the regular course handin (P14 directories). You must also turn things in via Canvas – a link to your directory, and a description of what your functions do. The Canvas page is here.
Grading: This assignment will be given a letter grade. You will get an F if you don’t turn anything in. Getting the minimum functions working correctly will earn a B. Doing more than the minimum will earn a higher grade.
What functions to implement:
This is your choice. However, at a minimum, you must implement 1 from each category.
- Point process (change the color of each pixel independently). Simple examples: dimming is provided as a sample, but you can do de-saturate, or shift to a different color, or convert to grayscale (remember to weight the channels differently), … More complicated examples include histogram equalization, or turning everything to grayscale except for a particular color (like this or this – although these do it in a more sophisticated way).
- Convolution (run a simple convolution over an image). Simple example: a small blur, or edge enhancement. Note: be careful about the edges!
- Downsample (make an image smaller). Simplest is to just use nearest neighbor to reduce an image by 1/2. A better solution would use better sampling: make sure that a black and white checkerboard turns gray (if the checks are small) or stays a checkerboard (if the checks are big enough). Reducing by factors other than 2 is a good way to make things harder.
- Upsample (make an image bigger). Simplest is just to double the size by doubling each pixel (really doubling twice, since you need to do it in both directions). Better implementations would do some kind of interpolation, and allow for variable size scaling.
Number 1 is mainly a warm up to make sure that you understand how to use the framework code and access images.
We will try your upsample/downsample on checkerboards of various sizes.
The framework code:
The framework code provides a simple setup. An HTML page that allows you to open an image on your disk – it will appear. You can write functions that take an image (in a browser standard format – basically an array of pixels with size information) and return a resulting image – if you put them on a list, the framework code will make the buttons for you.
There are 3 files in the framework: index.html (you can guess), image.js (the framework), and image_examples.js (a file like the one you should write – it provides 3 examples of image processing functions). You can do save as, but if you want a ZIP file it’s here.
Make sure you have some small images to test things with. Here’s a 50% gray square and a checkerboard.
Note: doing these kinds of image processing operations in JavaScript can be very slow (since JavaScript converts everything to float and then back to unsigned bytes). We don’t expect your solutions to be fast: we’ll test them on small images.
