semanticentity

2GETHER SEQUENCER 💕

Single-file HTML game using Canvas 2D for rendering and Web Audio API for procedural music/SFX

Gameplay: Two-player movement with a distance-based “love meter”; collect items, avoid hazards
Music system: Step sequencer with bar-level generative variation (phrase locking, pruning, occasional backbeat) and controlled melodic evolution (density normalization, major/minor mode)
Extras: Background “garden” canvas that fills with flowers during play; optional in-browser recording via MediaRecorder
Cheat Code: Enter the Konami code (Up Up Down Down Left Right Left Right B A) while paused or pre-game to unlock continuous background flower blooming and a special button pulse/jingle for that session

	<select id="scoreFilter">
	<option value="all">Show All</option>
	<option value="80">80+</option>
	<option value="60">60–79</option>
	<option value="59">Below 60</option>
	</select>

	<div id="map"></div>

	const canvas = document.getElementById('gameCanvas');
	const ctx = canvas.getContext('2d');
	const radarCanvas = document.getElementById('radarCanvas');
	const radarCtx = radarCanvas.getContext('2d');

	const speedIndicator = document.getElementById('speed-indicator');
	const headingIndicator = document.getElementById('heading-indicator');
	const shieldIndicator = document.getElementById('shield-indicator');
	const laserStatus = document.getElementById('laser-status');
	const hyperspaceStatus = document.getElementById('hyperspace-status');

	(function () {
	/**
	* Recognized directives (ignored if unknown)
	* This is NOT a strict allowlist — unknowns are warnings only
	*/
	var KNOWN_DIRECTIVES = [
	"user-agent",
	"allow",
	"disallow",
	"sitemap",

	<div id="app">
	<header class="panel">
	<div class="titleRow">
	<h1>Regions, Not Rectangles</h1>
	<div class="badge">Based on interview with <a href="https://www.youtube.com/watch?v=kGIIwyJ7G94" target="_blank">Bill Atkinson, discussing Lisa source code</a></div>
	</div>

	<p class="sub">
	A web window manager demo: visible regions are stored as <strong>scanline deltas</strong> and rendered as
	<strong>top‑down slabs</strong>. (This is the core idea Bill Atkinson is describing.)

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SEQUENCER:SYSTEM</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
	<style>

	<!-- WIZZY PANEL -->
	<div id="wizzy">
	<button data-sn="--- ">New section</button>
	<button data-sn=" \| ">Column “\|”</button>
	<button data-sn="--- 50/50 ">2-col 50/50</button>
	<button data-sn="--- 33/34/33 ">3-col thirds</button>
	<button data-sn="▣ ">CTA ▣</button>
	<button data-sn="▸ ">Sub-head ▸</button>
	<button data-sn="• ">Bullet •</button>
	<button data-sn="[[progress 50]]">Progress</button>