192 lines
6.4 KiB
HTML
192 lines
6.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width,initial-scale=1,viewport-fit=cover"
|
|
/>
|
|
<meta name="theme-color" content="#b7455e" />
|
|
<meta
|
|
name="description"
|
|
content="Fleeting Garden is a joyful WebGPU drawing garden where your coloured paths bloom into moving organic trails."
|
|
/>
|
|
|
|
<meta property="og:title" content="Fleeting Garden" />
|
|
<meta
|
|
property="og:description"
|
|
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" />
|
|
<meta property="og:image:width" content="1920" />
|
|
<meta property="og:image:height" content="1920" />
|
|
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
|
|
<title>Fleeting Garden</title>
|
|
</head>
|
|
<body>
|
|
<main class="canvas-container">
|
|
<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 class="control-dock">
|
|
<section id="info-panel" class="pages hidden info-page" aria-hidden="true" inert>
|
|
<section>
|
|
<h1>Fleeting Garden</h1>
|
|
<p>
|
|
Pick a vibe palette, draw with one of the three colours, and agents grow
|
|
organic paths from your strokes.
|
|
</p>
|
|
<p>
|
|
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 — no servers, no
|
|
tracking, no analytics. Source on
|
|
<a href="https://github.com/schmelczer/webgpu" target="_blank" rel="noopener"
|
|
>GitHub</a
|
|
>.
|
|
</p>
|
|
</section>
|
|
</section>
|
|
|
|
<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>
|
|
</section>
|
|
|
|
<div class="toolbar-row" role="toolbar" aria-label="Garden toolbar">
|
|
<button
|
|
class="previous-vibe vibe-button"
|
|
aria-label="Previous vibe"
|
|
title="Previous vibe"
|
|
>
|
|
‹
|
|
</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>
|
|
<label class="mirror-segment-control" title="Mirror off">
|
|
<input
|
|
class="mirror-segment-slider"
|
|
type="range"
|
|
min="1"
|
|
max="12"
|
|
step="1"
|
|
aria-label="Mirror segments"
|
|
/>
|
|
</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">
|
|
›
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<script type="module" src="/src/index.ts"></script>
|
|
</body>
|
|
</html>
|