You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
4.6 KiB
131 lines
4.6 KiB
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Music of Life</title>
|
|
<link rel="icon" href="src/musical_note.png">
|
|
<link rel="stylesheet" href="src/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Music of Life</h1>
|
|
<div id="status">
|
|
<span id="generation">Generation: 0</span>
|
|
<span id="runState">stopped</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="app-grid">
|
|
<aside class="sidebar">
|
|
<section class="panel secondary collapsible">
|
|
<button class="collapse-toggle" type="button">Controls</button>
|
|
|
|
<div class="collapsible-content">
|
|
<section class="panel primary">
|
|
<div class="gap-row">
|
|
<button id="startBtn">Start</button>
|
|
<button id="stepBtn">Step</button>
|
|
<button id="randomBtn">Random</button>
|
|
<button id="clearBtn">Clear</button>
|
|
</div>
|
|
|
|
<div class="right-controls">
|
|
<select id="presetSelect">
|
|
<option value="">Presets</option>
|
|
<option value="glider">Glider</option>
|
|
<option value="lwss">Lightweight spaceship</option>
|
|
<option value="gosper">Gosper glider gun</option>
|
|
</select>
|
|
<button id="saveBtn">Save</button>
|
|
<button id="loadBtn">Load</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel secondary controls">
|
|
<label class="slider-row">Speed
|
|
<div class="slider-control">
|
|
<input id="speedRange" type="range" min="0.5" max="50" value="5" step="1">
|
|
<output id="speedValue"></output>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="slider-row">Cell size
|
|
<div class="slider-control">
|
|
<input id="cellSizeRange" type="range" min="4" max="64" value="24">
|
|
<output id="cellSizeValue"></output>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="slider-row">Base frequency
|
|
<div class="slider-control">
|
|
<input id="baseFrequencyRange" type="range" min="20" max="600" value="100">
|
|
<output id="baseFrequencyValue"></output>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="slider-row">Volume
|
|
<div class="slider-control">
|
|
<input id="volumeRange" type="range" min="0" max="100" value="50">
|
|
<output id="volumeValue"></output>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="inline">
|
|
<input type="checkbox" id="wrapCheckbox" checked>
|
|
<span>Wrap edges</span>
|
|
</label>
|
|
|
|
<label>Music mode
|
|
<select id="musicModeSelect">
|
|
<option value="additive">Additive</option>
|
|
<option value="frequencyGrid">Frequency Grid</option>
|
|
<option value="granular">Granular</option>
|
|
<option value="polyrhythm">Polyrhythm</option>
|
|
</select>
|
|
</label>
|
|
|
|
<small id="modeHint" class="muted"></small>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel secondary collapsible collapsed">
|
|
<button class="collapse-toggle" type="button">Recording</button>
|
|
|
|
<div class="collapsible-content">
|
|
<section class="panel secondary">
|
|
<div class="gap-row">
|
|
<button id="recordBtn">Start Recording</button>
|
|
<button id="stopRecordBtn">Stop Recording</button>
|
|
<span id="recordDot" class="recording-indicator hidden">Recording</span>
|
|
</div>
|
|
<canvas id="waveformCanvas" width="400" height="80"></canvas>
|
|
<div id="timerDisplay">00:00</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="canvas-area">
|
|
|
|
<canvas id="lifeCanvas"></canvas>
|
|
<button id="fullscreenToggle" class="fullscreen-toggle" type="button">Full screen ⛶</button>
|
|
<footer>
|
|
<small>Click or drag to draw · Right click to erase · Space = start/stop</small>
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="src/scripts/recording.js"></script>
|
|
<script src="src/scripts/music.js"></script>
|
|
<script src="src/scripts/script.js"></script>
|
|
<script src="src/scripts/ui.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |