SWGradient is a SketchWaveJS class that creates smooth linear gradients at any angle.
A gradient interpolates between two SWColor objects using HSB color space with intelligent hue wraparound for natural color transitions.
The class supports drawing gradients on the full canvas, full grid area, or within custom boxes.
About This Demo: Interactive Box Gradients
This demo showcases the SWGradient class's ability to create gradients within positioned boxes. Features include:
- Color Pickers: Choose any colors for the top/start and bottom/end of the gradient
- Live HSB Feedback: See the HSB (Hue, Saturation, Brightness) values update in real-time as you adjust colors
- Angle Control: Rotate the gradient from 0° (vertical) to 360° (full rotation), with counterclockwise progression
- Position Control: Move the box anywhere in the coordinate grid by adjusting X and Y values
- Size Control: Resize the box with width and height sliders
- Box Rotation: Rotate the entire box from -180° to +180° (negative=counterclockwise, positive=clockwise)
- Grid Toggle: Click the canvas to show/hide the coordinate grid overlay
Control Panel Features
- Top/Start Color: Color picker with hex color input, displays HSB triad in monospace format (h, s, b)
- Bottom/End Color: Color picker with hex color input, displays HSB triad dynamically
- Gradient Angle: Slider from 0° to 360° with live preview. At 0°, gradient flows from top to bottom; at 90°, from left to right
- Box Position: X and Y sliders to position the upper-left corner of the box in user coordinates (-10 to 10)
- Box Size: Width and height sliders to control box dimensions (1 to 20 units)
- Box Rotation: Slider from -180° to +180° to rotate the entire box (negative=counterclockwise, positive=clockwise)
- Save Image: Export the current gradient as a timestamped PNG file for use in other projects
How Gradients Work
- HSB Interpolation: Colors blend smoothly in HSB space, preventing muddy browns that can occur in RGB interpolation
- Hue Wraparound: Takes the shortest path around the color wheel (e.g., red to violet goes through magenta, not through all colors)
- Angle System: 0° points downward (top color at top), angles increase counterclockwise (90° = left to right, 180° = bottom to top, 270° = right to left)
- Box Drawing: Uses
drawBoxOnGrid() method which takes upper-left and lower-right corners in user coordinates
Understanding the Two-Angle System
Box gradients use TWO INDEPENDENT angles that control different aspects of the appearance:
-
Gradient Angle (0-360°):
- Controls the direction colors flow WITHIN the box
- 0° = vertical (top to bottom), 90° = horizontal (left to right)
- Think: "Which way do the colors blend?"
- Stored as
gradient.angleDeg property
-
Box Rotation (-180° to +180°):
- Rotates the ENTIRE box shape in space
- 0° = no rotation (box aligned with grid), 45° = tilted like a diamond
- Positive = clockwise, negative = counterclockwise
- Think: "Is the box tilted?"
- Stored as
gradient.boxAngleDeg property
Example: Set Gradient Angle = 0° (vertical) and Box Rotation = 45° (tilted).
Result: Colors flow vertically from top to bottom, but the entire box is tilted 45° like a diamond.
The gradient remains vertical within the tilted box!
Tips for Exploration
- Try complementary colors (opposite on color wheel) like purple (300°) and yellow (60°) for vibrant gradients
- Use analogous colors (neighbors on color wheel) like blue (240°) and cyan (180°) for harmonious blends
- Experiment with low saturation (grayish tones) for subtle, professional-looking gradients
- Adjust the angle to create diagonal gradients (45°, 135°, 225°, 315°) within the box
- Move the box around the grid to see how it interacts with the coordinate system
- Try making very small boxes (width/height of 2-3) or very large ones (15-20) to see gradient detail
- Rotate the box while adjusting the gradient angle to create dynamic, multi-directional effects
- Position the box partially off-grid to see how it's clipped naturally by the canvas bounds
- Notice how the HSB triads update—observe how different hex colors map to hue values (0-360)
- Click the canvas to toggle the grid and see the box's relationship to the coordinate space
Learn More
For complete documentation including constructor parameters, all three drawing methods (draw(), drawOnGrid(),
drawBoxOnGrid()), HSB interpolation details, and advanced code examples,
see the Full SWGradient Reference Guide.