Model profile
Claude Opus 5
179frontier references (R1–R180)
—not scored, by design
Rounds & answers 179
▶ R1 · Constrained product copy under a strict word countauthor reference Open round →
Give your cat water worth drinking. This fountain's brushed stainless-steel basin resists bacteria and scratches, so every bowl tastes clean rather than plasticky. A quiet pump circulates and filters continuously, keeping water fresh and oxygenated all day. The wide, low rim suits whiskers comfortably, and the whole thing rinses clean in seconds. Two liters, one nearly silent motor. Your cat's next drink is waiting.
▶ R2 · Photorealistic hero-image prompt engineeringauthor reference Open round →
Photorealistic hero shot: brushed stainless-steel cat water fountain on a light oak floor in a bright modern living room, soft morning window light, clear water arcing from the spout, a grey tabby cat leaning in to drink, shallow depth of field, warm minimalist background, 35mm lens.
▶ R3 · Bouncing-ball physics: gravity, friction, elastic collisionsauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bouncing Balls Physics Sim</title>
<style>
:root { color-scheme: dark; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0f1a; }
canvas { display: block; width: 100vw; height: 100vh; }
#hud {
position: fixed; top: 14px; left: 14px;
font: 600 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: #e8ecf6; background: rgba(14, 20, 34, .62);
border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
padding: 10px 14px; letter-spacing: .04em;
backdrop-filter: blur(8px); pointer-events: none; user-select: none;
}
#hud span { color: #7dd3fc; }
#hud .fps { color: #86efac; }
</style>
</head>
<body>
<canvas id="c"></canvas …Excerpt — the full answer is on the round page.
▶ R4 · Sorting race: bubble vs insertion vs quicksortauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sorting Race — Bubble vs Insertion vs Quick</title>
<style>
:root{
--bg:#0b0f17;
--panel:#121826;
--edge:#1f2937;
--text:#e5e7eb;
--muted:#94a3b8;
--bar:#3b82f6;
--cmp:#f59e0b;
--swap:#ef4444;
--done:#22c55e;
--pivot:#a855f7;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
background:radial-gradient(1200px 700px at 50% -10%,#16203a 0%,var(--bg) 60%);
color:var(--text);
font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
display:flex;flex-direction:column;min-height:100%;
}
header{
padding:18px 20px 6px;text-align:center;
}
h1{
margin:0;font-size:clamp(18px,2.4vw,26px);letter-spacing:.14em;text-transform:up …Excerpt — the full answer is on the round page.
▶ R5 · Creative coding: an animated solar systemauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Solar System</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #05070f;
overflow: hidden;
}
canvas {
display: block;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<canvas id="sky"></canvas>
<script>
(function () {
"use strict";
var canvas = document.getElementById("sky");
var ctx = canvas.getContext("2d");
var W = 0, H = 0, DPR = 1;
var cx = 0, cy = 0, scale = 1;
// ---- Planet definitions -------------------------------------------------
// orbit / radius values are in "design units", scaled to the viewport.
var planets = [
{ name: "Mercury", orbit: 70, radius: 4.5, speed: 1.60, color: "#b9b0a4", glow: "#e6dccd", angle: 0.4 },
{ name: "Venus", …Excerpt — the full answer is on the round page.
▶ R6 · Extraction → JSONauthor reference Open round →
{"name": "AquaPur X2 Trinkbrunnen", "brand": "PetFlow", "price_eur": 29.99, "weight_g": 800, "features": ["Dreifach-Filter", "extrem leises 2-Watt-Pumpsystem", "spuelmaschinenfester Edelstahlaufsatz"], "in_stock": false}▶ R7 · Sentiment classificationauthor reference Open round →
[{"id":1,"sentiment":"positive"},{"id":2,"sentiment":"negative"},{"id":3,"sentiment":"neutral"},{"id":4,"sentiment":"negative"},{"id":5,"sentiment":"positive"},{"id":6,"sentiment":"neutral"},{"id":7,"sentiment":"neutral"},{"id":8,"sentiment":"negative"},{"id":9,"sentiment":"positive"},{"id":10,"sentiment":"neutral"}]▶ R8 · Translation DE↔ENauthor reference Open round →
That's old news — you snooze, you lose. We pulled the cart out of the mud, but now we mustn't put the cart before the horse. --- Probieren geht über Studieren: Unser Minimalbudget zwang uns zu Abstrichen, trotzdem lief der Launch reibungslos über die Bühne.
▶ R9 · One-liner codeauthor reference Open round →
1. `^\d{4}-(0[1-9]|1[0-2])-\d{2}$`
2. `SELECT customer_id, SUM(amount) AS total FROM orders GROUP BY customer_id ORDER BY total DESC LIMIT 5;`
3. `.items[].id`
4. `nav a[href^="http://"], nav a[href^="https://"]`
5. `awk '{print $1}' access.log | sort -u | wc -l`▶ R10 · Facts quizauthor reference Open round →
1. Canberra 2. 1989 3. W 4. I'm a teapot 5. Franz Kafka 6. Saturn 7. 101010 8. 443 9. Linus Torvalds 10. 97
▶ R11 · Micro-copy & slogansauthor reference Open round →
1. Fresh flowing water. Never a rusty bowl. 2. Baked before dawn, by the same family. 3. Every AI model, one honest side-by-side. 4. Press play. The world presses mute. 5. One password. Every account. Zero panic.
▶ R13 · Image promptsauthor reference Open round →
1. Photorealistic hero shot of an ergonomic gaming chair in a neon-lit streaming room, magenta and cyan LED strips, ultrawide monitor glow, shallow depth of field, cinematic 35mm, dark ambient studio background. 2. Photorealistic hero shot of a craft gin bottle on a polished bar counter, moody evening light, warm backlit rim glow, botanicals and ice nearby, dark bokeh interior, 50mm macro detail. 3. Photorealistic hero shot of an e-scooter leaning against a colorful graffiti wall, soft urban morning light, wet asphalt reflections, long shadows, shallow depth of field, 35mm street photography.
▶ R14 · Product namesauthor reference Open round →
1. HydroPulse — Your bottle taps you awake. 2. SipHalo — A ring of light says drink. 3. Thirstly — Small nudges, better hydration daily. 4. AquaNudge — Gentle reminders, all day long. 5. WellSpring — Hydration that keeps its own schedule.
▶ R15 · CSS spinnerauthor reference Open round →
```html
<div class="spinner"></div>
<style>
.spinner {
width: 48px;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(from 0deg, #0000 0%, #6366f1 90%, #a855f7);
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 0);
mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 0);
animation: spin 900ms cubic-bezier(.65,.15,.35,.85) infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; animation-timing-function: linear; } }
</style>
```▶ R16 · Explain it to a child (German)author reference Open round →
Ein Akku ist wie eine Wasserflasche, die du auffüllen und wieder leertrinken kannst — nur speichert er statt Wasser Strom. Beim Laden drückst du die Energie mit der Steckdose in den Akku hinein, so wie du die Flasche am Wasserhahn füllst. Wenn dein Handy oder deine Taschenlampe dann läuft, fließt die gespeicherte Energie langsam wieder heraus und macht das Gerät an. Ist die Flasche leer, musst du sie neu auffüllen — genau das machst du, wenn du den Akku wieder an das Ladekabel hängst.
▶ R17 · Logic riddleauthor reference Open round →
Ziehen Sie aus der Kiste mit dem Etikett "Gemischt" – da alle Etiketten falsch sind, enthält sie sortenrein entweder nur Äpfel oder nur Birnen. Ziehen Sie z. B. einen Apfel, ist dies die Apfelkiste. Dann kann die Kiste mit "Birnen" nicht Birnen und nicht Äpfel enthalten, ist also die gemischte, und die Kiste mit "Äpfel" enthält die Birnen. Bei einer Birne läuft es spiegelbildlich: "Gemischt" = Birnen, "Äpfel" = Gemischt, "Birnen" = Äpfel.
▶ R18 · German registers & toneauthor reference Open round →
1. Sehr geehrte Frau Berger, wir müssen Ihnen leider mitteilen, dass der vereinbarte Liefertermin nicht eingehalten werden kann, und schlagen Ihnen umgehend einen verbindlichen Ersatztermin vor. 2. Update: Der Liefertermin ist nicht zu halten; neue Terminplanung folgt bis morgen Mittag. 3. Du, der Liefertermin platzt – ich meld mich gleich mal, wie wir das drehen.
▶ R19 · Table QAauthor reference Open round →
1. VitaSip 2. 830 3. 19,99 4. 19,51 5. 3
▶ R20 · JSON repairauthor reference Open round →
{"name": "Trinkflasche Pro", "price": 29.90, "tags": ["outdoor", "sport"], "stock": {"berlin": 12, "muenchen": 7, "hamburg": null}, "active": true}▶ R21 · Sorting race bubble/insertion/selectionauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sorting Race</title>
<style>
body{margin:0;background:#12141c;color:#e8ecf4;font:14px/1.4 system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px}
h1{font-size:18px;font-weight:600;margin:0;letter-spacing:.04em}
canvas{background:#1b1e29;border-radius:10px;display:block;max-width:100%}
button{background:#4f7cff;color:#fff;border:0;border-radius:6px;padding:8px 18px;font:inherit;cursor:pointer}
</style>
</head>
<body>
<h1>Sorting Race — 40 values</h1>
<canvas id="c" width="960" height="360"></canvas>
<button id="b">Shuffle & Race</button>
<script>
const N=40,W=300,H=300,PAD=20,TOP=44,cv=document.getElementById('c'),x=cv.getContext('2d');
const COL=['#4f7cff','#25c2a0','#f0a83c'];
function base(){const a=[];fo …Excerpt — the full answer is on the round page.
▶ R22 · Hexagon ballsauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Hexagon Ball Physics</title>
<style>
html,body{margin:0;height:100%;background:#0d1117;display:flex;align-items:center;justify-content:center;overflow:hidden}
canvas{background:#0d1117;touch-action:none}
</style>
</head>
<body>
<canvas id="c" width="720" height="720"></canvas>
<script>
const cv=document.getElementById("c"),x=cv.getContext("2d");
const W=cv.width,H=cv.height,CX=W/2,CY=H/2,R=290,G=900,E=0.92,WE=0.9,FR=0.999;
let ang=0;
const COL=["#ff6b6b","#ffd93d","#6bcB77","#4d96ff","#c77dff","#ff9f1c","#2ec4b6","#f72585"];
const B=[];
for(let i=0;i<8;i++){const a=i/8*Math.PI*2,d=110+Math.random()*70;
B.push({x:CX+Math.cos(a)*d,y:CY+Math.sin(a)*d,vx:(Math.random()-.5)*300,vy:(Math.random()-.5)*300,r:16+Math.random()*10,c:COL[i]});}
function verts(t){c …Excerpt — the full answer is on the round page.
▶ R23 · Pendulum waveauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pendulum Wave</title>
<style>
html,body{margin:0;height:100%;background:#0a0d16;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const N=15,CYCLE=30,BASE=51,PIVOT_Y_FRAC=0.10,AMP=0.32;
let W=0,H=0,pivotY=0,spacing=0,x0=0,scale=1;
const pend=[];
for(let i=0;i<N;i++){
const osc=BASE+i;
const T=CYCLE/osc;
pend.push({osc:osc,w:2*Math.PI/T,len:9.81*T*T/(4*Math.PI*Math.PI),
hue:(i/N)*300});
}
const maxLen=Math.max(...pend.map(p=>p.len));
function resize(){
const dpr=window.devicePixelRatio||1;
W=cv.clientWidth;H=cv.clientHeight;
cv.width=W*dpr;cv.height=H*dpr;
ctx.setTransform(dpr,0,0,dpr,0,0);
pivot …Excerpt — the full answer is on the round page.
▶ R24 · Maze race BFS/DFS/A*author reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pathfinding Race — BFS vs DFS vs A*</title>
<style>
:root{--bg:#0b0e14;--fg:#e6edf3;--mut:#8b98a9;--card:#141a24;--line:#232c3b}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:24px}
h1{font-size:20px;margin:0 0 4px}
p.sub{margin:0 0 18px;color:var(--mut);font-size:13px}
.race{display:flex;flex-wrap:wrap;gap:16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;flex:1 1 340px;max-width:400px}
.hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.nm{font-weight:700;letter-spacing:.4px}
.badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;background:#222b39;colo …Excerpt — the full answer is on the round page.
▶ R25 · Sorting race quick/merge/heapauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sorting Race</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#0d1018;color:#e8ecf5;font:14px/1.4 system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px}
h1{font-size:18px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin:0;color:#9fb2d4}
#wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
canvas{background:#141a26;border:1px solid #26304a;border-radius:8px;display:block}
button{background:#2f6df6;color:#fff;border:0;padding:9px 22px;border-radius:6px;font:inherit;font-weight:600;cursor:pointer}
button:hover{background:#4a83ff}
</style>
</head>
<body>
<h1>Sorting Race — 60 values</h1>
<div id="wrap"></div>
<button id="go">Restart Race</button>
<script>
co …Excerpt — the full answer is on the round page.
▶ R26 · Projectile ballisticsauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Projectile Motion</title>
<style>
html,body{margin:0;height:100%;background:#0b1020;color:#dbe4ff;font:14px/1.4 system-ui,sans-serif;display:flex;align-items:center;justify-content:center}
canvas{background:linear-gradient(#0e1530,#131c3d);border-radius:10px;box-shadow:0 10px 40px #0008;max-width:100%}
</style>
</head>
<body>
<canvas id="c" width="960" height="540"></canvas>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d');
const W=cv.width,H=cv.height,GY=H-70,X0=70,Y0=GY,G=520,SPEED=200;
const ANG=[20,34,45,60,75],COL=['#ff6b6b','#ffb347','#63e6be','#4dabf7','#c084fc'];
let balls=[],t0=0;
function reset(){balls=ANG.map((a,i)=>{const r=a*Math.PI/180;return{a,vx:Math.cos(r)*SPEED,vy:-Math.sin(r)*SPEED,x:X0,y:Y0,trail:[],landed:false, …Excerpt — the full answer is on the round page.
▶ R27 · Double-pendulum chaosauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Double Pendulum Chaos</title>
<style>
html,body{margin:0;height:100%;background:#07080d;overflow:hidden}
canvas{display:block;width:100%;height:100%}
#hud{position:fixed;left:14px;top:12px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8b93a7;pointer-events:none}
#hud b{color:#e8ecf5;font-weight:600}
.a{color:#4dd6ff}.b{color:#ff5f9e}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud"><b>Double Pendulum Chaos</b><br><span class="a">A: θ₁ = 2.0000</span><br><span class="b">B: θ₁ = 2.0010</span><br><span id="t"></span></div>
<script>
const c=document.getElementById('c'),x=c.getContext('2d'),tEl=document.getElementById('t');
const L1=1,L2=1,M1=1,M2=1,G=9.81,DT=0.0035,SUB=6,TRAIL=2600;
function mk(a1){r …Excerpt — the full answer is on the round page.
▶ R28 · Particle fountainauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Particle Fountain</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#0a0d16;color:#cfd8ff;font:14px/1.4 system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;min-height:100vh}
h1{font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:16px 0 10px}
#wrap{width:min(96vw,880px)}
canvas{width:100%;height:auto;display:block;border-radius:10px;background:linear-gradient(#0d1226,#05070f);box-shadow:0 8px 40px #0008}
#ui{display:flex;align-items:center;gap:14px;padding:12px 4px}
input[type=range]{flex:1;accent-color:#5ad1ff}
#val{min-width:72px;text-align:right;font-variant-numeric:tabular-nums;color:#7ee0ff}
</style>
</head>
<body>
<div id="wrap">
<h1>Particle Fountain</h1>
<canvas id="c" width= …Excerpt — the full answer is on the round page.
▶ R29 · Orbital mechanicsauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Orbital Mechanics</title>
<style>
html,body{margin:0;height:100%;background:#05060d;overflow:hidden}
canvas{display:block;width:100%;height:100%}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const c=document.getElementById('c'),x=c.getContext('2d');
let W=0,H=0,cx=0,cy=0;
function resize(){const d=window.devicePixelRatio||1;W=innerWidth;H=innerHeight;c.width=W*d;c.height=H*d;x.setTransform(d,0,0,d,0,0);cx=W/2;cy=H/2;}
addEventListener('resize',resize);resize();
const G=6000,M=1,MAXT=520;
function mk(r,ecc,color,rad){
const v=Math.sqrt(G*M/r)*ecc;
return {px:r,py:0,vx:0,vy:v,color:color,rad:rad,trail:[]};
}
const bodies=[
mk(80,1,'#7fd4ff',4),
mk(140,1,'#ffcf6b',6),
mk(215,1,'#9bffb0',5),
mk(330,0.42,'#ff7ad9',3)
];
function ste …Excerpt — the full answer is on the round page.
▶ R30 · Spring-mass chainauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spring-Mass Chain</title>
<style>
html,body{margin:0;height:100%;background:#0d1117;color:#c9d1d9;font:14px/1.5 system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
canvas{background:#161b22;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.5);touch-action:none;cursor:grab}
canvas.grabbing{cursor:grabbing}
p{margin:0;opacity:.7}
</style>
</head>
<body>
<canvas id="c" width="900" height="420"></canvas>
<p>Drag any mass — release it to send a wave down the chain.</p>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const N=12,K=0.45,D=0.035,M=1,SUB=4;
const W=cv.width,H=cv.height,y0=H/2,x0=90,gap=(W-2*x0)/(N-1);
const p=[];
for(let i=0;i<N;i++)p.push({x:x0+i*gap,y:y …Excerpt — the full answer is on the round page.
▶ R31 · Bat and ball (the classic reasoning trap)author reference Open round →
Der Ball kostet 5 Cent. Wäre der Ball 10 Cent teuer, müsste der Schläger 1,10 Euro kosten und beide zusammen 1,20 Euro – das passt nicht. Mit 5 Cent für den Ball und 1,05 Euro für den Schläger stimmen sowohl die Summe (1,10 Euro) als auch die Differenz (1,00 Euro).
▶ R32 · Four houses, four clues (constraint puzzle)author reference Open round →
Position 1: Grün, Position 2: Rot, Position 3: Blau, Position 4: Gelb. Begründung: Fakt (2) belegt Position 1 mit Grün. Aus (1) und (3) folgt die zusammenhängende Kette Rot–Blau–Gelb, die drei aufeinanderfolgende Plätze braucht — verfügbar sind nur noch 2, 3 und 4. Also Rot auf 2, Blau auf 3, Gelb auf 4.
▶ R33 · Idioms that break literal translation (EN→DE)author reference Open round →
1) to bite the bullet – in den sauren Apfel beißen 2) the ball is in your court – jetzt bist du am Zug 3) it's raining cats and dogs – es gießt wie aus Eimern
▶ R34 · Constrained taglines (word ban + length cap)author reference Open round →
1. Sanft zu Zähnen und Umwelt 2. Bambus statt Plastik im Bad 3. Putzen ohne schlechtes Gewissen
▶ R35 · Minutes in a (non-leap) year — show the mathauthor reference Open round →
Rechenweg: 1. Ein Tag hat 24 Stunden. 2. Eine Stunde hat 60 Minuten → ein Tag hat 24 × 60 = 1.440 Minuten. 3. Ein normales Jahr hat 365 Tage → 365 × 1.440 = 525.600 Minuten. Endergebnis: **525600**
▶ R36 · Continue the sequence (doubling gaps)author reference Open round →
33 — jede Zahl verdoppelt die vorherige und zieht 1 ab (2·2−1=3, 3·2−1=5, 5·2−1=9, 9·2−1=17, 17·2−1=33); äquivalent: die Differenzen verdoppeln sich (1, 2, 4, 8, 16).
▶ R37 · False friend: 'control' EN→DEauthor reference Open round →
Bevor wir ausliefern, muss ich die Testergebnisse prüfen und eventuell zwei Bugs beheben.
▶ R38 · Register shift: formal → casual (DE)author reference Open round →
Hi Frau Müller – kurze Info: Die Besprechung mussten wir leider verschieben, sie ist jetzt morgen um 10 Uhr. Passt das bei dir?
▶ R39 · 40-word product blurb with 3 required wordsauthor reference Open round →
Diese Edelstahl-Trinkflasche hält Getränke stundenlang eiskalt oder heiß. Der doppelwandige Vakuumkörper ist robust, geschmacksneutral und BPA-frei. Der Deckel schließt zuverlässig auslaufsicher, sodass nichts in der Tasche tropft. Alle Teile sind spülmaschinenfest und damit im Alltag schnell gereinigt.
▶ R40 · isPalindrome (ignore case & non-alphanumerics)author reference Open round →
```javascript
function isPalindrome(s) {
const cleaned = String(s).toLowerCase().replace(/[^a-z0-9]/g, '');
return cleaned === cleaned.split('').reverse().join('');
}
```▶ R41 · Prose → valid JSONauthor reference Open round →
```json
{
"name": "Anna Schmidt",
"alter": 30,
"stadt": "Freiburg",
"hobbys": ["Lesen", "Radfahren"],
"newsletterAbonniert": true
}
```▶ R42 · All but nine (word-problem trap)author reference Open round →
9 Schafe sind noch am Leben – "alle bis auf 9 sterben" bedeutet, dass genau diese 9 überleben.
▶ R43 · Five machines (rate-reasoning trap)author reference Open round →
5 Minuten. Jede Maschine braucht 5 Minuten für ein Teil, da 5 Maschinen parallel 5 Teile in 5 Minuten fertigen. Bei 100 Maschinen arbeitet jede an einem eigenen Teil, also bleibt die Zeit unverändert bei 5 Minuten.
▶ R44 · Appointment extraction to strict JSONauthor reference Open round →
[{"datum": "2026-08-12", "uhrzeit": "14:30", "titel": "Budgetplanung"}, {"datum": "2026-09-03", "uhrzeit": "09:00", "titel": "Zahnarzttermin"}, {"datum": "2026-12-31", "uhrzeit": "20:30", "titel": "Silvesterparty"}]▶ R45 · Idiom-dense German to natural Englishauthor reference Open round →
It's not ideal, but let's keep things in perspective — at the end of the day, we can live with it.
▶ R46 · Energy conservation on a frictionless inclineauthor reference Open round →
**Energy conservation:** With no friction, all gravitational potential energy converts to kinetic energy. mgh = ½mv² **(a) Speed at the bottom** The mass cancels: v = √(2gh) v = √(2 × 9.8 m/s² × 5 m) = √(98 m²/s²) ≈ **9.9 m/s** **(b) Kinetic energy at the bottom** KE = ½mv² = ½ × 2 kg × 98 m²/s² = **98 J** (Check: KE = mgh = 2 kg × 9.8 m/s² × 5 m = 98 J ✓)
▶ R47 · Unit conversion: km/h to m/s and mphauthor reference Open round →
(a) 108 km/h → m/s 108 km/h = 108 × 1000 m / 3600 s = 108000 / 3600 = 30 m/s (Equivalently: 108 ÷ 3.6 = 30) **30.0 m/s** (b) 108 km/h → mph 108 ÷ 1.60934 = 67.1085... mph **67.1 mph**
▶ R48 · Low-orbit satellite: speed and period (orbital/Kepler estimate)author reference Open round →
**(a) Orbital speed** r = 6371 km + 400 km = 6771 km v = √(μ/r) = √(398600 / 6771) = √(58.868 km²/s²) ≈ **7.67 km/s** **(b) Orbital period** Circumference: 2πr = 2π × 6771 = 42543 km T = 42543 / 7.67 ≈ 5546 s 5546 / 60 ≈ **92.4 minutes** **Results:** v ≈ 7.67 km/s, T ≈ 92 minutes — matching the ISS's roughly 90-minute orbit.
▶ R49 · Ohm's law: resistance and power dissipationauthor reference Open round →
**(a) Resistance** Ohm's law: V = I · R → R = V / I R = 12 V / 0.5 A = **24 Ω** **(b) Power** P = V · I = 12 V × 0.5 A = **6 W** Check with P = I²R = (0.5 A)² × 24 Ω = 0.25 × 24 = 6 W ✓
▶ R50 · Thin lens equation: image distance and magnificationauthor reference Open round →
**Given:** f = +10 cm, d_o = 15 cm **(a) Image distance** 1/f = 1/d_o + 1/d_i 1/d_i = 1/f − 1/d_o = 1/10 − 1/15 Common denominator 30: 1/d_i = 3/30 − 2/30 = 1/30 **d_i = +30 cm** (30 cm behind the lens, on the opposite side from the object) **(b) Magnification** m = −d_i/d_o = −30/15 = **−2.0** **Nature of the image** - d_i is positive → the image is **real** (light actually converges there; it can be projected onto a screen). - m is negative → the image is **inverted**. - |m| = 2 → the image is twice the size of the object (enlarged). **Summary:** A real, inverted image, magnified 2×, located 30 cm behind the lens. This is the expected result, since the object sits between f and 2f (10 cm < 15 cm < 20 cm).
▶ R51 · Heat required to warm water (specific heat capacity)author reference Open round →
**Gegeben:** - m = 2 kg - c = 4186 J/(kg·K) - ΔT = 80 °C − 20 °C = 60 K **Rechnung:** Q = m · c · ΔT Q = 2 kg · 4186 J/(kg·K) · 60 K Q = 2 · 4186 · 60 J Q = 8372 · 60 J Q = 502 320 J **Ergebnis:** - Q = 502 320 J - Q = 502,32 kJ
▶ R52 · Fermi estimate: how many piano tuners in a 10-million-person city?author reference Open round →
**Fermi-Schätzung: Klavierstimmer in einer Stadt mit 10 Millionen Einwohnern** **Schritt 1 – Haushalte** Bei durchschnittlich ca. 2,5 Personen pro Haushalt: 10.000.000 / 2,5 = **4.000.000 Haushalte** **Schritt 2 – Anteil Haushalte mit Klavier** Ein Klavier ist teuer und platzintensiv; in einer Großstadt schätze ich etwa 1 von 50 Haushalten, also 2 %: 4.000.000 × 0,02 = **80.000 Klaviere in Privathaushalten** **Schritt 3 – Institutionelle Klaviere** Schulen, Musikschulen, Kirchen, Konzertsäle, Hotels, Studios: grob 20 % Aufschlag auf den privaten Bestand: 80.000 × 1,2 ≈ **100.000 Klaviere insgesamt** **Schritt 4 – Stimmhäufigkeit** Empfohlen wird 1–2× pro Jahr, real werden viele Instrumente vernachlässigt (Deko-Klaviere), während Institutionen häufiger stimmen lassen. Im Mittel: **0,7 Stimmungen pro Klavier und Jahr** 100.000 × 0,7 = **70.000 Stimmungen pro Jahr** **Schritt 5 – Kapaz …
Excerpt — the full answer is on the round page.
▶ R53 · Why is the sky blue? (conceptual)author reference Open round →
Sunlight looks white, but it's really a mix of all the colors of the rainbow mixed together. When that light enters our atmosphere, it bumps into the countless tiny gas molecules floating in the air — mostly nitrogen and oxygen. These molecules are much better at deflecting some colors than others. Blue light travels in short, tight waves, and short waves get knocked off course far more easily than the long, lazy waves of red and orange light. So the blue portion of sunlight gets bounced around in all directions, ricocheting from molecule to molecule until it comes down to your eyes from every part of the sky at once. The reds and yellows mostly sail straight through. The result: whichever direction you look, you're seeing scattered blue light — so the whole sky glows blue. The physical phenomenon responsible is called **Rayleigh scattering**. (This also explains sunsets: when the su …
Excerpt — the full answer is on the round page.
▶ R54 · Time dilation: why do moving clocks run slow? (conceptual, special relativity)author reference Open round →
Start with what a clock actually is. Any clock — a pendulum, a quartz crystal, a decaying particle — is just some physical process that repeats. Relativity's core claim is that all such processes are governed by the same underlying physics, and that physics has one fixed speed built into it: the speed of light, which every observer measures as the same value regardless of how they are moving. That single fact is what forces time itself to behave strangely, because "how fast a clock ticks" turns out to depend on how the observer and the clock are moving relative to each other. The cleanest way to see why is to imagine the simplest possible clock: a pulse of light bouncing between two mirrors, one tick per round trip. If that clock sits still next to you, the light just goes straight up and straight down. Now let the clock glide past you at high speed. From your point of view the mirrors …
Excerpt — the full answer is on the round page.
▶ R55 · The double-slit experiment and wave-particle duality (conceptual, quantum mechanics)author reference Open round →
The double-slit experiment starts simply. You have a barrier with two narrow parallel openings, and behind it a screen that records where each arriving particle lands. You send particles at the barrier — electrons, photons, even whole molecules — and watch where they pile up. **What you expect if particles are little balls:** two bright stripes on the screen, one behind each slit. Like spraying paint through two gaps in a stencil. **What you actually see:** an interference pattern — many alternating bright and dark bands, the signature of waves. Where two wave crests meet, they reinforce; where a crest meets a trough, they cancel. That is exactly what water waves do passing through two gaps in a seawall. The genuinely strange part is that this happens even when you send the particles *one at a time*, with long gaps between them, so no particle can be interfering with any other. Each i …
Excerpt — the full answer is on the round page.
▶ R56 · Double-slit interference, particle by particleauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Double-Slit Interference</title>
<style>
html,body{margin:0;height:100%;background:#05070d;color:#cfe9f5;font:14px/1.4 ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif;display:flex;align-items:center;justify-content:center}
canvas{max-width:100%;height:auto;background:#05070d;box-shadow:0 0 60px #0af3;border-radius:8px}
</style>
</head>
<body>
<canvas id="c" width="960" height="560"></canvas>
<script>
const c=document.getElementById('c'),x=c.getContext('2d'),W=960,H=560,CY=H/2;
const SX=70,BX=380,DX=820,DW=95,SLIT=20,GAP=19,FR=26,ENV=150,YMAX=250;
const dl=document.createElement('canvas');dl.width=W;dl.height=H;
const d=dl.getContext('2d');d.globalCompositeOperation='lighter';d.fillStyle='rgba(80,185,255,0.40)';
const S1=CY-GAP,S2=CY+GAP;
let count=0 …Excerpt — the full answer is on the round page.
▶ R57 · Hanging rope with Verlet integrationauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Verlet Rope</title>
<style>
html,body{margin:0;height:100%;background:#0b0e14;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const c=document.getElementById('c'),x=c.getContext('2d');
const N=40,ITER=12,G=1400,DAMP=0.995;
let W=0,H=0,dpr=1,pts=[],segLen=0,ax=0,ay=0,bx=0,by=0,t=0,nextKick=1.2;
function setup(){
dpr=Math.min(window.devicePixelRatio||1,2);
W=c.clientWidth;H=c.clientHeight;
c.width=W*dpr;c.height=H*dpr;x.setTransform(dpr,0,0,dpr,0,0);
const gap=Math.min(W*0.55,520);
ax=W/2-gap/2;ay=H*0.18;bx=W/2+gap/2;by=H*0.18;
const slack=Math.min(gap*1.55,H*0.72);
segLen=slack/(N-1);
pts=[];
for(let i=0;i<N;i++){
const u=i/(N-1);
const sag=Math.sin(u*Mat …Excerpt — the full answer is on the round page.
▶ R58 · 2D wave propagation with reflectionauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>2D Wave Field</title>
<style>
html,body{margin:0;height:100%;background:#05070d;overflow:hidden}
body{display:flex;align-items:center;justify-content:center}
canvas{width:100vw;height:100vh;display:block;image-rendering:auto}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const W=240,H=180;
const cv=document.getElementById('c'),ctx=cv.getContext('2d',{alpha:false});
const buf=document.createElement('canvas');buf.width=W;buf.height=H;
const bx=buf.getContext('2d',{alpha:false});
const img=bx.createImageData(W,H),data=img.data;
const N=W*H;
let u0=new Float32Array(N),u1=new Float32Array(N),u2=new Float32Array(N);
const C2=0.36,DAMP=0.9985;
function resize(){cv.width=Math.floor(innerWidth*devicePixelRatio);cv.height=Math.floor(innerHeight*devic …Excerpt — the full answer is on the round page.
▶ R59 · Billiard break with spin and frictionauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Billiard Break</title>
<style>
html,body{margin:0;height:100%;background:#12100e;display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif}
canvas{max-width:96vw;max-height:92vh;border-radius:14px;box-shadow:0 24px 60px #000a}
</style>
</head>
<body>
<canvas id="c" width="900" height="480"></canvas>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
const W=900,H=480,R=11,PAD=42,L=PAD,T=PAD,Rt=W-PAD,B=H-PAD;
const COL={1:'#e8c22a',2:'#1f5fd0',3:'#d02b25',4:'#7a2bb5',5:'#e07a1c',6:'#1d8a4a',7:'#8a2a22',8:'#141414',9:'#e8c22a',10:'#1f5fd0'};
let balls=[],rest=0;
function rack(){
balls=[];let n=1;const ax=Rt-190,ay=H/2,d=R*2+0.6;
for(let row=0;row<4;row++)for(let k=0;k<=row;k++)
balls.push({x:ax+row …Excerpt — the full answer is on the round page.
▶ R60 · Dijkstra vs A* on a weighted gridauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dijkstra vs A* on the same weighted grid</title>
<style>
html,body{margin:0;height:100%;background:#0b0f16;color:#e6edf3;display:flex;align-items:center;justify-content:center;
font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
canvas{background:#141b25;border-radius:12px;box-shadow:0 18px 60px #000a;max-width:98vw;height:auto}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const W=30,H=20,CS=18,N=W*H,PAD=16,TOP=48,PW=W*CS,PH=H*CS,S=0,G=N-1;
const c=document.getElementById('c'),x=c.getContext('2d');
c.width=PAD*3+PW*2;c.height=TOP+PH+PAD+26;
let cost,gmin,A,B,hold=0;
function gen(){
let f=new Float64Array(N);
for(let i=0;i<N;i++)f[i]=Math.random();
for(let p=0;p<2;p++){const g=new Float64Array(N);
for(let y=0;y<H;y++)for(let X=0;X<W;X++){let s=0,n=0;
for(let dy=-1;dy<=1;dy++) …Excerpt — the full answer is on the round page.
▶ R61 · Convex hull built step by stepauthor reference Open round →
<meta charset="utf-8">
<title>Graham Scan — Convex Hull Animation</title>
<style>
html,body{margin:0;height:100%;background:#070a12;display:grid;place-items:center}
canvas{background:radial-gradient(circle at 50% 42%,#111c33,#070a12 72%);border:1px solid #1d2c47;border-radius:12px;box-shadow:0 24px 70px #000a;max-width:96vw;height:auto}
</style>
<canvas id="c" width="900" height="600"></canvas>
<script>
const c=document.getElementById('c'),g=c.getContext('2d'),W=900,H=600;
let P,st,i,sortI,phase,steps,pops,flash,tick,hold,piv;
const ang=a=>Math.atan2(piv.y-a.y,a.x-piv.x);
const dist=(a,b)=>Math.hypot(a.x-b.x,a.y-b.y);
const cross=(o,a,b)=>(a.x-o.x)*(o.y-b.y)-(o.y-a.y)*(b.x-o.x);
function reset(){
P=[];
for(let k=0;k<40;k++)P.push({x:70+Math.random()*(W-140),y:115+Math.random()*(H-190)});
piv=P[0];
for(const q of P)if(q.y>piv.y||(q.y===piv.y&&q.x<piv.x))piv=q;
P.sort((a,b)=>a=== …Excerpt — the full answer is on the round page.
▶ R62 · Huffman tree from letter frequenciesauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Huffman Coding — Live Build</title>
<style>
html,body{margin:0;height:100%;background:#04060c;overflow:hidden;display:flex;align-items:center;justify-content:center}
canvas{max-width:100vw;max-height:100vh;display:block}
</style>
</head>
<body>
<canvas id="c" width="1200" height="760"></canvas>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),W=1200,H=760,BY=548,LH=52;
const SENTENCES=["huffman coding builds optimal prefix codes","the quick brown fox jumps over lazy dogs","entropy favours the shortest code words","mississippi banks and sweet bananas","a canvas grows one binary tree per second","abracadabra alakazam hocus pocus magic"];
const F=(s,w)=>(w||400)+" "+s+"px ui-monospace,Menlo,Consolas,monospace";
const ease=u=>u<0?0:u>1?1:(u<.5?4*u*u*u:1-Math.pow(-2*u+2,3)/2);
let S,q,all,pair,ph,t,pos,p …Excerpt — the full answer is on the round page.
▶ R63 · Kruskal's MST with union-findauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kruskal's MST</title>
<style>
html,body{margin:0;height:100%;background:#080b11;overflow:hidden}
canvas{display:block}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),N=25,D=115;
let w,h,dpr,nodes,edges,par,siz,hue,idx,acc,tot,t0,done;
const ease=p=>p*p*(3-2*p),la=(a,b,k)=>a+((((b-a)%360)+540)%360-180)*k;
function resize(){dpr=Math.min(devicePixelRatio||1,2);w=innerWidth;h=innerHeight;cv.width=w*dpr;cv.height=h*dpr;g.setTransform(dpr,0,0,dpr,0,0);}
function find(i){return par[i]===i?i:par[i]=find(par[i]);}
function gen(){
const m=68,ty=Math.min(120,h*0.22);nodes=[];
for(let i=0;i<N;i++){let p,k=0;
do{p={x:m+Math.random()*Math.max(20,w-2*m),y:ty+Math.random()*Math.max(20,h-ty- …Excerpt — the full answer is on the round page.
▶ R64 · N-Queens solved by backtrackingauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>N-Queens Backtracking</title>
<style>
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
background:radial-gradient(circle at 50% 0%,#1c2440,#070a12 70%);color:#e8edf7;
font:14px/1.5 ui-sans-serif,system-ui,"Segoe UI",sans-serif}
h1{margin:0;font-size:15px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#9fb2d8}
canvas{border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.62);max-width:92vw;height:auto}
#hud{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
#hud div{text-align:center}
#hud b{display:block;font-size:22px;font-variant-numeric:tabular-nums;color:#ffd479}
#hud span{font-size:10px;letter-spacing:.18em;text-transform:upp …Excerpt — the full answer is on the round page.
▶ R65 · Delaunay triangulation, triangle by triangleauthor reference Open round →
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Incremental Delaunay Triangulation</title>
<style>
html,body{margin:0;height:100%;background:#070a14;overflow:hidden;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9fc4ff}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;top:16px;left:18px;pointer-events:none;letter-spacing:.08em}
#hud b{color:#ffd18a;font-weight:600}
#hud .s{color:#5b7196}
#tag{position:fixed;bottom:14px;left:18px;color:#3f5478;letter-spacing:.18em;font-size:11px}
</style></head><body>
<canvas id="c"></canvas>
<div id="hud"><div>POINTS INSERTED <b id="pn">0</b><span class="s"> / 30</span></div>
<div>TRIANGLES ALIVE <b id="tn">0</b></div>
<div id="st" style="color:#7fe0b0">READY</div></div>
<div id="tag">BOWYER-WATSON · CIRCUMCIRCLE TEST</div>
<script>
const C=document.getElementById('c'),x=C.getContext('2d'),PN= …Excerpt — the full answer is on the round page.
▶ R66 · AVL tree rebalancing with rotationsauthor reference Open round →
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>AVL Tree — Animated Insertions & Rotations</title>
<style>html,body{margin:0;height:100%;background:#0b0f16;display:flex;align-items:center;justify-content:center}
canvas{background:#0d1117;border:1px solid #1e2836;border-radius:10px;max-width:100%}</style></head><body>
<canvas id="c" width="980" height="560"></canvas>
<script>
const c=document.getElementById('c'),g=c.getContext('2d'),W=980,H=560;
const PX=(x,n)=>W/2+(x-(n-1)/2)*44,PY=d=>140+d*64,L=(a,b,s)=>a+(b-a)*s;
let root=null,rots=0,keys=[],ki=0,q=[],prev=null,cur=null,t0=0,dur=400;
const h=n=>n?n.h:0,bf=n=>n?h(n.l)-h(n.r):0,up=n=>{n.h=1+Math.max(h(n.l),h(n.r))};
function rep(o,w){const p=o.p;w.p=p;if(!p)root=w;else if(p.l===o)p.l=w;else p.r=w}
function rotR(n){const a=n.l;n.l=a.r;if(a.r)a.r.p=n;rep(n,a);a.r=n;n.p=a;up(n);up(a)}
function rotL(n){const a=n.r;n.r= …Excerpt — the full answer is on the round page.
▶ R67 · Sieve of Eratosthenes on a number gridauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sieve of Eratosthenes</title>
<style>
html,body{margin:0;height:100%;background:#070a12;overflow:hidden;display:flex;align-items:center;justify-content:center}
canvas{max-width:100vw;max-height:100vh;display:block}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const N=400,COLS=20,ROWS=20,CELL=32,PADX=26,TOP=104,BOT=30;
const W=PADX*2+COLS*CELL,H=TOP+ROWS*CELL+BOT;
const F='ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif';
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const dpr=Math.min(2,window.devicePixelRatio||1);
cv.width=W*dpr;cv.height=H*dpr;cv.style.width=W+'px';cv.style.height=H+'px';ctx.scale(dpr,dpr);
let S,prev=0;
function reset(){
S={mark:new Int16Array(N+1).fill(-1),primes:[],cur:1,mults:[], …Excerpt — the full answer is on the round page.
▶ R68 · Edit-distance DP matrix with backtraceauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Levenshtein DP Matrix</title>
<style>
html,body{margin:0;height:100%;background:#0d1117;color:#c9d1d9;font:14px ui-monospace,SFMono-Regular,Menlo,monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
canvas{border-radius:12px;box-shadow:0 10px 40px #0008}
#out{min-height:96px;width:min(92vw,640px);background:#161b22;border:1px solid #30363d;border-radius:10px;padding:12px 16px;line-height:1.6;white-space:pre-wrap}
.k{color:#8b949e}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="out"></div>
<script>
const words=["keyboard","elephant","computer","notebook","umbrella","mountain","sunlight","triangle","chocolate","telephone","butterfly","adventure","backspace","algorithm","developer","raspberry","bluepr …Excerpt — the full answer is on the round page.
▶ R69 · Replanning when the map changesauthor reference Open round →
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dynamic Replanning Robot</title>
<style>
:root{color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 50% 0%,#141c34 0%,#070a14 70%);color:#e6ecff;font:14px/1.4 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;padding:18px}
.wrap{width:min(760px,100%)}
h1{margin:0 0 10px;font-size:17px;letter-spacing:.02em;font-weight:650}
.hud{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.p{background:#151d33;border:1px solid #263252;border-radius:8px;padding:6px 10px;font-variant-numeric:tabular-nums}
.p b{color:#8fa4d4;font-weight:500;margin-right:6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
canvas{width:100%;height:auto …Excerpt — the full answer is on the round page.
▶ R70 · Binary search, step by stepauthor reference Open round →
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>Binary Search Visualizer</title>
<style>
html,body{margin:0;height:100%;background:radial-gradient(1200px 700px at 50% 0%,#141c34,#080b16 70%);
display:flex;align-items:center;justify-content:center;font-family:ui-monospace,Menlo,Consolas,monospace}
canvas{border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);background:#0b1020}
</style></head><body><canvas id="c"></canvas><script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
const W=980,H=480,DPR=Math.min(2,window.devicePixelRatio||1);
cv.width=W*DPR;cv.height=H*DPR;cv.style.width=W+'px';cv.style.height=H+'px';g.scale(DPR,DPR);
const N=40,PL=50,PR=50,TOP=104,BASE=374,SLOT=(W-PL-PR)/N,BW=SLOT*0.62;
let vals,target,steps,idx,alpha,mLo,mHi,mMid,found,t0=0,last=0,maxV;
function xOf(i){return PL+i*SLOT+SLOT/2}
function init(){
const s=new Set();while(s.si …Excerpt — the full answer is on the round page.
▶ R71 · Flood fill on a pixel gridauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Flood Fill — 60×40</title>
<style>
html,body{height:100%;margin:0;background:#080b12;color:#dbe4f0;font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;display:flex;align-items:center;justify-content:center}
.wrap{display:flex;flex-direction:column;gap:10px;padding:16px;max-width:100%}
canvas{background:#05070c;border-radius:8px;box-shadow:0 0 0 1px #1d2635,0 18px 50px -20px #000;width:100%;height:auto;image-rendering:pixelated}
.hud{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#111827;border:1px solid #202b3d;border-radius:6px;padding:6px 10px;letter-spacing:.04em}
.chip b{color:#7dd3fc;font-weight:600}
.chip.f b{color:#fff}
</style>
</head>
<body>
<div class="wrap">
<canvas id="c" width="960" height="640"></canvas>
<div class="hud">
<di …Excerpt — the full answer is on the round page.
▶ R72 · Maze generation by recursive backtrackingauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Recursive Backtracker Maze</title>
<style>
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
background:radial-gradient(circle at 50% 0%,#141c33,#070a12 70%);color:#c8d4f0;font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
h1{margin:0;font-size:13px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:#6f7fa8}
canvas{border-radius:10px;background:#0b0f1a;box-shadow:0 0 0 1px #1e2a47,0 24px 60px -20px #000;max-width:96vw;height:auto}
#hud{display:flex;gap:28px;font-variant-numeric:tabular-nums}
#hud b{display:block;font-size:20px;font-weight:600;color:#e8f0ff}
#hud span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#63 …Excerpt — the full answer is on the round page.
▶ R73 · KMP string search with prefix tableauthor reference Open round →
<!doctype html>
<meta charset="utf-8">
<title>Knuth-Morris-Pratt string search</title>
<style>
html,body{margin:0;height:100%;background:#070a12;display:grid;place-items:center;font-family:system-ui,sans-serif}
canvas{background:#0b1020;border-radius:16px;box-shadow:0 24px 70px #000a}
</style>
<canvas id=c width=960 height=540></canvas>
<script>
const c=document.getElementById('c'),x=c.getContext('2d'),W=960,H=540;
const R=a=>a[Math.floor(Math.random()*a.length)];let S;
function init(){
const A=Math.random()<.5?['A','B']:['A','B','C'];
const m=3+Math.floor(Math.random()*3),n=25+Math.floor(Math.random()*6);
let p='',t='';
for(let k=0;k<m;k++)p+=R(A);
for(let k=0;k<n;k++)t+=R(A);
for(let k=0;k<2;k++){const a=Math.floor(Math.random()*(n-m+1));t=t.slice(0,a)+p+t.slice(a+m)}
S={p,t,m,n,lps:Array(m).fill(0),ph:0,tk:1,tl:0,tcmp:null,tok:1,i:0,j:0,cmp:null,ok:1,
comps:0,mat:[],off:0,d …Excerpt — the full answer is on the round page.
▶ R74 · Quadtree collision detectionauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Quadtree Collision Field</title>
<style>
html,body{margin:0;height:100%;background:#05070d;overflow:hidden}
canvas{display:block}
#hud{position:fixed;top:16px;left:18px;pointer-events:none;font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7fd8ff;letter-spacing:.08em;text-shadow:0 0 14px rgba(50,190,255,.45)}
#hud h1{margin:0 0 6px;font:600 13px/1.4 ui-monospace,Menlo,monospace;color:#eafcff;letter-spacing:.22em;text-transform:uppercase}
#hud i{font-style:normal;color:#3d5f75}
#hud b{color:#fff;font-weight:600}
#bar{position:fixed;left:0;bottom:0;height:2px;background:linear-gradient(90deg,#2ad8ff,#ff5f8f);box-shadow:0 0 12px #2ad8ff}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud">
<h1>Quadtree · Broadphase</h1>
<d …Excerpt — the full answer is on the round page.
▶ R75 · Falling sand on a cell gridauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Falling Sand — Cellular Automaton</title>
<style>
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.2rem;
background:radial-gradient(1200px 700px at 50% -10%,#141a26,#080a10 70%);color:#e7ebf3;
font:16px/1.5 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif}
.wrap{width:min(980px,100%)}
h1{margin:0 0 .25rem;font-size:clamp(1.05rem,2.6vw,1.5rem);font-weight:650;letter-spacing:.01em}
p.sub{margin:0 0 1rem;color:#8b95a8;font-size:.85rem}
.stats{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.75rem}
.stat{flex:1 1 120px;background:#121722;border:1px solid #232a39;border-radius:12px;padding:.5rem .75rem}
.k{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:upperc …Excerpt — the full answer is on the round page.
▶ R76 · Falling sand as free particlesauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Falling Sand — 1500 Free Particles</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#080a0f;color:#e8e0cd;
font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
canvas{background:radial-gradient(120% 90% at 50% 0%,#161b26,#0a0d13);border-radius:12px;
box-shadow:0 24px 70px #000c,inset 0 0 0 1px #ffffff10}
#hud{position:fixed;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:22px;
align-items:center;padding:8px 16px;border-radius:999px;background:#0f131caa;
backdrop-filter:blur(6px);box-shadow:0 0 0 1px #ffffff14;letter-spacing:.06em;white-space:nowrap}
#hud b{color:#f0d79a;letter-spacing:.16em;font-weight:600}
#hud i{f …Excerpt — the full answer is on the round page.
▶ R77 · Crowd leaving a room, cell by cellauthor reference Open round →
<meta charset="utf-8">
<title>Room Evacuation — 60 agents, one exit</title>
<style>
html,body{height:100%;margin:0;background:#0d1017;color:#dfe6f2;
font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
#hud{display:flex;gap:26px;letter-spacing:.06em;text-transform:uppercase;font-size:11px;color:#7c8aa5}
#hud b{color:#eaf1ff;font-size:15px;font-weight:600;letter-spacing:0}
canvas{background:#11151e;border-radius:6px;box-shadow:0 18px 50px #0006}
</style>
<canvas id=c width=640 height=480></canvas>
<div id=hud><span>escaped <b id=vl>0</b>/60</span><span>inside <b id=vi>60</b></span><span>step <b id=vs>0</b></span></div>
<script>
const W=40,H=30,S=16,N=60,EX=W-1,EY=H>>1,D=[[1,0],[-1,0],[0,1],[0,-1]];
const c=document.getElementById('c'),g=c.getContext('2d');
const ix=(x,y)=>y*W+x;
let wall,dist,occ, …Excerpt — the full answer is on the round page.
▶ R78 · Crowd leaving a room by steeringauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Crowd Evacuation — 60 People, One Exit</title>
<style>
html,body{margin:0;height:100%;background:#0a0d12;color:#e8eef7;font:15px/1.4 system-ui,sans-serif}
body{display:flex;align-items:center;justify-content:center}
canvas{max-width:100%;height:auto;border-radius:10px;box-shadow:0 10px 40px #0009}
</style>
</head>
<body>
<canvas id="c" width="760" height="470"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const W=cv.width,H=cv.height,X1=70,Y1=80,X2=600,Y2=430,T=10,GAP=46;
const DY1=(Y1+Y2)/2-GAP/2,DY2=DY1+GAP,DYC=(DY1+DY2)/2,N=60,R=5.4,RNG=2*R+8;
const rnd=(a,b)=>a+Math.random()*(b-a);
let P=[],left=0,frames=0,avgS=0;
function init(){
P=[];left=0;frames=0;avgS=0;
while(P.length<N){
const x=rnd(X1+14,X2-100),y …Excerpt — the full answer is on the round page.
▶ R79 · Aggregation on a latticeauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Diffusion-Limited Aggregation</title>
<style>
html,body{margin:0;height:100%;background:#05070d;color:#c8d6f0;
font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
display:flex;align-items:center;justify-content:center}
.wrap{width:min(96vw,900px)}
h1{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#5f7398;margin:0 0 10px;font-weight:600}
canvas{width:100%;display:block;border:1px solid #16223a;border-radius:6px;
background:#05070d;image-rendering:pixelated;box-shadow:0 0 60px -20px #2a6bff}
#hud{display:flex;gap:26px;margin-top:10px;flex-wrap:wrap}
#hud div{display:flex;gap:8px;align-items:baseline}
#hud span{color:#5f7398;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
#hud b …Excerpt — the full answer is on the round page.
▶ R80 · Aggregation by continuous driftauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Continuous Diffusion-Limited Aggregation</title>
<style>
html,body{margin:0;height:100%;background:#05060c;overflow:hidden}
canvas{display:block}
#hud{position:fixed;top:14px;left:16px;pointer-events:none;
font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8ea3c4;letter-spacing:.08em;text-transform:uppercase}
#hud b{color:#7ef2d4;font-weight:600}
#hud i{font-style:normal;color:#f0a4d0}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud">stuck <b id="s">1</b>/800 · cluster radius <i id="r">0.0</i> px · run <b id="g">1</b></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const elS=document.getElementById('s'),elR=document.getElementById('r'),elG=document.getElementById('g');
const N= …Excerpt — the full answer is on the round page.
▶ R81 · Flocking birds with three rulesauthor reference Open round →
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Flocking Birds</title>
<style>
html,body{margin:0;height:100%;background:#070b14;overflow:hidden}
canvas{display:block}
#hud{position:fixed;top:16px;left:16px;padding:10px 15px;border-radius:9px;
font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.09em;
color:#7fa8cc;background:rgba(9,15,28,.55);border:1px solid rgba(120,190,255,.22);
backdrop-filter:blur(4px);text-transform:uppercase;pointer-events:none}
#hud b{color:#eaf6ff;font-weight:600;font-size:14px}
#hud i{color:#3f5c78;font-style:normal;padding:0 6px}
</style></head><body>
<canvas id="c"></canvas>
<div id="hud">flocks <b id="f">-</b><i>|</i>avg speed <b id="s">-</b> px/s<i>|</i>birds <b>200</b></div>
<script>
const c=document.getElementById('c'),x=c.getContext('2d'),E …Excerpt — the full answer is on the round page.
▶ R82 · Conway's Game of Life with seeded patternsauthor reference Open round →
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Conway's Game of Life</title>
<style>
html,body{height:100%}
body{margin:0;background:#05070d;color:#8ea6c8;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:100vh}
canvas{display:block;width:min(95vw,960px);height:auto;border:1px solid #17263f;border-radius:6px;box-shadow:0 0 60px #071427}
#hud{display:flex;flex-wrap:wrap;gap:20px;letter-spacing:.14em;text-transform:uppercase}
b{color:#7fe6ff;font-weight:600}
</style></head><body>
<canvas id="c" width="960" height="640"></canvas>
<div id="hud"><span>Life · 120×80 torus</span><span>gen <b id="G">0</b></span><span>alive <b id="P">0</b></span><span>run <b id="R">1</b></span></div>
< …Excerpt — the full answer is on the round page.
▶ R83 · Fourier epicycles tracing a shapeauthor reference Open round →
<!doctype html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Fourier Epicycles</title><style>
html,body{margin:0;height:100%;background:#07080e;overflow:hidden}
canvas{display:block}
#i{position:fixed;left:16px;top:14px;font:12px/1.6 ui-monospace,Menlo,monospace;color:#9fdcff;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 10px rgba(60,170,255,.6);pointer-events:none}
#i b{color:#fff}
</style></head><body><canvas id=c></canvas><div id=i></div><script>
const T=6.283185307,c=document.getElementById('c'),g=c.getContext('2d'),I=document.getElementById('i'),D=Math.min(2,devicePixelRatio||1);
let W,H,CO,M,NRM,tt,hold,path,hue,last=0;
function rs(){W=c.width=innerWidth*D;H=c.height=innerHeight*D;c.style.width=innerWidth+'px';c.style.height=innerHeight+'px'}
function poly(V){return t=>{const n=V.length,s=t/T*n,i=Math …Excerpt — the full answer is on the round page.
▶ R84 · Voronoi cells with moving seedsauthor reference Open round →
<!doctype html>
<meta charset="utf-8">
<title>Voronoi Drift</title>
<style>
html,body{margin:0;height:100%;background:#080a10;overflow:hidden;color:#e8eef7;
font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;top:16px;left:16px;padding:10px 14px;border-radius:10px;
background:rgba(8,10,16,.55);border:1px solid rgba(255,255,255,.13);
backdrop-filter:blur(7px);pointer-events:none;letter-spacing:.03em}
#hud b{color:#7fe3ff;font-weight:600}
#hud i{opacity:.55;font-style:normal}
</style>
<canvas id=c></canvas>
<div id=hud>
<div><i>cells</i> <b id=n>25</b></div>
<div><i>largest cell</i> <b id=a>0</b> px²</div>
<div><i>run</i> <b id=t>0.0</b> s</div>
</div>
<script>
const c=document.getElementById('c'),x=c.getContext('2d'),
En=document.getElementById('n'),Ea=document.getElementById('a'),Et=document.getElementByI …Excerpt — the full answer is on the round page.
▶ R85 · Travelling salesman improved by 2-optauthor reference Open round →
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>2-opt Travelling Salesman</title>
<style>
html,body{margin:0;height:100%;background:#080b14;overflow:hidden}
canvas{display:block}
#h{position:fixed;left:20px;top:16px;font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7f95bd;letter-spacing:.08em;pointer-events:none;text-shadow:0 2px 10px #000}
#h .k{color:#e6efff;font-size:14px;letter-spacing:.22em}
#h b{color:#e6efff;font-weight:600}
#h .a{color:#ffb347}
#h .t{color:#4cd9c0}
</style></head><body>
<canvas id="c"></canvas>
<div id="h"></div>
<script>
const g=c.getContext('2d'),N=60,rnd=(a,b)=>a+Math.random()*(b-a);
let W,H,P,T,i,j,imp,ph,fl,fi,fj,grow,pass,L,L0;
function fit(){const d=Math.min(devicePixelRatio||1,2);W=innerWidth;H=innerHeight;c.width=W*d;c.height=H*d;c.style.width=W+'px';c.sty …Excerpt — the full answer is on the round page.
▶ R86 · Scrolling terrain from value noiseauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Scrolling value-noise terrain</title>
<style>
html,body{margin:0;height:100%;background:#070b16;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#d6e6ff;
background:rgba(6,10,22,.6);padding:5px 9px;border-radius:5px;letter-spacing:.02em}
</style></head><body>
<canvas id="c"></canvas><div id="hud">offset 0</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W=0,H=0;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',fit);
function hash(i){const s=Math.sin(i*127.1+11.7)*43758.5453;return s-Math.floor(s)}
function smooth(t){return t*t*(3-2*t)}
function vnoise(p){const i=Math.floor(p),f=smooth(p-i);return hash(i)*(1-f)+hash(i+1)*f}
functio …Excerpt — the full answer is on the round page.
▶ R87 · Gray-Scott reaction-diffusionauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Gray-Scott reaction-diffusion</title>
<style>
html,body{margin:0;height:100%;background:#05070d;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{image-rendering:pixelated;width:min(96vh,96vw);height:min(96vh,96vw);
box-shadow:0 0 60px #0af3}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#bfe0ff;
background:rgba(5,10,20,.6);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="150" height="150"></canvas><div id="hud">step 0</div>
<script>
const N=150,cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const img=g.createImageData(N,N);
const DA=1.0,DB=.5,F=.0545,K=.062,DT=1.0,PER_FRAME=14;
let a,b,a2,b2,steps=0;
function seed(){
a=new Float32Array(N*N).fill(1);b=new Float32Array(N*N).fill(0);
a2=new Float …Excerpt — the full answer is on the round page.
▶ R88 · L-system tree growing in windauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>L-system tree in wind</title>
<style>
html,body{margin:0;height:100%;background:#0a0d14;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#d8e8c8;
background:rgba(8,12,20,.6);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">depth 0</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',fit);
const DEPTH=5,ANGLE=24*Math.PI/180;
let word='F';
for(let i=0;i<DEPTH;i++){
let out='';
for(const ch of word) out += ch==='F' ? 'F[+F]F[-F]F' : ch;
word=out;
}
function build(wind){
const segs=[];
const step=Math.min(W,H)*.012;
let x=W/2,y …Excerpt — the full answer is on the round page.
▶ R89 · Marching squares on a moving fieldauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Marching squares on a moving field</title>
<style>
html,body{margin:0;height:100%;background:#060910;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#bfe6ff;
background:rgba(6,10,20,.6);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">segments 0</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,cols,rows;
const CELL=11;
function fit(){
W=cv.width=innerWidth;H=cv.height=innerHeight;
cols=Math.ceil(W/CELL)+1;rows=Math.ceil(H/CELL)+1;
}
fit();addEventListener('resize',fit);
const balls=[];
for(let i=0;i<6;i++)balls.push({
x:Math.random(),y:Math.random(),
vx:(Math.random()*2-1)*.00013,vy:(Math.random()*2-1)*.00013,
r:60 …Excerpt — the full answer is on the round page.
▶ R90 · Poisson-disk sampling, Bridson's algorithmauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Poisson-disk sampling (Bridson)</title>
<style>
html,body{margin:0;height:100%;background:#070a12;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#cfe0ff;
background:rgba(6,10,20,.6);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">samples 0</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
const R=14,K=30,CELL=R/Math.SQRT2;
let gw,gh,grid,active,count,hue,restarting=false;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',()=>{fit();reset()});
function reset(){
gw=Math.ceil(W/CELL);gh=Math.ceil(H/CELL);
grid=new Int32Array(gw*gh).fill(-1);
active=[];count=0;hue=Math.random( …Excerpt — the full answer is on the round page.
▶ R91 · Starfield tunnel in perspectiveauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Starfield tunnel</title>
<style>
html,body{margin:0;height:100%;background:#000;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#9fd0ff;
background:rgba(0,0,0,.5);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">stars 0</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,cx,cy;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight;cx=W/2;cy=H/2}
fit();addEventListener('resize',fit);
const N=520,F=420,DEPTH=1400;
const stars=[];
function spawn(s,far){
s.x=(Math.random()*2-1)*900;
s.y=(Math.random()*2-1)*900;
s.z=far?DEPTH:Math.random()*DEPTH;
s.px=null;
}
for(let i=0;i<N;i++){const s={};spawn(s,false);stars.push(s …Excerpt — the full answer is on the round page.
▶ R92 · Rotating wireframe solids with depth sortingauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Wireframe solids, depth sorted</title>
<style>
html,body{margin:0;height:100%;background:#060810;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#bcd8ff;
background:rgba(6,8,16,.6);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">edges 0</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,cx,cy;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight;cx=W/2;cy=H/2}
fit();addEventListener('resize',fit);
function cube(s){
const v=[];
for(let i=0;i<8;i++)v.push([(i&1?s:-s),(i&2?s:-s),(i&4?s:-s)]);
const e=[];
for(let i=0;i<8;i++)for(let j=i+1;j<8;j++){
let d=0;for(let b=0;b<3;b++)if(((i>>b)&1)!==((j>>b)&1))d++; …Excerpt — the full answer is on the round page.
▶ R93 · Rotating wireframe height fieldauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Rotating wireframe height field</title>
<style>
html,body{margin:0;height:100%;background:#05070e;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#a9e6ff;
background:rgba(5,7,14,.6);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">grid</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,cx,cy;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight;cx=W/2;cy=H*.56}
fit();addEventListener('resize',fit);
const N=34,SP=26,F=560,CAMZ=680,TILT=.62;
function height(x,y,t){
const d=Math.sqrt(x*x+y*y);
return Math.sin(d*.055-t*1.9)*46/(1+d*.012)
+ Math.sin(x*.07+t*.8)*13
+ Math.cos(y*.06-t*.6)*13;
}
let t0=0;
f …Excerpt — the full answer is on the round page.
▶ R94 · Raycast maze walkthroughauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Raycast maze walkthrough</title>
<style>
html,body{margin:0;height:100%;background:#000;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#ffd9a6;
background:rgba(0,0,0,.55);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">pos</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',fit);
const MAP=[
"1111111111111111",
"1000000010000001",
"1011110010111101",
"1010000000100101",
"1010111110100101",
"1010100000100001",
"1000100111111101",
"1111100100000101",
"1000000100110101",
"1011111100010001",
"1010000000010111",
"101011111101 …Excerpt — the full answer is on the round page.
▶ R95 · Shaded sphere by painter's algorithmauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Shaded sphere, painter's algorithm</title>
<style>
html,body{margin:0;height:100%;background:#04060c;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#cfe3ff;
background:rgba(4,6,12,.6);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">points</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,cx,cy,R;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight;cx=W/2;cy=H/2;R=Math.min(W,H)*.33}
fit();addEventListener('resize',fit);
// Fibonacci-Kugel: gleichmaessige Verteilung ohne Pol-Haeufung.
const N=760,pts=[];
const GA=Math.PI*(3-Math.sqrt(5));
for(let i=0;i<N;i++){
const y=1-(i/(N-1))*2, r=Math.sqrt(Math.max(0,1-y*y)), …Excerpt — the full answer is on the round page.
▶ R96 · Force-directed graph settlingauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Force-directed graph</title>
<style>
html,body{margin:0;height:100%;background:#070b14;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#cfe3ff;
background:rgba(7,11,20,.6);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">nodes</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',fit);
const N=25;
let nodes,edges,settled;
function build(){
nodes=[];edges=[];
for(let i=0;i<N;i++)nodes.push({
x:W/2+(Math.random()*2-1)*180, y:H/2+(Math.random()*2-1)*180,
vx:0, vy:0, id:i});
for(let i=1;i<N;i++)edges.push([i,Math.floor(Math.r …Excerpt — the full answer is on the round page.
▶ R97 · Circle packing without overlapauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Circle packing</title>
<style>
html,body{margin:0;height:100%;background:#0a0c14;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#d6e6ff;
background:rgba(10,12,20,.6);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">circles 0</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',()=>{fit();reset()});
const MAXR=70,MINR=2.5;
let circles,growing,tries,area,hue;
function reset(){
circles=[];growing=null;tries=0;area=0;hue=Math.random()*360;
g.fillStyle='#0a0c14';g.fillRect(0,0,W,H);
}
reset();
function fits(x,y,r){
if(x-r<0||y-r<0| …Excerpt — the full answer is on the round page.
▶ R98 · Squarified treemap of changing dataauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Squarified treemap</title>
<style>
html,body{margin:0;height:100%;background:#0b0e16;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#dbe7ff;
background:rgba(11,14,22,.62);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">items</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',fit);
const N=20,items=[];
for(let i=0;i<N;i++)items.push({
v:8+Math.random()*90, phase:Math.random()*6.28, rate:.12+Math.random()*.3,
hue:(i*37)%360, cur:null,
});
// Squarified: Zeile solange fuellen, wie sich das schlechteste Seitenverhaeltnis
// dadurc …Excerpt — the full answer is on the round page.
▶ R99 · Three sorting algorithms racingauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Three sorting algorithms racing</title>
<style>
html,body{margin:0;height:100%;background:#080b12;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#d8e6ff;
background:rgba(8,11,18,.62);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">comparisons</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',fit);
const N=60;
let lanes;
function shuffleBase(){
const a=[];
for(let i=0;i<N;i++)a.push(i+1);
for(let i=N-1;i>0;i--){const j=Math.random()*(i+1)|0;[a[i],a[j]]=[a[j],a[i]]}
return a;
}
// Jeder Algorithmus als Generator: ein yield …Excerpt — the full answer is on the round page.
▶ R100 · Sankey flow with travelling particlesauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Sankey flow with particles</title>
<style>
html,body{margin:0;height:100%;background:#070a12;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#cfe6ff;
background:rgba(7,10,18,.62);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">throughput</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',fit);
const SRC=3,TGT=4;
const links=[];
for(let s=0;s<SRC;s++)for(let t=0;t<TGT;t++)
links.push({s,t,base:6+Math.random()*40,ph:Math.random()*6.28,rate:.15+Math.random()*.25,v:0,parts:[],acc:0});
const HUE=[190,265,150];
function layout(){
co …Excerpt — the full answer is on the round page.
▶ R101 · Langton's ant building a highwayauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Langton's ant</title>
<style>
html,body{margin:0;height:100%;background:#0a0c12;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{image-rendering:pixelated;width:min(94vh,94vw);height:min(94vh,94vw);
background:#12151d;box-shadow:0 0 50px #0004}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#d6e6ff;
background:rgba(10,12,18,.62);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="260" height="260"></canvas><div id="hud">step 0</div>
<script>
const N=260,cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const img=g.createImageData(N,N);
let cells,ax,ay,dir,steps;
// 0 = weiss (hell), 1 = schwarz (dunkel). Richtungen: 0=oben,1=rechts,2=unten,3=links
const DX=[0,1,0,-1],DY=[-1,0,1,0];
function reset(){
c …Excerpt — the full answer is on the round page.
▶ R102 · Rule 110 growing line by lineauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Rule 110</title>
<style>
html,body{margin:0;height:100%;background:#080a10;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{image-rendering:pixelated;width:min(96vw,150vh);height:min(64vw,100vh);
box-shadow:0 0 50px #0005}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#cfe3ff;
background:rgba(8,10,16,.62);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="360" height="240"></canvas><div id="hud">row 0</div>
<script>
const W=360,H=240,cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const img=g.createImageData(W,H);
let row,next,y,rows;
// Rule 110: neuer Zustand nach Muster (links,mitte,rechts) als Bit-Index.
// 110 = 0b01101110 -> Muster 111->0 110->1 101->1 100->0 011->1 010->1 001->1 000->0
const R …Excerpt — the full answer is on the round page.
▶ R103 · Wireworld with a clock and a diodeauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Wireworld: clock and diode</title>
<style>
html,body{margin:0;height:100%;background:#08090f;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{image-rendering:pixelated;width:min(94vw,150vh);height:min(63vw,100vh)}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#ffe3b0;
background:rgba(8,9,15,.66);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="90" height="60"></canvas><div id="hud">step 0</div>
<script>
const W=90,H=60,cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const img=g.createImageData(W,H);
// 0 leer, 1 Leiter, 2 Elektronenkopf, 3 Elektronenschwanz
let cur=new Uint8Array(W*H),nxt=new Uint8Array(W*H),steps=0;
const at=(x,y)=>(x<0||y<0||x>=W||y>=H)?0:cur[y*W+x];
const set=(x,y,v)=>{if(x>=0&& …Excerpt — the full answer is on the round page.
▶ R104 · Abelian sandpile topplingauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Abelian sandpile</title>
<style>
html,body{margin:0;height:100%;background:#0a0b11;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{image-rendering:pixelated;width:min(94vh,94vw);height:min(94vh,94vw)}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#ffe0c2;
background:rgba(10,11,17,.64);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="221" height="221"></canvas><div id="hud">grains 0</div>
<script>
const N=221,cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const img=g.createImageData(N,N);
let pile,dropped,topples,stack;
function reset(){
pile=new Int32Array(N*N);
dropped=0;topples=0;
stack=[];
}
reset();
// Farben fuer 0..3 Koerner; alles darueber ist nur waehrend des Umkippens da.
const CO …Excerpt — the full answer is on the round page.
▶ R105 · Brian's Brainauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Brian's Brain</title>
<style>
html,body{margin:0;height:100%;background:#05070d;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{image-rendering:pixelated;width:min(94vh,94vw);height:min(94vh,94vw)}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#cfe6ff;
background:rgba(5,7,13,.64);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="150" height="150"></canvas><div id="hud">gen 0</div>
<script>
const N=150,cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const img=g.createImageData(N,N);
// 0 = off, 1 = on, 2 = dying
let cur=new Uint8Array(N*N),nxt=new Uint8Array(N*N),gen=0;
function seed(){
for(let i=0;i<N*N;i++)cur[i]=Math.random()<.14?1:0;
gen=0;
}
seed();
const COL=[[5,7,13],[120,245,255],[24,86 …Excerpt — the full answer is on the round page.
▶ R106 · Truchet tiles rearrangingauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Truchet tiles</title>
<style>
html,body{margin:0;height:100%;background:#0b0e15;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#cfe6ff;
background:rgba(11,14,21,.62);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">tiles</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,S,cols,rows,tiles,fade,flips=0;
const SIZE=54;
function fit(){
W=cv.width=innerWidth;H=cv.height=innerHeight;
cols=Math.ceil(W/SIZE);rows=Math.ceil(H/SIZE);S=SIZE;
tiles=new Uint8Array(cols*rows);
fade=new Float32Array(cols*rows);
for(let i=0;i<tiles.length;i++)tiles[i]=Math.random()<.5?1:0;
}
fit();addEventListener('resize',fit);
function tile(cx, …Excerpt — the full answer is on the round page.
▶ R107 · Hilbert curve drawing itselfauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Hilbert curve</title>
<style>
html,body{margin:0;height:100%;background:#070a11;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{display:block;width:min(94vh,94vw);height:min(94vh,94vw)}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#cfe6ff;
background:rgba(7,10,17,.62);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="820" height="820"></canvas><div id="hud">order</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const SZ=820;
let order=5,pts=[],shown=0;
// d -> (x,y) nach der klassischen Hilbert-Umrechnung
function d2xy(n,d){
let rx,ry,t=d,x=0,y=0;
for(let s=1;s<n;s*=2){
rx=1&(t/2);ry=1&(t^rx);
// rotieren
if(ry===0){
if(rx===1){x=s-1-x;y=s-1-y}
const …Excerpt — the full answer is on the round page.
▶ R108 · Interlocking star pattern on a gridauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Star pattern</title>
<style>
html,body{margin:0;height:100%;background:#0a0910;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#ffe9b8;
background:rgba(10,9,16,.62);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">grid</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',fit);
const CELL=130, PTS=8; // Achtstern je Zelle
let strokes=0;
// Ein Stern: die Kanten eines regelmaessigen Achtecks werden nach aussen
// verlaengert, bis sie sich mit denen der Nachbarn treffen. Weil alle Zellen
// gleich gross sind, treffen sich die Ve …Excerpt — the full answer is on the round page.
▶ R109 · Moire from two rotating rastersauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Moire from two rasters</title>
<style>
html,body{margin:0;height:100%;background:#05060a;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#d8e8ff;
background:rgba(5,6,10,.62);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">angle</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',fit);
const STEP=5; // Ringabstand: fein genug fuer Moire, grob genug zum Aufloesen
function rings(cx,cy,col){
g.strokeStyle=col;g.lineWidth=1.6;
const rmax=Math.hypot(W,H);
g.beginPath();
for(let r=STEP;r<rmax;r+=STEP){
g.m …Excerpt — the full answer is on the round page.
▶ R110 · Penrose-style aperiodic tiling growingauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Penrose rhombus tiling</title>
<style>
html,body{margin:0;height:100%;background:#080810;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{display:block;width:min(94vh,94vw);height:min(94vh,94vw)}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#ffd9e8;
background:rgba(8,8,16,.62);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="820" height="820"></canvas><div id="hud">generation</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const SZ=820, PHI=(1+Math.sqrt(5))/2;
let gen=0,tris=[];
// Robinson-Dreiecke als Bausteine: 0 = schmal, 1 = dick. Die Unterteilung ist
// die klassische Substitutionsregel; zwei Dreiecke bilden je eine Raute.
function seed(){
tris=[];
const r=SZ*.46; …Excerpt — the full answer is on the round page.
▶ R111 · Ant colony laying pheromone trailsauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Ant colony with pheromone trails</title>
<style>
html,body{margin:0;height:100%;background:#0a0906;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{image-rendering:pixelated;width:min(94vh,94vw);height:min(94vh,94vw)}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#ffe4b5;
background:rgba(10,9,6,.66);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="200" height="200"></canvas><div id="hud">ants</div>
<script>
const N=200,cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const img=g.createImageData(N,N);
const NEST={x:N/2,y:N/2};
const food=[{x:38,y:44,r:11},{x:162,y:58,r:10},{x:70,y:166,r:12}];
const home=new Float32Array(N*N), toFood=new Float32Array(N*N);
const ANTS=340, ants=[];
let delivered=0;
for …Excerpt — the full answer is on the round page.
▶ R112 · Physarum slime-mould networkauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Physarum network</title>
<style>
html,body{margin:0;height:100%;background:#04050a;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{image-rendering:pixelated;width:min(94vh,94vw);height:min(94vh,94vw)}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#ffe9c9;
background:rgba(4,5,10,.66);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="260" height="260"></canvas><div id="hud">agents</div>
<script>
const N=260,cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const img=g.createImageData(N,N);
const A=9000, SA=Math.PI/4, RA=Math.PI/4, SO=9, SS=1.0, DEP=.22, DECAY=.955;
let trail=new Float32Array(N*N), tmp=new Float32Array(N*N);
const ax=new Float32Array(A), ay=new Float32Array(A), aa=new Float32Array(A);
le …Excerpt — the full answer is on the round page.
▶ R113 · Predator and prey on a shared fieldauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Predator and prey</title>
<style>
html,body{margin:0;height:100%;background:#060a08;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#d9ffe6;
background:rgba(6,10,8,.66);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">populations</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,GW,GH;
const CELL=12;
let food,prey,pred;
function fit(){
W=cv.width=innerWidth;H=cv.height=innerHeight;
GW=Math.ceil(W/CELL);GH=Math.ceil(H/CELL);
food=new Float32Array(GW*GH).fill(1);
}
fit();addEventListener('resize',fit);
function seed(){
prey=[];pred=[];
for(let i=0;i<420;i++)prey.push({x:Math.random()*W,y:Math.random()*H,e:12});
for …Excerpt — the full answer is on the round page.
▶ R114 · Traffic jam from nothingauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Nagel-Schreckenberg traffic</title>
<style>
html,body{margin:0;height:100%;background:#080a10;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{display:block;width:min(96vw,150vh);height:min(64vw,100vh)}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#dbe7ff;
background:rgba(8,10,16,.64);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="900" height="600"></canvas><div id="hud">traffic</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const W=900,H=600;
const CELLS=260, VMAX=5, P=0.28;
let road=new Int8Array(CELLS).fill(-1); // -1 leer, sonst Geschwindigkeit
let steps=0, history=[];
function seed(){
road.fill(-1);
for(let i=0;i<CELLS;i+=4)road[i]=VMAX; // gleichmaessig vertei …Excerpt — the full answer is on the round page.
▶ R115 · Crowd leaving through a bottleneckauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Crowd through a bottleneck</title>
<style>
html,body{margin:0;height:100%;background:#0a0b12;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#ffe0d8;
background:rgba(10,11,18,.64);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">crowd</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,people,out,flow,tick;
const R=4.4;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',()=>{fit();fill()});
function door(){return {x:W*.74, y:H/2, half:H*.045}}
function fill(){
people=[];out=0;flow=[];tick=0;
for(let i=0;i<420;i++)people.push({
x:W*.06+Math.random()*(W*.60), y:H*.10+Math.rando …Excerpt — the full answer is on the round page.
▶ R116 · Bresenham circles and lines, pixel by pixelauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Bresenham lines and circles</title>
<style>
html,body{margin:0;height:100%;background:#05070c;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{image-rendering:pixelated;width:min(94vh,94vw);height:min(94vh,94vw)}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#cfe6ff;
background:rgba(5,7,12,.64);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="300" height="300"></canvas><div id="hud">pixels</div>
<script>
const N=300,cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const img=g.createImageData(N,N);
let px=0,queue=[],phase=0,frameNo=0;
function clear(){
const d=img.data;
for(let i=0;i<N*N;i++){d[i*4]=5;d[i*4+1]=7;d[i*4+2]=12;d[i*4+3]=255}
px=0;
}
function put(x,y,r,gg,b){
if(x<0||y<0||x>=N||y> …Excerpt — the full answer is on the round page.
▶ R117 · De Casteljau construction of a Bezier curveauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>De Casteljau construction</title>
<style>
html,body{margin:0;height:100%;background:#080a12;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#d9e8ff;
background:rgba(8,10,18,.64);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">t</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',fit);
const P=[];
for(let i=0;i<4;i++)P.push({
bx:.2+i*.2, by:.5, ph:Math.random()*6.28, ax:.10+Math.random()*.12, ay:.20+Math.random()*.18,
rx:.11+Math.random()*.2, ry:.13+Math.random()*.2, x:0, y:0,
});
const lerp=(a,b,t)=>({x:a.x+(b.x-a.x)*t, y:a.y+(b …Excerpt — the full answer is on the round page.
▶ R118 · Sutherland-Hodgman polygon clippingauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Sutherland-Hodgman clipping</title>
<style>
html,body{margin:0;height:100%;background:#080a11;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#dce8ff;
background:rgba(8,10,17,.64);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">vertices</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,win;
function fit(){
W=cv.width=innerWidth;H=cv.height=innerHeight;
win={x0:W*.30,y0:H*.24,x1:W*.70,y1:H*.76};
}
fit();addEventListener('resize',fit);
// Konkaves Stern-Polygon
function makePoly(t){
const pts=[],n=10,cx=W/2,cy=H/2;
const R=Math.min(W,H)*.34, r=R*.42;
for(let i=0;i<n*2;i++){
const a=t*.5+i*Math.PI/n;
const rr= …Excerpt — the full answer is on the round page.
▶ R119 · Floyd-Steinberg dithering a gradientauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Floyd-Steinberg dithering</title>
<style>
html,body{margin:0;height:100%;background:#06070c;display:flex;align-items:center;
justify-content:center;overflow:hidden}
canvas{image-rendering:pixelated;width:min(96vw,150vh);height:min(64vw,100vh)}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#dbe7ff;
background:rgba(6,7,12,.64);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c" width="360" height="240"></canvas><div id="hud">dither</div>
<script>
const W=360,H=240,cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
const img=g.createImageData(W,H);
const buf=new Float32Array(W*H);
let frameNo=0, LEVELS=2;
function frame(){
frameNo++;
const t=frameNo*.012;
if(frameNo%260===0)LEVELS=LEVELS>=5?2:LEVELS+1;
// Graustufenbild aus einer Funkt …Excerpt — the full answer is on the round page.
▶ R120 · Scanline fill of a self-intersecting polygonauthor reference Open round →
<!doctype html>
<html><head><meta charset="utf-8"><title>Scanline fill, even-odd</title>
<style>
html,body{margin:0;height:100%;background:#080a10;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#dbe7ff;
background:rgba(8,10,16,.64);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">scanlines</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',fit);
// Selbstueberschneidendes Sternpolygon: jeder k-te Punkt wird verbunden.
function poly(t){
const n=9,k=4,pts=[],cx=W/2,cy=H/2;
const R=Math.min(W,H)*.40*(1+.10*Math.sin(t*.7));
for(let i=0;i<n;i++){
const a=t*.35+(i*k)*2*Math.PI/n; …Excerpt — the full answer is on the round page.
▶ R121 · A* pathfinding search across an obstacle gridauthor reference Open round →
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>A* Search Visualizer</title>
<style>
html,body{margin:0;height:100%;background:#080b14;overflow:hidden}
canvas{display:block}
#h{position:fixed;left:16px;top:14px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7f93b8;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;text-shadow:0 0 10px #000}
#h b{color:#e6efff;font-weight:600}
#h i{font-style:normal;color:#ffd166}
</style>
<canvas id="c"></canvas>
<div id="h"></div>
<script>
var C=document.getElementById('c'),x=C.getContext('2d'),HU=document.getElementById('h');
var W,H,S,co,ro,ox,oy,g,gs,fs,pa,cl,op,st,go,ex,path,pi,mode,wait,f0;
function ri(a,b){return a+(Math.random()*(b-a+1)|0)}
function gx(i){return i%co}
function gy(i){return i/co|0}
function hf(i){return Math.abs(gx(i)-gx(go))+Math.abs(gy(i)-gy(go))} …Excerpt — the full answer is on the round page.
▶ R122 · Randomized maze generation via recursive backtrackingauthor reference Open round →
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Recursive Backtracker Maze</title>
<style>
html,body{margin:0;height:100%;background:#05070d;overflow:hidden}
canvas{display:block}
#h{position:fixed;left:18px;top:16px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
color:#5f89a8;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 14px rgba(0,150,255,.5);
pointer-events:none;user-select:none}
#h b{color:#eaf7ff;font-weight:600}
#h i{color:#22384a;font-style:normal;margin:0 8px}
</style>
<canvas id=c></canvas>
<div id=h></div>
<script>
var cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('h');
var mc=document.createElement('canvas'),m=mc.getContext('2d');
var W,H,cols,rows,cs,ox,oy,vis,stack,count,total,done,speed,hue0,dpr;
function init(){
dpr=Math.min(window.devicePixel …Excerpt — the full answer is on the round page.
▶ R123 · Breadth-first flood fill spreading through a regionauthor reference Open round →
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>BFS Flood Fill</title>
<style>
html,body{margin:0;height:100%;background:#080b14;overflow:hidden}
canvas{display:block}
#hud{position:fixed;top:14px;left:18px;font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8ea6c6;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;text-shadow:0 2px 10px #000}
#hud b{color:#eaf3ff;font-weight:600}
#hud .k{color:#5d7characters}
</style>
<canvas id="cv"></canvas>
<div id="hud">step <b id="hs">0</b> / filled <b id="hf">0</b> of <b id="ht">0</b> cells</div>
<script>
var cv=document.getElementById('cv'),g=cv.getContext('2d'),hs=document.getElementById('hs'),hf=document.getElementById('hf'),ht=document.getElementById('ht');
var S=14,W,H,cols,rows,wall,dist,rings,app,step,filled,total,acc,done,last=0;
var pal=[];
function col(d){ret …Excerpt — the full answer is on the round page.
▶ R124 · Dijkstra's shortest path over weighted terrainauthor reference Open round →
<meta charset="utf-8">
<title>Dijkstra on a Cost Grid</title>
<style>
html,body{margin:0;height:100%;background:#080b11;overflow:hidden}
canvas{display:block}
#h{position:fixed;left:14px;top:12px;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#dbe7ff;background:rgba(8,11,17,.62);padding:9px 13px;border-radius:9px;border:1px solid rgba(255,255,255,.12);letter-spacing:.02em}
#h b{color:#8ff0c0;font-weight:600}
</style>
<canvas id="c"></canvas>
<div id="h"></div>
<script>
const c=document.getElementById('c'),g=c.getContext('2d'),hud=document.getElementById('h');
const S=12,SPF=30;let W,H,N,cost,dist,prev,st,heap,src,tgt,ns,phase,path,pi,wait;
function push(d,i){heap.push([d,i]);let k=heap.length-1;while(k>0){const p=(k-1)>>1;if(heap[p][0]<=heap[k][0])break;const t=heap[p];heap[p]=heap[k];heap[k]=t;k=p}}
function pop(){const top=heap[0],l=heap.pop();if(heap.length){heap[0]=l …Excerpt — the full answer is on the round page.
▶ R125 · Voronoi diagram growing by multi-source flood fillauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Voronoi Flood Fill</title>
<style>
html,body{margin:0;height:100%;background:#07080d;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:14px;top:12px;font:600 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
color:#dfe6ff;background:rgba(10,12,22,.55);border:1px solid rgba(160,180,255,.18);
border-radius:9px;padding:8px 12px;letter-spacing:.04em;pointer-events:none;text-shadow:0 1px 3px #000}
#hud b{color:#8ef0ff;font-weight:700}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud">cells claimed <b id="n">0</b> / <span id="t">0</span> · seeds <span id="s">0</span></div>
<script>
const c=document.getElementById('c'),x=c.getContext('2d'),
N=document.getElementById('n'),T=document.getElementById( …Excerpt — the full answer is on the round page.
▶ R126 · Bubble sort sweeping bars into orderauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bubble Sort</title>
<style>
html,body{margin:0;height:100%;background:#0b0f18;overflow:hidden}
body{display:flex;align-items:center;justify-content:center;
font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8fa3c0}
#w{width:min(96vw,1200px);height:min(80vh,660px);position:relative}
canvas{width:100%;height:100%;display:block;border-radius:12px;
background:radial-gradient(120% 120% at 50% 0%,#141c2c 0%,#0b0f18 70%);
box-shadow:0 20px 60px #0006,inset 0 0 0 1px #ffffff12}
</style>
</head>
<body>
<div id="w"><canvas id="c"></canvas></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const N=80;let W=0,H=0,arr=[],off=[],i=0,j=0,cmp=0,swp=0,done=0,hold=0;
function fit(){const r=cv.getBoundingClientRect(),d=devicePix …Excerpt — the full answer is on the round page.
▶ R127 · Quicksort partitioning around glowing pivotsauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Quicksort Visualizer</title>
<style>
html,body{margin:0;height:100%;background:#0b0f1a;color:#e6ecff;
font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden}
#wrap{position:fixed;inset:0}
canvas{display:block;width:100%;height:100%}
#hud{position:fixed;left:18px;top:14px;display:flex;gap:18px;align-items:baseline;
pointer-events:none;text-shadow:0 2px 8px #000}
#hud b{font-size:22px;font-weight:600;color:#fff}
.k{opacity:.55;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
#leg{position:fixed;left:18px;bottom:14px;display:flex;gap:16px;font-size:11px;
pointer-events:none;opacity:.8}
.leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
</style>
</head>
<body>
<div id="wrap"><canvas …Excerpt — the full answer is on the round page.
▶ R128 · Merge sort weaving runs togetherauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bottom-Up Merge Sort</title>
<style>
html,body{margin:0;height:100%;background:#080b10;overflow:hidden}
canvas{display:block}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
const N=80,COL=['','#3ddcff','#ff5b93','#ffd166'];
let W,H,arr,run,lo,pass,L,R,li,ri,k,out,phase,hold,merges;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
addEventListener('resize',fit);fit();
function reset(){
arr=[];
for(let q=0;q<N;q++)arr.push({v:.06+Math.random()*.94,p:q,t:q,s:0});
run=1;lo=-2;pass=1;merges=0;phase=0;hold=0;next();
}
function next(){
lo+=2*run;
for(;;){
if(lo+run<N)break;
run*=2;pass++;lo=0;
if(run>=N){phase=2;hold=90;return}
}
const mid=lo+run,hi=Math.min(lo+ …Excerpt — the full answer is on the round page.
▶ R129 · Heap sort sifting the maximum to the backauthor reference Open round →
<!doctype html>
<meta charset="utf-8">
<title>Heap Sort</title>
<style>html,body{margin:0;height:100%;background:#0b0f14;overflow:hidden}canvas{display:block}</style>
<canvas id=c></canvas>
<script>
const c=document.getElementById('c'),x=c.getContext('2d');
let W,H;function fit(){W=c.width=innerWidth;H=c.height=innerHeight}fit();onresize=fit;
const N=80;let a,swaps,phase,hi,end,sift,sorted,hl,hold;
function init(){a=[];for(let i=0;i<N;i++)a.push(.04+Math.random()*.96);swaps=0;phase='build';hi=(N>>1)-1;end=N-1;sift=null;sorted=N;hl=[];hold=0}
function sw(i,j){const t=a[i];a[i]=a[j];a[j]=t;swaps++}
function step(){
if(hold>0){hold--;if(hold===0)init();return}
if(sift){const e=sift.end,i=sift.i,l=2*i+1,r=l+1;let m=i;
if(l<e&&a[l]>a[m])m=l;
if(r<e&&a[r]>a[m])m=r;
hl=[i];if(l<e)hl.push(l);if(r<e)hl.push(r);
if(m!==i){sw(i,m);sift.i=m}else sift=null;
return}
if(phase==='build'){if …Excerpt — the full answer is on the round page.
▶ R130 · Radix sort ordering by one digit at a timeauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>LSD Radix Sort — Canvas</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#080c18}
canvas{display:block}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
const N=80,PL=[1,10,100],NM=['ones (1s)','tens (10s)','hundreds (100s)'];
let W,H,bars,pi,ph,t;
function fit(){const d=Math.min(2,devicePixelRatio||1);W=innerWidth;H=innerHeight;cv.width=W*d;cv.height=H*d;g.setTransform(d,0,0,d,0,0)}
addEventListener('resize',fit);fit();
const dg=(v,p)=>Math.floor(v/p)%10;
function prep(){const bk=[];for(let d=0;d<10;d++)bk.push([]);
for(const b of bars){b.fx=b.x;bk[dg(b.v,PL[pi])].push(b)}
let i=0;for(const q of bk)for(const b of q)b.tx=i++}
function init(){bars=[];for(let …Excerpt — the full answer is on the round page.
▶ R131 · Weekday riddle from two cluesauthor reference Open round →
Today is Sunday. Two days before Thursday is Tuesday, so the day after tomorrow must be Tuesday. Counting back two days from Tuesday gives Sunday as today (tomorrow = Monday, day after tomorrow = Tuesday).
▶ R132 · Fermi estimate: a lifetime of drinking waterauthor reference Open round →
Assumptions: - Lifespan: ~80 years (global average is lower, but take a typical developed-country adult life). - Drinking fluids only (water, coffee, tea, juice, etc.), not water contained in food. - Childhood intake is lower, so use a blended lifetime average of ~2.0 L/day. Calculation: 2.0 L/day x 365.25 days/year x 80 years = 58,440 L ~58,000 liters (roughly 60 cubic meters, about a quarter of an Olympic-pool lane's worth)
▶ R133 · Three friends, three petsauthor reference Open round →
Ana owns the parrot, Ben owns the cat, and Cleo owns the dog.
Ana's fur allergy rules out the cat and the dog, so she must have the parrot. Since the parrot is taken, Ben's clue ("cannot fly") is consistent with either remaining pet, but "the dog's owner is older than Ben" means Ben is not the dog's owner — so Ben has the cat. That leaves the dog for Cleo, who must therefore be older than Ben.▶ R134 · Smallest number from three remaindersauthor reference Open round →
**Answer: 52**
Reasoning (Chinese Remainder Theorem, done by hand):
We want the smallest positive n with
- n ≡ 1 (mod 3)
- n ≡ 2 (mod 5)
- n ≡ 3 (mod 7)
**Step 1 — combine the first two conditions.**
Numbers that are ≡ 2 (mod 5): 2, 7, 12, 17, 22, …
Of these, which leave remainder 1 mod 3? 2 → 2, 7 → 1 ✓.
So n ≡ 7 (mod 15).
**Step 2 — bring in the third condition.**
Numbers ≡ 7 (mod 15): 7, 22, 37, 52, 67, …
Their remainders mod 7: 0, 1, 2, 3 ✓.
So the first one that works is 52, and n ≡ 52 (mod 105).
**Check.**
- 52 = 3·17 + 1 → remainder 1 ✓
- 52 = 5·10 + 2 → remainder 2 ✓
- 52 = 7·7 + 3 → remainder 3 ✓
Since 3, 5, 7 are pairwise coprime, the solution is unique modulo 3·5·7 = 105, so the full solution set is {52, 157, 262, …} and **52 is the smallest positive one**.▶ R135 · Conditional dice probabilityauthor reference Open round →
**Answer: 2/11** Justification: Of the 36 equally likely ordered outcomes, exactly 11 contain at least one 4 (the 6 with a 4 on the first die plus the 6 with a 4 on the second die, minus the double-counted (4,4)). Among those 11, the ones summing to 9 are (4,5) and (5,4), i.e. 2 outcomes. Hence the conditional probability is 2/11 ≈ 0.1818. (Note the subtlety: this differs from the answer you'd get by conditioning on a *specific* die showing 4, which would be 1/6.)
▶ R136 · Double pendulum tracing a chaotic pathauthor reference Open round →
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Chaotic Double Pendulum</title>
<style>
html,body{margin:0;height:100%;background:#06080f;overflow:hidden}
canvas{display:block}
#hud{position:fixed;top:16px;left:18px;font:600 20px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:#a9dcff;text-shadow:0 0 14px rgba(40,140,220,.7);pointer-events:none}
#hud b{display:block;font:600 10px/1.6 ui-monospace,monospace;color:#5d7796;letter-spacing:.24em;text-transform:uppercase}
</style>
<canvas id=c></canvas>
<div id=hud><b>elapsed</b><span id=s>0.00 s</span></div>
<script>
const c=document.getElementById('c'),x=c.getContext('2d'),S=document.getElementById('s');
let W,H;
function fit(){const d=Math.min(2,devicePixelRatio||1);W=innerWidth;H=innerHeight;c.width=W*d;c.height=H*d;c.style.width=W+'px';c.style.height= …Excerpt — the full answer is on the round page.
▶ R137 · Cloth mesh hanging and rippling in the windauthor reference Open round →
<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Hanging Cloth</title><style>html,body{margin:0;height:100%;background:radial-gradient(circle at 50% 15%,#18243a,#04060b);overflow:hidden}canvas{display:block}#h{position:fixed;left:14px;top:12px;font:12px/1.6 ui-monospace,SFMono-Regular,monospace;color:#8fb4e0;letter-spacing:.08em;text-transform:uppercase}#h b{color:#fff;font-size:15px}#m{width:130px;height:5px;background:#16202f;border-radius:3px;overflow:hidden;margin-top:5px}#mf{height:100%;width:0;background:linear-gradient(90deg,#3aa8ff,#7df0c0);transition:width .1s}</style></head><body><canvas id=c></canvas><div id=h>Wind <b id=w>0.00</b><div id=m><div id=mf></div></div><span id=d></span></div><script>
var c=document.getElementById('c'),g=c.getContext('2d'),W=document.getElementById('w'),M=document.getElementById(' …Excerpt — the full answer is on the round page.
▶ R138 · Two-source wave interference patternauthor reference Open round →
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Two-Source Wave Interference</title>
<style>
html,body{margin:0;height:100%;background:#04050a;overflow:hidden}
canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#h{position:fixed;top:18px;left:50%;transform:translateX(-50%);font:11px/1 ui-monospace,Menlo,monospace;letter-spacing:.34em;color:rgba(200,220,255,.5);text-transform:uppercase;white-space:nowrap}
#i{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);font:13px/1 ui-monospace,Menlo,monospace;color:#e2edff;letter-spacing:.1em;background:rgba(6,9,18,.5);padding:9px 18px;border:1px solid rgba(150,195,255,.25);border-radius:999px;white-space:nowrap}
#i b{color:#8fd0ff;font-weight:600}
@media(max-width:520px){#i{font-size:11px;padding:7px 12px}#h{display:none}}
</style>
<canvas id="c"></canvas>
<div id="h">Tw …Excerpt — the full answer is on the round page.
▶ R139 · Small n-body system orbiting a central starauthor reference Open round →
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>N-Body Gravity</title><style>
html,body{margin:0;height:100%;background:#05060c;overflow:hidden}
canvas{display:block}
#h{position:fixed;left:14px;top:12px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#93aacd;letter-spacing:.14em;text-shadow:0 0 10px #000;pointer-events:none}
#h b{color:#ffe6a3;font-weight:600}
</style></head><body>
<canvas id="c"></canvas><div id="h"></div>
<script>
var c=document.getElementById('c'),x=c.getContext('2d'),hud=document.getElementById('h');
var W,H,B,t,G=1,SOFT=7,SM=1600;
function rs(){W=c.width=innerWidth;H=c.height=innerHeight}
function col(m){var k=Math.min(1,m/14);return'hsl('+(206-152*k)+',88%,'+(74-20*k)+'%)'}
function init(){
rs();t=0;
B=[{x:W/2,y:H/2,vx:0,vy:0,m:SM,r:10,c:'#fff3c4'}];
var R=Math. …Excerpt — the full answer is on the round page.
▶ R140 · Water sloshing in a tilting containerauthor reference Open round →
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sloshing Water</title>
<style>
html,body{margin:0;height:100%;background:#05070f;display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif}
canvas{max-width:100vw;max-height:100vh;border-radius:10px;box-shadow:0 0 60px #0a2a5580}
</style>
</head>
<body>
<canvas id="c" width="760" height="480"></canvas>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
const W=760,H=480,L=34,R=W-34,T=44,B=H-30,N=200,rr=6,h=20,hc=h*1.75,G=1500;
const sp=document.createElement('canvas');sp.width=sp.height=64;
const sc=sp.getContext('2d'),rg=sc.createRadialGradient(32,32,0,32,32,32);
rg.addColorStop(0,'rgba(140,215,255,.85)');rg.addColorStop(.35,'rgba(45,135,240,.45)');
rg.addColorStop(1,'rgba(10,50,150,0)');sc.fillStyle=rg …Excerpt — the full answer is on the round page.
▶ R141 · Idiom-dense German into natural Englishauthor reference Open round →
That one backfired completely — now we're left standing there with our pants down, but throwing in the towel is out of the question.
▶ R142 · Register shift: casual complaint into formalauthor reference Open round →
Subject: Faulty Blender – Request for Refund or Replacement Dear Sir or Madam, I am writing regarding the blender I recently received from you. After only two days of use, the appliance failed completely, emitting sparks in the process. Given the safety risk this presents, I consider the product defective and unfit for use. I would therefore ask you to either refund the full purchase price or supply a replacement unit, whichever you can arrange most quickly. I would appreciate your confirmation of how you intend to proceed at your earliest convenience. Thank you for your prompt attention to this matter. Yours faithfully, [Your Name]
▶ R143 · Bureaucratic German into plain Englishauthor reference Open round →
To get this benefit, you must send in the fully completed application on time. If you miss the deadline, you lose your claim.
▶ R144 · English apology into idiomatic Sie-Germanauthor reference Open round →
Wir haben hier Mist gebaut — das lässt sich nicht schönreden. Aber wir bringen das in Ordnung, und es wird Sie keinen Cent kosten.
▶ R145 · False-friend minefield German into Englishauthor reference Open round →
We may have to postpone the current appointment; it's a sensitive matter, and I don't want to spread any venom.
▶ R146 · Repair broken JSON (4 precise errors)author reference Open round →
{
"name": "Alex Weber",
"age": 34,
"email": "alex@example.com",
"active": true,
"tags": ["admin", "beta"],
"signupYear": 2024,
"address": {
"street": "Hauptstr. 5",
"city": "Berlin",
"zip": "10115",
"country": "Germany"
}
}▶ R147 · CSV with embedded comma to JSON arrayauthor reference Open round →
[
{
"id": 1,
"name": "Anna Berg",
"notes": "Prefers email, not phone",
"amount": 120.50
},
{
"id": 2,
"name": "Tom Klein",
"notes": "Standard customer",
"amount": 75.00
},
{
"id": 3,
"name": "Lena Fuchs",
"notes": "Called twice, resolved",
"amount": 200.00
},
{
"id": 4,
"name": "Max Otto",
"notes": "VIP customer",
"amount": 50.00
}
]▶ R148 · Table QA: sum, filter, max over order dataauthor reference Open round →
1. 241.47 (1001: 39.98 + 1003: 19.99 + 1004: 149.00 + 1006: 32.50) 2. 1001, 1003, 1006 3. Order 1005 — 268.50
▶ R149 · Extract meeting invite into a fixed JSON schemaauthor reference Open round →
{
"title": "Q3 Roadmap Kickoff",
"date": "2026-08-18",
"time": "10:30",
"location": "Conference Room B, Berlin office (3rd floor)",
"attendees": ["Sarah", "Tom", "Priya"]
}▶ R150 · Diff two near-identical config blocksauthor reference Open round →
timeout: 30 -> 45 debug: false -> true max_connections: 100 -> 150
▶ R151 · Binary search tree growing node by nodeauthor reference Open round →
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Binary Search Tree Animation</title>
<style>html,body{margin:0;height:100%;background:#0b1020;overflow:hidden}
#h{position:fixed;left:16px;top:14px;color:#8b9ac4;font:600 13px/1.5 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
#h b{color:#7ee6c8}#h i{font-style:normal;color:#ffd166}canvas{display:block}</style></head><body>
<div id="h">Binary Search Tree · nodes <b id="n">0</b> · <i id="s">building</i></div>
<canvas id="c"></canvas>
<script>
var c=document.getElementById('c'),g=c.getContext('2d'),NE=document.getElementById('n'),SE=document.getElementById('s');
var W=0,H=0,R=18;
function rs(){W=innerWidth;H=innerHeight;var d=devicePixelRatio||1;c.width=W*d;c.height=H*d;c.style.width=W+'px';c.style.heigh …Excerpt — the full answer is on the round page.
▶ R152 · Hash table with visible collision chainsauthor reference Open round →
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hash Table Chaining</title>
<style>html,body{margin:0;height:100%;background:#0d1117;display:flex;align-items:center;justify-content:center}canvas{max-width:100%;max-height:100%}</style></head><body><canvas id="c" width="960" height="600"></canvas>
<script>
const c=document.getElementById('c'),x=c.getContext('2d'),N=12,M='ui-monospace,SFMono-Regular,Menlo,monospace';
const BW=58,GAP=(960-N*BW)/(N+1),TOP=140,BH=22,VG=10;
let B,tot,goal,fly,timer,phase,fade;
function reset(){B=[];for(let i=0;i<N;i++)B.push([]);tot=0;goal=40+((Math.random()*21)|0);fly=null;timer=10;phase=0;fade=0;}
reset();
function col(n){if(n===0)return['#16241c','#2f6b45'];if(n<=2)return['#123a27','#3ddc84'];if(n<=4)return['#4a3b0f','#ffd23f'];return['#4d1a1a','#ff5d5d'];}
function rr(a,b,w …Excerpt — the full answer is on the round page.
▶ R153 · Binary min-heap with bubble-up and sink-downauthor reference Open round →
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Binary Min-Heap</title>
<style>html,body{margin:0;height:100%;background:#0b0f1c;color:#e6ecff;font:14px system-ui,sans-serif;display:flex;align-items:center;justify-content:center}canvas{background:#131a30;border-radius:14px;box-shadow:0 10px 50px #0009;max-width:98vw}</style></head><body>
<canvas id="c"></canvas>
<script>
const W=920,H=520,c=document.getElementById('c'),x=c.getContext('2d'),dpr=window.devicePixelRatio||1;
c.width=W*dpr;c.height=H*dpr;c.style.width=W+'px';c.style.height=H+'px';x.scale(dpr,dpr);
let heap,ins,ext,anim,msg,mcol,hi,idle,mode,cur,pending;
function reset(){heap=[];anim=null;hi=-1;idle=.5;mode='ins';cur=-1;pending=3+(Math.random()*3|0);msg='fresh empty heap';mcol='#8fa3cc';if(ins===undefined){ins=0;ext=0;}}
reset();
function base(i){const d=Math.floor(Math.log2(i+1)),n=1<<d,p=i-(n-1);return[W*(p …Excerpt — the full answer is on the round page.
▶ R154 · Ring buffer with producer and consumer at different ratesauthor reference Open round →
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Ring Buffer</title>
<style>
html,body{margin:0;height:100%;background:#080c11;display:grid;place-items:center;overflow:hidden;
font:14px/1.4 ui-sans-serif,system-ui,sans-serif;color:#8fa6bd}
canvas{display:block;max-width:100vw;max-height:100vh}
</style></head><body>
<canvas id="c" width="760" height="760"></canvas>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
const W=760,H=760,CX=380,CY=372,R=228,TAU=6.2831853;
const rnd=(a,b)=>a+Math.random()*(b-a);
let N,buf,pp,cp,vp,vc,tp,tc,flash,life,last=0;
function reset(){
N=16+(Math.random()*5|0);buf=new Array(N).fill(0);
pp=0;cp=0;vp=rnd(.8,2);vc=rnd(.7,1.8);tp=0;tc=0;flash=0;life=0;
}
function ang(p){return p/N*TAU-1.5707963}
function step(dt){
life+=dt;
tp-=dt;if(tp<=0){tp=rnd …Excerpt — the full answer is on the round page.
▶ R155 · Linked list with animated pointer relinkingauthor reference Open round →
<meta charset="utf-8"><title>Singly Linked List Animation</title>
<style>html,body{margin:0;height:100%;background:#080c1a;display:grid;place-items:center;font-family:system-ui,sans-serif}canvas{max-width:97vw;border-radius:14px;box-shadow:0 12px 50px #000a}</style>
<canvas id=c width=920 height=440></canvas>
<script>
const c=document.getElementById('c'),g=c.getContext('2d'),W=920,H=440,BW=86,BH=46,GX=52,GY=96,M=40,TOP=155;
let ns=[],ph='idle',t=0,op=null,msg='',pt=0;
const R=n=>Math.floor(Math.random()*n);
function mk(v,x,y){return{v:v,x:x,y:y,tx:x,ty:y,ax:x,ay:y,s:0,h:0,hT:0,k:0,f:1,nw:0}}
function pr(){return Math.max(1,Math.floor((W-2*M+GX)/(BW+GX)))}
function lay(sn){const p=pr();ns.forEach((n,i)=>{n.tx=M+(i%p)*(BW+GX)+BW/2;n.ty=TOP+((i/p)|0)*GY;if(sn){n.x=n.tx;n.y=n.ty;n.s=1;n.ax=n.tx+BW/2+30;n.ay=n.ty}})}
function reset(){ns=[];const k=3+R(3);for(let i=0;i<k;i++)ns.push(mk(10+R(89 …Excerpt — the full answer is on the round page.
▶ R156 · Invent 3 product names + taglines for a fictional object (no superlatives)author reference Open round →
1. StandClip — Folds, clamps, and keeps the bag upright. 2. SnackAnchor — One size grips bags up to 15 cm. 3. FreshFold Trio — Three silicone clips, dishwasher-safe, airtight every time.
▶ R157 · Rewrite the same product text for two different audiences, facts unchangedauthor reference Open round →
(a) Teenagers: The AquaGlow bottle packs 750 ml and keeps your drink ice cold for a solid 12 hours. It's made from BPA-free plastic and comes with a built-in straw, so you can sip without even unscrewing anything. Toss it in the dishwasher when you're done, and grab it in any of 4 colors. (b) Seniors: The AquaGlow bottle holds a generous 750 ml and keeps your beverages pleasantly cold for a full 12 hours. It is made from BPA-free plastic and includes a built-in straw, so drinking requires no effort at all. For your convenience it is dishwasher-safe, and you may choose from 4 colors.
▶ R158 · 5 email subject lines under 50 chars, no clickbait, no ALL-CAPSauthor reference Open round →
1. Winter jackets: 20% off Nov 1-15 2. Save 20% on winter jackets through Nov 15 3. Free returns now last 60 days 4. Jacket sale, free returns, quick app survey 5. Two weeks of 20% off, plus a favor to ask
▶ R159 · Micro-story: exactly 50 words (±5) with 3 mandatory elementsauthor reference Open round →
The 8:14 pulled out as she reached the platform, red umbrella snapping open against the rain. She almost wept. Then, across the tracks, a stranger raised an identical red umbrella, a small bright lighthouse in the grey drizzle. He waved. She waved. Neither of them caught the next train either.
▶ R160 · Critique a generic slogan in 2 sentences + give 2 better alternativesauthor reference Open round →
"Quality You Can Trust" makes no verifiable claim: it names no product, no use case, and no measurable property, so a buyer learns nothing about how many hours of sun the charger needs or whether it survives a wet week on the trail. It is also fully interchangeable — the identical line could sit under a mattress brand, an accounting firm, or a tire shop without changing a single word, which means it does zero work distinguishing this charger from the dozen others on the same shelf. 1. "Full Battery by Lunch. Sun Included." 2. "Rain, Drops, and Six Days Off-Grid — Still Charging."
▶ R161 · Selection sort vs shell sort racing side by sideauthor reference Open round →
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Selection Sort vs Shell Sort</title>
<style>html,body{margin:0;height:100%;background:#080c18;overflow:hidden}canvas{display:block}</style></head><body><canvas id="c"></canvas><script>
const c=document.getElementById('c'),g=c.getContext('2d');let W=0,H=0,DPR=1;
function rs(){DPR=Math.min(2,devicePixelRatio||1);W=innerWidth;H=innerHeight;c.width=W*DPR;c.height=H*DPR;g.setTransform(DPR,0,0,DPR,0,0);}
addEventListener('resize',rs);rs();
const N=30;let src=[],P=[],fin=0,hold=0;
function selP(){return{t:'SELECTION SORT',a:src.slice(),cmp:0,i:0,j:1,m:0,pre:0,done:0,anim:null,rank:0,
tag(){return'min index '+this.m},hi(){return[this.j<N?this.j:-1,this.m]},
step(){const a=this.a;if(this.i>=N-1){this.pre=N;this.done=1;return}
if(this.j<N){this.cmp++;if(a[this.j]<a[t …Excerpt — the full answer is on the round page.
▶ R162 · Breadth-first search flooding a random grid mazeauthor reference Open round →
<meta charset="utf-8">
<title>BFS Flood</title>
<style>
html,body{margin:0;height:100%;background:#080b12;color:#bfe3ff;font:14px/1.5 system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
#h{letter-spacing:.04em;font-variant-numeric:tabular-nums}
#h b{color:#fff}
canvas{border-radius:10px;box-shadow:0 0 60px #0a84ff44,0 0 0 1px #ffffff14}
</style>
<div id="h"></div>
<canvas id="c" width="640" height="480"></canvas>
<script>
const C=20,R=15,S=32,x2=c.getContext("2d");
let g,dist,par,front,wave,visited,start,goal,mode,path,pi,t0,last=0;
const idx=(x,y)=>y*C+x,ri=n=>Math.floor(Math.random()*n);
function gen(){
g=[];for(let i=0;i<C*R;i++)g.push(Math.random()<0.25?1:0);
start=[ri(3),ri(3)];goal=[C-1-ri(3),R-1-ri(3)];
g[idx(start[0],start[1])]=0;g[idx(goal[0],goal[1])]=0;
dist=new Int32Array(C*R).fill(-1);par=new Int32Array(C*R).fil …Excerpt — the full answer is on the round page.
▶ R163 · Prim's algorithm growing a minimum spanning treeauthor reference Open round →
<meta charset="utf-8"><title>Prim MST</title>
<style>html,body{margin:0;height:100%;background:#080d1a;display:flex;align-items:center;justify-content:center}canvas{max-width:100%;max-height:100%}</style>
<canvas id=c width=900 height=650></canvas>
<script>
const c=document.getElementById('c'),x=c.getContext('2d');
const W=900,GH=455,CH=180,PAD=36,R=225,SC=520,GR=340;
let N,nodes,edges,inT,tree,total,hist,mst,pend,st,done,last=0,neo=-1;
function build(){
N=20+(Math.random()*6|0);nodes=[];
for(let i=0;i<N;i++){let k=0,p;do{p={x:PAD+Math.random()*(W-2*PAD),y:PAD+18+Math.random()*(GH-2*PAD-18)};k++}while(k<70&&nodes.some(q=>Math.hypot(q.x-p.x,q.y-p.y)<62));nodes.push(p)}
const all=[];for(let i=0;i<N;i++)for(let j=i+1;j<N;j++)all.push({a:i,b:j,w:Math.hypot(nodes[i].x-nodes[j].x,nodes[i].y-nodes[j].y)});
all.sort((p,q)=>p.w-q.w);
const par=[...Array(N).keys()],f=i=>par[i]==i?i:par[i]=f(par[i] …Excerpt — the full answer is on the round page.
▶ R164 · Boids flocking with separation, alignment, cohesion and a predatorauthor reference Open round →
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Flock & Predator</title>
<style>html,body{margin:0;height:100%;background:#070b12;overflow:hidden}canvas{display:block}
#h{position:fixed;left:16px;top:14px;font:12px/1.5 ui-monospace,Menlo,monospace;color:#6fe0ff;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 0 10px rgba(0,170,255,.7);pointer-events:none}
#h b{color:#fff;font-size:16px}#h i{color:#ff6a7a;font-style:normal}</style></head><body>
<canvas id="c"></canvas><div id="h">Boids <b id="n">0</b> · <i>1 predator</i></div>
<script>
var c=document.getElementById('c'),g=c.getContext('2d'),N=document.getElementById('n'),W,H,B,P,t;
function rs(){W=c.width=innerWidth;H=c.height=innerHeight}
addEventListener('resize',rs);rs();
function R(a,b){return a+Math.random()*(b-a)}
function init(){ …Excerpt — the full answer is on the round page.
▶ R165 · Recursive backtracker carving a maze, then solving itauthor reference Open round →
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Maze Carver & Wanderer</title>
<style>
html,body{margin:0;height:100%;background:#080b12;color:#c8d8ef;font:13px/1.4 system-ui,Segoe UI,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
#hud{display:flex;gap:26px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:#7288a8}
b{color:#7df9ff;font-variant-numeric:tabular-nums;font-weight:600}
canvas{border-radius:10px;box-shadow:0 0 50px #08a6ff26,0 0 0 1px #1c2942}
</style></head><body>
<div id="hud"><span>phase <b id="ph">carve</b></span><span>cells carved <b id="cc">0</b></span><span>solve steps <b id="ss">0</b></span></div>
<canvas id="cv" width="704" height="508"></canvas>
<script>
const C=25,R=18,S=28,x=document.getElementById('cv').getContext('2d');
const ph=document.getElementById('ph'),ec=document.getE …Excerpt — the full answer is on the round page.
▶ R166 · Faithful 3-sentence summary of a chaotic meeting transcriptauthor reference Open round →
The team agreed to move the weekly status update from Friday afternoon to Monday morning, starting next week. The team also adopted Priya's new simplified ticket labeling scheme of five labels instead of twelve, and Priya will update the shared labeling guide document by Wednesday so everyone can start using it. Tom will send out the updated calendar invite reflecting the Monday change by end of day Friday, and the office plant budget discussion was deferred to the next meeting with no decision made today.
▶ R167 · One-sentence TL;DR under 25 wordsauthor reference Open round →
Nova Analytics v4.2 adds dashboards, scheduled exports, and dark mode, but the legacy /v1/reports endpoint shuts down, requiring migration to /v3/reports by September 30, 2026.
▶ R168 · Extract action items as a checklistauthor reference Open round →
1. Maria -- finalize the new homepage copy and send it to Ben for review -- by Thursday (Jul 30) 2. Ben -- review Maria's homepage copy and send feedback back to her -- by Friday (Jul 31) 3. Chen -- fix the broken contact form and push the fix -- by Monday (Aug 3) 4. Maria -- chase the client again for confirmation of the new logo colors -- today (Jul 29) 5. Ben -- send the updated privacy policy draft to legal -- by next Wednesday (Aug 5)
▶ R169 · Neutral summary of a biased product rantauthor reference Open round →
The reviewer reports that the blender jug leaks liquid around the base seal whenever it is filled above the halfway mark, resulting in liquid on the counter. They also state that on the 10-speed dial, settings 4 through 7 produce no noticeable difference in sound or operation. Additionally, the motor is described as overheating and switching off automatically after about 90 seconds of continuous blending, which limits its use with thicker mixtures.
▶ R170 · Compress a how-to into exactly 5 numbered stepsauthor reference Open round →
1. Mix 100g whole wheat flour with 100g room-temperature water (21°C) in glass jar. 2. Cover loosely, leave somewhere warm for 24 hours. 3. Day two: discard half, feed 100g flour and 100g water; wait 24 hours. 4. Repeat daily discard-and-feed about 5 more days until bubbles and tangy smell (day 7). 5. Bake once starter reliably doubles within 4-6 hours after feeding.
▶ R171 · Fireworks bursting into fading sparksauthor reference Open round →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Fireworks</title>
<style>
html,body{margin:0;padding:0;height:100%;background:#05060d;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:14px;top:12px;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;color:#cfd6ff;letter-spacing:.06em;text-shadow:0 0 8px rgba(90,120,255,.7);pointer-events:none;user-select:none}
#hud b{color:#fff;font-weight:600}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud">PARTICLES <b id="n">0</b></div>
<script>
const c=document.getElementById('c'),x=c.getContext('2d'),nEl=document.getElementById('n');
let W,H,D=Math.min(devicePixelRatio||1,2);
function fit(){W=innerWidth;H=innerHeight;c.width=W*D;c.height=H*D;x.setTransform(D,0,0,D,0,0)}
fit();addEventListener('resize',fit); …Excerpt — the full answer is on the round page.
▶ R172 · Raindrops sliding down a window paneauthor reference Open round →
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Regen am Fenster</title>
<style>
html,body{margin:0;height:100%;background:#04060a;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:14px;top:12px;color:#d5e6ff;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 4px #000;opacity:.75;pointer-events:none;user-select:none}
</style>
<canvas id="c"></canvas><div id="hud"></div>
<script>
const c=document.getElementById('c'),x=c.getContext('2d'),hud=document.getElementById('hud');
const R=(a,b)=>a+Math.random()*(b-a),TAU=6.2832;
let W,H,bg,bx,drops,trails,t,life,rate,dpr;
function scene(){
bg=document.createElement('canvas');
bg.width=140;bg.height=Math.max(4,Math.round(140*H/Math.max(1,W)));
bx=bg.getContext('2d');
const w=bg.width,h=b …Excerpt — the full answer is on the round page.
▶ R173 · Metaball lava lamp with heating and cooling blobsauthor reference Open round →
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Metaball Lava Lamp</title><style>
html,body{margin:0;height:100%;background:radial-gradient(circle at 50% 42%,#1b1020,#06040a 70%);display:flex;align-items:center;justify-content:center;overflow:hidden}
canvas{max-width:100vw;max-height:100vh;border-radius:14px}
</style></head><body><canvas id="c" width="420" height="680"></canvas><script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
const W=420,H=680,TOP=54,BOT=628,CX=210,S=5,TH=.62;
const gw=Math.ceil(W/S),gh=Math.ceil(H/S);
const oc=document.createElement('canvas');oc.width=gw;oc.height=gh;
const og=oc.getContext('2d'),img=og.createImageData(gw,gh),D=img.data;
const hw=y=>{const u=Math.max(0,Math.min(1,(y-TOP)/(BOT-TOP)));return 34+96*Math.pow(Math.sin(Math.PI*(.12+.8*u)),1.4)};
let B=[], …Excerpt — the full answer is on the round page.
▶ R174 · Recursive fractal tree growing branch by branchauthor reference Open round →
<meta charset="utf-8">
<title>Wachsender Fraktal-Baum</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#05080e}
body{background:radial-gradient(130% 95% at 50% 6%,#1d3050 0%,#0c1220 46%,#05080e 100%)}
canvas{display:block;position:fixed;inset:0}
#h{position:fixed;left:16px;top:14px;font:600 12px/1.6 ui-sans-serif,system-ui,sans-serif;
color:#a9c2e6;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 8px #000;pointer-events:none}
#h b{color:#8ef0b8;font-size:20px;letter-spacing:.02em;vertical-align:-1px}
#h i{font-style:normal;opacity:.55}
</style>
<canvas id=c></canvas>
<div id=h>Zweige <b id=n>0</b> <i>/ <span id=t>0</span></i></div>
<script>
const C=document.getElementById('c'),g=C.getContext('2d'),
EN=document.getElementById('n'),ET=document.getElementById('t');
let W,H,N,ord,D,hb,grown,hold,last=0;
const R=(a,b)=>a+Math.random()*(b-a);
function si …Excerpt — the full answer is on the round page.
▶ R175 · Noise flowfield painting additive particle trailsauthor reference Open round →
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Noise Flowfield</title>
<style>
html,body{margin:0;height:100%;background:#05060a;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:16px;top:14px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8ea6cc;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 10px #000,0 0 3px #000;pointer-events:none;user-select:none}
#hud b{color:#eaf3ff;font-weight:600}
</style></head><body>
<canvas id="c"></canvas>
<div id="hud">Particles <b id="n">0</b> · Field <b id="f">1</b></div>
<script>
var c=document.getElementById('c'),g=c.getContext('2d'),nEl=document.getElementById('n'),fEl=document.getElementById('f');
var W,H,D,P=new Uint8Array(512),ps=[],count=0,sc,turns,hueBase,speed,drift,t=0,next=0,wipe=0 …Excerpt — the full answer is on the round page.
▶ R176 · Fix exactly the errors, change nothing elseauthor reference Open round →
On Monday morning, the small archive opened its new reading room to local students. The room has six desks, two lamps, and a shelf for returned notebooks. Before the first group arrived, Mara checked the sign-in sheet and placed pencils beside each chair. She noticed that one window was stuck, but the hallway was quiet and the heater worked well. At nine o'clock, twelve students entered the archive, greeted the staff, and began comparing old town maps. Their teacher asked them to write short notes about every map they handled. One student found a drawing of the river bridge, and another matched it to a photograph from 1912. By noon, the class had labeled the boxes, cleaned the tables, and thanked Mara for her help. The visit ended on time, and the archive stayed open for regular visitors after lunch.
▶ R177 · Make the numbers consistentauthor reference Open round →
Workshop attendance report: The registration desk recorded 18 participants: 7 from North Hall, 6 from East Studio, and 5 from River Annex. The header currently says 18 participants attended. The event ran on Wednesday, March 4, 2026, and the same paragraph later calls it Wednesday. The room booking confirmation and the posted schedule both list Wednesday, March 4, 2026. For the feedback survey, 15 of the 18 participants submitted forms. The draft summary says this equals 83%, but 15 out of 18 is 83% when rounded to the nearest whole percent.
▶ R178 · Remove redundancy without losing factsauthor reference Open round →
The neighborhood mobile clinic opens April 8. It will operate at the Maple Community Center on Maple Street, with regular weekly hours every Wednesday from 10 a.m. to 4 p.m. Services include free blood pressure checks, vaccinations, and short medical consultations, all at no cost. Residents can book appointments by phone or in person at the center. Spanish and Vietnamese interpreters will be available during clinic hours, so visitors who need help in either language can get it whenever the clinic is open.
▶ R179 · Unify tense and perspectiveauthor reference Open round →
At dawn, I stepped onto the station platform and checked the timetable. I noticed the last train number blinking on the board before the screen went dark. I waited beside the vending machine, but I kept looking toward the empty tracks. The loudspeaker crackled, and I heard a short apology for the delay. Then I walked to the ticket office, where the clerk handed over a paper voucher. I folded the voucher into my notebook and thought about the missed connection. I finally boarded the replacement bus, and I sat near the back window. As the bus left town, I watched the station lights disappear behind the rain.
▶ R180 · Fix the broken referencesauthor reference Open round →
Maintenance note for the demo room: The tablet is stored in the blue cabinet, and it must be charged before each session. The projector was tested after lunch; the projector should remain unplugged overnight. See the cleaning checklist. Setup steps: 1. Unlock the cabinet. 2. Place the tablet on the stand. 3. Start the room timer.
179 of these entries are author references from blind rounds — this model answered the same prompt outside the blind field, so they are not counted in the statistics above.