Project Write-Up
Table of Contents
1. Introduction
2. Description
2.1 Background
2.2 Motivation
2.3 Functionality
2.4 Intended Users
3. Implementation
3.1 Objectives
3.2 Development Process
3.3 Functionality
3.3.1
The Spectrum Applet
3.3.2
The Chromaticity Diagram and Gamut Applet
3.3.3
The Color Spaces Conversion Applet
3.3.4
The Color Matching Game Applet
3.4 Problems Overcome
4. Results
5. Future Work
6. Conclusions
The incredible growth of the World Wide Web over the past few years combined with the power of Java have brought a great deal of functionality to the desktop. The power of Java is its platform-independence, i.e., a Java program can be run on any computer. This is why Java fits the Web so nicely and seamlessly. This alliance is synergistic - it turns the user from a passive information browser into an active participant of the Internet conversation. A Web browser is now able to execute Java programs that it downloads. These programs are usually small; that is why they are called applets. This is another beauty of Java. Despite their small size, they can do pretty big things - interactive graphics, networking, retrieving information from databases, sound and video, animation, etc. Java in alliance with the Internet has created a brand new computing paradigm - Java Computing.
Even by Internet standards, the remarkably fast rise of Java is mind-boggling. Indeed,
talk of Java has become so pervasive that it would be quite impossible to pick up a
computer magazine without reading at least one contrived coffee metaphor. Java applets,
although very powerful, are just one of the facets of its personality. Java has
found its place as a leading technology is many different areas - from embedded control
systems to distributed computing, from desktop
applications to smart cards.
The strengths of this powerful object-oriented and multi-platform language have sparked a tremendous interest in me. I found Java simple to learn, having some very useful built-in features. What I personally like a lot is that the language forced me do a better design; I think it is more difficult to write poorly organized programs in Java than, say, in C++.
At the same time, I was beginning to work on a color-related Master's project, and it seemed like a good idea to try make a teaching tool that anybody on the Internet could use. This is how this project was born. My intent was to create something that could interactively present some topics on color. In particular, these include the notion of a spectrum, the chromaticity diagram and color gamuts, and conversions between four color spaces (RGB, YIQ, HSV and CIELAB) . To add a touch of fun to the learning process, a color matching game is included. Each of the four topics are implemented as Java applets, thus accessible to a wide audience of users.
This document presents the description, the implementation issues and the results of the "Introduction To Color" project. Possible enhancements to the project are also discussed.
Color is widely used in computer graphics to distinguish objects, show relationships and connections between them, to display additional information without an increase in dimensionality, and, of course, to make graphics more realistic, attractive and clear [4].
Color, as we see it, is a perception of a physical energy spectrum, formed by the brain in response to color stimuli generated by the eye's receptors. The eye's response is non-linear, and it is different for different people. How then can color be represented by numerical values? How do we measure and compare perceived colors? Color science answers all these questions.
The first step is to abstract from individual perception, and replace it by a so-called "standard observer" that bears average characteristics of the human eye [1]. This was done in 1931 by the International Commission on Illumination (CIE) by gathering and averaging a vast amount of visual signal transmission data from many individuals [2]. The tristimulus theory of color perception was developed. This is based on the hypothesis that the retina has three kinds of color sensors (cones) with peak sensitivity to red, green and blue lights [1].
This suggests that a color can be matched by an additive mixture of three primaries. Such primaries, established by the CIE, are called X, Y and Z. A color can be matched with these primaries using only positive weights [1]. (Although red, green and blue are used in the color monitor and produce a huge range (or, gamut) of colors, they are less suited for color matching than X, Y, Z.)
So far, we already have mentioned two ways of representing color - using CIE XYZ or
using red, green and blue (RGB). If we consider a particular color as a point in
three-dimensional space, where the amounts of each primary component represent
coordinates, we can talk about color spaces. In fact, today there are many different color
spaces in use for different practical purposes, for instance, TV signal transmission,
linearized perceptual color difference, hardware-oriented,
etc. Quite often we need to convert color from one color space to another.
There were two major driving forces for this project. First, I had always enjoyed working with color, be it color on the computer monitor or a color that you can smear on a canvas. The second driving force was Java. Although just a newborn, Java opened up incredible possibilities for network-based computing. At that time, I didn't know much about its potential, except for its excellent suitability for the Web programming, and, of course, I wanted to learn it. I was working with a team developing a color-matching device, so I wanted to know what color + Java equals to. Fortunately, I was offered an answer: an educational applet. Thus,
color + Java = educational_tool.
2.3 Functionality
This project is designed to be an interactive introduction to color, implemented as four Java applets, and thus, easily accessible for users of different computer platforms. The applets introduce the user to the notion of spectra, chromaticity diagrams, gamuts, and color spaces (XYZ, RGB, HSV, YIQ and CIELAB). The user can interactively learn how a spectrum is converted into color, what happens when colors are mixed, how to represent a color in different color spaces and how to convert between them. The user can also play a color-matching game, which is a good test of the material just learned.
The intended users of this project are students and teachers of computer graphics. This project is not usually fun for casual web surfers, but you never know... Anything can happen on the Web!
The goal of this project, as defined in the project proposal, was to create an interactive educational aide to help students understand the concepts of color, its characteristics, representations and transformations as applied to computer graphics. This project had the following deliverables:
An interactive online educational aide, implemented as Java
applets and HTML reference pages.
Online user's guide and technical documentation: An HTML Users'
Guide, Technical Documentation (including Java class API definitions and source code), and
formal project writeup are available online.
Extendable object classes. This project is designed using
object-oriented methodology, and may serve as a platform for further development.
Java code. The project is implemented in well-documented, clearly
written Java code that other students may use as an introduction to the language. The
source code is available online along with the documentation.
The project was designed as four applets and was developed in Windows 95. Since I had no experience with Java whatsoever, the design and development was done in parallel. I started coding with JDK 1.1, using the new delegation event model of the AWT. Testing was done with the appletviewer, having to interchange between 1.1.1 and 1.1.3 versions because of bugs in the appletviewer. When the coding and debugging was complete, I changed back to the 1.0 AWT; fortunately, this process was quite easy.
Debugging with the SGI's Netscape Navigator revealed a few new problems that were due to some minor inconsistencies in the Java virtual machine implementation on these two platforms.
3.3 Functionality
The project was designed to be a teaching aide. Functionally, it consists of
four independent applets, each demonstrating a particular aspect of color science.
3.3.1 The Spectrum Applet
This applet demonstrates how a spectrum can be converted into color. A spectrum can be free-hand drawn or modified by the user. The perceived color that corresponds the spectrum is displayed along with the CIE XYZ coordinates. The online reference provides some background on the conversion process.3.3.2 The Chromaticity Diagram and Gamut Applet
This applet introduces the notions of the chromaticity diagram and the color gamut. The chromaticity diagram factors out luminance, so color sensations that are luminance-related are excluded. The applet allows the user to create triangle color gamuts and explore the effect of additively mixing different colors together in various proportions.3.3.3 The Color Spaces Conversion Applet
This applet allows the user to create up to four different color spaces simultaneously, each representing the same color: RGB, HSV, YIQ and CIE L*a*b* (CIELAB). These color spaces are implemented as Java frames; a change to any one of them results in corresponding changes to the others. Despite the fact that all images are computed in real time, the performance is smooth.3.3.4 The Color Matching Game Applet
This applet generates two random bright colors that the user is intended to match. Matching can be performed in any one of the four color spaces selected by the user. Matching in RGB is rather easy, matching in CIELAB is the trickiest. A dynamic hint is provided to facilitate the matching process.
3.4 Problems Overcome
One of the questions I had been asking myself during the design was whether I
should download images or compute them. Take, for example, the chromaticity diagram.
Experimentation has shown that it takes shorter to download the data needed to compute the
image and actually compute the entire pixmap, than to download a GIF file. The
disadvantage is the relative complexity of the computations, but once you have the pixmap,
there is no problem mapping the screen coordinates to the array indices. And at that, you
get the best possible quality. So, in this case the choice was obvious. I was also afraid
that generating the HSV hexagon image on the fly would not be feasible, but using with the
mid-point line algorithm to detect edges of the raster scan gave a very good performance.
(I actually did not time it, since it was not necessary.)
The most difficult problem I faced was generating the LAB slice. The space itself is so
contorted, that there are no really efficient algorithms of plotting it. I decided to
slice it with the L*=const plane. Computing the slice by brute-force rastering 100x100
pixel area was unacceptable. I was considering either to give up or to use a couple of
GIFs just to show what it looks like. But even having all the slices at hand, it is still
difficult to picture the entire space in 3D. So I measured the size of the rectangular
bounding box as the function of L* (there is no formula, I just got a hundred numbers for
each L* from 0 to 100 ). When I approximated the functions in a really crude and simple
manner, the performance was dramatically better. On my 133 MHZ Pentium it takes about 30
seconds to compute 100 images for different L*. Individual values vary significantly, but
on the average it take only 0.3 sec. This could be improved further, but to some
extent, as the formulas become more complex.
Another issue worth mentioning is the mouse motion. These events are usually generated as bursts, and if the handler is unable to process them on time, they might get queued. When this happens, the system keeps responding for a while after the user has stopped moving the mouse. The idea I had was to sample the events since it is not a problem to ignore some of them. I implemented a simple event sampler (I called it Filter, and it is good for sampling any objects), that guarantees three things: the very first event in the burst will be delivered; the very last event in the burst will be delivered; any other events will be delivered periodically. This scheme works because each mouse event encapsulates all necessary information.
The result of the project is an interactive educational aide for computer graphics students, having a simple, virtually intuitive, user interface, yet featuring substantial functionality. The functionality is implemented in the Java programming language and is encapsulated in four applets that can be distributed over the Internet.
All the objectives stated in the proposal have been met. This project gave me practical knowledge of Java and was a great experience in object-oriented design. I also learned a lot about color and related topics.
This project can be enhanced in the following ways:
1. A notion of an illuminant/white point could be introduced, and the user could be able to select an illuminant in the conversions between RGB and CIEXYZ, and CIEXYZ and CIELAB.
2. The notions of complementary colors, dominant wavelength / nonspectral colors, and excitation purity could be introduced in the chromaticity diagram applet.
3. The CMY color space could be added to the RGB color space frame. I suggest using a selector for RGB or CMY.
4. In the Game applet the current criterion for matching is rather ad hoc. Distance between the two colors is calculated in the RGB space, which is perceptually non-linear. In other word, if we take two pairs of colors that have the same geometrical distance in the RGB space, sensations of color difference in many cases will be different for these pairs. The distance between two colors must be computed in one of linearized color spaces, such as CIELAB or CIELUV.
5. An event filter is used to improve the response time for mouse motion events. The filter is currently programmed to sample the mouse motion event bursts at a rate of 2 per sec (delay = 500 msec). The filter implements setDelay() function, which could be used dynamically to adjust the delay time. I suggest using a low-priority thread to measure performance and adjust the sampling rate. Having a fixed sampling rate is unpleasant for the users of both fast and slow computers. For slow machines, the events are sampled too fast and get queued; when the user has stopped moving the mouse, the system will not stop responding immediately. For fast machines, full advantage is not taken of the CPU's performance, and the system's response will be annoyingly slow.
6. The project could also be extended by including other concepts of color theory. Using animation, sound and/or video may be very helpful.
If something that you need to do is something that you like to do, it is always fun. That is the way it was with this project. It provided me with a great deal of experience with Java as a programming language, and with Java as a new platform. The knowledge that I acquired is invaluable as it provides me with the initial impetus to head towards embracing Java as a computing paradigm.
And I hope, it won't pass unnoticed. The best reward for me would be if somebody uses it.