Presswork — a generative image press

The user sent "generate image" with no other context. I don't have image generation tools available. I should respond honestly that I can't generate images directly, but I can offer alternatives. Given my environment — I build front-end experiences — the best move is to offer to create something visual with code: an SVG illustration, an HTML canvas artwork, a generative art piece, etc. But wait — the user's request is extremely ambiguous. "generate image" — they might expect me to be an image-generation model. I should clarify what I *can* do, and ideally just demonstrate it: build a small, delightful single-file HTML page that acts as a generative art / "image generator" they can interact with. That's proactive and memorable, and it works in my medium. Actually, let me think about what would be most useful. The user typed a bare command. Options: 1. Reply "I can't generate images, but I can describe..." — honest but weak. 2. Build an interactive generative art page — a single HTML file that literally "generates images" (procedurally, in the browser), with controls, and lets them download the generated image as a PNG. That fulfills the request in the most literal way I can: it generates images, locally, and the user can save them. Option 2 is clearly the signature move. It's honest (I'm upfront that I can't produce photos, but I can build a machine that makes images), interactive, and gives real utility — a "Generate" button, seed, palette controls, and a PNG download button. What kind of generative art? I want something that looks genuinely beautiful, not generic particles. Ideas: - Flow fields (perlin noise-driven streams) — gorgeous, organic. - Layered topographic contour maps. - Generative landscapes / mountain ridges (Joy Division style — but that's a bit overdone). - Grainy gradient "aurora" meshes. - Botanical/branching structures. - Concentric geometric compositions in the style of Japanese woodblock / Bauhaus. I'll go with a flow-field ink painting aesthetic — like sumi-e brush strokes advected by curl noise — or perhaps a richer composition: layered terrain ridgelines + flow field + grain. Let me design something with real craft. Concept: "ATELIER — a generative image machine". The page is a minimal, gallery-like space: a big canvas centered like a framed print, with a control strip beneath. Each press of "Generate" (or spacebar) produces a brand-new composition from a seed. Users can: - Choose among a few curated styles (e.g., "Flow Field", "Ridgelines", "Orbits", "Halftone Waves") — or maybe fewer but deeper styles. Better to do 3 styles done really well than 5 shallow. - Adjust palette (curated palettes, not color pickers — curation reads as taste). - Grain/paper texture toggle. - Download PNG at high resolution (e.g., 2400px) via offscreen canvas render. Visual identity of the page itself: I'll avoid dashboard feel. Think of a print studio: warm paper background (#F4F1EA or similar off-white), ink-dark text, a serif display font (e.g., "Fraunces" or "Cormorant" from Google Fonts — distinctive, not Inter/Roboto), monospace accents (IBM Plex Mono / Space Grotesk) for seed numbers and metadata. The composition number/seed displayed like an edition number: "EDITION Nº 0001 — SEED 8F3A2C". Layout: asymmetric — big canvas on the left/center, a narrow column on the right with controls (or controls along the bottom like a press console). On mobile it stacks. I'll make the header minimal: a wordmark, a line about the machine, and the generate action. Let me plan the generative algorithms carefully — these must actually look good. **Style 1: Flow Field Ink (default)** - Use a seeded PRNG (mulberry32) + simplex/value noise implemented locally. - Draw N particles advected through curl-ish noise field, stroke with varying width & alpha, in palette colors on paper-toned background. Add slight taper by drawing segments with lineWidth varying. Add a few "hero" strokes thicker. - Composition trick: bias particle density toward a focal band (e.g., a diagonal or golden-ratio circle) so it doesn't look uniform — gives composition. **Style 2: Ridgelines (layered mountains)** - 1D value noise for ridge heights, layered front-to-back with palette progression (darker in front), slight vertical offset per layer, maybe fill with paper color to occlude, stroke the ridge line. Add a sun/moon disc. This is classic but with good palette and grain it looks like a print. **Style 3: Orbits / Concentric arcs** - Arc segments of circles at golden-angle positions, varying stroke widths, maybe dashed ticks, like an astronomical chart. Could combine with small dots along arcs. Looks precise and elegant. Maybe a 4th: **Weave / Contours** — topographic contour rings via marching squares is heavy; skip. Three solid styles is fine. Actually maybe add "Strata" — horizontal wavy bands? That overlaps with ridgelines. Keep 3. Palettes (curated, 5–6): - "Ink & Vermilion": paper #F5F0E6, ink #1C1B1A, vermilion #C73E2E, gold ochre #D9A441, slate blue #33506B. - "Ukiyo": indigo, teal, cream. - "Desert": terracotta, sand, brown, dusty rose. - "Noir": near-black, grays, single red accent. - "Botanic": deep green, olive, sage, cream. - "Cobalt": cobalt blue, sky, cream, black. Each palette: background paper color + array of ink colors. The machine applies them. Controls: - Style selector (3 text buttons, radio-like). - Palette selector (small swatch chips showing colors — but I must avoid it looking like filler; swatches are functional here, fine). - Density slider (particle/stroke count). - Grain toggle (or always on subtle). - "Generate" primary button + "Save PNG" button. - Seed display, click seed to copy? Maybe simpler: display seed; new random each generate. Could allow entering seed? Keep it: display only, plus regenerate. Actually letting user type a seed is nice for reproducibility — but adds UI clutter. I'll show seed as mono text under the artwork; pressing G or clicking Generate gives a new one. Maybe clicking the seed regenerates the same seed (replay). Keep simple: display only. Download: re-render at 2× or fixed 2000px on offscreen canvas with same seed & params → toDataURL → anchor download. Since render function takes (ctx, width, height, seed, params, palette), rendering twice is easy. Need DPR handling for on-screen too. Fonts: Google Fonts — "Fraunces" (display serif with character) + "IBM Plex Mono" for data. Load via link. Icons: minimal — download icon, refresh icon. Use inline SVG icons (stroke icons) rather than a whole icon CDN; inline SVG is cleanest and allowed (it's an icon, not emoji). Or use lucide via CDN. Inline SVG paths for a few icons is fine and dependency-free. I'll hand-write simple stroke icons (download arrow, shuffle/dice). Page design details: - Background: warm paper (#EFEAE1?) with a very subtle paper texture? Keep flat but warm. Ink text #17150F. - Header: top strip with wordmark "IMAGERIE" or a nicer name — "PRESSWORK", "The Image Machine", "ATELIER 001". Let me call it "EDITION — a small machine for making images". Wordmark: "Édition"? Maybe "GRAIN & SEED". I like "Seed & Grain — generative image press". Or simply "IMAGERIE Nº1". Let me go with wordmark "SÉANCE"? no. "The Nightly Press"? Keep it: **"PRESSWORK"** — "a generative image press". Nice, evocative of printmaking. Header left: PRESSWORK in Fraunces bold; right: small mono text "PROCEDURAL · RUNS LOCALLY · NO TWO ALIKE". - Main: canvas centered with a thin ink border (1.5px #17150F) and generous margin; behind it maybe a hard offset shadow (like a print lifted off the page — solid offset shadow in ink color gives a print/poster feel, very authored, not a glow). A solid offset shadow (e.g., 10px 10px 0 ink) is a deliberate graphic device — I like it, it's not a cheap gradient/glow. - Right rail (on desktop): controls in a narrow column, typeset like a spec sheet: labels in mono uppercase small, controls as text buttons/rows separated by hairlines. No cards. - Footer strip: keyboard hints "SPACE — generate · S — save PNG", and the current edition number. Interactions & feedback: - Generating animation: quick "printing" effect — reveal the image with a wipe or draw strokes progressively? Progressive drawing is actually natural for flow fields: animate strokes being drawn over ~1.2s. That's a lovely signature moment: watch the image being "printed" stroke by stroke, with a subtle counter of strokes in mono text. For ridgelines, animate layer by layer front..back or back..front. For orbits, animate arc by arc. I'll implement time-based progressive rendering for all three: a render queue of drawing ops? Simpler: each style's render function can accept a progress callback... Simplest robust approach: precompute all drawing commands as a list (each command = {type, ...}), then animate executing them over time with requestAnimationFrame, batching several commands per frame based on elapsed time / total estimated cost. This gives the printing effect universally. Commands like "strokePath" with points array, "fillRect", "arc". Then final frame done → enable download (or download re-renders fully anyway, so always fine). Batching: compute per-command cost (path length) and schedule ~ by cost per frame so animation duration constant ~1.4s. Nice. Also a small progress indicator: mono text "PRINTING… 342/1200 strokes" then "EDITION Nº 0042 · SEED 9A21F7 · STYLE FLOW FIELD". That's the alive feeling. Keyboard: Space = generate, S = save. Add press feedback on button. Grain: after drawing, overlay noise: generate small noise tile (e.g., 128×128 canvas with random alpha gray pixels), draw pattern with low alpha and 'multiply'/'overlay' composite across canvas. For hi-res export, scale tile pattern — pattern will look finer at high res; acceptable, or generate bigger tile for export. Use alpha ~0.05–0.08. Also add subtle deckle/margin: artwork canvas includes internal margin (like a print border) — the drawing happens within margins so composition breathes. I'll draw background paper color full, then artwork inside margin with maybe a hairline frame? Many generative artists keep full-bleed. I'll do full-bleed artwork but page gives margins. Actually a thin inner hairline border at 4% margin can look like a plate mark — nice for etching vibe. Optional per style; skip to reduce fuss. Full-bleed. Aspect ratio: fixed 4:5 (portrait) or 3:2 landscape? Portrait 4:5 feels like a print. Let me offer the canvas at 4:5 portrait. On-screen canvas sized responsively (max height ~ 70vh). Fixed internal coordinate system: I'll render in normalized coordinates with W/H from canvas, and design algorithms relative to min(W,H). Seeded RNG: mulberry32(seed). Seed derived from random 32-bit, displayed as hex. Noise: implement value noise with smooth interpolation and fbm, seeded via shuffling a permutation table with rng. I'll write a small SimplexNoise implementation seeded — or value noise fbm is enough and shorter. I'll do a compact 2D value noise: perm table 256 shuffled by rng; grad = hashed gradient from a fixed set of gradient vectors; standard Perlin 2D with fade. Write compact Perlin 2D — fine. Flow field style details: - Field angle θ(x,y) = fbm(x*s, y*s) * τ * k (k ~ 2) — maybe plus a global drift angle. - Particles: N = density (slider 200–2000 default 700?). Start positions: mixture — 60% uniform, 40% gaussian around focal point(s). Focal: 1–2 points at golden ratio positions. Strokes: step through field with step length ~2–6px, length limit L (50–160 steps). Width varies along stroke (thin→thick→thin or random taper), color chosen from palette with weights (accent color less frequent). Alpha 0.85–1. Avoid uniform: vary stroke width distribution: mostly hairline (0.8–2px), few bold (4–9px). Composite mostly normal; maybe a few strokes in background-darker for depth? On light paper, dark inks. - Additionally sprinkle: a few filled dots at stroke ends? Keep clean. - Maybe add one large circle outline (like a moon) at focal point in accent color, drawn beneath strokes — gives focal anchor and composition. With probability 0.7. Yes — a big off-center disc (filled paper-dark tint or outlined) makes these look designed. I'll add: 60% chance a large outlined circle, 30% filled disc in accent, 10% none. Position on thirds intersection. That elevates randomness into composition. Ridgelines details: - Layers L = 6–9. For each from back to front: baseline y = lerp(top→bottom with easing), amplitude grows toward front. Ridge = fbm 1D (use 2D noise with fixed y per layer). Fill from ridge to bottom with layer color (palette progression, maybe alpha to blend? solid fills occlude — good print look). Stroke top edge in darker shade, lineWidth ~2–3. Front layers darker (ink), back lighter (paper-tinted). Also add sun disc behind ridges in accent color with maybe slight horizontal offset per composition. Add subtle hatching? skip. Add slight per-layer horizontal shift for parallax? The classic look is straight-on. Fine. - Colors: derive layer colors by mixing between two palette colors with rng jitter — I'll implement a lerpColor in RGB for hex colors. Orbits details: - Background paper. Center slightly off-center. R rings: 14–24 concentric radii up to beyond corner. For each ring, draw arcs: split ring into arcs with random gaps; stroke width varies (hairline to bold), some rings drawn as tick marks (short radial dashes) — like an astrolabe. Add small filled dots at some arc endpoints. Occasional accent-color ring. Add cross-hair ticks at cardinal angles on outermost ring. Add one bold accent arc. This looks like celestial charts — elegant. Also maybe random "planets": 2–4 small filled circles with thin ring offset on random rings at random angles. Density slider meaning per style: flow→strokes; ridges→layers; orbits→rings/segments. Now the command-list approach: Commands: - {op:'clear', color} - {op:'path', pts:[{x,y}...], color, width, alpha, cap:'round'} — polyline stroke. - {op:'circle', x,y,r, color, fill:boolean, width, alpha, dash?} - {op:'dots'...}? ticks as many small paths — fine as many path commands. - {op:'line', x1,y1,x2,y2,...} can be path of 2 pts. Animation: compute totalCost = sum(path length + width factor). Each frame, advance budget = totalCost/duration * dt; execute commands until budget exhausted (partial stroke: draw partial points of current path for smoothness). Manage grain overlay at end. For export: run same builder to produce commands, execute all instantly on offscreen canvas at high res (e.g., width 2000, height 2500), with scaled dimensions — all coordinates must be generated in normalized [0..1] space and scaled at execution time. Stroke widths scale by (outW / baseW). Good: builders produce normalized coords; executor takes ctx + scale. Grain: generate noise on a tile canvas; at export, draw scaled pattern — the grain tile at fixed pixel size will appear smaller relative to image; to keep character, generate tile with larger cells for export or just scale pattern via ctx.scale — pattern transform: use ctx.translate/scale then fill with pattern, or simply create pattern from an offscreen canvas of size proportional. I'll generate the grain tile sized relative (tile = outW/8) each render. Fine — small cost. Progressive reveal on main canvas: after all commands executed, draw grain once. During animation, skip grain; add at end (could fade grain in — simple alpha ramp over last 200ms; or just pop it in; I'll fade via globalAlpha ramp). Also nice: during printing, show moving "print head"? Over-engineering. The progressive stroke drawing itself is the show. Maybe a subtle progress bar as a hairline under canvas filling — tasteful. I'll do a 2px progress hairline under the canvas in ink color. First load: auto-generate edition Nº 0001 immediately (with animation) so first impression lands instantly. Page copy (English, since user wrote English): - Wordmark: PRESSWORK - Sub: "A generative image press. Three engines, six inks, one seed at a time. Every edition is drawn live in your browser — no two prints alike." - Controls labels: ENGINE, INKSET, DENSITY, GRAIN. Buttons: "Pull a print" (generate) and "Save PNG". Mono status: "EDITION Nº 0007 — SEED 3F9C2A — 1,204 STROKES — 0.9S". - Footer: keys hint. Edition counter increments each generate; persist? Not necessary; start at 1 per session. Toast for "PNG saved" — small inline toast bottom-left, ink background paper text, slides up, auto-dismiss. (No alert.) Also "copied" not needed. Layout details: - Grid: desktop: main area left (canvas centered), right rail 300–320px with controls, separated by a vertical hairline. Header spans top with bottom hairline. Footer bottom hairline strip. - Typography: Fraunces for wordmark & big numerals? Maybe edition number as a big ghost numeral behind? Could be too much. Keep wordmark + status. - Buttons: generate = solid ink background, paper text, mono uppercase, slight translate on press, plus the offset-shadow device? Use solid ink button with hard 3px offset shadow in accent vermilion — punchy, print-like. Hover: shift shadow. That's a purposeful graphic device consistent with the print metaphor. - Style buttons: three text tabs with underline indicator; palette chips: row of 6 swatch clusters (each chip = small rectangle composed of its palette colors side by side), selected gets ink border offset. Functional and pretty. - Density slider: custom-styled range input — hairline track, square ink thumb. Show value in mono. - Grain toggle: custom checkbox styled as small square that fills ink when on. Or a two-state text button [GRAIN: ON]. I'll do a mini switch built from border squares. Colors of the page chrome: paper #F1ECE2, ink #16130D, accent vermilion #C73E2E used sparingly (selected states, button shadow, progress hairline maybe ink). Hairlines: #16130D at 15% or solid thin #D8D2C4. Responsive: below ~900px, rail moves under canvas as horizontal wrap sections. Implementation checklist: - mulberry32, seed from crypto/random. - Perlin: build perm from rng; grad2 table; noise(x,y) in [-1,1]; fbm(x,y,oct). - Palettes array: name, paper, inks[], accent index? I'll define: {name, paper, inks:[...]} where first ink is dominant dark. Weighted selection: dominant heavier. - Builders: buildFlow(rng, noise, params) → {commands, meta:{strokes}} etc. All normalized coords (0..1), widths normalized to base (I'll produce widths in "base pixels" for a 1000px-wide reference and executor scales by (canvasW/1000 * dpr accounted)). Simpler: executor scale s = canvas.width / 1000; multiply coords by canvas.width/height respectively (x*s, y*s where s=W/1000, y uses H/1000 — but aspect fixed 4:5 so uniform). Since aspect fixed, one scale factor = W/1000. Widths * s. Good. Canvas sizing: wrapper measures, canvas CSS size fits container maintaining 4:5, internal pixels = cssSize * devicePixelRatio. Durations: print animation ~1.6s regardless of command count via cost budgeting. Status text updates: during printing "PRINTING — STROKE 214/1180"; after: "EDITION Nº 0003 · SEED A19F3C · STYLE: FLOW FIELD · 1180 STROKES · 1.6S". Meta per style: flow: "strokes"; ridges: "layers"; orbits: "rings". Keep meta.units. Save PNG: render to offscreen 2000×2500 (or user scale 2× of 1000×1250 = 2000×2500) execute all commands instantly + grain, toBlob → download link click → toast "Edition Nº X saved as PNG". Filename: presswork-edition-0003-seed-A19F3C.png. Edge: Space key scrolling page — preventDefault when target is body. Ignore when focused in inputs (range input uses arrows; space on button triggers click anyway — handle: if e.target is button/input, skip global handler except allow? I'll check tag). Let me now also craft default: style Flow Field, palette "Ink & Vermilion", density mid, grain on. Palettes (paper, inks): 1. "Vermilion" — paper #F4EFE4; inks: #1A1712 (w heavy), #C7402D, #E0A32E, #2E4A62, #6B7F5A? maybe drop green: [#1A1712, #C7402D, #E0A32E, #2E4A62]. 2. "Ukiyo" — paper #F3EDDD; inks [#22364F? deep indigo #1F3A5F, #3E7C8F teal, #C9A227? no…] Let's: paper #F2ECDC, inks [#243B53? hmm pick: #1F3A5F, #4E8398, #C75B39, #22303C]. 3. "Desert" — paper #F3E9D7; inks [#3A2A20, #B4552D, #D69A3F, #7B8B6F? maybe #8C5A3C]. Use [#38271E, #B85C38, #D9A05B, #6E7F5E]. 4. "Noir" — paper #EDEBE6; inks [#141414, #4A4A4A, #8A8A8A, #C1272D]. 5. "Botanic" — paper #F1EEE0; inks [#1E3323, #4F6F46, #93A86B? #A3B15F? , #C8B04? ] → [#1E3323, #46683F, #A1A85C? too close] fine: [#20301F, #4E7043, #C2B45C? olive gold #B7A14A, #7A3B2E]. 6. "Cobalt" — paper #F0EFE9; inks [#101C3A? #14213D, #1F4FA8? rich cobalt #2749C9? avoid default-blue vibe... cobalt printmaking blue is legit: #1D3FA3? I'll use #274690, #7FA8D9? hmm. Cobalt: [#141B33, #2B4C9B, #A63D2F, #C9A961]. Fine — it's a printmaking palette, deliberate, not a UI-blue theme. Weights: index 0 dominant (p ~0.45), then others. Accent = pick index with low prob. Implementation: weights [0.42, 0.22, 0.2, 0.16] roughly, shuffle-ish via rng but keep index 0 heavy. For flow strokes: choose color by weight. Circle motif color: accent-ish (index 1 or 2). Ridgeline colors: build ramp: back = mix(paper, ink0, 0.18) → front = ink0; every layer maybe slight hue shift by mixing with ink1 occasionally? Simpler: t^1.2 mix paper→ink0; plus if rng<0.3 mix a bit of ink2 into a middle layer. Stroke edge color = darken (mix with ink0 further or black-ish). Sun disc: accent ink. Orbit colors: mostly ink0 hairlines, some ink3 mid, one bold accent arc, dots ink0. Good. Perlin implementation (compact): ```js function makeNoise(rng){ const p = new Uint8Array(512); const perm = [...Array(256).keys()]; for(let i=255;i>0;i--){const j=(rng()* (i+1))|0; [perm[i],perm[j]]=[perm[j],perm[i]];} for(let i=0;i<512;i++) p[i]=perm[i&255]; const fade=t=>t*t*t*(t*(t*6-15)+10); const grad=(h,x,y)=>{const g=h&7; const u=g<4?x:y, v=g<4?y:x; return ((g&1)?-u:u)+((g&2)?-2*v:2*v);}; return function(x,y){ const X=Math.floor(x)&255, Y=Math.floor(y)&255; x-=Math.floor(x); y-=Math.floor(y); const u=fade(x), v=fade(y); const A=p[X]+Y, B=p[X+1]+Y; return (lerp( lerp(grad(p[A],x,y), grad(p[B],x-1,y), u), lerp(grad(p[A+1],x,y-1), grad(p[B+1],x-1,y-1), u), v)) * 0.55; // scale to ~[-1,1] }; } fbm(noise,x,y,oct=4): sum amp*noise, amp*=0.5, freq*=2 → normalize. ``` Flow builder pseudo: ```js function buildFlow(rng, noise, density, palette){ const cmds=[{op:'rect', x:0,y:0,w:1,h:1, color:palette.paper, fill:true}]; // motif const fx = pick(rng,[0.3,0.36,0.64,0.7]), fy=0.3+rng()*0.25; // focal upper area typically const motif = rng(); const mr = 0.16+rng()*0.1; // radius if(motif<0.55) cmds.push({op:'circle',x:fx,y:fy,r:mr,color:accent,fill:false,width:2.5+rn g*3}); else if(motif<0.8) cmds.push({op:'circle',...,fill:true,color:accent,alpha:0.9}); const N = 350 + density*? ... density slider 0..100 → strokes = 300 + d*14 (→ up to ~1700) for i0 && idx meta, title "PRESSWORK — a generative image press" fonts link

PRESSWORKNº1

A GENERATIVE IMAGE PRESS — RUNS ENTIRELY IN YOUR BROWSER

…

``` CSS variables: --paper:#F2EDE3; --ink:#191512; --line: rgba(25,21,18,.18); --accent:#C7402D; --mono; --serif. Frame: border 1.5px solid ink; box-shadow: 14px 14px 0 rgba ink? Solid offset in ink at low alpha? Solid #191512 looks strong — use box-shadow: 16px 16px 0 -2px? Just 12px 12px 0 var(--ink)? Full ink solid might be heavy but it's the poster look. Use ink at 100%: bold statement, matches print aesthetic. Add on hover of frame? no. Keep static. Actually make shadow color accent? Too loud. Ink solid. Rail sections: label mono 11px letterspaced with hairline underneath, content below. Selected engine button: text with left index "01" and underline/arrow "→"? Use format: buttons full-width, mono 13px uppercase, with a small square marker filled when active. Simpler: row of three inline buttons separated by "/" — active gets accent underline. I'll do stacked list rows with hairlines between: "01 FLOW FIELD", "02 RIDGELINES", "03 ORBITS" — active shows filled marker square before name and ink text; inactive 45% opacity. Hover raises opacity. Clean spec-sheet vibe. Palette chips: each chip 100% width row? Six rows is tall; make chips inline-flex wrapping, each chip = 44×22 rect split into 4 vertical color bands + name below in 9px mono? Name inside too small. Chip: horizontal bands stack. Selected: outline offset ring (2px ink border with 2px gap via box-shadow). Show name in title attr + selected palette name printed next to INKSET label ("INKSET — NOIR"). Good. Actions: big primary button full width: "PULL A PRINT →" (with small dice/refresh inline svg icon). Secondary: "SAVE PNG" outline with download icon. Keyboard hints beneath in faint mono. Header wordmark: Fraunces 900 italic? "Presswork" in Fraunces black, maybe with the Nº in accent. Right side head-note mono 11px. Footer: hairline top, tiny mono: "THREE ENGINES · SIX INKSETS · SEEDED PERLIN FIELDS · NOTHING LEAVES YOUR MACHINE" and right "EDITION Nº 0001". Hmm the footer edition duplicates status; fine, keep footer generic. Now sizes: canvas display: width min( (100vh-…)*0.8 , container ). I'll compute in JS: fit into stage box: maxH = window.innerHeight - header - footer - status (~) ... easier: CSS: .frame { width:min(100%, calc((100vh - 260px) * 0.8)); } aspect-ratio:4/5 on canvas; margin auto. Then JS reads clientWidth/Height for backing store. 260px approximates chrome; use flexbox main height. Let me: body {height:100vh; display:flex; flex-direction:column; overflow:hidden} main{flex:1; display:flex; min-height:0} .stage{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px} .frame{height:100%; max-height:calc(100% - 56px); aspect-ratio:4/5; max-width:100%;} tricky aspect with both constraints: use width:min( calc((100vh - 300px)*0.8), 100% ). I'll do JS sizing to be safe: on resize compute avail = stage content box; w=min(availW, availH*0.8); set frame style width=w px; canvas width/height = w*dpr, w*1.25*dpr. Also cap w at maybe 860px. Allow page scroll on small screens: media query switches body overflow auto and stacks. Rail width 300px, border-left hairline, padding 26px, display flex column gap 22px, overflow-y auto. Now write JS. ```js 'use strict'; // ---------- utilities ---------- const $ = s=>document.querySelector(s); const TAU = Math.PI*2; const clamp=(v,a,b)=>vb?b:v; const lerp=(a,b,t)=>a+(b-a)*t; function mulberry32(seed){ let a=seed>>>0; return function(){ a|=0; a=a+0x6D2B79F5|0; let t=Math.imul(a^a>>>15,1|a); t=t+Math.imul(t^t>>>7,61|t)^t; return ((t^t>>>14)>>>0)/4294967296; }; } function makeNoise(rng){ ...perlin... } function fbm(noise,x,y,oct){let v=0,a=0.5,f=1,n=0; for(...){v+=a*noise(x*f,y*f); n+=a; a*=0.5; f*=2;} return v/n;} hex→rgb, mix(c1,c2,t)→hex or rgb string. I'll precompute palette colors as [r,g,b]. ``` Palettes as hex strings, convert once. Weighted ink pick for flow: weights=[0.44,0.2,0.19,0.17] applied to shuffled? Keep order but rng picks. Fine. Builders produce cmd list; each cmd: - {op:'bg', color} - {op:'circle', x,y,r, w?, color, fill, alpha?, dash?} - {op:'path', pts:Float32Array-ish array [x0,y0,x1,y1,...], w, color, alpha} - {op:'ridge', pts:[...], fill, edge, ew} Executor: ```js function cmdCost(c){switch op: bg:0.001; circle: c.r*TAU+? ; path: polyline len; ridge: len} function execPartial(ctx, c, W, H, from, to){ const k = W; // x scale switch... path: build sub-poly between fractions; ctx.strokeStyle etc; lineCap round lineJoin round; if to-from tiny skip. circle: if fill && (from>0) → fill full when to>=1 else fill? Filled circle animating as pie? For filled disc: animate as arc sweep fill (pie wedge) looks like radar sweep — fun. ctx.beginPath(); moveTo(cx,cy); arc(cx,cy,r, a0, a0+ (to)*TAU... plus initial rotation from cmd.rot); closePath; fill. For stroke circle: arc(a0+from*TAU → a0+to*TAU). ridge: reveal as described. bg: fillRect full (only once, cost tiny). } ``` Animation controller: ```js let anim = null; function print(commands, {animated=true, onDone}){ cancel prev; if(!animated){ execAll + grain; } else { precompute costs cumulative; totalCost; rate=total/1400ms; start=performance.now(); loop via rAF; track per-cmd fraction using cost cursor. } } ``` Implementation detail: maintain cursor = cost units consumed. Each frame target = min(total, (now-start)*rate + startCost0). While cmdCostCursor < target: compute frac for current cmd = (target - before)/cost clamped; execPartial(from=prevFrac, to=frac); advance. Handle from==0 start. When cursor reaches total → done: grain fade-in (store grainAlpha anim via small extra rAF 250ms), onDone. execPartial for path partial: I have pts array; compute cumulative lengths normalized (precompute per cmd at build? compute lazily cache). Function drawPathRange(ctx,cmd,from,to): indices via cumulative lengths array (cached on cmd._cum), get point at fraction via interpolation. Multiply coords by W/H. lineWidth = cmd.w*W/1000 * (dpr baked into W since W is backing pixels) — since ctx not scaled, W is backing-store px; widths relative W/1000 consistent. Use ctx transform: set ctx.setTransform(1,0,0,1,0,0) once, work in backing px. Grain: ```js function applyGrain(ctx,W,H,seedRng,alpha){ const T=Math.max(80, Math.floor(W/9)); const tc=document.createElement('canvas'); tc.width=tc.height=T; const id=ictx.createImageData(T,T); for i: v=128+ (r()*90-45); a = r()*255*0.9; set r=g=b=v; alpha channel small: data[i+3]= r()<0.5? ... Simpler: value v = r()*255; data alpha = 255*? Use overlay-ish: draw with globalAlpha and 'multiply'?? multiply with gray darkens; use 'overlay' composite? Canvas supports 'overlay'. I'll do: pixel v=random 0..255; alpha=Math.floor(r()*70). Then drawImage pattern with ctx.globalAlpha=0.5 and composite 'overlay' → contrasty grain on lights, soft on darks. Alternatively two passes: multiply pass (dark speckle) low alpha + screen pass? Keep single 'overlay' pass alpha ~0.35. Test-in-head: overlay with mid-gray ~128 leaves unchanged; speckles ± push contrast. Good. pattern = ctx.createPattern(tc,'repeat'); fillRect. } ``` Seed grain rng from main seed so export matches screen. Export: ```js function exportPNG(){ const EW=2000, EH=2500; off canvas; build same commands from stored build inputs; execAll; grain; toBlob→a.download; toast. } ``` Store lastBuild = {seed, style, paletteIdx, density} to rebuild. Resize handling: debounce; re-run renderInstant (rebuild from stored seed+params — deterministic; note builders consume rng — must rebuild from scratch with fresh mulberry32(seed) so deterministic ✓). One nuance: grain rng must also derive from seed — inside render, create grng = mulberry32(seed^0x9e37) after builder used its own rng instance. Deterministic ✓. Builders must not depend on canvas size ✓ (normalized). Now flow builder detail (write carefully): ```js function buildFlow(rng, params){ const cmds=[{op:'bg', color:pal.paper}]; const ASP=0.8; const noise = makeNoise(rng); const fs = 1.6 + rng()*2.2; // field frequency const curl = 1.4 + rng()*1.8; // angular gain const drift = (rng()-0.5)*1.2; // global drift // focal motif const fx = 0.5 + (rng()-0.5)*0.3; const fy = 0.30 + rng()*0.22; const mr = 0.13 + rng()*0.10; const motif = rng(); let motifCmd=null; if(motif<0.52) motifCmd={op:'circle',x:fx,y:fy,r:mr, w:2+rng()*2.5, color:pal.inks[1+((rng()*3)|0)], fill:false}; else if(motif<0.78) motifCmd={op:'circle',x:fx,y:fy,r:mr*0.9, color:pal.inks[1+((rng()*3)|0)], fill:true, alpha:0.92, rot:rng()*TAU}; if(motifCmd) cmds.push(motifCmd); const N = Math.round(260 + params.density*15); // density 0..100 → 260..1760 for(let i=0;i1.03||y<-0.03||y>1.03) break; pts.push(x,y); } if(pts.length>=6) cmds.push({op:'path', pts, w, color:col, alpha:0.88+rng()*0.12}); } return {cmds, meta:{label:'strokes', count:N}}; } ``` Note steps small: with 30..160 steps × st~0.006 → length ~0.2–1.0 of height — good flowing strands. Short strands might be < 6 pts (2 pts) — allow ≥2 pts (4 numbers) too: change to pts.length>=4. pickInk: weights [0.46,0.2,0.17,0.17] cumulative vs rng. Ridges: ```js function buildRidges(rng, params){ cmds bg paper. // sun if(rng()<0.85){ cmds.push({op:'circle', x:0.2+rng()*0.6, y:0.16+rng()*0.14, r:0.06+rng()*0.055, color: pal.inks[1+((rng()*2)|0)]? choose accent = inks[1] or [2], fill:true, rot:rng()*TAU}); } const L = 6 + Math.round(params.density*0.05); // 6..11 for(let li=0; li0.25 && t<0.8 && rng()<0.35) col = mixRGB(colRGB, pal.inks[2]rgb, 0.35); cmds.push({op:'ridge', pts, fill:rgb(col), edge: pal.ink0, ew: t>0.7?2.4:1.6}); } meta {label:'layers', count:L} } ``` fbm amplitude ~±0.6 so y wiggles ±amp*0.6 fine. Back layers light against paper: edge stroke lighter too? edge color = mix(paper, ink0, min(1, fillMix+0.25))? Compute edge as darker version: mixRGB(fillcol, ink0, 0.5)? Simpler: edge = mixRGB(pal.paper, ink0, clamp(fillT+0.3,0,1)). I'll compute fillT variable and derive both. Orbits: ```js function buildOrbits(rng, params){ bg. const ASP=0.8; const cx=0.5+(rng()-0.5)*0.14, cy=0.44+(rng()-0.5)*0.14; const noise? not needed. const R = 10 + Math.round(params.density*0.14); // 10..24 rings const rMin=0.045, rMax=0.62+rng()*0.16; const accent = pal.inks[1+((rng()*3)|0)]; // center mark cmds.push({op:'path', pts:[cx-0.02,cy, cx+0.02,cy], w:1.2, color:ink0, alpha:0.9}); cmds.push({op:'path', pts:[cx,cy-0.02/ASP*? just vertical len 0.02, ...], ...}); for(let ri=0;ri>>0).toString(16).toUpperCase().padStart(8,'0'). Controls markup: ```html

ENGINE FLOW FIELD

...ridges "02 RIDGELINES", orbits "03 ORBITS"

INKSET VERMILION

(built by JS: chips)

DENSITY 55

GRAIN

SPACE — NEW PRINT · S — SAVE

``` Engine buttons stacked rows. Icons inline SVG: - arrow-right for primary: `` - download: `` adjust. Chip: `

INKSETVERMILION

DENSITY50

GRAIN

SPACE — NEW PRINT · S — SAVE

SEEDED PÉRLIN FIELDS — EVERYTHING DRAWN IN YOUR BROWSER, NOTHING UPLOADED EDITION Nº 0000

``` **How it works** - **Three engines, one seed.** Each "pull" draws a fresh 32-bit seed into a mulberry32 PRNG and a seeded Perlin field, so every image is fully reproducible. The seed is printed in the status line under each edition. - *Flow Field* — up to ~1,700 ink strands advected through curl noise, with a focal motif (a disc or ring placed on a compositional anchor) so the randomness reads as intent, plus scattered flecks. - *Ridgelines* — 6–11 layered mountain ridges built from fBm, colored as a ramp from paper to ink, with a sun disc setting behind them. - *Orbits* — an astronomical-chart generator: concentric rings of arcs, tick marks, dashed circles, planets, and one bold accent arc. - **The printing animation** is the signature moment: every image is compiled into a command list, then replayed stroke-by-stroke with cost-based pacing — circles sweep open, ridges carve left to right, and the paper grain fades in at the end. - **Real controls:** engine, inkset (six curated palettes — switching keeps the same seed so you can compare), density, grain toggle. `Space` pulls a new print, `S` (or the button) re-renders the current edition at 1800×2250 and downloads it as a PNG. Click the print itself to pull a new one — no two editions are ever alike.