SketchWave Sun Demo

The SWSun class renders a styled sun (or moon) with a central SWDisk ball surrounded by radiating shapes. It supports four ray types, a multi-layer soft glow, and three independent animations: breathing (scale pulse), spinning (ray rotation), and wave ripple (sinusoid phase animation).

Ray Types

• Sinusoid (default): Wavy lines using SWSinusoid-style math. Amplitude and number of wave cycles are adjustable. Enable Wave Ripple to animate the waves; use the Direction toggle to choose outward (default) or inward.
• Line: Simple straight lines radiating from the ball edge.
• Arrow: Arrowhead lines (using SWArrow internally) pointing outward.
• Triangle: Isosceles spikes (using SWTriangle internally) with the tip pointing out.

How to Use This App

• Ray Shape: Choose a ray type from the dropdown and adjust the count with the slider — these two controls are always visible.
• Ball Appearance: Set the ball radius (as % of canvas width), fill colour, border colour, thickness, and glow settings.
• Ray Details: Adjust ray length, thickness, and type-specific parameters (wave amplitude/periods for sinusoid, spike width for triangle).
• Ray Colours: Set 1 to 5 colours that cycle across rays. With 12 rays and 3 colours, every third ray shares a colour.
• Breathing: Click Breathing: Off or press B to toggle. Smoothly scales the ball and rays between Min and Max scale values over the given period.
• Spinning: Click Rotation: Off or press S to toggle. Spins all rays at a constant rate (deg/sec). Negative values rotate counter-clockwise.
• Wave Ripple: Only active with the sinusoid ray type. Click Ripple: Off or press P to start the animation. Use the Direction toggle (⬆ Outward / ⬇ Inward) to control which way the waves travel — outward is the default.
• Scene: Switch between Day, Sunset, and Night to change the sky gradient and sun colour presets simultaneously.
• Pause/Resume: All animations pause cleanly and resume from exactly where they left off.
• Keyboard shortcuts: B breathe   S spin   P ripple   R reset   Q quit
• Save Image: Click the Save Image button to download a timestamped PNG.

Key SWSun Methods

• draw() — draw in screen (pixel) coordinates
• drawOnGrid(grid) — draw mapped through a SWGrid
• breathe(sinusoid, t) — scale ball + rays via SWSinusoid
• rotateRays(degPerSec, t) — rotate all rays
• animateSinusoid(phaseDegPerSec, t) — ripple sinusoid rays
• transform({sinusoid, t, degPerSec, phaseDegPerSec}) — all three at once
• reset() — restore animation state to initial values

Constructor

new SWSun(cx, cy, ballRadius, ballFillColor, options)

See swSun.js for full option documentation.