140 lines
6.0 KiB
HTML
140 lines
6.0 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="theme-color" content="#07100f" />
|
||
<title>Fractalier — Mathematical Fractal Generator</title>
|
||
<link rel="stylesheet" href="style.css?v=40" />
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<canvas id="field" aria-label="Generated fractal"></canvas>
|
||
|
||
<header>
|
||
<div class="brand"><i></i> FRACTALIER</div>
|
||
<div class="generation-state">
|
||
<span id="generation-status">ready</span>
|
||
<div><b id="generation-progress"></b></div>
|
||
</div>
|
||
<nav>
|
||
<button class="gallery-toggle" id="gallery-toggle" aria-controls="gallery-panel" aria-expanded="false">
|
||
Gallery <span id="gallery-count">0</span>
|
||
</button>
|
||
<div class="export-control">
|
||
<button id="export-toggle" aria-label="Export current formula" aria-haspopup="true" aria-expanded="false">Export ↓</button>
|
||
<div class="export-menu hidden" id="export-menu">
|
||
<button id="save-background">PNG · background</button>
|
||
<button id="save-transparent">PNG · transparent</button>
|
||
<button id="save-video">WebM · growth video</button>
|
||
<button id="save-formula">JSON · formula</button>
|
||
<button id="import-formula">Import · formula JSON</button>
|
||
<input id="formula-file" type="file" accept=".json,application/json" hidden />
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<aside class="formula-panel" id="formula-panel">
|
||
<div class="panel-heading">
|
||
<div>
|
||
<p class="kicker">current formula</p>
|
||
<strong id="formula-name">Recursive bloom</strong>
|
||
</div>
|
||
<span id="organism-id">F001</span>
|
||
</div>
|
||
<div class="equation">
|
||
<span>αₙ = α + Δαn + β sin(nω + φ)</span>
|
||
<span>sₙ = s + ρ cos(nν + φ)</span>
|
||
<span>T(t) ∈ {sin t, cos t, atan(tan t), H(t)}</span>
|
||
<span>Fₙ₊₁ = ⋃ᵣ Lℓ(r) ⋃ᵢ sₙR(iαₙ+nτ)K(κₙ+γT)Aᵢ(Fₙ) ∪ Cq ∪ Pₘλ</span>
|
||
</div>
|
||
<div class="traits">
|
||
<span>branches <b id="trait-branch">2</b></span>
|
||
<span>angle <b id="trait-angle">30°</b></span>
|
||
<span>scale <b id="trait-scale">0.68</b></span>
|
||
<span>roots <b id="trait-symmetry">1</b></span>
|
||
<span>recursion <b id="trait-depth">8</b></span>
|
||
<span>closure <b id="trait-closure">0.00</b></span>
|
||
<span>angle wave <b id="trait-wave">0°</b></span>
|
||
<span>scale pulse <b id="trait-pulse">0.00</b></span>
|
||
<span>facets <b id="trait-facets">14</b></span>
|
||
<span>figure <b id="trait-figure">none</b></span>
|
||
<span>curve <b id="trait-curve">linear</b></span>
|
||
<span>layout <b id="trait-layout">radial</b></span>
|
||
</div>
|
||
<p class="lineage" id="lineage">founder formula · no parents</p>
|
||
</aside>
|
||
|
||
<aside class="gallery-panel" id="gallery-panel" aria-label="Generated fractals">
|
||
<div class="gallery-head">
|
||
<div>
|
||
<p class="kicker">your collection</p>
|
||
<strong>Generated formulas</strong>
|
||
</div>
|
||
<button id="gallery-close" aria-label="Close gallery">×</button>
|
||
</div>
|
||
<p class="gallery-help">Click a formula to view or export it. Use + to choose two parents for crossing.</p>
|
||
<div class="parent-slots" id="parent-slots">
|
||
<span id="parent-a"><b>A</b> choose a formula</span>
|
||
<span id="parent-b"><b>B</b> choose a formula</span>
|
||
<button id="clear-parents" title="Clear parent selection" aria-label="Clear parent selection">×</button>
|
||
</div>
|
||
<div class="archive" id="archive"></div>
|
||
<button class="load-more hidden" id="load-more">Show more</button>
|
||
</aside>
|
||
|
||
<aside class="genome-preview hidden" id="genome-preview" aria-live="polite">
|
||
<canvas id="preview-canvas" width="300" height="200" aria-label="Animated formula preview"></canvas>
|
||
<div>
|
||
<strong id="preview-id">F001</strong>
|
||
<span id="preview-meta">Recursive bloom</span>
|
||
</div>
|
||
</aside>
|
||
|
||
<section class="action-bar" aria-label="Generator controls">
|
||
<div class="action-copy">
|
||
<span id="action-kicker">selective generation · choose A and B</span>
|
||
<strong id="action-title">Choose two parents from the Gallery</strong>
|
||
</div>
|
||
<div class="breeding-controls" aria-label="Crossover settings">
|
||
<label>
|
||
<span>inheritance</span>
|
||
<select id="gene-mix" aria-label="Genome inheritance proportion">
|
||
<option value="0.2">20% A · 80% B</option>
|
||
<option value="0.35">35% A · 65% B</option>
|
||
<option value="0.5" selected>50% A · 50% B</option>
|
||
<option value="0.65">65% A · 35% B</option>
|
||
<option value="0.8">80% A · 20% B</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
<span>mutation</span>
|
||
<select id="mutation-level" aria-label="Mutation intensity">
|
||
<option value="0">Stable</option>
|
||
<option value="1" selected>Natural</option>
|
||
<option value="2">Active</option>
|
||
<option value="3">Volatile</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<div class="action-buttons">
|
||
<button class="primary" id="cross" disabled>
|
||
<span>Cross A × B</span>
|
||
<i>→</i>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="toast hidden" id="toast" role="status" aria-live="polite"></div>
|
||
|
||
<footer>
|
||
<span><i class="live"></i><span id="render-status">idle · zero GPU animation</span></span>
|
||
<span>SPACE · cross selected</span>
|
||
<span id="storage-status">checking local storage…</span>
|
||
</footer>
|
||
</main>
|
||
<script src="app.js?v=40"></script>
|
||
</body>
|
||
</html>
|