📶 SketchWave WiFi Demo

SWWifi is a SketchWaveJS composite shape that renders a WiFi / signal-strength symbol: a set of concentric arcs each centered on the same point, plus a filled dot at the origin. Every arc spans the same angular width (theta) and is symmetrically centered on a configurable direction. The entire group can be rotated as a unit and animated.

Shape Parameters

• Number of Arcs — how many concentric arcs to draw (1–7).
• Inner Radius / Arc Spacing — the radius of the innermost arc and the radial gap between consecutive arcs (in user/grid units).
• Dot Radius — radius of the filled center dot (signal origin).
• Arc Span (theta) — angular width of each arc in degrees. 90° produces the classic WiFi look; 360° makes full rings.
• Direction — which way the arcs open (CCW from the +x axis; default 90° = pointing straight up).
• Static Rotation — tilts the whole shape before any animation.
• Arc Thickness — stroke weight of the arcs in pixels.
• Opacity — alpha for arcs and the center dot.

Signal Strength

• Active Arcs — arcs up to this count glow at full brightness; the rest are drawn as inactive. Set to 0 for “no signal”, max for “full signal”.
• Inactive Arcs — Brightness Factor — scales the color brightness of inactive arcs (0 = black, 1 = same color as active arcs).
• Inactive Arcs — Opacity — controls the transparency of inactive arcs independently of brightness (0 = invisible, 100 = fully opaque).

Animations

• Pulsing — sweeps the lit arc one at a time from the innermost to the outermost, then loops. Only the current arc glows at full brightness; all others render using the Inactive Arcs Brightness & Opacity settings. Controlled by Pulse Speed (arcs per second).
• Breathing — oscillates the arc stroke weight between Min and Max thickness using a sinusoid. Gives a pulsing “signal” effect.
• Spinning — rotates the whole shape about its center at a configurable deg/s. Negative = counter-clockwise.
• Combine pulsing, breathing & spinning for layered animation effects!

Dragging

• Enable Show Center Handle in the Environment section to reveal a small crosshair marker at the shape’s anchor point.
• Click and drag that handle to reposition the shape anywhere on the canvas.
• Drag works whether animations are running or not — the shape keeps breathing, spinning, or pulsing while you move it.
• Set isDraggable = false in code to lock the position programmatically.

Quick Controls

• p — toggle pulsing
• b — toggle breathing
• s — toggle spinning
• r — factory reset
• q — stop all animations

SketchWaveJS classes used

• SWWifi Class Reference — full parameter and method documentation
• SWArc Demo — the single concentric-arc building block
• SWRing Demo — full-circle cousin of SWArc
• SWDisk Demo — the filled center dot
• SWGrid Reference
• SWColor Reference
• SWSinusoid Reference