Interactive Packages for Learning Image ... - Semantic Scholar

Interactive Packages for Learning Image Compression Algorithms Sami Khuri and Hsiu-Chin Hsu Department of Mathematics and Computer Science San Jose State University One Washington Square San Jose, CA 95192-0103 USA [email protected], [email protected] Abstract This paper introduces three interactive packages for learning image compression algorithms. The rst two packages, RLE and Quadtree, animate bitmap image compression algorithms, and the third package, JPEG, is a tutorial about the Joint Photographic Expert Group (JPEG) standard. The goal in designing and developing the packages was to provide instructors with tutorial and demonstration tools for teaching various interesting algorithms to students in CS1/CS2, Data Structures and Algorithms, Data Compression and Image Processing courses. The packages visualize image compression algorithms by displaying their dierent states of execution, using dierent colors to highlight the important areas, and providing textual explanations to help users understand the visualization. All three packages are interactive, platform-independent, and easy to use. 1 Introduction

Manipulation of images is an intrinsically attractive endeavor that easily catches students' attention. Image processing has many interesting applications in medicine, biological research, photography, space exploration, astronomy, and law enforcement forensics. Numerous and widely varying types of image processing operations have been developed during the past 20 years, among which are image enhancement, restoration, analysis, compression, and synthesis. With the advent of the Internet and the WWW, image compression is now more important than ever. To achieve acceptable throughput over the Internet,

images are usually compressed to minimize their size. Most students see the bene t of compressing images to be transmitted over the network from their own personal experience and are consequently motivated to study the algorithms behind image compression. Image compression techniques have also attracted computer science faculty's attention. For example, Astrachan et al. [1], Fell et al. [2], and Jimenez et al. [4] describe a set of programming projects in the areas of image enhancement and image compression that have been successfully used in CS1/CS2 courses. Image compression algorithms are divided into two general groups: lossless and lossy. Lossless image compression preserves the exact data content of the original image. Lossy image compression preserves some speci ed level of image quality, but not the absolute data content of the original image. The RLE and Quadtree packages animate lossless compression algorithms. The JPEG package demonstrates the workings of the lossy algorithm: JPEG. It was developed as a standalone educational tutorial with hypertext, interactive examples, and other features. All three packages can be used as educational supplements in a wide variety of courses. The algorithms used in our packages range from very simple to very complex and can, therefore, be used in CS1/CS2, Data Structures, Algorithms courses as well as in Data Compression, and Image Processing electives. The packages are interactive, platformindependent Java applications. Sections 2 and 3 present the rst two packages, RLE and Quadtree. In these sections, we show some examples of the animations and highlight the merits of our packages. Section 4 introduces the JPEG package. The paper concludes with some closing remarks. 2 The Package RLE

RLE can be used in teaching run length encoding algorithms. The algorithms included in this package can compress bitmap images in one of the following fashions: column by column, row by row, using zig-zag, Hilbert

or Sierpinski space lling curves. The compressor scans the bitmap looking for runs of pixels of the same color. The output stream consists of pairs (l, c), where l is the length of run and c is the color. The run length encoding technique can be used on binary images as well. Because pixel values can be 1 (black) or 0 (white), there is no need to code the color of each run. Instead, we assume that the image begins with a white pixel. If it does not, then the output stream will start with 0. The run of black pixels is then recorded, followed by the length of the white pixel run, then the black run again, and so on. The level of compression using run length encoding is entirely dependent upon the repetitive nature of the source. An image with large runs of the same pixel will compress well. Images without this property will compress poorly. Students can experiment with the bitmaps included with RLE to see which les compress better. The following is a brief discussion of the various RLE algorithms and their animations.

Row by row compression. The compressor scans

the bitmap row by row looking for runs of pixels. Since the 16x16 bitmap depicted in the upper window of Figure 1 starts with a black pixel, the compression output would begin with a run length of value 0. It would then be followed by 72 (for seventy two black pixels), 4 (for four white pixels), and so on. Column by column compression. The compressor scans the bitmap column by column. If the compressor were to operate on the bitmap of the upper window of Figure 1, the output would be 0, 102, 4, 12, 4, 10, and so on. Zig-zag compression. This algorithm employs a zigzag technique to take advantage of the runs along two dimensions instead of just one. Suppose that the rows of a 16x16 bitmap in the upper window of Figure 1 are numbered 0, 1, ..., 15 from top to bottom and that the columns are numbered 0, 1, 2, ..., 15 from left to right. Then the zig-zag technique scans the pixels in the following order: (0,0), (0,1), (1,0), (2,0), (1,1), (0,2), (0,3), (1,2), etc., where the rst component represents a row index and the second a column index. Thus, the compression output for the 16x16 bitmap in the upper window of Figure 1, would start with runs 0, 84, 1, 1, 1, 8. Hilbert Space Filling Curves. If the image does not have long runs, better compression may be produced by a method that scans the bitmap area by area instead of row by row or column by column. A space lling curve completely lls up a part of space by passing through every point in that part. It does that by changing directions repeatedly. Several such

Figure 1: Compressing a 16x16 bitmap using the Hilbert and Sierpinski curves. curves are known and are all de ned recursively. The Hilbert curve is a space lling curve that visits every point in a square grid with a size of 2x2, 4x4, or any other power of 2. The Hilbert curve is the limit of a sequence 0 1 2 of curves [5], some of which can be seen in the upper window of Figure 1. H ;H ;H ;:::

Sierpinski Space Filling Curves. While the Hilbert

curve is an open curve, the Sierpinski curve is closed; it bounds an area that is 5/12 that of the square it lls. The Sierpinski curve consists of four open curves linked together by line segments located in the outer corners. These four parts are ninety degree rotations of the same curve. This makes the Sierpinski curve symmetric with respect to its center point. Like the Hilbert curve, the Sierpinski curve is also the limit of an in nite series of curves [5]. The bottom window in Figure 1 shows the 8x8 bitmap being compressed using the Sierpinski curve technique.

2.1

Graphical User Interface of RLE

The goal in designing the Graphical User Interface (GUI) for the RLE package was to provide an algorithm animation system which is both easy to use and quick to learn. When the RLE package is launched, a startup window is displayed. The menu bar at the top of the application shows the available menu selections. From the \Algorithms" menu, the user can choose one of the RLE algorithms described in the previous section. In the \Input Files" drop-down menu, the user is allowed to make a choice of the input le. With our application,

we provide several black and white bitmap images of dierent sizes. Users can select one of these bitmap images or input their own to run the program. The size of the user-de ned BMP images can not be greater than 64x64. Another possible user-de ned input is a text le containing rows of zeros and ones representing white and black pixels. Under the \Options" menu, we allow users to set the speed of the animation in the \Run" mode. They can also choose to display the red line that traces the scanned pixels during the animation. The last menu, \Help", opens help les. These les are created in HTML format and allow users to jump from one topic to another. The user can get help on the corresponding algorithm or on how to use the package. Once an algorithm is selected from the \Algorithms" menu, the startup window is replaced by the main window of the RLE (see Figure 1). The main window contains four components: animation window, output window, messages, and control buttons. RLE displays the input bitmap image in the left half of the application window. During the algorithm execution, a red line shows the direction of the scanning by the compressor. The compression output is displayed in the right half of the window in the area entitled \Compression Output". In the area under the \Compression Output", the user can see the size of the output, compression ratio and the number of pixels in the current run. We de ne the compression ratio as the ratio of the size of the output and the size of the input. One of the three control buttons can be used to control the execution of the algorithms. The \Step" button will allow users to step through the animation. The \Run" button will compress the bitmap image with the chosen algorithm at a given speed. The \Stop" button can be used to pause the animation. The \Reset" button clears the red line in the animation window, \Compression Output" area and all messages. 3 The Package Quadtree

The second package, Quadtree, animates the quadtree compression algorithm for bitmap images. The quadtree method scans the bitmap, area by area, looking for areas lled with identical pixels. Our package takes a bitmap as input, and constructs a quadtree, where a node is either a leaf or has exactly four children. The top-down construction of the quadtree can be found in [4]. The 16x16 bitmap in Figure 2 is being compressed using the quadtree algorithm. The tree created so far has 23 leaves (each containing the color of the uniform quadrant, 0 for white, 1 for black) and 9 interior nodes (8 shown in Figure 3 and the root node). As is the case with the RLE algorithms, the size of the quadtree depends on how complicated the image is. For complex images, in which neighboring pixels do

Figure 2: Compressing a 16x16 bitmap using the quadtree compression algorithm. not share the same color (a chess board, for example), the resulting quadtree may be bigger than the original bitmap. 3.1

Graphical User Interface of Quadtree

The Graphical User Interface of the Quadtree package is very similar to that of RLE. The application window consists of ve main components: the \Bitmap" display panel, \Quadtree" window, control buttons, menus, and the display tool for adjusting the view of the tree. All the control buttons and drop-down menus are the same as the ones described in Section 2.1. The area on the left hand side of the application is used for displaying the bitmap image and steps of the algorithm. The red lines show how the quadtree algorithm partitions the image. A green rectangle indicates the quadrant being evaluated by the algorithm. The window on the the right entitled \Quadtree" shows the building of the tree. One of the challenges encountered during implementation was the diculty of seeing the whole tree as well as the part of the tree being updated. To handle this problem, we implemented a \display tool" which is the small window entitled \Tree" seen in Figure 2. The tool displays the whole quadtree but on a smaller scale than the one depicted in the \Quadtree" window. The current view of the \Quadtree" window is the part of the tree inside the red rectangle in the display tool. Users can view other parts of the quadtree in the \Quadtree" window by simply moving the red rectangle to the desired location in the display tool. The animation of the algorithm is supplemented with textual explanations of the current steps of the algorithm. These explanations are displayed in the \Bitmap" win-

5 Conclusion

Figure 3: Snapshot of the JPEG package. dow below the bitmap image. Once the compression algorithm has reached its stopping criterion, the number of leaves and interior nodes of the quadtree, as well the compression ratio, are displayed. 4 The Package JPEG

The third package, JPEG, was designed in the form of an interactive tutorial to explain how the JPEG compression algorithm works. The goal of this package is to show the students dierent steps of the JPEG compression algorithm: color space transformation, discrete cosine transformation, quantization and entropy encoding. We use text, graphs, and interactive examples to help students understand this process. The basic JPEG encoder structure is illustrated in Figure 3. First, the color images are transformed from RGB into a luminance/chrominance (Y Cb Cr) color space. The image is then partitioned into 8x8 blocks of pixels called data units. The discrete cosine transform (DCT) is then applied to each data unit to create an 8x8 map of DCT transform coecients (frequency components). These 64 DCT coecients are scalar quantized using uniform quantization tables and then rounded to an integer. After the DCT coecients are quantized, the coecients within the block are ordered according to the zig-zag scan explained in Section 2 and the resulting bit stream is coded using the run length encoding algorithm to generate an intermediate symbol sequence. These symbols are then coded using the Human algorithm. Each one of these steps is explained in the package. On each page of the JPEG package, there are buttons to the next and previous pages. For more details, users can click on the \More info" button or they can choose to see interactive examples.

This paper introduced three packages, RLE, Quadtree, and JPEG. The packages can be used by instructors teaching Data Compression or Image Processing electives or by those looking for new and interesting algorithms and projects to be used in CS1/CS2 and in Data Structures and Algorithms courses. We created these visualization packages by following guidelines found in the literature on algorithm animation [3]. Our packages visualize image compression algorithms by displaying dierent states of the algorithm, using dierent colors to highlight the important areas, and providing textual explanations to help users understand the visualization. We also include useful default visualizations without any complicated selections and keep the visualization controls simple. By opening packages in dierent windows (see Figure 1), users can compare compression ratios achieved by different algorithms with the same input data. The packages have very descriptive help les containing information about algorithms and the packages themselves. In the Quadtree package, we provide a handy tool to help users adjust the view when the tree grows bigger than the screen. Users can see a global picture and control the partial view of the tree by moving the red rectangle with the mouse in the display tool. We used Java to implement our packages. All three packages, RLE, Quadtree, and JPEG, are available on http://www.mathcs.sjsu.edu/faculty/khuri/publications.html for anyone interested in using them in their classes. References

[1] Astrachan, O. and Rodger, S. \Animation, Visualization, and Interaction in CS 1 Assignments", Proceedings of SIGCSE'98, pp. 317-321, ACM Press, 1998. [2] Fell, H. J. and Proulx V. K., \Exploring Martian Planetary Images. C++ Exercises for CS 1", Proceedings of SIGCSE'97, ACM Press, pp. 30-34, 1997. [3] Gloor, P., \User Interface Issues for Algorithm Animation" in Software Visualization. Programming as a Multimedia Experience, MIT Press, pp. 145152, 1998. [4] Jimenez-Peris, R., Khuri, S., and Pati~no-Martinez, M., \Adding Breadth to CS1 and CS2 Courses Through Visual and Interactive Programming Projects", Proceedings of SIGCSE'99, ACM Press, pp. 252-256, 1999. [5] Salomon, D., Data Compression, Springer Verlag, 1998.