HomeJournalThis post

Quasicrystal Shader Art From Five Waves

Build fivefold interference from deterministic plane waves, then separate sampling proof from authored palette and crop.

JP
JP Casabianca
UI/UX designer and full-stack engineer · Bogotá

A quasicrystal shader can begin with five plane waves rotated evenly around a circle, yet the artwork emerges from how those waves are sampled, combined, thresholded, colored, and framed. The construction can produce fivefold, non-repeating-looking interference without claiming to simulate an atomic material.

This field note builds a deterministic WebGPU study, checks its reciprocal directions and sampling behavior, then turns the verified scalar field into an art-directed edition.

A quasicrystal shader starts with five directions

Take five unit vectors whose angles are integer multiples of one fifth of a full turn. For a point x in the plane, project x onto each vector, multiply by a shared spatial frequency, add a phase, and evaluate a cosine. Summing the five values creates a scalar interference field with a clear fivefold family of directions. The same construction can use amplitudes or phases to break symmetry deliberately.

Call the result a five-wave or quasicrystal-inspired field, not a numerical model of a specific alloy. The historic discovery of long-range orientational order without ordinary translational symmetry and the theoretical language of quasicrystals concern material and mathematical structures richer than a decorative fragment shader. Bounded language makes the visual experiment stronger because viewers can see exactly what was constructed.

A deterministic wave field begins from explicit direction vectors, wavelength, phase offsets, amplitude, coordinate scale, and numeric precision. The quasicrystal shader receipt should make all six reproducible before color enters the study.

Five-wave interference constructionFive evenly rotated wave-vector axes converge on a sample point and generate a scalar field with a fivefold directional rosette.five reciprocal directionsstyled scalar contours
Figure 1: Five directions define the grammar; phase, amplitude, transfer, and crop define the edition.

Keep historical and shader claims separate

Shechtman and colleagues reported a metallic phase with long-range orientational order and no translational symmetry in 1984. Levine and Steinhardt's quasicrystal paper belongs beside that history. The WebGPU specification defines the browser GPU programming contract used here. These sources support three different layers: material discovery, conceptual terminology, and implementation platform.

The quasicrystal shader does not derive atomic coordinates from diffraction data, establish long-range order rigorously, or reproduce either paper's experiment. It draws a deterministic superposition of five waves. State that limitation in the caption and edition manifest. The piece may evoke reciprocal-space rosettes and aperiodic tilings while remaining honest about being an authored visual analogy.

Keep “aperiodic visual pattern” as a description of the rendered construction, not a materials classification. The historical papers motivate symmetry and diffraction questions; they do not certify every five-wave image as a physical quasicrystal. State that boundary beside the artwork, not only in implementation notes.

Define coordinates before writing WGSL

Map fragment position to centered, aspect-correct coordinates so a square construction stays circular on any viewport. Choose spatial frequency in logical units rather than raw pixels. A zoom uniform controls scale, a rotation uniform turns the complete vector set, and a translation uniform moves the sample window without changing the field. Quantize edition parameters in the manifest so a resize does not silently become a new work.

For each wave index, compute its angle, unit direction, dot product, phase, and cosine contribution. Normalize the sum to a known range before styling. A quasicrystal shader should expose the linear scalar field as a debug view; if the composition only exists after extreme contrast, it may be leaning on banding or clipping rather than its five-wave structure.

Define normalized device, aspect-corrected, and artwork coordinates separately. WGSL generative art becomes easier to edition when resizing the canvas changes sampling density without silently stretching the underlying direction set.

Use a CPU reference to challenge the GPU

Implement the same equation on a small fixed grid in dependency-free JavaScript. Round values to a documented precision, hash the array, and save selected sample coordinates. The CPU reference will not be bit-identical to every GPU because floating-point evaluation and transcendental functions can differ, so compare with a tolerance and structural statistics rather than promising universal byte identity. Exact edition output can still be pinned for one named render environment.

The failure mode is calling any stable-looking screenshot deterministic. Its consequence is an edition that drifts across device, shader revision, or color pipeline. Mitigate it with parameter serialization, shader hash, reference samples, histogram, and a captured implementation profile. The quasicrystal shader then has a reproducible recipe and an explicit portability envelope.

The CPU reference should sample a small fixed grid with the same phases and tolerance as the shader. Compare values before palette mapping so color transfer functions cannot conceal coordinate or precision errors.

Inspect directions in reciprocal space

The input vector set itself forms a five-direction rosette, or ten visible rays when positive and negative directions are shown. Render that rosette beside the image and label frequency and rotation. A discrete transform of a finite, windowed image will broaden peaks and add artifacts from sampling and the crop, so use it as a diagnostic rather than proof of an infinite structure. Compare peak directions after rotating the whole field by a known amount.

Fivefold orientation should remain visible across phase choices, while local motifs and the crop change substantially. This separation gives art direction somewhere to operate: direction set establishes grammar, phases move features, amplitudes bias hierarchy, and windowing composes the page. Preserve all four in the edition receipt instead of reducing the work to a mystical seed number.

Plot the five direction vectors and a simple spectral probe beside the field. Fivefold interference should appear in the intended angular relationships while unexpected axial energy points to sampling or aspect mistakes.

LayerEvidenceClaim limit
VectorsFive anglesDirectional grammar
FieldCPU samples + hashTolerance-bound
SpectrumFinite-window peaksDiagnostic only
ArtworkPalette + cropAuthored edition
Figure 2: The edition distinguishes measured construction from bounded interpretation.

Control aliasing before adding color

High spatial frequencies sampled at one value per pixel create false moiré, unstable sparkles, and device-dependent motion. Render a frequency ladder at final display size, compare supersampled references, and lower frequency or integrate more carefully before styling. Derivative-aware filtering may help, but its assumptions and cost belong in the shader budget. A static image fallback should come from the same accepted parameter set.

The quasicrystal shader is visually dense, so avoid combining every high-frequency treatment at once. Use a restrained base field, then decide whether contours, smooth bands, or sparse threshold islands serve the composition. Check reduced-resolution thumbnails and print proofs. A pattern that depends on subpixel shimmer may be interesting motion material but is a poor archival poster unless the instability is explicitly the subject.

Sweep pixel density and derivative-aware filtering before selecting a threshold. A stable composition should keep its major quiet and dense regions while fine detail changes gracefully instead of producing moiré accidents.

Art-direct phase, threshold, palette, and crop

Start with equal amplitudes and a symmetric phase set, then change one family at a time. A slight phase offset can move bright nodes away from the center; amplitude bias can create a dominant axis; a smooth nonlinear transfer can open quiet regions for typography. Build a contact sheet with identical crop and palette so changes remain attributable. Reject seeds only after recording why their hierarchy fails.

Color should map scalar relationships, not camouflage them. Use an accessible luminance structure that remains legible in grayscale, then assign a compact palette in a perceptual space. Protect text with a quiet mask derived from the composition rather than placing a generic opaque card over the field. My preferred result lets the five-wave logic remain discoverable after styling without forcing every viewer to read the equation first.

Treat phase as composition, threshold as density, palette as material, and crop as framing. Record each choice independently so a stronger crop does not become an unexplained change to the deterministic wave field.

  1. 1Construct

    Sum five phase-controlled waves.

  2. 2Sample

    Compare GPU field with CPU reference.

  3. 3Direct

    Shape contrast, palette, and quiet space.

  4. 4Archive

    Pin environment, parameters, and exports.

Figure 3: Technical proof remains underneath the finished visual.

Compare the field with adjacent visual systems

A Penrose tiling uses discrete shapes and matching structure; this shader uses continuous wave superposition. Moiré studies emphasize sampling and interference between repeated structures; the five-wave field uses those visual mechanics without one pair of regular screens. Keep these lineages separate while learning from each. Review Penrose tiling posters, WebGPU generative art, moiré interference, and seeded randomness for complementary methods.

The comparison prevents vague “complexity” from becoming the thesis. A quasicrystal shader offers continuous modulation, cheap animation, and a compact GPU implementation. A tiling offers explicit combinatorial adjacency and vector output. Choose the wave construction when interference and tonal field are the artistic material, not because the term sounds more scientific.

Compare the result with Penrose, moiré, reaction-diffusion, and ordinary radial motifs using visual features rather than category claims. The contrast clarifies what five directions contribute to the authored image. Preserve the comparison crop and parameter recipe for later editions.

Publish a bounded generative edition

Archive shader and CPU source hashes, WebGPU and WGSL assumptions, vector angles, frequency, phase and amplitude arrays, coordinate mapping, viewport, sample count, transfer curve, palette, crop, quiet mask, device profile, reference samples, and final asset hashes. Include the raw scalar view, reciprocal-direction diagram, frequency ladder, and final composition. A fallback PNG must match the accepted edition rather than a generic placeholder.

The quasicrystal shader succeeds when five simple waves create a rich visual field and every layer of interpretation remains visible. Claim fivefold interference, deterministic parameters, and measured sampling behavior; do not claim a browser shader has reproduced material physics. That restraint leaves more room for artistic authorship in the phase relationships, negative space, color, scale, and frame that make this edition unmistakably its own.

Runnable artifact: The CPU reference samples exactly five evenly rotated cosine waves on a fixed grid and hashes the rounded scalar field for deterministic comparison. Save it as five-wave-field.test.mjs and run node five-wave-field.test.mjs. Expected final line: PASS: five-wave field deterministic.

import assert from "node:assert/strict";import crypto from "node:crypto";
const field=[];for(let y=0;y<12;y++)for(let x=0;x<12;x++){let v=0;for(let k=0;k<5;k++){const a=k*Math.PI*2/5;v+=Math.cos(x*.31*Math.cos(a)+y*.31*Math.sin(a)+k*.17)}field.push(Number(v.toFixed(6)))}
const hash=crypto.createHash("sha256").update(JSON.stringify(field)).digest("hex");assert.equal(field.length,144);assert.equal(hash.length,64);
console.log("PASS: five-wave field deterministic");

The edition can now make a narrow, interesting promise. This quasicrystal shader sums five evenly rotated waves into a deterministic scalar field, checks the directional set and sampling envelope, and preserves every styling decision from phase through print crop. It is quasicrystal-inspired visual research rather than a materials simulation, and the caption should keep that distinction visible beside the finished image.

Publish the raw field, direction rosette, aliasing ladder, styled frame, and recipe together. A future renderer should be able to reproduce the reference samples within tolerance, identify any GPU-specific divergence, and rebuild the exact accepted export inside its pinned environment. Reopen the edition when shader language, color pipeline, target resolution, or print process changes. The technical constraint is not a cage around creativity; it is what makes the chosen phase tension, quiet area, palette, and crop attributable to the artist.