This page describes two fun image processing assignment that can be used in a CS1 course. These projects take an image file as input, and then perform image manipulation functions on the image in response to user's menu (or button) selections. The image is manipulated as a 2-dimensional array of Pixels. Examples of image manipulations include making the image negative, blurring the image, rotating the image, sorting rows of the image, edge detection, and zooming.
Students can add additional features for extra credit. We suggest some extra credit features that are challenging, but we also allow students to come up with their own extra credit features. Our students have come up with some interesting, and difficult, features, and it really allows them to be more creative in a course where often the projects are completely well defined.
Because students really enjoy working on these assignments, they are a good way to reinforce two-dimensional arrays, functions, sorting, compound data types, dynamic memory allocation, and file I/O. They are also a good (and gentile) way to introduce larger programming projects early in CS1 courses. The Java version of the programs could be used to teach inheritance, GUI programming, event driven programming, and threads.
A more detailed description of the Greyscale and Color versions of this assignment are provided below. Even more details are described in our SIGCSE 2005 paper "Using Image Processing Projects to Teach CS1 Topics".
| Greyscale Project | Color Project | About The Projects |
The Greyscale Image Processing Project
|
|
|
|
|
|
The greyscale image processing project reinforces two dimensional arrays, simple sorting algorithms, and functions. We use this in the sixth week of our CS1 course when we introduce arrays It is also the first larger programming assignment we give students, and students learn how to use library code and a Makefile.
C Staring Point Code (zip file)
Includes image library code, a main.c file with a partial main function
and function prototypes for many of the options, and a Makefile. This uses
libtiff for converting between the image file and a 2D array for pixels,
and it uses version 8.3 of Tcl/Tk for displaying the image. It expects
input images to be in TIF greyscale format and to be 480x480 pixels.
It compiles and runs on Linux, but should work on any Unix platform.
If you cannot install Tcl/TK libraries, or are using Windows, then the
image display parts of this starting point program need to be changed. A
simple way to do this would be to view the modified image file (our
starting point code creates a modified image file after each option
is selected), and then use an
image viewing program to view the changed image file. For example, the
main loop could fork xv or gimp to view the changed image file, or
you could have students use a Web Browser to view the image file, and
have them click on its Reload button to view the modified image file.
Here is some information about different image file formats. This
might be helpful if you don't have libtiff and need to write your own
library for extracting the pixel array from the image file.
Java Staring Point Code (zip file)
This is starting point code for the color version of the assignment.
A greyscale version of the starting point code will be available later.
A Solution You Can Try Out (jar file)
This is a Java solution that you can download and run.
It implements some of the features mentioned in the assignment write-up
as well as a few extra credit features. It works with any
size JPEG greyscale (or color) image file. Most features
are triggered by GUI buttons, but the zoom feature is triggered by
clicking on the image. It supports reading in multiple image files
and writing out modified images to an output file. Also, try playing the
8-Squares Puzzle.
To run:
java -jar ImageOne.jar yourimage.jpg
The color version of this assignment, reinforces two dimensional arrays, functions, and compound data types. We use this in the tenth week of classes when we introduce structs.
For a Java version of this class, this could be used as good example for teaching some simple GUI programming and talking about event driven programming. It is also a good application for teaching inheritance, where students (or the instructor) defines an Image and/or a Pixel base classes (or interfaces) and then define derived ColorImage and/or ColorPixel classes (or implement color versions of the interfaces).
Java Staring Point Code (zip file)
This is an example of starting point code that could be given to
students. It creates a window with an array of buttons, to which
students can add action methods, and it reads in and displays the
image file in another window.
A Solution You Can Try Out
This is a Java solution that you can download and run.
It implements some of the features mentioned in the assignment write-up
as well as a few extra credit features. It works with any
size JPEG color image file. Most features
are triggered by GUI buttons, but the zoom feature is triggered by
clicking on the image. It supports reading in multiple image files
and writing out modified images to an outuput file. Also, try playing the
8-Squares Puzzle.
To run, type:
java -jar ImageOne.jar yourimage.jpg
| Summary | Two Image Processing Projects --
implement functions to manipulate an image as a 2-dimensional array of
pixel values (either greyscale pixel values or RGB color pixel values). |
| Topics |
A fun way to learn arrays and functions
(and records in the color version) and simple sorting algorithms.
Both reinforce using good modular design, code re-use, local/global
variables and scope issues, and incremental implementing and testing.
The C version also reinforces using C library code and makefiles.
The Java versions can be used for GUI programming using the Swing
library, event driven programming, and inheritance. The color versions
reinforce dynamic memory allocation and file I/O as well. |
| Audience |
Appropriate for CS1 or as a later
introduction to Java for students who have taken CS1 in a different
language. |
| Difficulty |
This is an intermediate assignment with
challenging extra credit parts. It should take ~2 weeks for a CS1
student to complete. |
| Strengths |
The strength of this assignment is that
students really enjoy working on it, and as a result end up with an
excellent understanding of arrays and the semantics of passing arrays to
functions. Also, this is a good way to introduce larger programming
assignments earlier in CS1. Because this is a fairly large amount
of code, students experience first hand the benefits of good modular
design, incremental implementing and testing, and using makefile.
The suggested extra credit features challenge stronger students, and the open-ended extra credit options provide a way in which all students can be more creative in their solutions. |
| Weaknesses |
The main weakness of these assignments
has to do with instructor setup of the image processing libraries and the
image files. For the Java version that uses the Swing library, there
should be no changes from platform to platform. However, for the C version
we provide an image processing library that uses Tcl/Tk and works for
Linux. The C starting point library may need to be ported to different
platforms (Windows in particular). We give some ideas for porting in
the assignment descriptions above.
In addition, either the instructor or the students need to create image files in the correct format used by their program. The greyscale C version, for example, expects TIF images that are 480x480 pixels. On the other hand, the color version of the assignment can handle any sized image file.
Typically, we provide students with some number of starting point image
files, and then give them information about how they can create their
own image files to use with their program. |
| Dependencies |
The C version requires an
understanding of functions, two dimensional arrays, sorting,
and structs for the color version. The Java
version requires an understanding of arrays, sorting, and requires that
students can write class definitions and method functions, and that they
have an understanding of inheritance. It also may require a little
Swing GUI instruction. |
| Other Versions |
The assignments could be modified in several ways. One modification is to have the solutions handle an image files of any size. This change would require that students know dynamic memory allocation. Students could also add image re-sizing features, which would also requires dynamic memory allocation. Another modification is to have students do more of the file I/O associated with reading in an image file and writing out modified files. There could also be more focus on GUI programming by having students create Button Widgets for different features and register image manipulation callback functions on button click events. |