andras/fleeting-garden
andras/fleeting-garden
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactoring start

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-09 22:09:04 +01:00
commit b1acdff594
19 changed files with 528 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

150
index.html
View file

@ -9,13 +9,13 @@
<meta name="theme-color" content="#b7455e" />
<meta
name="description"
content="A WebGPU agent simulation: a million blobs leave trails, infect each other across generations, and react to your brush."
content="Fleeting Garden is a joyful WebGPU drawing garden where your coloured paths bloom into moving organic trails."
/>
<meta property="og:title" content="Just a bunch of blobs" />
<meta property="og:title" content="Fleeting Garden" />
<meta
property="og:description"
content="A WebGPU agent simulation: a million blobs leave trails, infect each other across generations, and react to your brush."
content="Pick a vibe, draw coloured paths, and watch them grow into a living WebGPU garden."
/>
<meta property="og:url" content="https://schmelczer.dev" />
<meta property="og:image" content="https://schmelczer.dev/og-image.jpg" />
@ -27,38 +27,42 @@
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<title>Just a bunch of blobs</title>
<title>Fleeting Garden</title>
</head>
<body>
<main class="canvas-container">
<canvas></canvas>
<canvas
role="img"
aria-label="Interactive generative garden canvas"
aria-describedby="canvas-description"
>
Your browser cannot display the interactive WebGPU garden canvas. Use a browser
with WebGPU support to draw coloured paths and watch the garden grow.
</canvas>
<p id="canvas-description" class="visually-hidden">
Fleeting Garden is a pointer-driven WebGPU drawing canvas. Drag or touch the scene
to paint coloured paths, then use the toolbar to change colours, erase, adjust
settings, export, restart, or open more information.
</p>
<div class="eraser-preview" aria-hidden="true"></div>
<div class="garden-prompt" aria-live="polite"></div>
<section class="errors-container">
<noscript>JavaScript is required for this website.</noscript>
</section>
</main>
<aside>
<nav class="buttons">
<button class="info" aria-label="About"></button>
<button class="maximize-full-screen" aria-label="Enter fullscreen"></button>
<button class="minimize-full-screen" aria-label="Exit fullscreen"></button>
<button class="settings" aria-label="Settings"></button>
<button class="restart" aria-label="Restart simulation"></button>
</nav>
<main class="pages hidden info-page">
<aside class="control-dock">
<section id="info-panel" class="pages hidden info-page" aria-hidden="true" inert>
<section>
<h1>Just a bunch of blobs</h1>
<h1>Fleeting Garden</h1>
<p>
A million autonomous agents wander a 2D field. Each one lays down a faint
trail and follows trails it senses ahead. Two generations are competing for
territory: the older one fades, the newer one spreads.
Pick a vibe palette, draw with one of the three colours, and agents grow
organic paths from your strokes.
</p>
<p>
Drag your finger or mouse anywhere on the canvas to paint a wall. Walls slow
the new generation down and let the old one breathe a little longer. Open
<em>Settings</em> to retune sensors, decay rates and aggression.
Your drawn paths persist until you erase them. Switching vibes recolours the
whole garden without clearing the scene.
</p>
<p>
Runs entirely on your GPU via WebGPU compute shaders &mdash; no servers, no
@ -68,14 +72,110 @@
>.
</p>
</section>
</main>
</section>
<main class="pages hidden settings-page">
<section
id="settings-panel"
class="pages hidden settings-page"
aria-hidden="true"
inert
>
<section>
<div class="settings-content"></div>
<button id="apply-defaults" class="large-button">Apply defaults</button>
</section>
</main>
</section>
<div class="toolbar-row" role="toolbar" aria-label="Garden toolbar">
<button
class="previous-vibe vibe-button"
aria-label="Previous vibe"
title="Previous vibe"
>
&lsaquo;
</button>
<div class="toolbar-shell">
<section class="garden-controls" aria-label="Garden controls">
<div class="swatches" aria-label="Drawing colours">
<button
class="color-swatch"
aria-label="Draw colour 1"
title="Draw colour 1"
></button>
<button
class="color-swatch"
aria-label="Draw colour 2"
title="Draw colour 2"
></button>
<button
class="color-swatch"
aria-label="Draw colour 3"
title="Draw colour 3"
></button>
<label class="eraser-size-control" title="Erase and resize">
<input
class="eraser-size-slider"
type="range"
min="24"
max="240"
step="1"
aria-label="Eraser size"
/>
</label>
</div>
</section>
<nav class="buttons" aria-label="App controls">
<button
class="info"
aria-label="About"
aria-controls="info-panel"
aria-expanded="false"
title="About"
></button>
<button
class="maximize-full-screen"
aria-label="Enter fullscreen"
title="Enter fullscreen"
></button>
<button
class="minimize-full-screen"
aria-label="Exit fullscreen"
hidden
title="Exit fullscreen"
></button>
<button
class="settings"
aria-label="Settings"
aria-controls="settings-panel"
aria-expanded="false"
title="Settings"
></button>
<button
class="sound"
aria-label="Mute audio"
aria-pressed="false"
title="Mute audio"
></button>
<button
class="export-4k"
aria-label="Download 4K image"
title="Download 4K image"
></button>
<span class="export-status" aria-live="polite"></span>
<button
class="restart"
aria-label="Restart simulation"
title="Restart simulation"
></button>
</nav>
</div>
<button class="next-vibe vibe-button" aria-label="Next vibe" title="Next vibe">
&rsaquo;
</button>
</div>
</aside>
<script type="module" src="/src/index.ts"></script>
</body>