SketchWave Gradient Demo 1

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 Background Gradients

This demo showcases the SWGradient class's ability to create dynamic, full-screen gradient backgrounds. 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
• 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
• 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)
• Coordinate System: Gradients can be drawn in screen coordinates with draw(), grid coordinates with drawOnGrid(), or within boxes with drawBoxOnGrid()

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 backgrounds
• Adjust the angle to create diagonal gradients (45°, 135°, 225°, 315°) for dynamic compositions
• 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 how the gradient fills 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.