redlandClaude Fable 5
4cc10b264b
Auth becomes RESIDENT INTAKE (form LS-01), character creation an identity-record intake with a live paper card (LS-02), spawn select a county survey grid with five entry points (LS-03). Live validation, click-drag character rotation, animated transitions throughout. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
470 lines
19 KiB
HTML
470 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Los Santos County — Resident Processing</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=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
|
|
:root{
|
|
--ink: #10131A;
|
|
--ink-2: #171B24;
|
|
--paper: #E8E4DA;
|
|
--paper-2: #D6D0C2;
|
|
--stamp: #C2462E;
|
|
--rule: rgba(232,228,218,.14);
|
|
--rule-2: rgba(232,228,218,.07);
|
|
--dim: rgba(232,228,218,.42);
|
|
--dim-2: rgba(232,228,218,.24);
|
|
--sig: 'Barlow Condensed','Oswald',sans-serif;
|
|
--body: 'IBM Plex Sans',system-ui,sans-serif;
|
|
--mono: 'IBM Plex Mono',ui-monospace,monospace;
|
|
}
|
|
|
|
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--paper);font-family:var(--body)}
|
|
|
|
/* ── Survey footage ─────────────────────────────── */
|
|
#flyover{position:fixed;inset:0;width:100%;height:100%;filter:saturate(.55) contrast(1.06)}
|
|
|
|
.footage-tint{position:fixed;inset:0;pointer-events:none;
|
|
background:
|
|
radial-gradient(ellipse 80% 60% at 50% 42%,transparent 0%,rgba(16,19,26,.5) 68%,rgba(16,19,26,.94) 100%),
|
|
linear-gradient(180deg,rgba(16,19,26,.88) 0%,transparent 22%,transparent 62%,rgba(16,19,26,.96) 100%);
|
|
}
|
|
|
|
.scanlines{position:fixed;inset:0;pointer-events:none;opacity:.5;
|
|
background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0px,rgba(0,0,0,.22) 1px,transparent 1px,transparent 3px)}
|
|
|
|
.grain{position:fixed;inset:-50%;pointer-events:none;opacity:.19;
|
|
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
animation:grainshift .7s steps(3) infinite}
|
|
@keyframes grainshift{
|
|
0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
|
|
|
|
/* ── Registration marks ─────────────────────────── */
|
|
.reg{position:fixed;width:22px;height:22px;pointer-events:none;opacity:0;
|
|
animation:regIn .5s steps(2) .3s forwards}
|
|
.reg::before,.reg::after{content:'';position:absolute;background:var(--dim-2)}
|
|
.reg::before{left:0;right:0;top:50%;height:1px}
|
|
.reg::after{top:0;bottom:0;left:50%;width:1px}
|
|
.reg-tl{top:26px;left:26px}.reg-tr{top:26px;right:26px}
|
|
.reg-bl{bottom:26px;left:26px}.reg-br{bottom:26px;right:26px}
|
|
@keyframes regIn{to{opacity:1}}
|
|
|
|
/* ── Header slate ───────────────────────────────── */
|
|
.slate{position:fixed;top:26px;left:64px;right:64px;display:flex;justify-content:space-between;
|
|
align-items:flex-start;gap:24px;opacity:0;animation:fadeDown .8s cubic-bezier(.2,.8,.25,1) .35s forwards}
|
|
|
|
.slate-id{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim);line-height:2}
|
|
.slate-id b{color:var(--paper);font-weight:500}
|
|
|
|
.slate-read{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);
|
|
text-align:right;line-height:2}
|
|
.slate-read span{color:var(--stamp)}
|
|
|
|
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
|
|
|
|
/* ── Title block: left-anchored, not centered ───── */
|
|
.title{position:fixed;left:64px;top:50%;transform:translateY(-50%);max-width:620px}
|
|
|
|
.title-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--stamp);
|
|
margin-bottom:14px;opacity:0;animation:riseIn .7s cubic-bezier(.2,.8,.25,1) .7s forwards}
|
|
|
|
.title-main{font-family:var(--sig);font-weight:700;font-size:clamp(64px,9.5vw,140px);
|
|
line-height:.83;letter-spacing:-.015em;text-transform:uppercase;
|
|
opacity:0;animation:riseIn .9s cubic-bezier(.2,.8,.25,1) .85s forwards}
|
|
.title-main em{font-style:normal;display:block;color:var(--stamp)}
|
|
|
|
.title-rule{height:1px;background:var(--rule);margin:26px 0 18px;transform:scaleX(0);
|
|
transform-origin:left;animation:ruleOut .9s cubic-bezier(.2,.8,.25,1) 1.25s forwards}
|
|
@keyframes ruleOut{to{transform:scaleX(1)}}
|
|
|
|
.title-sub{font-size:13px;line-height:1.75;color:var(--dim);max-width:390px;
|
|
opacity:0;animation:riseIn .7s cubic-bezier(.2,.8,.25,1) 1.4s forwards}
|
|
|
|
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
|
|
|
|
/* ── Ordinance list ─────────────────────────────── */
|
|
.ord{position:fixed;right:64px;top:50%;transform:translateY(-50%);width:290px;
|
|
opacity:0;transition:opacity .9s cubic-bezier(.2,.8,.25,1)}
|
|
.ord.on{opacity:1}
|
|
|
|
.ord-head{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dim-2);
|
|
padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:4px}
|
|
|
|
.ord-item{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-2);
|
|
opacity:0;transform:translateX(12px)}
|
|
.ord.on .ord-item{animation:ordIn .55s cubic-bezier(.2,.8,.25,1) forwards}
|
|
.ord.on .ord-item:nth-child(2){animation-delay:.05s}
|
|
.ord.on .ord-item:nth-child(3){animation-delay:.12s}
|
|
.ord.on .ord-item:nth-child(4){animation-delay:.19s}
|
|
.ord.on .ord-item:nth-child(5){animation-delay:.26s}
|
|
.ord.on .ord-item:nth-child(6){animation-delay:.33s}
|
|
.ord.on .ord-item:nth-child(7){animation-delay:.40s}
|
|
.ord.on .ord-item:nth-child(8){animation-delay:.47s}
|
|
@keyframes ordIn{to{opacity:1;transform:none}}
|
|
|
|
.ord-no{font-family:var(--mono);font-size:10px;color:var(--stamp);flex-shrink:0;padding-top:2px}
|
|
.ord-tx{font-size:12px;line-height:1.55;color:var(--dim)}
|
|
|
|
/* ── Processing bar ─────────────────────────────── */
|
|
.proc{position:fixed;left:64px;right:64px;bottom:52px;
|
|
opacity:0;animation:fadeUp .8s cubic-bezier(.2,.8,.25,1) 1.6s forwards}
|
|
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
|
|
|
|
.proc-top{display:flex;justify-content:space-between;align-items:baseline;
|
|
font-family:var(--mono);font-size:10px;letter-spacing:.16em;margin-bottom:9px}
|
|
.proc-stage{color:var(--dim)}
|
|
.proc-pct{color:var(--paper);font-size:13px;font-variant-numeric:tabular-nums}
|
|
|
|
.proc-track{height:2px;background:rgba(232,228,218,.09);position:relative;overflow:hidden}
|
|
.proc-fill{position:absolute;inset:0 auto 0 0;width:0%;background:var(--stamp);
|
|
transition:width .45s cubic-bezier(.2,.8,.25,1)}
|
|
.proc-fill::after{content:'';position:absolute;right:0;top:-3px;bottom:-3px;width:1px;
|
|
background:var(--paper);opacity:.85}
|
|
|
|
/* segment ticks encode the real load phases */
|
|
.proc-ticks{position:relative;height:8px;margin-top:6px}
|
|
.proc-tick{position:absolute;top:0;width:1px;height:4px;background:var(--rule)}
|
|
.proc-tick span{position:absolute;top:7px;left:0;transform:translateX(-50%);
|
|
font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--dim-2);white-space:nowrap}
|
|
|
|
/* ── Audio control ──────────────────────────────── */
|
|
.aud{position:fixed;right:64px;bottom:52px;display:flex;align-items:center;gap:11px;
|
|
opacity:0;animation:fadeUp .8s cubic-bezier(.2,.8,.25,1) 1.85s forwards}
|
|
.aud-lb{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--dim-2)}
|
|
|
|
input[type=range]{-webkit-appearance:none;appearance:none;width:82px;height:1px;
|
|
background:var(--rule);outline:none;cursor:pointer}
|
|
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
|
|
width:9px;height:9px;background:var(--paper);cursor:pointer;
|
|
transition:transform .18s cubic-bezier(.2,.8,.25,1),background .18s}
|
|
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.45);background:var(--stamp)}
|
|
input[type=range]:focus-visible{outline:1px solid var(--stamp);outline-offset:6px}
|
|
|
|
@media (prefers-reduced-motion:reduce){
|
|
*{animation-duration:.01ms!important;transition-duration:.01ms!important}
|
|
.grain{animation:none}
|
|
}
|
|
@media (max-width:900px){
|
|
.ord{display:none}
|
|
.slate,.title,.proc{left:28px;right:28px}
|
|
.aud{right:28px}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<canvas id="flyover"></canvas>
|
|
<div class="footage-tint"></div>
|
|
<div class="scanlines"></div>
|
|
<div class="grain"></div>
|
|
|
|
<div class="reg reg-tl"></div><div class="reg reg-tr"></div>
|
|
<div class="reg reg-bl"></div><div class="reg reg-br"></div>
|
|
|
|
<div class="slate">
|
|
<div class="slate-id">
|
|
LOS SANTOS COUNTY · DEPT. OF RESIDENT AFFAIRS<br>
|
|
AERIAL SURVEY <b>LS-4471-A</b> · SECTOR <b>07</b>
|
|
</div>
|
|
<div class="slate-read">
|
|
ALT <span id="r-alt">1420</span> FT · HDG <span id="r-hdg">274</span>°<br>
|
|
<span id="r-clock">00:00:00</span> · REC <span id="r-rec">●</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="title">
|
|
<div class="title-eyebrow">INTAKE IN PROGRESS</div>
|
|
<h1 class="title-main">Just<em>RP</em></h1>
|
|
<div class="title-rule"></div>
|
|
<p class="title-sub">A persistent roleplay county. Your record begins the moment you land — every job, every debt, every name you make here is kept on file.</p>
|
|
</div>
|
|
|
|
<div class="ord" id="ord">
|
|
<div class="ord-head">COUNTY ORDINANCE · CONDITIONS OF RESIDENCY</div>
|
|
<div class="ord-item"><span class="ord-no">§1</span><span class="ord-tx">Remain in character within county limits.</span></div>
|
|
<div class="ord-item"><span class="ord-no">§2</span><span class="ord-tx">Your life has value. Act like it does.</span></div>
|
|
<div class="ord-item"><span class="ord-no">§3</span><span class="ord-tx">No violence without roleplay leading to it.</span></div>
|
|
<div class="ord-item"><span class="ord-no">§4</span><span class="ord-tx">Vehicles are not weapons.</span></div>
|
|
<div class="ord-item"><span class="ord-no">§5</span><span class="ord-tx">Knowledge your character never earned is knowledge they do not have.</span></div>
|
|
<div class="ord-item"><span class="ord-no">§6</span><span class="ord-tx">Losing is part of the story. Play it out.</span></div>
|
|
<div class="ord-item"><span class="ord-no">§7</span><span class="ord-tx">Staff rulings close the matter.</span></div>
|
|
</div>
|
|
|
|
<div class="proc">
|
|
<div class="proc-top">
|
|
<span class="proc-stage" id="stage">ESTABLISHING UPLINK</span>
|
|
<span class="proc-pct" id="pct">0%</span>
|
|
</div>
|
|
<div class="proc-track"><div class="proc-fill" id="fill"></div></div>
|
|
<div class="proc-ticks" id="ticks"></div>
|
|
</div>
|
|
|
|
<div class="aud">
|
|
<span class="aud-lb">ROOM TONE</span>
|
|
<input type="range" id="vol" min="0" max="100" value="35" aria-label="Ambient volume">
|
|
</div>
|
|
|
|
<script>
|
|
'use strict';
|
|
const $ = id => document.getElementById(id);
|
|
const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
|
|
/* ══ Perspective city flyover ══════════════════════
|
|
Real 3D projection: blocks on a ground grid stream
|
|
toward the camera and are recycled behind it. */
|
|
const cv = $('flyover'), cx = cv.getContext('2d');
|
|
let W, H, FOCAL;
|
|
|
|
const CAM = { x: 0, y: 210, z: 0, speed: 1.42, drift: 0 };
|
|
const SPACING = 150, LANES = 11, DEPTH = 46, FAR = SPACING * DEPTH;
|
|
let blocks = [];
|
|
|
|
function seedBlocks () {
|
|
blocks = [];
|
|
for (let r = 0; r < DEPTH; r++) {
|
|
for (let l = 0; l < LANES; l++) {
|
|
// carve a boulevard down the middle lanes
|
|
if (l === Math.floor(LANES / 2)) continue;
|
|
if (Math.random() < 0.16) continue;
|
|
const gx = (l - (LANES - 1) / 2) * SPACING + (Math.random() - .5) * 34;
|
|
blocks.push({
|
|
x: gx,
|
|
z: r * SPACING + Math.random() * 60,
|
|
w: 46 + Math.random() * 60,
|
|
d: 46 + Math.random() * 60,
|
|
h: 34 + Math.pow(Math.random(), 2.1) * 330,
|
|
lit: Math.random()
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function resize () {
|
|
W = cv.width = innerWidth;
|
|
H = cv.height = innerHeight;
|
|
FOCAL = W * 0.82;
|
|
seedBlocks();
|
|
}
|
|
addEventListener('resize', resize);
|
|
resize();
|
|
|
|
function project (x, y, z) {
|
|
const dz = z - CAM.z;
|
|
if (dz < 12) return null;
|
|
const s = FOCAL / dz;
|
|
return { sx: W / 2 + (x - CAM.x) * s, sy: H * 0.62 - (y - CAM.y) * s, s, dz };
|
|
}
|
|
|
|
function drawCity () {
|
|
// horizon haze
|
|
const hz = cx.createLinearGradient(0, H * 0.20, 0, H * 0.72);
|
|
hz.addColorStop(0, '#151A24');
|
|
hz.addColorStop(.55, '#1B212C');
|
|
hz.addColorStop(1, '#0D1016');
|
|
cx.fillStyle = hz;
|
|
cx.fillRect(0, 0, W, H);
|
|
|
|
// sun-scorched band on the horizon — the one warm note
|
|
const bd = cx.createLinearGradient(0, H * 0.44, 0, H * 0.64);
|
|
bd.addColorStop(0, 'rgba(194,70,46,0)');
|
|
bd.addColorStop(.5,'rgba(194,70,46,.13)');
|
|
bd.addColorStop(1, 'rgba(194,70,46,0)');
|
|
cx.fillStyle = bd;
|
|
cx.fillRect(0, 0, W, H);
|
|
|
|
// painter's algorithm: far blocks first
|
|
blocks.sort((a, b) => (b.z - CAM.z) - (a.z - CAM.z));
|
|
|
|
for (const b of blocks) {
|
|
const dz = b.z - CAM.z;
|
|
if (dz < 14 || dz > FAR) continue;
|
|
|
|
const hw = b.w / 2;
|
|
const bl = project(b.x - hw, 0, b.z);
|
|
const br = project(b.x + hw, 0, b.z);
|
|
const tl = project(b.x - hw, b.h, b.z);
|
|
if (!bl || !br || !tl) continue;
|
|
|
|
const fade = Math.max(0, 1 - dz / FAR);
|
|
const w = br.sx - bl.sx;
|
|
const h = bl.sy - tl.sy;
|
|
if (w < 0.6 || h < 0.6) continue;
|
|
|
|
// face
|
|
cx.globalAlpha = 0.30 + fade * 0.62;
|
|
cx.fillStyle = '#080A0F';
|
|
cx.fillRect(bl.sx, tl.sy, w, h);
|
|
|
|
// roof edge catches the light
|
|
cx.globalAlpha = 0.13 + fade * 0.30;
|
|
cx.fillStyle = '#39424F';
|
|
cx.fillRect(bl.sx, tl.sy, w, Math.max(0.7, h * 0.012));
|
|
|
|
// windows — only worth drawing when the block is near
|
|
if (dz < FAR * 0.42 && w > 7) {
|
|
const cols = Math.max(1, Math.floor(w / 7));
|
|
const rows = Math.max(1, Math.floor(h / 11));
|
|
cx.globalAlpha = fade * 0.5;
|
|
for (let c = 0; c < cols; c++) {
|
|
for (let r = 0; r < rows; r++) {
|
|
const k = (c * 37 + r * 71 + Math.floor(b.x)) % 100;
|
|
if (k / 100 > b.lit * 0.7) continue;
|
|
cx.fillStyle = k % 9 === 0 ? '#C2462E' : '#C9C2AE';
|
|
cx.fillRect(bl.sx + 2 + c * 7, tl.sy + 3 + r * 11, 2.4, 3.4);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
cx.globalAlpha = 1;
|
|
}
|
|
|
|
let last = 0;
|
|
function frame (t) {
|
|
const dt = last ? Math.min((t - last) / 16.67, 3) : 1;
|
|
last = t;
|
|
|
|
CAM.z += CAM.speed * dt * 3.1;
|
|
CAM.drift += 0.0022 * dt;
|
|
CAM.x = Math.sin(CAM.drift) * 96;
|
|
CAM.y = 210 + Math.sin(CAM.drift * 0.62) * 34;
|
|
|
|
// recycle blocks that fell behind the camera
|
|
for (const b of blocks) if (b.z - CAM.z < 10) b.z += FAR;
|
|
|
|
drawCity();
|
|
requestAnimationFrame(frame);
|
|
}
|
|
requestAnimationFrame(frame);
|
|
|
|
/* ══ Instrument readouts ══════════════════════════ */
|
|
let clockSec = 0;
|
|
setInterval(() => {
|
|
clockSec++;
|
|
const hh = String(Math.floor(clockSec / 3600) % 24).padStart(2, '0');
|
|
const mm = String(Math.floor(clockSec / 60) % 60).padStart(2, '0');
|
|
const ss = String(clockSec % 60).padStart(2, '0');
|
|
$('r-clock').textContent = `${hh}:${mm}:${ss}`;
|
|
$('r-alt').textContent = Math.round(1420 + Math.sin(CAM.drift * 0.62) * 120);
|
|
$('r-hdg').textContent = String(Math.round((274 + Math.sin(CAM.drift) * 26 + 360) % 360)).padStart(3, '0');
|
|
$('r-rec').style.opacity = clockSec % 2 ? '1' : '.25';
|
|
}, 1000);
|
|
|
|
/* ══ Processing progress ══════════════════════════ */
|
|
const STAGES = [
|
|
[0, 'ESTABLISHING UPLINK'],
|
|
[12, 'RECEIVING COUNTY MAP DATA'],
|
|
[30, 'STREAMING STRUCTURES'],
|
|
[52, 'INDEXING RESIDENT RECORDS'],
|
|
[72, 'VERIFYING CREDENTIALS'],
|
|
[88, 'PREPARING INTAKE TERMINAL'],
|
|
[99, 'CLEARED FOR ENTRY'],
|
|
];
|
|
|
|
// ticks encode the real phase boundaries, not decoration
|
|
const ticksEl = $('ticks');
|
|
STAGES.slice(1).forEach(([at, label]) => {
|
|
const d = document.createElement('div');
|
|
d.className = 'proc-tick';
|
|
d.style.left = at + '%';
|
|
d.innerHTML = `<span>${label.split(' ')[0]}</span>`;
|
|
ticksEl.appendChild(d);
|
|
});
|
|
|
|
let shown = 0, target = 0, ordOn = false;
|
|
|
|
function setTarget (v) { target = Math.min(100, Math.max(target, v)); }
|
|
|
|
(function tick () {
|
|
if (shown < target) {
|
|
shown += Math.min((target - shown) * 0.07 + 0.09, target - shown);
|
|
const p = Math.min(100, Math.round(shown));
|
|
$('fill').style.width = p + '%';
|
|
$('pct').textContent = p + '%';
|
|
for (let i = STAGES.length - 1; i >= 0; i--) {
|
|
if (shown >= STAGES[i][0]) { $('stage').textContent = STAGES[i][1]; break; }
|
|
}
|
|
if (shown >= 46 && !ordOn) { ordOn = true; $('ord').classList.add('on'); }
|
|
}
|
|
setTimeout(tick, 40);
|
|
})();
|
|
|
|
[[700,13],[1500,29],[2700,49],[4400,67],[6400,80],[9000,91]]
|
|
.forEach(([ms, v]) => setTimeout(() => setTarget(v), ms));
|
|
|
|
addEventListener('message', e => {
|
|
const d = e.data;
|
|
if (!d) return;
|
|
if (d.eventName === 'loadingScreenCall') {
|
|
for (const c of (d.data || [])) {
|
|
if (c.functionName === 'shutdown' || c.type === 'shutdown') {
|
|
setTarget(100);
|
|
setTimeout(() => {
|
|
document.body.style.transition = 'opacity .9s cubic-bezier(.2,.8,.25,1)';
|
|
document.body.style.opacity = '0';
|
|
}, 900);
|
|
}
|
|
}
|
|
}
|
|
// FiveM streams real load progress through these events
|
|
if (d.eventName === 'loadProgress' && typeof d.loadFraction === 'number') {
|
|
setTarget(Math.round(d.loadFraction * 100));
|
|
}
|
|
});
|
|
|
|
/* ══ Room tone ════════════════════════════════════
|
|
Dispatch-room HVAC hum, not a music pad. */
|
|
const vol = $('vol');
|
|
let actx = null, master = null;
|
|
|
|
function initAudio () {
|
|
if (actx) return;
|
|
try { actx = new (window.AudioContext || window.webkitAudioContext)(); }
|
|
catch (e) { return; }
|
|
|
|
master = actx.createGain();
|
|
master.gain.value = vol.value / 100 * 0.6;
|
|
master.connect(actx.destination);
|
|
|
|
// low room hum
|
|
[[47.5,.20],[71.3,.10],[95,.055]].forEach(([f, g]) => {
|
|
const o = actx.createOscillator(), gn = actx.createGain(), lp = actx.createBiquadFilter();
|
|
const lfo = actx.createOscillator(), lg = actx.createGain();
|
|
lfo.frequency.value = 0.037 + Math.random() * 0.06;
|
|
lg.gain.value = f * 0.004;
|
|
lfo.connect(lg); lg.connect(o.frequency);
|
|
o.type = 'sine'; o.frequency.value = f;
|
|
lp.type = 'lowpass'; lp.frequency.value = f * 4; lp.Q.value = .4;
|
|
gn.gain.setValueAtTime(0, actx.currentTime);
|
|
gn.gain.linearRampToValueAtTime(g, actx.currentTime + 5);
|
|
o.connect(lp); lp.connect(gn); gn.connect(master);
|
|
o.start(); lfo.start();
|
|
});
|
|
|
|
// filtered air noise
|
|
const buf = actx.createBuffer(1, actx.sampleRate * 3, actx.sampleRate);
|
|
const dat = buf.getChannelData(0);
|
|
for (let i = 0; i < dat.length; i++) dat[i] = Math.random() * 2 - 1;
|
|
const ns = actx.createBufferSource(), bp = actx.createBiquadFilter(), ng = actx.createGain();
|
|
ns.buffer = buf; ns.loop = true;
|
|
bp.type = 'bandpass'; bp.frequency.value = 320; bp.Q.value = .35;
|
|
ng.gain.value = 0.02;
|
|
ns.connect(bp); bp.connect(ng); ng.connect(master);
|
|
ns.start();
|
|
}
|
|
|
|
addEventListener('click', initAudio, { once: true });
|
|
addEventListener('keydown', initAudio, { once: true });
|
|
setTimeout(initAudio, 1100);
|
|
|
|
vol.addEventListener('input', () => {
|
|
if (master) master.gain.linearRampToValueAtTime(vol.value / 100 * 0.6, actx.currentTime + .08);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|