Generating superformulas...
Generating high-resolution image...
Superformula Parameters
Min
Max
Result
Random for Color On or Off
Curve modulation
Strength
0.71
Freq
19.1
Defaults
Defaults 1 to 6 for F1 can be saved directly from the Galleries and will appear here.
Archimedean Spiral Parameters
Min
Max
Result
Start radius
Min
0.0
Max
0.0
Growth rate
Min
0.02
Max
0.08
Angle range (degrees)
Min
15°
Max
16°
Start angle [1 … 360°]
Min
Max
31°
Number of points · Total angle = α × N
Min
1000
Max
1156
Size optimizer · 100 % = unchanged
Min
10%
Max
100%
connection line from startpoint to endpoint of spiral
Random for Color On or Off
Curve modulation
Strength
0.71
Freq
19.1
Defaults
Defaults 1 to 6 for F2 can be saved directly from the Galleries and will appear here.
Harmonics Parameters
Min
Max
Result
Random for Color On or Off
Curve modulation
Strength
0.71
Freq
19.1
Defaults
Defaults 1 to 6 for F3 can be saved directly from the Galleries and will appear here.
Settings
Images generated
Possible images
Galleries
Start defaults saved
Settings snapshot
Browser storage used
Database (IndexedDB)
Persistent storage
Version
File name
Code lines
File size
Font
Backup — what it does
Export Settings writes ONE file containing everything that makes up your work: all panel settings, the last image on the canvas, the image counter and your start defaults. Keep it as a backup, or move it to another device or browser.
Import Settings reads such a file and restores all of it. The app then reloads so every panel picks up the restored values consistently. Your image counter never goes backwards — the higher count wins.
Reset Settings clears only the panel settings and the last image. The image counter, your galleries and your start defaults are kept. The button asks for a second click before it acts.
Galleries are not part of this backup — they can grow large and have their own Export / Import in the Galleries menu.
HTML Source Code

        
Code Review
One file, no dependencies. The entire application lives in a single HTML file of roughly 29,000 lines: stylesheet, markup and one script block. Both typefaces — JetBrains Mono and the chalk face Caveat — are embedded in the file as base64 (SIL OFL 1.1), and since v168.27 the author portrait travels the same way: its JPEG bytes are base64-encoded into a data-URI constant (data:image/jpeg;base64,…) that the browser decodes natively the moment it is assigned to img.src — no network, no file, no server. So there is no external resource at all and the work runs fully offline. There is no build step and no framework — what you read on the Code page is exactly what the browser executes.
Layout: the u grid. Everything is measured in one base unit, --u, derived from the viewport. The stage is a 26 × 12 grid — tools 12 u, navigation 2 u, canvas 12 u — and every panel is a 12 × 12 tile of it. Because all sizes are calc() multiples of --u, the app scales from phone to desktop without a forest of breakpoints. Just as important, the grid is the project's common language: a layout wish fits in one sentence — «move this 2 u to the right and 13 u down» — and lands exactly. That precision is what kept the human-AI collaboration behind this file workable at this complexity; it was one of the project's foundational design decisions.
Panels: one registry, one mechanic. All overlay panels are declared once in G4M_PANELS and share the same slide mechanic: fixed position, transform-only travel, and an open state mirrored to a data attribute that the CSS reads. Shaft clips (gallery, settings) confine the travel px-exactly to their region, so panels never structurally cross the navigation or the canvas.
Optics: one source. Visual rules live in shared classes such as g4m-arch-cell; relief, hover and typography come from common custom properties like --g4m-raise and --g4m-text-explain. New surfaces inherit the house look by using the classes instead of redefining styles — the comments call this principle «one optics source».
State and persistence. Panel settings live in a localStorage snapshot; galleries and start defaults live in IndexedDB — since v168.5 as one record per default slot, so marking a start default writes only a few bytes of metadata instead of megabytes of previews. Export writes one JSON file containing everything that makes up your work — including the random switches and ranges of every tool slider — Import restores it and reloads the app, and the image counter is monotonic: the higher count always wins.
Generators. Images come from the superformula of Johan Gielis, from Archimedean-spiral modes and from the harmonics mode, whose Fourier sine waves deform a circle into organic blobs — drawn onto the canvas. Parameters are randomized inside the min/max boundaries you set in the panels, so every Go stays inside the aesthetic corridor you have chosen. Since v168.36 the images also sound: the music world derives every voice from the curves themselves — computed oscillators, no audio data, no AI — and Go rolls image and music in one throw.
Tested consistency. Since v168.8 the release walks through a thirteen-level audit: static passes over IDs, the more than 400 i18n keys in four languages, store keys, panel registry and event bus — plus a smoke test that executes the entire script in Node against a DOM stub; since the v168.2x choreography work, motion is additionally verified in a real headless Chromium with pixel measurements. Boot, DOMContentLoaded and the IndexedDB migration run clean, and nine end-to-end tests drive snapshot, apply and slot persistence in the real code. The harness earns its keep: it caught the scope error in importRandomRanges that briefly reached the field in v168.7 and was fixed one release later.
This viewer. The Code page fetches the file from its own address at runtime, colours it with a small built-in line tokenizer (HTML, CSS and JS states carried across lines) and appends it in 400-line chunks per animation frame. It therefore always shows the release you are running — including itself and this review.
Assessment. Strengths: an unusual comment culture that records intent and history for every change, idempotent layout routines, and defensive guards around DOM access. Trade-offs: one large file and a global namespace demand discipline as the project grows — the planned modularization into styles.css and modules is already sketched in the comments.
How many images?
The question. Counting every parameter and every setting: how many distinct images can g4m produce? The honest answer comes on three levels — in mathematics, in the machine, and for the eye.
In mathematics: infinite. The parameters of, for example, the superformula — a, b, n1–n3 — live on continuous ranges; between any two values lies another. The set of possible parameter combinations is therefore uncountably infinite — the ∞ on this button is meant literally in the ideal.
In the machine: 500 bits per curve. Every dose of chance comes from Math.random(), which can return 2^53 distinct values (IEEE-754 double precision). One F1 curve draws about ten such values — size, a, b, n1, n2, n3, point density, line width, point size — plus an integer m and one of 16.7 million colours: roughly 500 bits of randomness per curve.
The count: about 10^3000. At the default of 20 curves per image that is ~10'000 bits, i.e. about 10^3000 distinct parameter combinations; at the maximum of 100 layers about 10^15000. The discrete choices — the formula families with their modes, display modes, canvas colours, resolutions and every slider position of the boundaries — multiply the space further, but their factors vanish next to these exponents.
The eye's ceiling. Two draws that do not move a single pixel yield the same picture, so the canvas itself is the outer bound: at 2048 × 2048 pixels with 24-bit colour there are ~10^30'000'000 conceivable images — vastly more than the parameter space reaches. The binding, honest number therefore remains the ~10^3000 of the parameters.
The scale. The observable universe holds about 10^80 atoms. A billion images per second since the Big Bang would reach ~10^26. Whoever presses Go therefore sees, with near certainty, an image that no one has ever seen and no one will ever see again. The statistics row states this in its shortest true form: > 10^3000 — effectively ∞.
⚙ Music — how it all connects
The image is the score. Nothing in the music has a random source of its own: Go rolls image and music in one throw, and every musical quantity is either derived from the image or set by hand.
Voices = layers. Every curve of the image is a voice. Its size determines register (small = high, like small bells) and note value (small = eighths, medium = quarters, large = halves). The contour is sampled at 2·m points per revolution, radius becomes pitch; the sampling precesses by the golden fraction of one step per revolution — over time the whole curve sounds, never exactly repeated.
Key from the image. The work's index number (mesh: Σm, the sum of the symmetry numbers; carpet: Σk of the harmonics; bridge: windings × 10), its remainder at ÷12, and that remainder counts steps of fifths from C: 0=C 1=G 2=D 3=A 4=E 5=B 6=F♯ 7=D♭ 8=A♭ 9=E♭ 10=B♭ 11=F. Similar images thus land in related keys (a fifth is the closest kinship), different images in distant ones — the symphony modulates because the images differ.
Scale grid. Register and melody are computed as one semitone sum and snapped together onto the allowed degrees of the chosen scale. The overtone series instead locks onto integer frequency ratios to the fundamental (1:2:3:4…) — the same mathematics as the carpet spectra; «free» stays stepless.
Carpet, drone, bells. An F3 image is literally a sound spectrum: its harmonics run as overtones. The drone is the «1» of the formula — the base circle, beatless by nature (hence its own fader, default 0, and the Breath control ties it to the ray revolutions of 2/3/5 bars). The rotating rays strike the contour: one bell per lobe at the pitch of the local radius.
Rhythm. Eighths = share of voices running at double speed (overrides the size derivation). Syncopation = share of voices whose pattern starts half a note step beside the beat (offbeat, a pure phase shift). Swing = every second note of a pair arrives late (long–short ratio).
Movement gap. Each movement lives 8 bars; the gap sets how early the next one enters: 6 = classical succession, 2 = three to four works sound and appear on top of one another — the library as superposition.
Random lottery. Every control can enter the draw individually: pressing Random-♪ shows the double slider (the range), Go draws within it. For the scale grid the range is a selection: the scales marked with ♪ form the lottery pot. Dashed borders show what is being drawn.
Effects. Echo in strict bar time (dotted eighths of the revolution), reverb from a computed impulse response (noise with exponential decay — no audio file), three-band EQ. All of it pure oscillators and mathematics; no audio data, no AI.
The timbres — an orchestra made of formulas. Not a single instrument is recorded; each is a computed recipe. Soft: a round base wave, the unobtrusive default. Strings: two slightly detuned sawtooth waves with a slow onset — the hovering of a string section. Flute: a pure sine tone with a hint of breath noise. Brass: a bright, fast attack with bite. Harp: a real string model (Karplus–Strong) — a noise impulse runs through a damped loop, ringing out like a plucked string. Timpani: a falling low tone with a strike noise; always stays in the foundation. Bell: two oscillations in an inharmonic ratio — hence the metallic sheen. The automatic orchestration casts by figure size: large curves become timpani and strings, small ones flutes and harps — every voice can be overridden in the voice list.
Mix. Drone: the deep foundation (the «1» of the formula); default 0 — raise it when the sound needs ground. Bells: the strikes of the rotating rays on the carpet contours. Breath: how strongly the carpet swells and subsides with its shape (0 = completely calm). Arpeggios: the mesh voices — the melodic core. Sequences: the rising spiral runs of the bridges. Master: the overall volume.
Equalizer & effects. Echo: repetitions in the bar grid (dotted eighths of the revolution) — more of it means more space between the notes. Reverb: the after-ring of a computed room. Lows/Mids/Highs: raises or lowers the three sound ranges (±12 dB) — your grip against too much bass or dull highs on your speakers.
Work & time. Tempo: faster or slower without changing anything else (×0.25–×2, takes effect immediately). Bar: how long one revolution of a curve takes — the base pulse length of the work. Movement gap: how early the next movement enters — large = one after another as in a concert, small = several works sound on top of one another. Decay: how long each single note rings — short = pearling, long = blurring.
Harmony & rhythm. Scale grid: the allowed tone vocabulary (opens the grid panel; the ♪ marks fill the Go lottery pot). Rhythm: Eighths (share of double-speed voices), Syncopation (share of voices shifted beside the beat — the offbeat), Swing (every second note arrives late — the bounce). Octave: the register of the whole, lower or higher (−2…+2). Random-♪: pressed, the double slider shows the draw range of the chosen control; Go rolls within it.
Voices panel. The small colour fields are your curves (click selects, double-click mutes). Timbre: the instrument of the chosen voice. Mute/Solo: on → mute → SOLO (only this voice). Octave (voice): this one curve higher or lower, relative to its natural register. Volume: its level. Reduction: how many voices play at all. Spread: how far the curve centres move apart — and with that, how wide the music stands in the stereo image.
Gate & transport. Note: switches the whole music world on and off — off means: g4m is exactly the app without music. Play/Stop: Play starts the board work sounding, Stop silences it at once. Go: rolls image AND music in one throw — the only source of chance; if music was on, the next Go brings it back. Recording follows in a later release.
F4 — coming soon
Sound Settings
Live
— choose a parameter
Max
Voices
— choose a parameter
— choose a parameter
DJ Live
A
DJ · Mixer
A
100
B
100
C
100
DJ Live 2
DJ 2 · Mixer
D
100
E
100
F
100
Symphony
Symphony · Timing
Movement length
12 T
Movement gap
1.0 T
Program · Movement length
12 T
Scale grid
⚙ Music — how it all connects
F5 — coming soon
F6 — coming soon
F7 — coming soon
F8 — coming soon
F9 — coming soon
F10 — coming soon
g4m · grid 4 magic image sound where math meets random, and random fills formulas
Important: if the browser asks to keep data in persistent storage, choose «Allow» — this keeps your galleries and settings safe.
Change the parameters or click directly on Go to create an image
Click F1, F2, F3, ... to select a formula!
https://g4m.ch
info@g4m.ch
all rights reserved
In learn mode the app starts more slowly and gives a few explanations for an easy start.

Gielis's Superformula for Complex Shapes

Johan Gielis (born July 8, 1962) is a Belgian engineer, scientist, mathematician, and entrepreneur. Gielis is known for his contributions to the field of mathematics, specifically in the area of modeling and geometrical methods. He is best known for developing the concept of the superformula, which is a generalization of the traditional Pythagorean theorem and the equation of the circle, that can generate a wide variety of complex shapes found in nature.
r(φ)= ( |cos(mφ/4)a| n2 + |sin(mφ/4)b| n3 ) 1n1
r - distance from the center
φ - angle to the x-axis
m - symmetry
n₁, n₂, n₃ - form
a, b - expansion (semi-axes)
https://jgielis.academia.edu/
Seite in Arbeit