206 lines
7.1 KiB
HTML
206 lines
7.1 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="#10151f" />
|
|
<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="apple-touch-icon" href="apple-touch-icon-180x180.png" />
|
|
<link rel="manifest" href="manifest.webmanifest" />
|
|
|
|
<title>Fleeting Garden</title>
|
|
</head>
|
|
<body class="is-loading">
|
|
<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, export,
|
|
adjust the config overlay, restart, or open more information.
|
|
</p>
|
|
<div class="eraser-preview" aria-hidden="true"></div>
|
|
<div class="garden-prompt" aria-live="polite"></div>
|
|
|
|
<div class="loading-indicator" role="status">
|
|
<div class="splash">
|
|
<h1 class="splash-title">Fleeting Garden</h1>
|
|
<p class="splash-description">
|
|
Draw coloured paths and watch them bloom into a living WebGPU garden.
|
|
</p>
|
|
<button class="start-button" type="button" disabled>Start</button>
|
|
</div>
|
|
<div class="loading-bar" hidden>
|
|
<div class="loading-status">Starting up…</div>
|
|
<div
|
|
class="loading-progress"
|
|
role="progressbar"
|
|
aria-label="Loading Fleeting Garden"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
aria-valuenow="0"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="errors-container">
|
|
<noscript>JavaScript is required for this website.</noscript>
|
|
</section>
|
|
</main>
|
|
|
|
<aside class="control-dock">
|
|
<section
|
|
id="info-panel"
|
|
class="hidden info-page"
|
|
role="region"
|
|
aria-label="About panel"
|
|
aria-hidden="true"
|
|
tabindex="-1"
|
|
inert
|
|
>
|
|
<section>
|
|
<h1>Fleeting Garden</h1>
|
|
<p>
|
|
A living sketchpad where each stroke becomes a trail that agents follow,
|
|
branch from, and weave into the scene.
|
|
</p>
|
|
<p>
|
|
Paint with the three colour swatches, carve space with the eraser, and raise
|
|
the mirror control when you want radial patterns instead of a single line.
|
|
</p>
|
|
<p>
|
|
Switch vibes to recolour the whole garden without clearing your drawing. Add
|
|
or mute the generated piano, restart for a blank canvas, or export the current
|
|
frame as an internal buffer snapshot.
|
|
</p>
|
|
<p>
|
|
Built with WebGPU and running locally in your browser. Source on
|
|
<a href="https://github.com/schmelczer/webgpu" target="_blank" rel="noopener"
|
|
>GitHub</a
|
|
>.
|
|
</p>
|
|
</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" aria-label="Eraser size" />
|
|
</label>
|
|
<label class="mirror-segment-control" title="Mirror off">
|
|
<input
|
|
class="mirror-segment-slider"
|
|
type="range"
|
|
aria-label="Mirror segments"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<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="Show config overlay"
|
|
aria-expanded="false"
|
|
title="Show config overlay"
|
|
></button>
|
|
<div class="audio-control">
|
|
<button
|
|
class="sound"
|
|
aria-label="Mute audio"
|
|
aria-pressed="false"
|
|
title="Mute audio"
|
|
></button>
|
|
<label class="volume-control" title="Master volume">
|
|
<input class="volume-slider" type="range" aria-label="Master volume" />
|
|
</label>
|
|
</div>
|
|
<button
|
|
class="export-4k"
|
|
aria-label="Download internal buffer snapshot"
|
|
title="Download internal buffer snapshot"
|
|
></button>
|
|
<span class="export-status" aria-live="polite"></span>
|
|
<button
|
|
class="restart"
|
|
aria-label="Restart simulation"
|
|
title="Restart simulation"
|
|
></button>
|
|
</nav>
|
|
|
|
<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>
|