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.
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.
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.
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.
Selective Hue Retain
This filter converts a hues to shades of gray, with the exception of a selected range of hues.
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.
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.
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.
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.
Selective Hue Remove
This filter replaces a selected hue range with shades of gray (with the same luminance as the original hue).
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.
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.
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.
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.
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.