SketchWave Ring Demo

SWRing is a SketchWaveJS shape object that represents a circle outline (ring) drawn on an SWGrid. A ring has a center (an SWPoint), a radius (in grid user units), and a thickness (stroke weight in pixels). The ring is drawn with no fill — only a stroke styled by an SWColor. An optional center-dot marker can be shown.

Animations

• Breathe Radius (key: 1): oscillates the ring radius using an SWSinusoid — the ring expands and contracts.
• Breathe Thickness (key: 2): oscillates the stroke weight using an SWSinusoid — the ring grows thin or bold.
• Breathe Opacity (key: 3): oscillates the stroke alpha using an SWSinusoid — the ring fades in and out.
• Hue Cycling (key: h): oscillates the stroke color hue using an SWSinusoid — the color shifts continuously across the spectrum.
• All four animations can run simultaneously and independently.

What you can explore in this demo

• Ring styling: change stroke color, opacity, radius, and thickness.
• Center dot: toggle a small marker at the ring's center point. When visible, drag the dot to reposition the ring anywhere on the grid.
• Background trails: lower the background alpha (Background accordion) to see ghost trails as the ring breathes.
• Combine animations: try running Breathe Radius + Hue Cycling together for a pulsing, color-shifting ring effect.

Keyboard shortcuts

• 1 — toggle Breathe Radius
• 2 — toggle Breathe Thickness
• 3 — toggle Breathe Opacity
• h — toggle Hue Cycling
• r — factory reset (all settings + ring)
• q — stop all animations and snap ring back to base values

SketchWaveJS classes used by this demo

• SWRing Reference
• SWGrid Reference
• SWPoint Reference
• SWColor Reference
• SWSinusoid Reference