What is Hue Whirl?
This iPhone/iPad app is all about manipulating color. With eighteen different adjustable effects (or filters) it is a powerful tool for creatively tweaking your digital photos and other images. Hue Whirl is designed to be easy to use, and includes built-in help text for instant reference. However it is very powerful and flexible, which entails some unavoidable complexity. This page is intended to serve as a supplement to the help system for current Hue Whirl users, and to introduce potential new users to some of the amazing things they can do with this app.
The image to the left shows HueWhirl's main view, with the "Hue Shifter" filter active. The tool bar buttons at screen bottom access the other views:
The image to the left shows HueWhirl's main view, with the "Hue Shifter" filter active. The tool bar buttons at screen bottom access the other views:
- camera icon -- snap an image with the built in camera.
- Load -- load an image from the photo album
- 1 and 2 buttons -- access filter selection screens.
- ? -- view the main help screen
- circular arrow -- replace the working image with the filter output
- Save -- save the filter output to your photo album.
|
|
Two filter selection views allow you to choose from eighteen different effects. Tapping one of the filter button applies that filter and returns to the main view. The "Cancel" button returns to the main screen without changing the filter selection. To get more information about what a particular filter does, just hold your finger on its button until a help view appears. The iPad version does not use these views -- instead all of the filter buttons appear on the main view.
|
The rest of this page is in two sections. The first, "How to Talk About Color" is a basic introduction to color terminology and coordinate systems. It provides information that should help to understand the second section, "The Hue Whirl Filters". This section describes each of the filters, and provides visual examples of what they do.
How to Talk About Color
In order to describe how Hue Whirl manipulates color, we need a vocabulary that allows us to precisely describe colors and how they can be changed. To define the necessary terms, we need to discuss how humans perceive color, how to control display devices (such as an iPhone screen) to produce a particular color perception, and how to specify these display settings in numerical and geometric terms.
Our eyes contain three types of light sensitive cells, each of which responds to a certain range of frequencies. If only the cells that respond to the low frequency range are stimulated, we see red. If just the cells sensitive to high frequencies are stimulated, we see blue. Cells that respond to intermediate frequencies between the red and blue range are responsible for green. All of the other colors we see result from these red, green and blue sensitive cells being stimulated in different combinations.
A computer display is made up of a rectangular grid of light emitting picture elements (pixels, for short). Each pixel actually contains three separate light sources, each of which emits light with a frequency corresponding to the red, green and blue ranges of the eye. In other words, each pixel consists of a red, a green and a blue light and the brightness of each of these lights is controlled by the computer. Properly setting the red, green, blue levels for each of the millions of pixels produces the images we see on the screen.
Display device's physical limitations mean that the brightness (or intensity) of the color components can only vary over some finite range. In order to assign numerical values to possible brightness values, we consider zero to represent minimum brightness and one to represent maximum brightness. Thus, we can specify a pixel's color using three numbers between zero and one corresponding to red, green and blue intensities. We can notate this compactly as (r,g,b) where the letters r, g, b stand for numbers representing red, green and blue levels, respectively. Thus, the triple (1,0,0) denotes red, (0,1,0) denotes green and (0,0,1) denotes blue. Of course, displays are usually not restricted to just one and zero values-- we can specify triples such as (0.7, 0.3. 0.5) or (0.1,0.1,0.1) or whatever we like, so as to span the full gamut of human color perception.
Although the (r,g,b) notation is precise, it is not very intuitive. By associating these triples with coordinates of spatial locations, we can use our intuitive understanding of three dimensional geometry to better understand color. Imagine a huge building in the shape of a cube that is a kilometer in each dimension, with the walls aligned north-south and east-west, and a single door at the south-west corner (and on the ground floor, naturally). To guide someone to a specific location in this vast, featureless edifice you could tell them to go a certain distance east from the entrance, then a certain distance north and finally a certain distance up. These directions could be notated symbolically as (e, n, u). By making the obvious correspondence of r = e, g = n, b = u we can associate a color with every location in this cube. This sort of assignment of color triples to spatial locations is called a RGB color space.
Now we can get our bearings in this color space. The "door" is located at (0,0,0) and is called the "origin" and is associated with the color black, The three corners immediately adjacent to the origin have coordinates (1, 0, 0), (0, 1, 0) and (0, 0, 1) correspond to the additive primary colors red, green and blue. As we move from the origin along an edge leading to one of these corners we pass through increasingly bright shades of the corresponding primary color. The color white (coordinates (1,1,1)) is at the farthest corner from to origin. It turns out that the line from the origin to this opposite corner is somewhat special, because the every point on it is reached by going equal distances in each direction -- that is, the coordinates are (k, k, k) where k stands for some value between zero and one. We perceive such equal color mixtures as shades of gray, so (0,0,0) is the darkest gray (that is, black) (1,1,1) is the brightest (white) and (.5,.5,.5) is a middle gray tone. We will have more to say about this "gray line" later. Finally, if we visit the remaining corners of the color cube at (0,1,1), (1,0,1) and (1,1,0) we find the colors cyan, magenta and yellow, respectively. Notice that these three colors are white with one component set to zero. They are called the subtractive primary colors. If you painted an object with a pigment that completely absorbed one of the additive primary colors and shone white light on it, then the reflected light would be the corresponding subtractive primary color.
Giving east, north and up distances is only one of may possible ways to describe a location in our giant cube building. For instance, one could say "go up a certain distance, then turn to face a certain direction and finally walk straight ahead horizontally for a certain distance". Directions given in this form are called cylindrical coordinates, since they describe a location as the height and radius of a cylinder, plus an angular position on the top edge. For describing colors, it turns out that a somewhat different cylindrical coordinate system is useful. In this system, the axis of the cylinder is the gray line running between the diagonally opposite black and white corners of the cube. A location is described as a axial distance along this diagonal from the origin, a radial distance in a direction perpendicular to the axis, and an angle that determines the radial direction. When used to refer to colors, these coordinates are given names: axial distance is called "luminance" (or simply "lum"), the radial distance is called "chroma" (or "saturation") and the angular direction is called "hue". We will refer to this system as HCL coordinates for short.
These HCL coordinates are thought to better relate to the way we perceive colors than do RGB coordinates. Luminance relates to the overall darkness are brightness of a color -- lower luminance is closer to black, higher luminance is closer to white. Chroma describes how "pure" or "saturated" the color is. Colors with lower chroma are closer to being gray ("desaturated") whereas higher chroma colors are more intense. Hue relates to the intrinsic nature of a color. If we keep hue fixed, and change chroma and or luminance we tend to see the perceive these different colors simply as similar variations on fundamentally the same color.
Our eyes contain three types of light sensitive cells, each of which responds to a certain range of frequencies. If only the cells that respond to the low frequency range are stimulated, we see red. If just the cells sensitive to high frequencies are stimulated, we see blue. Cells that respond to intermediate frequencies between the red and blue range are responsible for green. All of the other colors we see result from these red, green and blue sensitive cells being stimulated in different combinations.
A computer display is made up of a rectangular grid of light emitting picture elements (pixels, for short). Each pixel actually contains three separate light sources, each of which emits light with a frequency corresponding to the red, green and blue ranges of the eye. In other words, each pixel consists of a red, a green and a blue light and the brightness of each of these lights is controlled by the computer. Properly setting the red, green, blue levels for each of the millions of pixels produces the images we see on the screen.
Display device's physical limitations mean that the brightness (or intensity) of the color components can only vary over some finite range. In order to assign numerical values to possible brightness values, we consider zero to represent minimum brightness and one to represent maximum brightness. Thus, we can specify a pixel's color using three numbers between zero and one corresponding to red, green and blue intensities. We can notate this compactly as (r,g,b) where the letters r, g, b stand for numbers representing red, green and blue levels, respectively. Thus, the triple (1,0,0) denotes red, (0,1,0) denotes green and (0,0,1) denotes blue. Of course, displays are usually not restricted to just one and zero values-- we can specify triples such as (0.7, 0.3. 0.5) or (0.1,0.1,0.1) or whatever we like, so as to span the full gamut of human color perception.
Although the (r,g,b) notation is precise, it is not very intuitive. By associating these triples with coordinates of spatial locations, we can use our intuitive understanding of three dimensional geometry to better understand color. Imagine a huge building in the shape of a cube that is a kilometer in each dimension, with the walls aligned north-south and east-west, and a single door at the south-west corner (and on the ground floor, naturally). To guide someone to a specific location in this vast, featureless edifice you could tell them to go a certain distance east from the entrance, then a certain distance north and finally a certain distance up. These directions could be notated symbolically as (e, n, u). By making the obvious correspondence of r = e, g = n, b = u we can associate a color with every location in this cube. This sort of assignment of color triples to spatial locations is called a RGB color space.
Now we can get our bearings in this color space. The "door" is located at (0,0,0) and is called the "origin" and is associated with the color black, The three corners immediately adjacent to the origin have coordinates (1, 0, 0), (0, 1, 0) and (0, 0, 1) correspond to the additive primary colors red, green and blue. As we move from the origin along an edge leading to one of these corners we pass through increasingly bright shades of the corresponding primary color. The color white (coordinates (1,1,1)) is at the farthest corner from to origin. It turns out that the line from the origin to this opposite corner is somewhat special, because the every point on it is reached by going equal distances in each direction -- that is, the coordinates are (k, k, k) where k stands for some value between zero and one. We perceive such equal color mixtures as shades of gray, so (0,0,0) is the darkest gray (that is, black) (1,1,1) is the brightest (white) and (.5,.5,.5) is a middle gray tone. We will have more to say about this "gray line" later. Finally, if we visit the remaining corners of the color cube at (0,1,1), (1,0,1) and (1,1,0) we find the colors cyan, magenta and yellow, respectively. Notice that these three colors are white with one component set to zero. They are called the subtractive primary colors. If you painted an object with a pigment that completely absorbed one of the additive primary colors and shone white light on it, then the reflected light would be the corresponding subtractive primary color.
Giving east, north and up distances is only one of may possible ways to describe a location in our giant cube building. For instance, one could say "go up a certain distance, then turn to face a certain direction and finally walk straight ahead horizontally for a certain distance". Directions given in this form are called cylindrical coordinates, since they describe a location as the height and radius of a cylinder, plus an angular position on the top edge. For describing colors, it turns out that a somewhat different cylindrical coordinate system is useful. In this system, the axis of the cylinder is the gray line running between the diagonally opposite black and white corners of the cube. A location is described as a axial distance along this diagonal from the origin, a radial distance in a direction perpendicular to the axis, and an angle that determines the radial direction. When used to refer to colors, these coordinates are given names: axial distance is called "luminance" (or simply "lum"), the radial distance is called "chroma" (or "saturation") and the angular direction is called "hue". We will refer to this system as HCL coordinates for short.
These HCL coordinates are thought to better relate to the way we perceive colors than do RGB coordinates. Luminance relates to the overall darkness are brightness of a color -- lower luminance is closer to black, higher luminance is closer to white. Chroma describes how "pure" or "saturated" the color is. Colors with lower chroma are closer to being gray ("desaturated") whereas higher chroma colors are more intense. Hue relates to the intrinsic nature of a color. If we keep hue fixed, and change chroma and or luminance we tend to see the perceive these different colors simply as similar variations on fundamentally the same color.
Slicing the HCL Cylinder
To get an intuitive feel for the meaning of hue, chroma and luminance it may help to look at what happens if we hold one of these coordinates constant and allow the other two vary. This amount to "slicing" through the HCL cylinder in various way. We show examples of such slices below. We will also use this slices as test images when demonstrating Hue Whirl's various filters, since these simple synthetic images make effects of the filter more obvious than more complex natural images.
Fixed Hue, Varying Luminance and Chroma
As an illustration, consider the image to the left. It was created by choosing a fixed hue angle, and varying luminance and chroma across the image. Luminance is determined by the vertical position of each pixel, with maximum luminance and the top and minimum luminance at the bottom. Chroma depends on the horizonal pixel location, with the lowest chroma on the left and the highest chroma on the right. This image is like a vertical "slice" from the cylinder, with the vertical direction aligned with the axis, and the horizontal displacement corresponding to radial distance from the axis. Notice how the primary green hue shades from white to light green to dark green and to black from top to bottom as luminance decreases. Also observe the increasingly gray tone near the left edge, where the chroma value is low. Compare this to the right edge, where the high chroma means that the color remains distinctly green until it fades into white or black.
Fixed Luminance, Varying Hue and Chroma
Another way of slicing the HCL cylinder is to cut perpendicular to the axis (like slicing a sausage) so that within a slice luminance stays constant, but hue and chroma vary. The image to the left is an example of such a cut. Chroma corresponds to the distance from the center of the disc, and hue to the direction from the center.
Fixed Chroma, Varying Hue and Luminance
Finally, we can keep chroma fixed and vary hue and radiance. This is like peeling a cylindrical rind off the HCL cylinder at a constant radius around the axis. The image to the left is such a rind, laid out flat. The vertical direction corresponds to luminance (the direction of the axis) and the horizontal direction is hue angle. The result is a color spectrum that varies in brightness from top to bottom.
The Hue Whirl Filters
Hue Shift
This filter adds (or subtracts) a constant value from the hue angle for each pixel.
This is a constant chroma slice with the slider in the neutral center position (zero shift).
|
Moving the slider to the right adds a constant (left of center subtracts). This moves the spectrum to the right. Note that blue has turned to red, green to blue, and so on.
|
This is the same shift applied to a natural image, which produces unnatural colors!
|
Hue Expansion
This filter spreads a small ranges of hues over the entire spectrum. Hues outside of this range are converted to a single background hue.
This hue expansion applied to the constant chroma slice. The hue selection is set to a orange hue, and the background hue is blue.
|
This is an unaltered fireworks shot (show with Hue Shifter using zero shift).
|
Applying Hue Expansion with the settings in the leftmost image turns the orange fireworks multi-colored.
|
Chroma Enhance
This filter makes colors brighter by increasing chroma independent of hue. The amount of chroma increase depends nonlinearly on the original chroma value. The increase is greatest for intermediate chroma values, and low and high chroma values are changed less. The adjustment is also modified depending on luminance: colors with high or low luminance are changed list. This helps prevent unsightly highlight or shadow artifacts.
This is the constant luminance slice with the boost setting at the minimum, which effectively disables the chroma enhancement.
|
Here the boost setting is maximum. Note that chroma is increased significantly for all for all but the most and least saturated colors.
|
A constant chroma slice illustrates the effects of lum damping (which are not apparent in the constant luminance slices). Here, the lum damping is minimum.
|
Here the lum damping is maximum. Note the wider dark and light bands at the luminance extremes.
|
The boost is turned off to provide an unaltered comparison image.
|
A moderate boost curve setting creates a bright, "postcard like" appearance.
|
Partial De-color
This filter converts less saturated (lower chroma) colors to shades of gray, but retains more saturated (higher chroma) colors. This can be used to create a "selective color" effect to focus attention on brightly colored objects in a scene.
With gain at the lowest setting, we see little effect on the constant luminance slice.
|
Increasing gain to the maximum changes all but the highest chroma colors to gray.
|
In this image, the gain is adjusted to retain colors in the rubber band ball while converting the fingers to gray scale.
|
Selective Hue Retain
This filter converts a hues to shades of gray, with the exception of a selected range of hues.
Applied to a constant chroma slice with low selectivity, which retains a broad range of hues.
|
High selectivity retains a narrow hue range, which is set to save blue hues.
|
Applying the settings to the left to the rubber band ball image retains color only in the blue bands.
|
Hue Quantize and Shift
This filter uses a finite number of discrete colors to represent the (conceptually) infinite continuum of colors in an image. This is like coloring the image with a limited number of crayons, or like painting with a restricted palette. The colors used correspond to points that are uniformly spaced in the HCL color space. The angular position (hue) of these points can be rotated to adjust the hue palette. Compare this filter to the RGB Quantize filter, which is similar except that it uses RGB color coordinates.
Default settings applied to a constant chroma slice. The grid pattern results from the uniform spacing of the color quantization points in the hue and luminance dimensions.
|
The same settings with a constant luminance slice. Here we see uniform wedges because the hue coordinate is represented as an actual angle.
|
Here the shift angle slider is at the extreme right. The effect is to rotate the constant-hue wedges half a step counter-clockwise.
|
Here the number of quantization levels has been reduced, so the space between color points as correspondingly increase, causing larger blocks in this constant chroma slice.
|
Here is a real image example, with a small number of quantization levels. The restricted color palette creates a "paint by numbers" look.
|
This shows the effect of changing the shift angle. The result is similar, but with a different set of hues in the palette.
|
RGB Quantize
This filter uses a restricted color palette corresponding to a set of uniformly spaced points in the RGB color space. Each color in the original image is replaced by the nearest color in this collection. This is similar to the the Hue Quantize and Shift filter, which uses HCL color coordinates instead.
This is a constant chroma slice quantized with a low number of levels. It breaks the smooth color transitions of the original image into discrete constant color regions. Because the quantization points are not uniform in the HCL coordinates, these regions have complicated shapes.
|
This is the result of quantizing an image with red and green coordinates that increase uniformly from left to right and top to bottom, respectively. The blue component is zero everywhere. The resulting uniform block pattern demonstrates the uniform distribution of quantization points in RGB coordinates.
|
Here is a natural image with RGB quantization. Note the subtle differences in the color palette compared to other quantizers.
|
Hue Vector Quantizer
This filter replaces the continuous hue and chroma values in the original values with a finite number of discrete values. The original luminance values are not changed. The specific hue+chroma points (or "bins") used are chosen by a mathematical algorithm called "vector quantization" (VG). This algorithm analyzes the original image and (for sone specified number of bins) attempts to find points best approximate the original image. There is a random element in this algorithm, so that repeat applications to the same image with the same settings may produce different results. You can demonstrate this by moving the "Number of Bins" slider away from, then back to its original position before releasing it. This causes the VG to be re-run to refresh the image, without changing the number of bins.
A constant chroma slice vector quantized with a low number of bins. Note that although the hue spectrum is broken into discrete chunks, there is a smooth gradation of luminance within these chunks because luminance is not quantized.
|
Because luminance is not quantized, details of the original image tend to be preserved, but there can be interesting hue changes.
|
Even with the number of bins set to the minimum, the quantization effects can be subtle because luminance is preserved.
|
Lum-Hue Vector Quantizer
The filter is similar to the Hue Vector Quantizer filter, except that all three Hue-Chroma-Luminance coordinates are quantized. As a result, the quantization effects are more dramatic and the random element is more pronounced. There is an additional slider to adjust the number of luminance bins.
Applied to a constant chroma slice. Note the very irregular partitioning of the color space.
|
The settings for the constant chroma slice applied to a natural image.
|
Repeating the quantization with the same settings (by moving a slider away from then back to its original position) gives a different result because of the random element.
|
Selective Hue Remove
This filter replaces a selected hue range with shades of gray (with the same luminance as the original hue).
Applied to a constant chroma slice with blue hues selected at medium selectivity.
|
Increasing selectivity makes the range of affected hues narrower.
|
Applied to remove redding hues in a natural image. This turns the skin and red rubber bands gray.
|
Selective Hue Lighten
This filter increases the luminance of a selected range of hues. The effect is reduced for colors with high or low luminance, in order to reduce unattractive artifacts resulting from image noise.
Applied to lighten a green hue range in a constant chroma slice.
|
The color of the red object is lightened in this natural image. Compare this to the image to the right.
|
Here, blue hues are lightened (compare with image to the left). You can use the refresh button to re-apply this filter to increase the effect.
|
Selective Hue Darken
This filter decreases the luminance of a selected range of hues. The effect is reduced for colors with high or low luminance, in order to reduce unattractive artifacts resulting from image noise.
A constant chroma slice demonstrates darkening of green hues.
|
The same settings as the image to the left are applied to a natural scene.Compare the green object to the image to the right.
|
The same source image as on the left, but with hue selection set to red.
|
Selective Hue Saturation
Increase saturation (chroma) for a selected hue range, which makes the affected colors brighter and clearer. For colors that have very low saturation, hue can be largely due to sensor noise which can cause spurious colors in shadows or highlights. The saturation increase is therefore attenuated for colors with low chroma values.
Applying this filter to a constant luminance slice creates a wedge of bright color in the selected hue range (red in this example). Notice that the wedge is truncated near the center, due to the low saturation cut-off.
|
The settings to the left applied to a natural image. Compare the red object to the image on the right.
|
In this case, blue hues were selected. Compare the color of the blue object to the image on the left.
|
Hue Scaling
This filter multiplies the hue angle component of every color by a user specified gain value. In addition, a specified offset constant is subtracted from the hue angle before preforming the multiplication. Gains less than one will reduce the range of hues, and conversely, gains greater than one will increase the range -- up to a point. Because hue is an angle, the same hue can be represented by different angles (that is, adding any integer multiple of 360 degrees to an angle just goes all the way around the circle and comes back to the same place). As a result, high gains tend to produce unusual "rainbow" effects. The default gain setting is one.
A constant luminance slice with a gain greater than one. The hue angle "wraping around" creates repeating spectral wedges.
|
With a high gain, the small variations in the nearly uniform skin hue are amplified into rainbow hues.
|
A gain less than one limits the range of hues, but varying the offset creates interesting color shifts.
|
Scale Chroma
This filter adjusts the chroma (saturation) value of all colors in the image. With the gain slider in the middle, chroma is not changed. Moving it to the left decreases chroma, and to the right increases it.
|
|
|