256 lines
9.9 KiB
HTML
256 lines
9.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"
|
|
/>
|
|
<meta name="theme-color" content="#10151f" />
|
|
<meta name="robots" content="index,follow" />
|
|
<meta name="author" content="Andras Schmelczer" />
|
|
<meta
|
|
name="description"
|
|
content="Draw colour into a canvas that keeps moving. Your strokes become paths for life that splits, drifts, and redraws the surface over time."
|
|
/>
|
|
|
|
<link rel="canonical" href="https://schmelczer.dev/fleeting/" />
|
|
|
|
<meta property="og:title" content="Fleeting Garden" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content="Fleeting Garden" />
|
|
<meta property="og:locale" content="en_US" />
|
|
<meta
|
|
property="og:description"
|
|
content="Draw colour into a canvas that keeps moving. Your strokes become paths for life that splits, drifts, and redraws the surface over time."
|
|
/>
|
|
<meta property="og:url" content="https://schmelczer.dev/fleeting/" />
|
|
<meta property="og:image" content="https://schmelczer.dev/fleeting/og-image.jpg" />
|
|
<meta property="og:image:type" content="image/jpeg" />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta property="og:image:alt" content="Fleeting Garden social preview image." />
|
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Fleeting Garden" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="Draw colour into a canvas that keeps moving. Your strokes become paths for life that splits, drifts, and redraws the surface over time."
|
|
/>
|
|
<meta name="twitter:image" content="https://schmelczer.dev/fleeting/og-image.jpg" />
|
|
<meta name="twitter:image:alt" content="Fleeting Garden social preview image." />
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebApplication",
|
|
"name": "Fleeting Garden",
|
|
"url": "https://schmelczer.dev/fleeting/",
|
|
"description": "Draw colour into a canvas that keeps moving. Your strokes become paths for life that splits, drifts, and redraws the surface over time.",
|
|
"image": "https://schmelczer.dev/fleeting/og-image.jpg",
|
|
"applicationCategory": "DesignApplication",
|
|
"operatingSystem": "Any",
|
|
"browserRequirements": "Requires a browser with WebGPU support.",
|
|
"author": {
|
|
"@type": "Person",
|
|
"name": "Andras Schmelczer"
|
|
},
|
|
"sameAs": "https://github.com/schmelczer/webgpu"
|
|
}
|
|
</script>
|
|
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png" />
|
|
<link rel="manifest" href="manifest.webmanifest" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-title" content="Fleeting Garden" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
|
|
<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="garden-grain" aria-hidden="true"></div>
|
|
<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" data-visible="true">
|
|
<h1 class="splash-title">Fleeting Garden</h1>
|
|
<p class="splash-description">
|
|
Draw colour into a canvas that keeps moving. Your strokes become paths for life that splits, drifts, and redraws the surface over time.
|
|
</p>
|
|
<button class="start-button" type="button" disabled>Start</button>
|
|
</div>
|
|
<div class="loading-bar" data-visible="false" aria-hidden="true" inert>
|
|
<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-labelledby="info-panel-title"
|
|
aria-hidden="true"
|
|
tabindex="-1"
|
|
inert
|
|
>
|
|
<div class="info-page__content">
|
|
<header class="info-page__header">
|
|
<span class="info-page__mark" aria-hidden="true"></span>
|
|
<div class="info-page__heading">
|
|
<p class="info-page__eyebrow">About</p>
|
|
<h2 id="info-panel-title">Fleeting Garden</h2>
|
|
</div>
|
|
<button
|
|
class="info-page__close"
|
|
data-control="info-close"
|
|
type="button"
|
|
aria-label="Close about panel"
|
|
title="Close"
|
|
></button>
|
|
</header>
|
|
|
|
<p class="info-page__main">
|
|
Draw into a field of particles and watch the simulation fold your marks back into motion.
|
|
</p>
|
|
|
|
<ul class="info-page__notes">
|
|
<li>Choose one of three colour swatches, then drag to draw.</li>
|
|
<li>Use the eraser to clear space and reshape the field.</li>
|
|
<li>The mirror repeats each gesture across the canvas.</li>
|
|
<li>The arrows switch the current atmosphere.</li>
|
|
</ul>
|
|
|
|
<p class="info-page__main">
|
|
My implementation of <a href="https://cargocollective.com/sagejenson/physarum" target="_blank" rel="noopener">physarum simulation</a> introduces drawing and procedurally generated piano for a more immersive experience. Learn more about my work at <a href="https://schmelczer.dev" target="_blank" rel="noopener">schmelczer.dev</a>
|
|
</p>
|
|
</div>
|
|
</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" role="group" 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"
|
|
data-control="info"
|
|
aria-label="About"
|
|
aria-controls="info-panel"
|
|
aria-expanded="false"
|
|
title="About"
|
|
></button>
|
|
<button
|
|
class="full-screen-toggle"
|
|
data-control="full-screen"
|
|
aria-label="Enter fullscreen"
|
|
title="Enter fullscreen"
|
|
></button>
|
|
<button
|
|
class="settings"
|
|
data-control="settings"
|
|
aria-label="Show config overlay"
|
|
aria-expanded="false"
|
|
title="Show config overlay"
|
|
></button>
|
|
<div class="audio-control">
|
|
<button
|
|
class="sound"
|
|
data-control="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"
|
|
data-control="export"
|
|
aria-label="Download internal buffer snapshot"
|
|
title="Download internal buffer snapshot"
|
|
></button>
|
|
<span class="export-status" aria-live="polite"></span>
|
|
<button
|
|
class="restart"
|
|
data-control="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>
|