SketchWave Two-Toned Square Demo

SWTwoTonedSquare is a SketchWaveJS composite shape: a square divided into two differently-colored regions. The pattern parameter n (1–4) selects how the square is divided:

• n=1 — Horizontal split: Color 2 fills the upper half as a rectangle.
• n=2 — Diagonal split: Color 2 fills the upper-right right-isosceles triangle whose hypotenuse runs along the top-left → bottom-right diagonal.
• n=3 — Quadrant squares: Color 2 fills two smaller squares (side = ½ main) placed in the top-left and bottom-right quadrants; their inner corners meet at the center.
• n=4 — Opposite triangles: Color 2 fills two triangles (top and bottom) whose bases span the full top and bottom sides and whose apex is the center.

All four patterns spin and breathe as a unit because drawing uses a single push / translate / rotate / pop block — the pattern shapes always stay correctly oriented relative to the base square.

Drawing model — why raw p5.js primitives?

Unlike SWTwoTonedDisk, which composes four independent sub-objects (SWSector + SWArc pairs), SWTwoTonedSquare draws everything with raw p5.js calls (rect(), beginShape / vertex / endShape) inside a single coordinate transform block. This is the right choice here because:

• All shapes are defined in local coordinates — origin at the square's center, axes already rotated — so raw primitives are simpler and need no extra mapping.
• There are no independent outline arcs or fill/stroke pairs that require separate objects; Color 1 and Color 2 are simple fills with no stroke.
• Adding SWRectangle or SWTriangle sub-objects would mean re-deriving each sub-shape's position in user space every time size or rotation changes — extra work with no benefit for this geometry.

The payoff: _drawCore() is short and readable, and all four patterns are fully consistent with each other.

Animations

• Spin: rotates the entire shape about its center (degrees/second; negative = clockwise).
• Breathe: oscillates the overall side length using an SWSinusoid. All pattern shapes scale uniformly with the base square.
• Hue Cycling: sweeps Color 1 through a hue range. Color 2 gets the Color 1 hue plus a fixed offset (default 180° = complementary colors). Set the offset to 0 to cycle both colors together.
• All three animations can run simultaneously and independently.

What you can explore in this demo

• Switch between the four patterns while the shape is spinning to see geometry changes in motion.
• Enable Spin + Breathe + Hue Cycling all at once for a dynamic animated design.
• Use opacity to create semi-transparent layering effects.
• Lower the background alpha to leave colorful motion trails.

Quick controls

• Click the canvas to hide/show the grid.
• Drag the center marker to reposition the square.
• Keyboard: s (spin), b (breathe), h (hue cycle), r (factory reset), q (stop all animations), 1–4 (switch pattern).

SketchWaveJS classes used by this demo

• SWTwoTonedSquare Reference
• SWGrid Reference
• SWPoint Reference
• SWColor Reference
• SWSinusoid Reference