The playground shares a mathematical vocabulary, not a stock visual theme. wave-garden explores a wave field; resonant-steps makes that periodic idea audible; glyph-loom turns character seeds into curved marks; orbit-lattice applies oscillation to a responsive point field.
A common building block
A sine wave can be written as s(t) = A × sin(2π × f × t + φ).
A, amplitude, controls the distance from the centre value.f, frequency, controls how many cycles occur per unit of the input.tcan mean elapsed time, a position along a canvas path or a parameter used while constructing a shape.φ, phase, shifts the cycle relative to another cycle.
Frequency means different things in different toys. For sound, it is cycles per second, or hertz. In a drawing, it can be cycles across a normalized span. The garden’s amplitude and the lattice’s gravity are visual control values, not calibrated physical units.
A phase-shifted sine can also supply the cosine component of a circular path: cos(t) = sin(t + π/2). Combining related frequencies and phases creates richer shapes without loading an illustration. This is a general explanation of the mathematical vocabulary, not a claim that all four toys use one identical equation.
flowchart TD I[Native controls and pointer events] --> S[Toy state] S --> M[Sine-based geometry] M --> C[Canvas 2D drawing] S --> A[Gesture-started Web Audio] A --> O[Sine oscillators and gain] O --> L[Visible output level]
Browser-only runtime
The app’s public entry files are /index.html, /styles.css and /app.js. HTML provides the labelled controls, CSS provides the layout and focus treatment, and JavaScript holds the toy state, calculates paths and manages audio. The app uses browser built-ins rather than a UI framework.
Canvas is a drawing surface, not a substitute for semantic controls. Sliders, buttons and text inputs remain outside the drawing so a person can reach them through normal keyboard navigation. Wave Garden and Orbit Lattice additionally support direct input on their focusable canvases.
The runtime exposes window.__sineDebug with state, audio and pixels for inspection. The audio record includes started, muted and level. This is an observation interface for checks, not a second player interface or a promise that visible behaviour has been verified merely by reading a value. A meaningful interaction check changes a real control and observes both the resulting state and the rendered or audible path.
Audio boundaries
Resonant Steps uses Web Audio to synthesize sound from oscillators. It does not fetch or decode recordings. The browser requires a user gesture to start audio, and the toy provides separate mute and stop controls.
A signal level is not proof that a listener can hear it. Operating-system volume, a muted browser tab, output-device selection, browser autoplay policy and background-tab scheduling can all affect the experience. A browser without a usable AudioContext cannot provide the sound toy; the three silent toys do not depend on that audio output.
Use Stop when you want the sequence to end. Reduced-motion preference changes visual motion and does not imply consent to sound or act as a mute switch. Audio is intentionally opt-in regardless of that preference.
The app stops audio when the page becomes hidden or the audio context is interrupted. Returning to the page requires another Start sound gesture; sound does not resume automatically.
Motion and accessibility
The system’s prefers-reduced-motion setting disables autonomous visual animation. Input-driven changes remain visible, and an intentionally running audio sequence may still redraw on beat events. This preserves direct manipulation without requiring constant movement.
Native controls have labels and visible keyboard focus. Use Tab to reach them and the normal browser keys to operate them. Canvas arrow-key shortcuts are scoped to a focused canvas so typing and slider adjustment retain their own meanings. Pointer, pen and touch use the same coordinate-based interactions for the two directly manipulated toys.
The layout moves from a two-column toy grid to a single column at a viewport width of 850 pixels or less, with controls rearranged further on narrow screens. A skip link reaches the toys without traversing every header link.
The visual design pairs dark drawing surfaces with light signals and gives keyboard focus an explicit outline. A forced-colors stylesheet adjusts interface borders and focus indicators; it does not translate the entire canvas into semantic content. This describes the implemented high-contrast treatment, not a claim of a completed contrast audit.
The two directly manipulated canvases reserve touch gestures for the toy rather than page scrolling. Scroll from outside those surfaces when using a touch screen. Glyph Loom and Resonant Steps use their native controls instead of canvas gestures.
These measures do not make a procedural canvas fully equivalent to a textual description for every assistive technology. The readable controls and this guide describe operations; the expressive geometry itself is visual. No exhaustive screen-reader, device or browser compatibility claim is made here.
Zero shipped media assets
The app must not ship or request content-media assets:
- No raster images, SVG image files, texture atlases or sprite sheets.
- No sound files, recorded loops or instrument samples.
- No font binaries, imported icon sets or pre-drawn character outlines.
- No remote media dependencies or media hidden in base64 and data URIs.
Generated Canvas paths and synthesized oscillator signals are permitted. HTML, CSS and JavaScript are the executable source of the experience. Existing system fonts may render ordinary interface text, while the loom’s expressive marks come from calculated geometry.
The wiki is a separate Quartz document site. Its configuration uses local system fonts, enables search and enables note-properties from the first build. It does not require custom external media. The app’s asset rule should not be confused with an assertion that Quartz itself ships no runtime files.
Originality boundary
The four toys are original compositions built around their own parameter relationships. They do not reproduce a referenced game’s name, characters, artwork, sound effects or levels. Sine mathematics and general browser primitives are building blocks; the interaction design and generated forms are the authored work.
An honest review should inspect the served app files for media, exercise the actual inputs, check the audio start/mute/stop transitions and compare reduced-motion behaviour. A static screenshot can show a composition but cannot prove playability, absence of network assets or working audio controls.
Return to the playground guide.