SketchWave Arch Demo

SWArch is a SketchWaveJS shape object representing a parabolic arch defined by the quadratic function y = a·x² in a local coordinate system centered at the vertex.

The sign of a determines the arch orientation:

• a < 0 — vertex is the highest point; arch opens downward (∩ rainbow / bridge shape). Default: a = −0.30.
• a > 0 — vertex is the lowest point; arch opens upward (∪ bowl shape).
• a = 0 — degenerate case: a horizontal straight line.

xLeft and xRight set how far the arch extends to the left and right of the vertex. The two endpoints are at (−xLeft, a·xLeft²) and (xRight, a·xRight²) in local space. Set them unequal to create an asymmetric arch.

The arch is drawn as a sampled polygon: the parabolic arc is approximated at a configurable number of points (default 60). When shouldCloseShape is true (the default), a straight base line connects the endpoints to form a closed, filled shape; set it to false to draw only the open arc. Rotation is applied about the vertex.

Animations

• Spin: continuously rotates the arch about its vertex at a configurable speed (degrees/second; negative = clockwise).
• Breathe A: oscillates the a coefficient between a min and max value using an SWSinusoid. Watch the arch open and close, or even flip orientation if the range crosses zero.
• Breathe Base: oscillates xLeft and xRight together symmetrically — the arch expands and contracts like a pair of wings, stretching the base in and out.

What you can explore in this demo

• Coefficient (a): drag to control arch curvature and direction.
• xLeft / xRight: change the horizontal span on each side of the vertex independently for asymmetric arches.
• Fill Hue: sweep the hue slider across the full spectrum to recolor the arch; the border automatically shifts +10° for a natural darker-tone accent.
• Rotation: tilt the entire arch about its vertex (independent of spin animation).
• Toggle Vertex / Endpoints to show or hide the SWPoint markers at the key positions.
• Open Shape / Close Shape: toggles the shouldCloseShape property — Open removes the straight base line so only the parabolic arc is drawn; Close restores the filled polygon with the base. Great for seeing exactly what the closing line contributes to the shape.
• Drag the vertex on the canvas, or use Snap Vertex to align it to a grid intersection.
• Background trails: lower the background alpha to see ghost trails during spin or breathing.
• Try Spin + Breathe A together, especially with the breathe range crossing zero, to see the arch continuously morph through flat to bowl and back.
• Try Breathe Base + Breathe A simultaneously to combine curvature and width oscillation for an organic, living arch.
• Sample Count: drag to control how many points are used to approximate the parabola. Low values (3–15) reveal the flat polygon facets; high values (60–70) produce a smooth curve. Great for illustrating how polygon sampling works!

Quick controls

• Click the canvas to hide/show the grid.
• Drag the vertex point to reposition the arch.
• Keyboard: s (spin), b (breathe A), e (breathe base), r (factory reset), q (stop all animations).

SketchWaveJS classes used by this demo

• 3 Pt Parabola App — place three points and watch SWArch fit the parabola in real time
• SWArch Reference
• SWGrid Reference
• SWPoint Reference
• SWColor Reference
• SWSinusoid Reference