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.
108 lines
2.9 KiB
108 lines
2.9 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="musical_note.png">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Music of Life</h1>
|
|
|
|
<div id="status">
|
|
<span id="runState">stopped</span>
|
|
<span id="generation">Generation: 0</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="controls">
|
|
<div class="panel primary">
|
|
<button id="startBtn">Start</button>
|
|
<button id="stepBtn">Step</button>
|
|
<button id="randomBtn">Random</button>
|
|
<button id="clearBtn">Clear</button>
|
|
|
|
<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 class="record-controls">
|
|
<button id="recordBtn">Start Recording</button>
|
|
<button id="stopRecordBtn">Stop Recording</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel secondary">
|
|
<label>
|
|
Speed
|
|
<input id="speedRange" type="range" min="50" max="2000" value="800">
|
|
<output id="speedValue"></output>
|
|
</label>
|
|
|
|
<label>
|
|
Cell size
|
|
<input id="cellSizeRange" type="range" min="4" max="64" value="24">
|
|
<output id="cellSizeValue"></output>
|
|
</label>
|
|
|
|
<label>
|
|
Base frequency
|
|
<input id="baseFrequencyRange" type="range" min="20" max="600" value="100">
|
|
<output id="baseFrequencyValue"></output>
|
|
</label>
|
|
|
|
<label>
|
|
Volume
|
|
<input id="volumeRange" type="range" min="0" max="100" value="50">
|
|
<output id="volumeValue"></output>
|
|
</label>
|
|
|
|
<label class="inline">
|
|
<input type="checkbox" id="wrapCheckbox" checked>
|
|
Wrap edges
|
|
</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"></small>
|
|
</div>
|
|
</section>
|
|
|
|
<canvas id="lifeCanvas"></canvas>
|
|
|
|
<footer>
|
|
<small>
|
|
Click or drag to draw · Right click to erase · Space = start/stop
|
|
</small>
|
|
</footer>
|
|
</main>
|
|
|
|
<!-- order matters -->
|
|
<script src="recording.js"></script>
|
|
<script src="music.js"></script>
|
|
<script src="script.js"></script>
|
|
<script src="ui.js"></script>
|
|
</body>
|
|
|
|
</html> |