Gradient Editor Overview
The Fractal Science Kit fractal generator Gradient Editor allows you to edit a Gradient. A gradient is a continuous set of colors mapped into the range 0 to 1. Gradients are used by the Color Controllers to map the sample data to colors for display. Visually, a gradient is presented as a short wide rectangle filled with colors that vary as you move from left to right within the rectangle. The colors remain fixed as you move up and down. The horizontal position, as you move from the left edge to the right edge within the rectangle, is mapped into the range 0 to 1. You define a gradient by specifying a small set of control points. Each control point is positioned within the gradient and is assigned a color. The colors assigned to the area of the gradient between any 2 control points are computed by interpolating (in RGB space) between the points.
The Gradient Editor is divided into 2 panes: the RGB rectangles and the Control Point Properties. The RGB rectangles pane is subdivided into 3 rectangles that represent (from top to bottom) the Red, Green, and Blue components of the control point colors. The background of each rectangle displays the gradient. On top of the gradient, the control points are shown as a series of small boxes connected by an interpolation curve (a dashed curve connecting the control points). The color of the box is red, green, or blue, based on which rectangle it is in. The vertical position of each point within a given rectangle represents the contribution of the associated color component to the control point color as a ratio of the height of the point to the height of the rectangle. For example, the vertical position of a point in the top rectangle represents the amount of red in the associated color. Points near the bottom of the rectangle have a small red contribution while points near the top have a large red contribution. You can also determine the red, green, and blue contributions in the area between control points by examining the interpolation curves at any position in the gradient.
If you click on a control point, the Gradient Editor selects it and makes it the current point. The box for a selected point is colored white. You can add points to the selection by clicking on a new point while holding down the Control Key (Ctrl). For example, you could click on the 1st point to select it and then Ctrl-click on the 2nd point to add it to the selection. Ctrl-clicking a point selects it if it is not selected, or unselects it if it is. This is called toggling the selection of the point. You can also select multiple points at one time by pressing the left mouse button when the mouse pointer is located on one of the RGB rectangles and dragging the mouse while holding down the mouse button. As you move the mouse, a rectangle is drawn from the point where you started to the current mouse position. When you release the mouse button, all the control points inside the rectangle are selected. This is called sweep selection. Finally, if you hold down the Control Key (Ctrl) while you perform the sweep selection action, you toggle the selection of the control points inside the rectangle.
When you add a point to the selection, the newly selected point is also made the current point. There is, at most, a single current point. If the selection is empty, there is no current point. However, if the selection contains 1 or more points, exactly 1 of them is designated the current point. The current point is displayed with 2 dotted lines running vertically out of the top and bottom of the control point box. If you click the left mouse button on a selected point, it becomes the current point.
If you press the left mouse button down while over a selected control point and then move the mouse while holding down the button, all of the selected control points will move along with the mouse pointer relative to their initial position. You can release the mouse button when the points are in the desired location. By default the control point position is locked and changes via the mouse will affect only the color components. Several items on the Gradient menu control this behavior. Change Position can be selected to lock the control point color and change only the position. Select Change Both to adjust both the color and position of the points. Select Change Color/Opacity to restore the default behavior.
You can also modify the control point color using the Color Selection Dialog. Simply double-click a control point to display the dialog, change the color, and click Ok. If multiple points are selected, all the points are reset to the new color.
To add control points you must select Add Points on the Gradient menu. By default, when you click on the rectangle, your action affects the selection as described above. Once you select Add Points however, clicking anywhere on the rectangle adds a new control point at that location instead. When you are done adding points you can restore the default behavior by selecting Select/Adjust Points on the Gradient menu.
A 4th rectangle can be added to the top pane that displays the color's Alpha channel, also called the color's opacity. The Opacity rectangle is identical in operation to the RGB rectangles except that it has an independent set of control points, and these control the opacity of the gradient in the same way the red channel of the color is controlled by the top rectangle in the RGB rectangles. Points close to the top of the rectangle have high opacity while points close to the bottom of the rectangle have low opacity. To visualize opacity, the Gradient Editor displays a checkerboard pattern that is invisible in those locations with full opacity and that becomes increasingly apparent as the opacity is reduced.
When the Opacity rectangle is displayed, either the RGB rectangles or the Opacity rectangle has focus. A box is present around the rectangle with focus. Click a rectangle to move the focus. The Gradient Editor commands operate on the rectangle with focus. In the remaining discussion, I will concentrate on control points in the RGB rectangles and how they are affected by each command. However, be aware that most of the descriptions apply equally well to the Opacity rectangle.
Just below the top pane is the rotation slider. This can be used to rotate the gradient. That is, as you move the slider to the right, the gradient is shifted to the right and the portion of the gradient that falls off the right edge is copied into the gradient on the left. Moving the slider to the left is handled in a similar fashion. The rotation slider lets you align the gradient's colors with respect to the sample data to achieve the best result.
The bottom pane of the Gradient Editor is called Control Point Properties. The square box on the left of the pane displays the color of the current point. Click the box to display the Color Selection Dialog to reset the color of all the selected points. The Rotation field displays a numerical representation of the rotation currently in effect as a number in the range of -200 to 200. The Position field displays the horizontal position of the current point as an integer between 0 and 399. The Opacity field displays the opacity for the current point as an integer between 0 and 255. The Red, Green, and Blue fields display the RGB values for the current point. These fields are integers between 0 and 255. The Hue, Saturation, and Lightness fields display the HSL values for the current point. Hue is an integer between 0 and 359. Saturation and Lightness are integers between 0 and 100.
You can modify these fields as required. All of these fields, with the exception of Rotation, are tied to the current point. When multiple points are selected, these fields show the value of the (single) point designated the current point. However, changes to these fields are applied to all selected points relative to their current value. For example, assume that 2 points are selected that have Hue values of 60 and 120, respectively. Also, assume that the point with Hue of 60 is the current point so the Hue field will display 60. If you increase the Hue field to 65, this will change the Hue values for the selected points to 65 and 125, respectively.
To generate a gradient based on the colors in an image found on your computer, execute Generate From Image... item on the File menu, to display the Generate Gradient From Image Dialog. Select the "..." button next to the Image property to open the Select Image dialog and navigate to an image file on your computer on which to base the new gradient, and click Open. On the Generate Gradient From Image Dialog, you can adjust the properties to control the gradient generation. Then select Apply until you like the gradient displayed in the Gradient Preview, and click Ok to return to the Gradient Editor.
The menu items provide complete access to all of the commands. Most of the commands have a toolbar button as well. The following description is aimed at the menu items but applies equally well to the toolbar buttons which are not described separately. Hold the mouse over the toolbar button to see the associated menu item text.
The File menu has the following commands:
The Edit menu has the following commands:
The View menu has the following commands:
The colors assigned to the area of the gradient between any 2 control points are computed by interpolating (in RGB space) between the points. Smoothing controls the method of interpolation. If Smoothing is off, linear interpolation is used; i.e., a line is formed between adjacent control points and the point on the line at a given horizontal position defines the color. If Smoothing is on, a set of Bezier curves are constructed through the control points and these curves are used to define the color at a given position.
The Smoothing menu has the following commands:
The Gradient menu has the following commands:
The Help menu has the following commands:
Copyright © 2004-2019 Ross Hilbert