Claude Fable 5

Der Ball kostet 0,05 Euro. Wenn der Ball x kostet, kostet der Schläger x + 1,00 Euro, zusammen also 2x + 1,00 = 1,10 Euro. Daraus folgt x = 0,05 Euro – der Schläger kostet 1,05 Euro, und die Differenz beträgt genau 1,00 Euro.

Position 1: Grün
Position 2: Rot
Position 3: Blau
Position 4: Gelb

Begründung: Laut Fakt (2) steht Grün fest auf Position 1. Fakten (1) und (3) verlangen die direkte Abfolge Rot–Blau–Gelb (Rot direkt links von Blau, Gelb direkt rechts von Blau). Dieser Dreierblock passt nur noch auf die Positionen 2–4, also Rot auf 2, Blau auf 3 und Gelb auf 4.

1) 'to bite the bullet' – in den sauren Apfel beißen (etwas Unangenehmes endlich durchziehen)
2) 'the ball is in your court' – Jetzt bist du am Zug. (Die Entscheidung liegt bei dir.)
3) 'it's raining cats and dogs' – Es gießt wie aus Eimern. (Es regnet in Strömen.)

1. Frisch geputzt, ganz ohne Plastik.
2. Sanft zu Zähnen und Umwelt.
3. Bambus im Griff, Frische im Mund.

Rechenweg:
1) Stunden pro Jahr: 365 Tage × 24 Stunden = 8.760 Stunden
2) Minuten pro Jahr: 8.760 Stunden × 60 Minuten = 525.600 Minuten

Endergebnis: 525600

Die nächste Zahl ist 33. Regel: Die Differenzen verdoppeln sich jeweils (+1, +2, +4, +8, +16) – gleichbedeutend mit „nächste Zahl = 2 × vorherige Zahl − 1", also 2 × 17 − 1 = 33.

Bevor wir ausliefern, muss ich die Testergebnisse überprüfen und schließlich noch zwei Fehler beheben.

Hi, kurze Info: Unser Meeting musste leider verschoben werden – wir treffen uns jetzt morgen um 10 Uhr. Liebe Grüße!

Diese Edelstahl-Trinkflasche begleitet dich überall: absolut auslaufsicher, hält sie Getränke stundenlang heiß oder kalt und ist spülmaschinenfest. Robuster, geschmacksneutraler Edelstahl, angenehm leicht – ideal für Büro, Sport und Reisen. Einfach befüllen, losziehen, genießen.

function isPalindrome(s) {
  const t = s.toLowerCase().replace(/[^a-z0-9]/g, '');
  return t === t.split('').reverse().join('');
}

{
  "name": "Anna Schmidt",
  "alter": 30,
  "stadt": "Freiburg",
  "hobbys": ["Lesen", "Radfahren"],
  "newsletterAbonniert": true
}

9. „Alle bis auf 9 sterben" bedeutet, dass genau 9 Schafe übrig bleiben und am Leben sind.

5 Minuten. Jede Maschine stellt in 5 Minuten genau ein Teil her, denn 5 Maschinen schaffen in 5 Minuten 5 Teile. Also produzieren 100 Maschinen parallel in denselben 5 Minuten 100 Teile.

[
  {"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"}
]

It's not exactly perfect, but let's not blow this out of proportion — at the end of the day, we can live with it.

Energy conservation: the potential energy lost equals the kinetic energy gained (frictionless incline).

(a) Speed at the bottom
m*g*h = (1/2)*m*v²  →  v = sqrt(2*g*h)
v = sqrt(2 * 9.8 m/s² * 5 m) = sqrt(98 m²/s²) ≈ 9.9 m/s

(b) Kinetic energy at the bottom
KE = m*g*h = 2 kg * 9.8 m/s² * 5 m = 98 J
(Check: KE = ½ * 2 kg * (9.899 m/s)² = 98 J ✓)

Final answers:
(a) v ≈ 9.9 m/s
(b) KE = 98 J

(a) km/h → m/s
108 km/h = 108,000 m / 3600 s = 108 / 3.6 = 30.0 m/s

(b) km/h → mph
108 km/h ÷ 1.60934 km/mile = 67.108... mph ≈ 67.1 mph

Final answers:
(a) 30.0 m/s
(b) 67.1 mph

Orbital radius (from Earth's center):
r = 6371 km + 400 km = 6771 km

(a) Orbital speed
v = sqrt(μ/r) = sqrt(398600 km³/s² / 6771 km) = sqrt(58.87 km²/s²) ≈ 7.67 km/s

(b) Orbital period
T = 2πr/v = 2π * 6771 km / 7.67 km/s ≈ 42544 km / 7.673 km/s ≈ 5545 s
5545 s / 60 ≈ 92.4 minutes

Final answers:
(a) v ≈ 7.67 km/s
(b) T ≈ 92 minutes (≈ 92.4 min)

(a) Resistance (Ohm's law)
R = V / I = 12 V / 0.5 A = 24 Ω

(b) Power dissipated
P = V * I = 12 V * 0.5 A = 6 W
(Check: P = I²R = 0.5² * 24 = 6 W ✓)

Final answers:
(a) R = 24 Ω
(b) P = 6 W

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 = 3/30 − 2/30 = 1/30
d_i = 30 cm

(b) Magnification
m = −d_i/d_o = −30/15 = −2

Interpretation: d_i is positive, so the image is real (formed on the far side of the lens, 30 cm from it). m is negative with |m| = 2, so the image is inverted and twice the size of the object.

Final answers:
(a) d_i = 30 cm
(b) m = −2 (real, inverted, magnified 2×)

Given: m = 2 kg, c = 4186 J/(kg·K), ΔT = 80°C − 20°C = 60 K.

Q = m * c * ΔT
Q = 2 kg * 4186 J/(kg·K) * 60 K
Q = 502,320 J

Final answer:
Q = 502,320 J ≈ 502.32 kJ (about 502 kJ)

Fermi estimate, step by step:

1. Population: 10,000,000 people.
2. Household size: ~2.5 people per household → 10,000,000 / 2.5 = 4,000,000 households.
3. Share of households owning a piano: roughly 1 in 50 (2%) → 4,000,000 * 0.02 = 80,000 pianos. Add schools, churches, concert halls, studios — call it ~100,000 pianos in the city.
4. Tuning frequency: a typical piano gets tuned about once a year (many less often, some more) → ~100,000 tunings per year demanded.
5. A tuner's capacity: a tuning takes ~1.5–2 hours including travel, so ~4 tunings per working day; at ~250 working days per year that's ~1,000 tunings per tuner per year.
6. Number of tuners: 100,000 tunings / 1,000 tunings per tuner ≈ 100 tuners.

Estimate: on the order of 100 professional piano tuners (roughly 50–200 as a plausible range).

Sunlight looks white, but it is actually a mix of all the colors of the rainbow. As this light passes through the atmosphere, it bumps into air molecules that are far smaller than the light's wavelength. These tiny molecules scatter the light in all directions — but they don't scatter every color equally. Short-wavelength light (blue and violet) gets scattered much more strongly than long-wavelength light (red and orange).

So while the sun's direct rays come straight at you, blue light gets bounced around all over the sky before reaching your eyes. Wherever you look, you see this scattered blue light coming from every direction — which is why the whole sky appears blue. (Violet is scattered even more, but the sun emits less of it and our eyes are less sensitive to it, so the sky looks blue rather than violet.)

The physical phenomenon responsible is Rayleigh scattering — the scattering …

Excerpt — the full answer is on the round page.

Why a moving clock runs slow

Special relativity rests on one strange fact: everyone measures light moving at the same speed, no matter how they themselves are moving. Now picture the simplest possible clock — a pulse of light bouncing up and down between two mirrors, one "tick" per bounce. If that clock flies past you, you see the light pulse trace a zigzag path: it moves up and down, but also sideways along with the clock. That slanted path is longer than the straight up-and-down path. Since the light still travels at the same speed for you, it needs more time to complete each tick. So from your point of view, the moving clock ticks more slowly. And this isn't a quirk of light clocks — all physical processes (mechanical clocks, chemistry, heartbeats, aging) must slow in step, otherwise you could detect "absolute motion," which relativity forbids. Time itself, as measured for the moving …

Excerpt — the full answer is on the round page.

The setup: particles (electrons or photons) are fired one at a time at a barrier with two narrow slits, and a screen behind it records where each one lands.

What happens without a detector

Each particle arrives at the screen as a single, localized dot — it looks perfectly particle-like. But as thousands of dots accumulate, they don't form the two simple bands you'd expect if each particle went through one slit or the other. Instead they build up an interference pattern: alternating stripes of many hits and almost no hits, exactly like the pattern made by overlapping ripples of water passing through two openings. This is astonishing because the particles were sent one at a time — there was nothing else for each one to interfere with. The only explanation is that each individual particle travels as a wave that passes through both slits at once and interferes with itself; where the wave c …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Double Slit</title>
<style>html,body{margin:0;background:#04040c;overflow:hidden}canvas{display:block;margin:0 auto}</style></head>
<body><canvas id="c" width="900" height="600"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const W=900,H=600,SRC=70,BAR=300,SCR=852,CY=H/2;
const acc=document.createElement('canvas');acc.width=W;acc.height=H;
const actx=acc.getContext('2d');
const gap=46,slitH=16,s1=CY-gap/2,s2=CY+gap/2;
const b=0.052,cEnv=0.011;
let count=0,parts=[];
function sinc(x){return x===0?1:Math.sin(x)/x}
function intensity(dy){const s=sinc(cEnv*dy);return Math.cos(b*dy)**2*s*s}
function sampleY(){
  for(let i=0;i<300;i++){
    const dy=(Math.random()*2-1)*270;
    if(Math.random()<intensity(dy))return CY+dy;
  }
  return CY;
}
function spawn(){
  const sl=Math.random()<0.5?s1:s2;
  parts.p …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Verlet Rope</title>
<style>html,body{margin:0;background:#0b0e14;overflow:hidden}canvas{display:block;margin:0 auto}</style></head>
<body><canvas id="c" width="900" height="620"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const W=900,H=620,N=40;
const A1={x:280,y:90},A2={x:620,y:90};
const ropeLen=560,seg=ropeLen/(N-1);
const pts=[];
for(let i=0;i<N;i++){
  const t=i/(N-1);
  const x=A1.x+(A2.x-A1.x)*t;
  const y=A1.y+Math.sin(t*Math.PI)*120;
  pts.push({x,y,px:x,py:y});
}
const G=0.45,DAMP=0.995,PASSES=35;
let frame=0;
function impulse(){
  const dir=Math.random()<0.5?-1:1;
  for(let i=4;i<N-4;i++){
    const w=Math.sin((i/(N-1))*Math.PI);
    pts[i].px-=dir*9*w;
  }
}
function step(){
  for(let i=0;i<N;i++){
    const p=pts[i];
    const vx=(p.x-p.px)*DAMP,vy=(p.y-p.py)*DAMP;
    p.px=p.x;p.p …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>2D Wave Equation</title>
<style>html,body{margin:0;background:#000;overflow:hidden}canvas{display:block;margin:0 auto}</style></head>
<body><canvas id="c" width="960" height="720"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const GW=160,GH=120,SC=6;
const off=document.createElement('canvas');off.width=GW;off.height=GH;
const octx=off.getContext('2d');
const img=octx.createImageData(GW,GH);
let u=new Float32Array(GW*GH),up=new Float32Array(GW*GH),un=new Float32Array(GW*GH);
const C2=0.28,DAMP=0.9965;
let frame=0;
function pulse(){
  const cx=8+Math.floor(Math.random()*(GW-16));
  const cy=8+Math.floor(Math.random()*(GH-16));
  const R=6,amp=Math.random()<0.5?1:-1;
  for(let y=cy-R;y<=cy+R;y++)for(let x=cx-R;x<=cx+R;x++){
    const d2=(x-cx)*(x-cx)+(y-cy)*(y-cy);
    if(d2<=R*R)u[y*GW+x]+=amp*3*M …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Billiard Break</title>
<style>html,body{margin:0;background:#14100c;overflow:hidden}canvas{display:block;margin:0 auto}</style></head>
<body><canvas id="c" width="940" height="520"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const W=940,H=520,M=36,R=12;
const COLS=["#ffd400","#1c54d8","#e02020","#7a1fa2","#ff7f1f","#1a7f3c","#8b1a1a","#222","#c9a800","#3a6fe0"];
let balls=[],state="play",wait=0;
function rack(){
  balls=[];
  const rx=650,ry=H/2,d=R*2+0.6;
  let n=0;
  for(let row=0;row<4;row++)
    for(let k=0;k<=row;k++){
      if(n>=10)break;
      balls.push({x:rx+row*d*0.87+(Math.random()-0.5)*0.4,y:ry+(k-row/2)*d,vx:0,vy:0,n:++n});
    }
  const ang=(Math.random()-0.5)*0.05;
  balls.push({x:210,y:ry+(Math.random()-0.5)*30,vx:15*Math.cos(ang),vy:15*Math.sin(ang),n:0});
  state="play";
}
fu …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Value Noise Terrain</title><style>html,body{margin:0;height:100%;overflow:hidden;background:#000}canvas{display:block}#h{position:fixed;top:10px;left:10px;color:#fff;font:14px monospace;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:6px}</style></head><body><canvas id="c"></canvas><div id="h"></div><script>
const cv=document.getElementById("c"),g=cv.getContext("2d"),hud=document.getElementById("h");
let W,H;function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight}onresize=rs;rs();
let seed=0,off=0,runT=0;
function reset(){seed=(Math.random()*1e9)>>>0;off=0;runT=0}
reset();
function hash(i){let t=(i+seed)|0;t=Math.imul(t^t>>>15,2246822519);t=Math.imul(t^t>>>13,3266489917);return((t^t>>>16)>>>0)/4294967296}
function vnoise(p,o){const i=Math.floor(p),f=p-i,u=f*f*(3-2*f);return hash(i+o*1013904)*(1-u)+hash(i+1+o*1013904)*u …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Gray-Scott Reaction-Diffusion</title><style>html,body{margin:0;height:100%;overflow:hidden;background:#000}canvas{display:block;width:100vw;height:100vh;image-rendering:auto}#h{position:fixed;top:10px;left:10px;color:#fff;font:14px monospace;background:rgba(0,0,0,.5);padding:6px 10px;border-radius:6px}</style></head><body><canvas id="c"></canvas><div id="h"></div><script>
const N=160,cv=document.getElementById("c"),g=cv.getContext("2d"),hud=document.getElementById("h");
cv.width=N;cv.height=N;
const A=new Float32Array(N*N),B=new Float32Array(N*N),A2=new Float32Array(N*N),B2=new Float32Array(N*N);
const img=g.createImageData(N,N),px=img.data;
const presets=[[.0367,.0649],[.055,.062],[.029,.057],[.026,.051],[.022,.051],[.018,.051],[.03,.0565]];
let f,k,steps=0;
function reset(){
const p=presets[Math.random()*presets.length|0];
f=p[0]+ …

Excerpt — the full answer is on the round page.

<meta charset="utf-8">
<title>Langton's Ant</title>
<style>
body{margin:0;min-height:100vh;background:#14161c;color:#dfe3ea;font:14px/1.4 monospace;display:flex;flex-direction:column;align-items:center;justify-content:center}
h1{font-size:18px;margin:14px 0 4px;font-weight:normal;letter-spacing:2px}
#hud{margin:4px 0 10px;color:#8fd0ff}
canvas{border:1px solid #3a3f4c;image-rendering:pixelated;box-shadow:0 0 24px rgba(0,0,0,.6)}
</style>
<h1>LANGTON'S ANT</h1>
<div id="hud">Steps: 0</div>
<canvas id="c"></canvas>
<script>
var C=document.getElementById('c'),X=C.getContext('2d'),H=document.getElementById('hud');
var N=201,S=3,SPF=300;
C.width=C.height=N*S;
var dx=[0,1,0,-1],dy=[-1,0,1,0];
var g,ax,ay,ad,steps;
function cell(x,y,v){X.fillStyle=v?'#000':'#fff';X.fillRect(x*S,y*S,S,S);}
function reset(){
  g=new Uint8Array(N*N);
  X.fillStyle='#fff';X.fillRect(0,0,N*S,N*S);
  ax=70+(Math.rand …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Rule 110</title>
<style>
html,body{margin:0;height:100%;background:#111;color:#eee;font-family:monospace;overflow:hidden}
#wrap{display:flex;flex-direction:column;height:100%}
#hud{padding:6px 10px;font-size:14px;background:#1b1b1b;border-bottom:1px solid #333}
canvas{flex:1;width:100%;height:100%;display:block;image-rendering:pixelated}
</style>
</head>
<body>
<div id="wrap">
<div id="hud">Rule 110 &mdash; row <span id="row">0</span></div>
<canvas id="c"></canvas>
</div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('row');
const CELL=4,STEP=3;
let cols,rows,state,rowIdx,y,frame,firstRun=true;
function resize(){
  const r=cv.getBoundingClientRect();
  cv.width=Math.max(60,Math.floor(r.width/CELL)); …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Wireworld Clock Loop with Diode</title>
<style>
body{margin:0;background:#05060d;color:#cfd6e4;font:14px/1.4 system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}
h1{font-size:16px;font-weight:600;margin:10px 0 4px;color:#8ab4ff}
#hud{margin:4px 0 10px;font-variant-numeric:tabular-nums}
#hud b{color:#ffd75e}
canvas{background:#0a0c16;border:1px solid #222a3c;max-width:96vw;height:auto}
.leg{font-size:12px;color:#7c8598;margin:8px 0 12px}
.leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 12px;vertical-align:-1px}
</style>
</head>
<body>
<h1>Wireworld &mdash; Clock Loop with Diode</h1>
<div id="hud">Step <b id="s">0</b>  |  Electrons <b id="e">0</b></div>
<can …

Excerpt — the full answer is on the round page.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Abelian Sandpile</title>
<style>
html,body{margin:0;height:100%;background:#07070e;color:#cfd3e6;font:14px/1.4 ui-monospace,monospace}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
#hud{letter-spacing:.5px;text-align:center}
canvas{width:min(92vw,80vh);image-rendering:pixelated;border:1px solid #23233a;border-radius:4px}
</style>
<body>
<div id="hud"></div>
<canvas id="c"></canvas>
<script>
const N=151,C=(N>>1)*N+(N>>1),cv=document.getElementById('c'),hud=document.getElementById('hud'),ctx=cv.getContext('2d');
cv.width=cv.height=N;
const img=ctx.createImageData(N,N),px=img.data;
let g,drops,tops,pal,done,wait;
const st=[];
function hsl(H,S,L){H=((H%360)+360)%360;const f=n=>{const k=(n+H/30)%12;return Math.round(25 …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Brian's Brain</title>
<style>
body{margin:0;background:#0b0e14;color:#cdd6f4;font-family:monospace;display:flex;flex-direction:column;align-items:center;min-height:100vh;justify-content:center}
canvas{image-rendering:pixelated;border:1px solid #333;max-width:96vw;height:auto}
#hud{padding:8px;font-size:14px}
</style>
</head>
<body>
<div id="hud">gen 0 &middot; live 0</div>
<canvas id="c" width="480" height="480"></canvas>
<script>
const N=120,cv=document.getElementById("c"),ctx=cv.getContext("2d"),hud=document.getElementById("hud");
const S=cv.width/N;
let a=new Uint8Array(N*N),b=new Uint8Array(N*N),gen=0;
const COL=["#0b0e14","#ffd94a","#4a7dff"];
function seed(){gen=0;for(let i=0;i<N*N;i++)a[i]=Math.random()<0.3?1:0;}
function step(){
 let live=0;
 f …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Truchet Flow</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#0b0e17}
canvas{display:block}
#hud{position:fixed;left:14px;bottom:12px;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;
color:#9fb4d8;background:rgba(10,14,25,.65);border:1px solid rgba(140,170,220,.25);
border-radius:8px;padding:8px 12px;pointer-events:none;letter-spacing:.4px}
#hud b{color:#e8f0ff;font-weight:600}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud"></div>
<script>
"use strict";
const cv=document.getElementById("c"),X=cv.getContext("2d"),hud=document.getElementById("hud");
const PI=Math.PI,H=PI/2,FADE=550,LIFE=42000;
let W,Hh,s,cols,rows,T,flips,born,gen=0,lastFlip="0";
function init(){
  W=cv.width=innerWidth;Hh=cv.height=innerHeig …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Hilbert Curve</title>
<style>
html,body{margin:0;height:100%;background:#0b0e14;color:#dfe6f0;font:14px/1.4 system-ui,sans-serif;overflow:hidden}
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
canvas{background:#10141d;border-radius:8px;box-shadow:0 0 40px rgba(0,0,0,.6)}
#hud{position:fixed;top:12px;left:14px;background:rgba(10,13,20,.7);padding:8px 14px;border-radius:8px;border:1px solid #2a3140}
#hud b{color:#8fd3ff}
</style>
</head>
<body>
<div id="wrap"><canvas id="c"></canvas></div>
<div id="hud">Hilbert curve &mdash; order <b id="o">-</b> &middot; points <b id="n">-</b> &middot; drawn <b id="p">0</b></div>
<script>
(function(){
var cv=document.getElementById('c'),ctx=cv.getContext('2d');
var oEl=document.get …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Islamic Star Pattern</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#0c0a14}
canvas{display:block}
#h{position:fixed;left:12px;bottom:10px;color:#e8d9a0;font:13px/1.4 monospace;
background:rgba(12,10,20,.55);padding:4px 10px;border-radius:6px;letter-spacing:.5px;pointer-events:none}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="h"></div>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d'),hd=document.getElementById('h');
let W,H,R,polys,S,N,cs,t0,spd,col2,bg='#0c0a14';
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight;R=Math.hypot(W,H)/2}
function rot(v,a){const c=Math.cos(a),s=Math.sin(a);return[v[0]*c-v[1]*s,v[0]*s+v[1]*c]}
function ix(p,d,q,e){const n=d[0]*e[1]-d[1]*e[0],s=((q[0]-p[0] …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Moire Rings</title>
<style>
html,body{margin:0;height:100%;background:#101014;color:#dfe3ea;font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
canvas{background:#fff;border-radius:6px;box-shadow:0 4px 24px rgba(0,0,0,.6);max-width:96vw;max-height:82vh}
#hud{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;padding:4px 10px}
#hud span{color:#8ab4ff}
</style>
</head>
<body>
<canvas id="c" width="760" height="760"></canvas>
<div id="hud">
<div>angle <span id="ha">0.0&deg;</span></div>
<div>offset <span id="ho">0.0 px</span></div>
<div>shift <span id="hs">(0, 0)</span></div>
<div>run <span id="ht">0 s</span></div>
</div>
<script>
"use strict";
var cv=document. …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Aperiodic Rhombus Tiling</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#0b0b12}
canvas{display:block}
#hud{position:fixed;top:12px;left:14px;color:#e8e8f0;font:14px/1.5 system-ui,sans-serif;
background:rgba(10,10,20,.55);padding:8px 14px;border-radius:8px;letter-spacing:.03em;pointer-events:none}
#hud b{font-size:16px}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud"></div>
<script>
(function(){
"use strict";
var cv=document.getElementById("c"),ctx=cv.getContext("2d"),hud=document.getElementById("hud");
var PHI=(1+Math.sqrt(5))/2,INV=1/PHI,MAXGEN=7,STEP=1500;
var W,H,DPR;
function resize(){DPR=Math.min(window.devicePixelRatio||1,2);
W=window.innerWidth;H=window.innerHeight;
cv.width=W*DPR;cv.height=H*DPR;cv.style.width=W …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ant Colony</title>
<style>
html,body{margin:0;height:100%;background:#0a0a0f;overflow:hidden}
canvas{display:block}
#h{position:fixed;top:10px;left:12px;color:#eee;font:14px monospace;background:rgba(0,0,0,.5);padding:6px 10px;border-radius:6px;pointer-events:none}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="h"></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('h');
const W=cv.width=innerWidth,H=cv.height=innerHeight;
const CS=5,GW=Math.ceil(W/CS),GH=Math.ceil(H/CS);
const N=220,SPD=1.7,SD=14,SA=.55;
let ph,ants,foods,nest,home;
const R=(a,b)=>a+Math.random()*(b-a);
function init(){
 ph=new Float32Array(GW*GH);
 nest={x:R(W*.3,W*.7),y:R(H*.3,H*.7)};
 foods=[];
 for(let i=0;i<3;i++){
  let fx,fy;
  do{fx=R(40,W-40);fy=R(40,H-40)}while(Math.hypot(fx-nest.x,fy-ne …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Physarum</title><style>html,body{margin:0;background:#000;height:100%;overflow:hidden}canvas{position:absolute;inset:0;width:100vw;height:100vh}#h{position:fixed;top:8px;left:10px;color:#9f9;font:13px monospace;z-index:1;text-shadow:0 0 4px #000}</style></head><body><canvas id="c"></canvas><div id="h"></div><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('h');
const W=360,H=240;cv.width=W;cv.height=H;
const N=8000,SA=0.45,SD=9,TA=0.35,SP=1.2;
let ax,ay,aa,trail,tmp,step;
function reset(){ax=new Float32Array(N);ay=new Float32Array(N);aa=new Float32Array(N);
for(let i=0;i<N;i++){const r=Math.random()*70,t=Math.random()*6.2832;
ax[i]=(W/2+Math.cos(t)*r+W)%W;ay[i]=(H/2+Math.sin(t)*r*0.7+H)%H;aa[i]=Math.random()*6.2832;}
trail=new Float32Array(W*H);tmp=new Float32Array(W*H);step=0;}
rese …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Predator-Prey</title><style>html,body{margin:0;background:#000;height:100%;overflow:hidden}canvas{position:absolute;inset:0;width:100vw;height:100vh}#h{position:fixed;top:8px;left:10px;color:#fff;font:13px monospace;z-index:1;text-shadow:0 0 4px #000}</style></head><body><canvas id="c"></canvas><div id="h"></div><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('h');
const W=480,H=320;cv.width=W;cv.height=H;
const CS=8,GW=W/CS,GH=H/CS;
let food,prey,pred,step;
const rnd=(a,b)=>a+Math.random()*(b-a);
function reset(){food=new Float32Array(GW*GH);
for(let i=0;i<food.length;i++)food[i]=Math.random();
prey=[];pred=[];
for(let i=0;i<160;i++)prey.push({x:rnd(0,W),y:rnd(0,H),a:rnd(0,6.28),e:rnd(4,8)});
for(let i=0;i<16;i++)pred.push({x:rnd(0,W),y:rnd(0,H),a:rnd(0,6.28),e:rnd(8,14)});
step=0; …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Nagel-Schreckenberg Ring Road</title>
<style>
html,body{margin:0;height:100%;background:#0b0e14;color:#dfe6f0;font-family:system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center}
h1{font-size:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8fa3bf;margin:.6em 0 .2em}
#hud{font-size:.85rem;color:#aab8cc;margin-bottom:.5em}
#hud b{color:#fff;font-variant-numeric:tabular-nums}
canvas{max-width:92vw;max-height:70vh}
#legend{display:flex;gap:1.2em;font-size:.75rem;color:#8fa3bf;margin-top:.5em}
.sw{display:inline-block;width:.8em;height:.8em;border-radius:50%;margin-right:.35em;vertical-align:-.1em}
</style>
</head>
<body>
<h1>Nagel&ndash;Schreckenberg Traffic Ring</h1>
<div id="hud">avg spe …

Excerpt — the full answer is on the round page.

<!doctype html>
<meta charset="utf-8">
<title>Crowd Exit</title>
<style>html,body{margin:0;height:100%;overflow:hidden;background:#0b0e14}canvas{display:block}#h{position:fixed;top:10px;left:14px;color:#dfe6f0;font:14px/1.5 monospace;pointer-events:none}#h b{color:#7fd0ff}</style>
<canvas id="c"></canvas>
<div id="h"></div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('h');
let W,H,RX,RY,RW,RH,DX,DG=26,P=[],exT=[],escaped=0,runs=0,emptyT=0,lt=0;
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight;RW=Math.min(780,W-60);RH=Math.min(520,H-150);RX=(W-RW)/2;RY=70}
rs();addEventListener('resize',rs);
function spawn(){runs++;escaped=0;exT=[];emptyT=0;DX=RX+RW*(.3+.4*Math.random());P=[];const N=280+(Math.random()*60|0);
for(let i=0;i<N;i++)P.push({x:RX+12+Math.random()*(RW-24),y:RY+12+Math.random()*(RH*.72),vx:0,vy:0,r:4+Math.random()*1 …

Excerpt — the full answer is on the round page.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bresenham Reveal</title>
<style>
html,body{margin:0;height:100%;background:#05070d;overflow:hidden}
canvas{display:block}
#h{position:fixed;top:12px;left:14px;font:12px/1.5 ui-monospace,Menlo,monospace;color:#8fe6ff;background:rgba(5,10,20,.65);border:1px solid rgba(120,200,255,.25);padding:8px 12px;border-radius:8px;letter-spacing:.4px;pointer-events:none;white-space:pre}
</style>
<body>
<canvas id="c"></canvas>
<div id="h"></div>
<script>
const cv=document.getElementById("c"),g=cv.getContext("2d"),hud=document.getElementById("h");
const W=cv.width=innerWidth,H=cv.height=innerHeight;
const img=g.createImageData(W,H),buf=new Uint32Array(img.data.buffer);
const BG=0xff120a08,TAU=Math.PI*2;
let count=0;
const px=(x,y,c)=>{if(x>=0&&y>=0&&x<W&&y<H){buf[y*W+x]=c;c …

Excerpt — the full answer is on the round page.

<!doctype html>
<html><head><meta charset="utf-8"><title>De Casteljau Construction</title>
<style>
html,body{margin:0;height:100%;background:#0b0e14;overflow:hidden}
canvas{display:block}
#hud{position:fixed;top:12px;left:14px;color:#cdd6f4;font:13px/1.6 ui-monospace,monospace;pointer-events:none;text-shadow:0 1px 3px #000}
#hud b{color:#f9e2af}
</style></head><body>
<canvas id="c"></canvas><div id="hud"></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight}
rs();addEventListener('resize',rs);
const COL=['#f38ba8','#fab387','#a6e3a1','#89b4fa'],IC=['#94e2d5','#cba6f7'];
let P,t,speed;
function rnd(a,b){return a+Math.random()*(b-a)}
function init(){
P=[];
for(let i=0;i<4;i++)P.push({x:rnd(.15,.85)*W,y:rnd(.15,.85)*H,vx:rnd(-1,1)*20,vy:rnd(-1,1)*20});
t=0;speed=1 …

Excerpt — the full answer is on the round page.

<title>Sutherland-Hodgman Clipping</title>
<style>
body{margin:0;background:#0d1117;color:#c9d1d9;font:14px/1.5 monospace;display:flex;flex-direction:column;align-items:center}
h1{font-size:16px;margin:14px 0 4px;color:#e6edf3}
#hud{margin:2px 0 8px;font-size:13px}
canvas{background:#161b22;border:1px solid #30363d;border-radius:6px;max-width:96vw}
#leg{font-size:12px;margin:8px 0;color:#8b949e}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 12px;vertical-align:middle}
</style>
<h1>Sutherland&ndash;Hodgman Polygon Clipping</h1>
<div id="hud"></div>
<canvas id="cv" width="900" height="540"></canvas>
<div id="leg">
<span class="sw" style="background:#8b949e"></span>original outline
<span class="sw" style="background:#f85149"></span>after left
<span class="sw" style="background:#d29922"></span>after right
<span class="sw" style="background:#a371f7"></span>a …

Excerpt — the full answer is on the round page.

<meta charset="utf-8">
<title>Floyd-Steinberg Dither</title>
<style>
html,body{margin:0;height:100%;background:#0b0e14;color:#cdd6e4;font:14px/1.4 monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
canvas{width:min(90vw,640px);height:auto;image-rendering:pixelated;border:1px solid #2a3242;background:#000}
#hud{letter-spacing:.5px}
b{color:#7fd4a8}
</style>
<canvas id="c" width="192" height="144"></canvas>
<div id="hud"></div>
<script>
const W=192,H=144,cv=document.getElementById("c"),ctx=cv.getContext("2d"),hud=document.getElementById("hud"),img=ctx.createImageData(W,H),buf=new Float32Array(W*H);
let P,levels,seed,a,b2,c2,d2,e2,f2,frame,life;
function reset(){
  seed=Math.random()*1000;
  levels=2+((Math.random()*4)|0);
  a=2+Math.random()*6;b2=2+Math.random()*6;
  c2=1+Math.random()*3;d2=1+Math.random()*3;
  e2=.3+Math.random()*.8;f2=.2+Math …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Scanline Even-Odd Fill</title>
<style>
html,body{margin:0;height:100%;background:#0b0e14;color:#cdd6f4;font:14px/1.4 monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
canvas{background:#11141c;border:1px solid #2a2f3d;border-radius:8px;max-width:96vw;max-height:80vh}
#hud{letter-spacing:.5px}
b{color:#8be9fd}
</style>
</head>
<body>
<canvas id="c" width="640" height="480"></canvas>
<div id="hud">scanlines: <b id="sl">0</b>   spans filled: <b id="sp">0</b></div>
<script>
"use strict";
var cv=document.getElementById("c"),ctx=cv.getContext("2d"),
slE=document.getElementById("sl"),spE=document.getElementById("sp"),
W=cv.width,H=cv.height,CX=W/2,CY=H/2;

var inst=null;

function newInstance(){
  var n=5+(Math.r …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A* Search</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#0b0e14}
canvas{display:block}
#hud{position:fixed;top:10px;left:10px;color:#dfe6f0;font:13px/1.5 monospace;background:rgba(10,14,20,.75);padding:8px 12px;border-radius:6px;border:1px solid #2a3444;pointer-events:none}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud"></div>
<script>
var cv=document.getElementById("c"),X=cv.getContext("2d"),hud=document.getElementById("hud");
var cs=16,cols,rows,N,grid,start,goal,open,g,came,closed,expanded=0,path=[],pi=0,phase=0,wait=0,h0=1,status="searching";
function hx(i){return i%cols}
function hy(i){return (i/cols)|0}
function heur(i){return Math.abs(hx(i)-hx(goal))+Math.abs(hy(i)-hy(goal))}
function cell(i,col){X.fillStyle=col;X.fillRect(hx(i)*cs+1,hy(i)*cs+1,cs-2,cs-2)}
function freeCell(){va …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Maze Generator — Recursive Backtracking</title>
<style>
html,body{margin:0;height:100%;background:#0b0e14;color:#cdd6f4;font-family:system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
h1{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#89b4fa;margin:0}
#hud{font-size:13px;color:#9399b2;font-variant-numeric:tabular-nums}
#hud b{color:#a6e3a1}
canvas{background:#11141d;border:1px solid #2a2f3d;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:94vw;height:auto}
</style>
</head>
<body>
<h1>Maze Generation &middot; Randomized DFS</h1>
<canvas id="c" width="720" height="480"></canvas>
<div id="hud">Carved: <b id="n">0</b> / <span id="t">0</span> cells &m …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<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:#0b0e14;color:#dfe6f0;font-family:system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
#hud{font-size:14px;letter-spacing:.5px;color:#9fb3c8}
#hud b{color:#e6edf5}
canvas{background:#11151f;border-radius:8px;box-shadow:0 4px 30px rgba(0,0,0,.5)}
</style>
</head>
<body>
<div id="hud">step <b id="st">0</b>  |  cells filled <b id="fc">0</b></div>
<canvas id="cv"></canvas>
<script>
(function(){
var cv=document.getElementById("cv"),cx=cv.getContext("2d");
var stEl=document.getElementById("st"),fcEl=document.getElementById("fc");
var W=64,H=44,S=12;
cv.width=W*S;cv.height=H*S;
var grid,dist,frontier,step,filled,maxD,phase,pause,seed …

Excerpt — the full answer is on the round page.

<!doctype html><html><head><meta charset="utf-8"><title>Dijkstra Grid</title><style>html,body{margin:0;height:100%;background:#111;overflow:hidden}canvas{display:block}</style></head><body><canvas id="c"></canvas><script>
const cv=document.getElementById("c"),g=cv.getContext("2d");
let W=46,Hh=30,S,ox,oy,cost,dist,prev,done,open,src,tgt,phase,settledN,path,pi,pause,pathCost;
function rnd(n){return Math.floor(Math.random()*n)}
function reset(){
cv.width=innerWidth;cv.height=innerHeight;
S=Math.max(4,Math.floor(Math.min(cv.width/W,(cv.height-36)/Hh)));
ox=(cv.width-S*W)/2;oy=(cv.height-36-S*Hh)/2+36;
const N=W*Hh;
cost=new Array(N);dist=new Array(N).fill(Infinity);prev=new Array(N).fill(-1);done=new Array(N).fill(false);
for(let i=0;i<N;i++)cost[i]=1+rnd(9);
do{src=rnd(N);tgt=rnd(N)}while(Math.abs(src%W-tgt%W)+Math.abs((src/W|0)-(tgt/W|0))<W*0.7);
dist[src]=0;open=[src];phase=0;settledN=0; …

Excerpt — the full answer is on the round page.

<!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%;overflow:hidden;background:#0b0e14}
canvas{display:block}
#hud{position:fixed;top:12px;left:14px;color:#e8ebf2;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;background:rgba(8,10,16,.6);padding:7px 12px;border-radius:8px;pointer-events:none;letter-spacing:.3px}
#hud b{color:#ffd166}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud"></div>
<script>
const c=document.getElementById("c"),g=c.getContext("2d"),hud=document.getElementById("hud"),S=4;
let cols,rows,own,cur,seeds,claimed,total,ring,pause;

function reset(){
  const W=c.width=innerWidth,H=c.height=innerHeight;
  cols=Math.ceil(W/S);rows=Math.ceil(H/S);
  own=new Int16Array(cols*rows).fill(-1);
  seeds=[];cur=[];c …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bubble Sort Visualization</title>
<style>
html,body{margin:0;height:100%;background:#0e1116;color:#e6e9ef;font-family:system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center}
h1{font-size:1.1rem;font-weight:600;margin:0 0 .35rem;letter-spacing:.04em}
#stats{font-size:.9rem;color:#9aa4b2;margin-bottom:.6rem}
#stats b{color:#e6e9ef;font-variant-numeric:tabular-nums}
canvas{background:#161b22;border:1px solid #2a3140;border-radius:8px;max-width:94vw;height:auto}
.legend{display:flex;gap:1.1rem;margin-top:.6rem;font-size:.78rem;color:#9aa4b2}
.legend span::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:2px;margin-right:.35em;vertical-align:-.05em;background:var(--c)}
</style>
</head>
<b …

Excerpt — the full answer is on the round page.

<!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:#0b0e14;color:#e6e9f0;font:14px/1.4 system-ui,sans-serif;overflow:hidden}
#wrap{display:flex;flex-direction:column;height:100%}
header{display:flex;gap:22px;align-items:baseline;padding:14px 20px;flex-wrap:wrap}
h1{font-size:16px;margin:0;font-weight:600;letter-spacing:.05em}
#swaps{font-variant-numeric:tabular-nums;color:#ffd166;font-weight:600}
.leg{display:flex;gap:14px;font-size:12px;color:#9aa3b2;flex-wrap:wrap}
.leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px}
canvas{flex:1;width:100%;display:block}
</style>
</head>
<body>
<div id="wrap">
<header>
<h1>QUICKSORT</h1>
<div id="swaps">Swaps: 0</div>
<div class="leg">
<span><i style="ba …

Excerpt — the full answer is on the round page.

<!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:#0d1117;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,M=50,P=Math.ceil(Math.log2(N));
let W,H,bw,order,run,pass,lo,mid,hi,mov,t,dt,phase,wait,mergeNo;
function slotX(i){return M+i*bw}
function init(){
  W=cv.width=innerWidth;H=cv.height=innerHeight;bw=(W-2*M)/N;
  order=[];
  for(let i=0;i<N;i++)order.push({v:.06+.94*Math.random(),x:0,sx:0,tx:0,c:0});
  order.forEach((b,i)=>b.x=slotX(i));
  run=1;pass=1;lo=0;mov=null;phase=0;wait=0;mergeNo=0;
  findMerge();
}
function findMerge(){
  for(;;){
    if(run>=N){phase=2;wait=150;order.forEach(b=>b.c=3);return} …

Excerpt — the full answer is on the round page.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Heap Sort Visualization</title>
<style>
html,body{margin:0;height:100%;background:#0d1117;overflow:hidden}
canvas{display:block}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById("c"),ctx=cv.getContext("2d");
let W,H;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight}
addEventListener("resize",resize);resize();
const N=80,STEPS=3;
let a,swaps,sortedFrom,hl,phase,gen,pause;
function reset(){
a=Array.from({length:N},()=>0.05+Math.random()*0.95);
swaps=0;sortedFrom=N;hl=[];phase="building max-heap";gen=run();pause=0;
}
function*sift(i,m){
for(;;){
let l=2*i+1,r=l+1,b=i;
if(l<m&&a[l]>a[b])b=l;
if(r<m&&a[r]>a[b])b=r;
hl=[i];
if(l<m)hl.push(l);
if(r<m)hl.push(r);
yield;
if(b===i)return;
[a[i],a[b]]=[a[b] …

Excerpt — the full answer is on the round page.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>LSD Radix Sort</title>
<style>
html,body{margin:0;height:100%;background:#0b0e14;overflow:hidden}
canvas{display:block}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
let W,H;
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight}
rs();
addEventListener('resize',rs);
const N=80,PASSES=3,MAXV=999,NAMES=['1s (ones)','10s (tens)','100s (hundreds)'];
let bars,arr,pass,phase,timer;
function digit(v,p){return Math.floor(v/Math.pow(10,p))%10}
function init(){
 bars=[];
 for(let i=0;i<N;i++)bars.push({v:1+Math.floor(Math.random()*MAXV),x:i,tx:i});
 arr=bars.slice();
 pass=-1;phase='wait';timer=40;
}
function startPass(){
 pass++;
 if(pass>=PASSES){phase='done';timer=140;return}
 co …

Excerpt — the full answer is on the round page.

Sunday. Two days before Thursday is Tuesday, so the day after tomorrow is Tuesday. Counting back two days from Tuesday gives Sunday as today.

Assume average daily water intake (drinking water + beverages): ~2 L/day.
Assume adult drinking span: from age 0-ish averaged out, use full lifetime of ~80 years.
Days per year: 365.25 → 80 × 365.25 ≈ 29,220 days.
Total: 29,220 days × 2 L/day ≈ 58,440 L.
Rounding for uncertainty (intake varies 1.5–3 L/day):

60,000

Ana owns the parrot, Ben owns the cat, and Cleo owns the dog. Since Ana is allergic to fur, she cannot own the cat or the dog, so she must have the parrot. Ben's pet cannot fly, and the dog's owner is older than Ben (so it isn't Ben), which leaves Ben with the cat. Therefore the dog belongs to the remaining friend, Cleo.

The answer is 52.

Reasoning: We need x ≡ 1 (mod 3), x ≡ 2 (mod 5), x ≡ 3 (mod 7).

Start with the last two conditions. Numbers that are 3 mod 7: 3, 10, 17, 24, 31, 38, 45, 52, ... Among these, we need remainder 2 mod 5: 17 works (17 = 3·5 + 2). So x ≡ 17 (mod 35).

Now check the candidates 17, 52, 87, ... against the first condition (x ≡ 1 mod 3):
- 17 → 17 = 5·3 + 2, remainder 2. No.
- 52 → 52 = 17·3 + 1, remainder 1. Yes.

Verification of 52: 52 ÷ 3 = 17 remainder 1; 52 ÷ 5 = 10 remainder 2; 52 ÷ 7 = 7 remainder 3. All conditions hold.

By the Chinese Remainder Theorem the solution is unique modulo 3·5·7 = 105, so the smallest positive such number is 52.

The probability is 2/11.

Of the 36 equally likely outcomes, 11 include at least one 4 (six with a 4 on the first die, six with a 4 on the second, minus the double-counted (4,4)). Among these, the sum is 9 only for (4,5) and (5,4), i.e. 2 outcomes. By the definition of conditional probability, P(sum = 9 | at least one 4) = (2/36)/(11/36) = 2/11.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Double Pendulum</title>
<style>
html,body{margin:0;height:100%;background:#0b0e14;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;top:12px;left:14px;color:#9fd8ff;font:14px/1.4 monospace;
background:rgba(10,15,25,.55);padding:8px 12px;border-radius:8px;pointer-events:none}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud">t = 0.0 s</div>
<script>
(function(){
"use strict";
var cv=document.getElementById("c"),ctx=cv.getContext("2d"),hud=document.getElementById("hud");
var W,H,CX,CY,SC;
function resize(){
  var d=Math.min(2,window.devicePixelRatio||1);
  W=window.innerWidth;H=window.innerHeight;
  cv.width=W*d;cv.height=H*d;
  ctx.setTransform(d,0,0,d,0,0);
  CX=W/2;CY=H*0.34;
  SC=Math.min(W,H)*0.42;
}
wi …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Cloth</title>
<style>
html,body{margin:0;height:100%;background:#0b0e14;overflow:hidden}
canvas{display:block}
#hud{position:fixed;top:12px;left:14px;color:#cfe9ff;font:13px/1.5 monospace;text-shadow:0 1px 4px #000;pointer-events:none}
#bar{width:160px;height:6px;background:#1c2433;border-radius:3px;overflow:hidden;margin-top:4px}
#fill{height:100%;width:0;background:linear-gradient(90deg,#3fa9f5,#9ff);transition:width .08s linear}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud"><div id="txt"></div><div id="bar"><div id="fill"></div></div></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const txt=document.getElementById('txt'),fill=document.getElementById('fill');
let W,H;
function resize(){
const d=Math.min …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<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:#000;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#h{position:fixed;top:14px;left:16px;color:#fff;font:600 15px/1.5 system-ui,sans-serif;
background:rgba(0,0,0,.45);padding:8px 14px;border-radius:8px;letter-spacing:.03em;
pointer-events:none;text-shadow:0 1px 3px #000}
#h small{opacity:.7;font-weight:400}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="h"></div>
<script>
const cv=document.getElementById('c'),cx=cv.getContext('2d'),
off=document.createElement('canvas'),ox=off.getContext('2d'),
hud=document.getElementById('h'),S=3;
let W,H,gw,gh,img,P,L;
function rnd(a,b){return a+Math.random()*(b-a)}
function h2r(h,s,l){
  const a=s*Math.m …

Excerpt — the full answer is on the round page.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>N-Body</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#000}
canvas{display:block}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById("c"),g=cv.getContext("2d");
let W,H;
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight;g.fillStyle="#000";g.fillRect(0,0,W,H)}
rs();
addEventListener("resize",rs);
const G=1200;
let B=[];
function init(){
  B=[];
  const s={m:2600+Math.random()*900,x:W/2+(Math.random()*40-20),y:H/2+(Math.random()*40-20),vx:0,vy:0,star:1};
  B.push(s);
  const rmax=Math.min(W,H)/2-60;
  for(let i=0;i<6;i++){
    const m=6+Math.random()*54;
    const r=90+Math.random()*Math.max(60,rmax-90);
    const a=Math.random()*Math.PI*2;
    const v=Math.sqrt(G*s.m/r)*(0.92+Math.random …

Excerpt — the full answer is on the round page.

<!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:#060b16;overflow:hidden;font-family:monospace}
#c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);filter:blur(5px) contrast(22) saturate(1.3);border-radius:10px}
#box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:3px solid #3d5f8f;border-radius:12px;pointer-events:none;box-shadow:0 0 30px #123 inset}
#a{position:fixed;top:16px;left:50%;transform:translateX(-50%);color:#9fd4ff;font-size:18px;letter-spacing:1px;text-shadow:0 0 8px #1a5}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="box"></div>
<div id="a"></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),B=document.getElementById('box'),A=document.g …

Excerpt — the full answer is on the round page.

That was a complete flop — now we're left holding the bag, but giving up is out of the question.

Subject: Complaint – Defective Blender (Refund or Replacement Requested)

Dear Sir or Madam,

I am writing to report a serious fault with the blender I recently purchased from you. After only two days of use, the appliance stopped working entirely and emitted sparks, which raises significant safety concerns.

Given that the product failed so quickly and in such a hazardous manner, I request either a full refund or a replacement unit at your earliest convenience. Please let me know how you intend to resolve this matter and whether you require the defective item to be returned.

I look forward to your prompt response.

Yours faithfully,
[Your Name]

To receive the benefit, you must submit the fully completed application on time. Otherwise, you lose your entitlement to it.

Da haben wir ganz klar Mist gebaut — das wollen wir gar nicht schönreden. Aber wir bringen das wieder in Ordnung, und Sie zahlen dafür keinen Cent.

We may have to postpone the current appointment; this is a delicate issue, and I don't want to stir up any bad blood.

{
  "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"
  }
}

[
  {
    "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
  }
]

1. 240.47
2. 1001, 1003, 1006
3. Order 1005 (Schmidt, Chair, 3 x 89.50) with a total value of 268.50

{
  "title": "Q3 Roadmap Kickoff",
  "date": "2026-08-18",
  "time": "10:30",
  "location": "Conference Room B, Berlin office (3rd floor)",
  "attendees": ["Sarah", "Tom", "Priya"]
}

timeout: 30 -> 45
debug: false -> true
max_connections: 100 -> 150

<meta charset="utf-8">
<title>BST Animation</title>
<style>
html,body{margin:0;height:100%;background:#0b1020;overflow:hidden}
canvas{display:block}
#hud{position:fixed;top:12px;left:14px;color:#9fd0ff;font:14px/1.4 monospace;pointer-events:none}
</style>
<div id="hud"></div>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),cx=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight}
rs();onresize=rs;
let root,pending,phase,timer,path,pi,count,target,last=0,total=0;
function reset(){
  root=null;count=0;path=[];pi=-1;target=null;timer=0;phase='insert';
  const s=new Set(),n=15+Math.floor(Math.random()*6);
  while(s.size<n)s.add(1+Math.floor(Math.random()*99));
  pending=[...s];total=n;
}
function insert(v){
  const nd={v,l:null,r:null};
  if(!root){root=nd}else{
    let c=root;
    for(;;){
      i …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Hash Table Collision Animation</title>
<style>
html,body{margin:0;height:100%;background:#0e1116;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");
let W,H;
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight}
rs();addEventListener("resize",rs);
const NB=12;
let buckets,total,target,drops,timer,phase,fade;
function reset(){
buckets=Array.from({length:NB},()=>[]);
total=0;
target=40+Math.floor(Math.random()*21);
drops=[];
timer=0;
phase="run";
fade=0;
}
reset();
function spawn(){
const key=Math.floor(Math.random()*900)+100;
const b=key%NB;
drops.push({key,b,y:-30,t:0,landed:false});
}
function geom(){
const m=Math …

Excerpt — the full answer is on the round page.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Min-Heap Animation</title>
<style>
html,body{margin:0;height:100%;background:#0d1420;overflow:hidden}
#i{position:fixed;top:10px;left:14px;color:#dfe8f5;font:bold 15px monospace;z-index:2}
canvas{display:block}
</style>
<div id="i"></div>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d'),info=document.getElementById('i');
let W,H;
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight}
rs();onresize=rs;
let heap=[],ins=0,ext=0,msg='',hl=-1,hl2=-1,extracted=null;
let waitT=0,tween=null,mv=null;
function pos(i){
 const d=Math.floor(Math.log2(i+1)),k=i-(2**d-1),n=2**d;
 return{x:W*(k+.5)/n,y:90+d*Math.min(95,(H-160)/4)};
}
function ease(t){t=Math.min(t,1);return t*t*(3-2*t)}
function*pause(t){waitT=t;while(waitT>0)yield}
function*doSwap(i,j){
 tween={i,j,t:0,dur:420};
 while(tween …

Excerpt — the full answer is on the round page.

<!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:#0b0f14;display:flex;align-items:center;justify-content:center;overflow:hidden}
canvas{width:min(96vmin,640px);height:min(96vmin,640px)}
</style>
</head>
<body>
<canvas id="c" width="640" height="640"></canvas>
<script>
var cv=document.getElementById('c'),x=cv.getContext('2d');
var N=18,CX=320,CY=320,R=210,TAU=Math.PI*2;
var slots,p,cn,cnt,pt,ct,pr,cr,flash,wasFull,t0,dur,last=0;
function reset(){
  slots=new Array(N).fill(0);
  p=0;cn=0;cnt=0;pt=0;ct=0;
  pr=1.2+Math.random()*2.5;
  cr=1.2+Math.random()*2.5;
  flash=0;wasFull=false;
  t0=performance.now();
  dur=40000+Math.random()*30000;
}
function clamp(v,a,b){return v<a?a:v>b?b:v}
function step(dt){
  pr=clamp(pr+(Math.random()-. …

Excerpt — the full answer is on the round page.

<!doctype html><html><head><meta charset="utf-8"><title>Linked List</title><style>html,body{margin:0;height:100%;background:#0f1424;overflow:hidden}canvas{display:block}</style></head><body><canvas id="c"></canvas><script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
const BW=58,BH=34,GX=104,GY=92,X0=36,Y0=110,HL=.7,SW=1.1,MV=.7;
let W,H,nd=[],ph='wait',tm=.8,op=null,e1=0,e2=0;
const R=n=>Math.random()*n|0,ease=t=>t*t*(3-2*t),lp=(a,b,t)=>a+(b-a)*t;
function mk(){return{v:R(90)+10,x:0,y:0,tx:0,ty:0,a:1}}
function lay(s){const per=Math.max(2,(W-X0*2)/GX|0);nd.forEach((n,i)=>{n.tx=X0+(i%per)*GX;n.ty=Y0+((i/per)|0)*GY;if(s){n.x=n.tx;n.y=n.ty}})}
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight;lay(0)}
addEventListener('resize',rs);
function fresh(){nd=[];const c=3+R(3);for(let i=0;i<c;i++)nd.push(mk());lay(1);ph='wait';tm=1;op=null}
rs();fresh();
function start(){ …

Excerpt — the full answer is on the round page.

1. SnapStand — Seals tight, stands tall, stays fresh.
2. CrispKeeper — Fold, clip, done. Freshness that stands up.
3. BagButler — Your snacks, sealed and standing at attention.

(a) Teenagers: The AquaGlow bottle is seriously handy — it holds 750 ml and keeps your drink ice-cold for a full 12 hours, so it survives school, practice, and everything after. It's made from BPA-free plastic and has a built-in straw, so you can just grab it and sip without unscrewing anything. Cleanup is zero effort since it's dishwasher-safe, and you can pick from 4 colors to match your vibe.

(b) Seniors: The AquaGlow bottle is a practical companion for every day: it holds a generous 750 ml and keeps beverages pleasantly cold for up to 12 hours. It is made from BPA-free plastic and features a built-in straw, which makes drinking comfortable and convenient. Cleaning is easy as well — the bottle is dishwasher-safe — and it comes in a choice of 4 attractive colors.

1. 20% off winter jackets, Nov 1-15
2. Winter jacket sale + free 60-day returns
3. New: free returns within 60 days
4. Save 20% on jackets and share your feedback
5. Your November update: sale, survey, returns

The 7:14 left without her. Rain hammered the cold, empty platform while she stood beneath her red umbrella, watching taillights vanish. Then a stranger's small window glowed across the tracks, steady as a lighthouse. She crossed over, knocked, and asked about the next train. He said morning. She said perfect.

"Quality You Can Trust" is completely interchangeable — it could sit under a logo for a bank, a butcher, or a mattress brand without changing a word, so it does nothing to signal solar charging, phones, or the outdoors. It also makes no specific, verifiable claim: it names no benefit a hiker could test or picture, unlike a promise about charging speed, weather resistance, or staying powered off-grid.

1. "Full Bars, Zero Outlets — Solar Power for the Trail."
2. "Charge Your Phone Where the Grid Ends."

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sort Race: Selection vs Shell</title>
<style>
html,body{margin:0;height:100%;background:#0d1117;display:flex;align-items:center;justify-content:center}
canvas{max-width:100%;height:auto}
</style>
</head>
<body>
<canvas id="c" width="960" height="500"></canvas>
<script>
const N=30,C=document.getElementById('c'),X=C.getContext('2d'),W=C.width,H=C.height,PW=W/2;
let ord=0,cool=0;
function mk(){let a=[...Array(N)].map((_,i)=>(i+1)/N);for(let i=N-1;i>0;i--){let j=Math.random()*(i+1)|0;[a[i],a[j]]=[a[j],a[i]]}return a}
function fin(p){p.done=1;p.hi=[];p.rank=++ord}
const L={x:0,name:"SELECTION SORT",col:"#4da3ff",
 init(a){this.a=a.slice();this.comps=0;this.done=0;this.rank=0;this.anim=null;this.hi=[];this.st={i:0,m:0,j:1}},
 step(){const s=this.st,a=this.a;
  if(s.i>=N-1){fin(this);return}
  if(s.j<N){this.comps++;this.hi=[s.m,s.j];i …

Excerpt — the full answer is on the round page.

<title>BFS Flood</title>
<style>body{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b0f1a;color:#cfe4ff;font-family:monospace}canvas{border:1px solid #2a3a55;border-radius:6px;max-width:96vw}#s{margin:10px;font-size:15px}</style>
<div id=s></div>
<canvas id=c width=800 height=600></canvas>
<script>
const C=20,R=15,S=40,cv=document.getElementById("c"),g=cv.getContext("2d"),inf=document.getElementById("s");
let grid,dist,prev,frontier,ring,phase,path,pi,visited,t=0;
function reset(){
grid=Array.from({length:R},()=>Array.from({length:C},()=>Math.random()<.25?1:0));
grid[0][0]=0;grid[R-1][C-1]=0;
dist=Array.from({length:R},()=>Array(C).fill(-1));
prev={};dist[0][0]=0;frontier=[[0,0]];ring=0;phase=0;path=null;pi=0;visited=1;t=0}
function bfsStep(){
const nf=[];let hit=false;
for(const[r,c]of frontier)for(const[dr,dc]of[[1,0] …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prim's MST</title>
<style>
body{margin:0;background:#0e1116;color:#dde3ea;font-family:monospace;display:flex;flex-direction:column;align-items:center}
canvas{background:#141922;margin-top:10px;border-radius:8px}
#info{margin:8px;font-size:14px}
</style>
</head>
<body>
<div id="info"></div>
<canvas id="c" width="860" height="640"></canvas>
<script>
const cv=document.getElementById('c'),cx=cv.getContext('2d'),info=document.getElementById('info');
const GW=860,GH=470,CH=150,CY=GH+15;
let nodes,edges,inTree,treeEdges,curEdge,phase,timer,totalW,hist,start;
function dist(a,b){return Math.hypot(a.x-b.x,a.y-b.y)}
function init(){
 nodes=[];
 const n=20+Math.floor(Math.random()*6);
 let tries=0;
 while(nodes.length<n&&tries<3000){
  tries++;
  const p={x:40+Math.random()*(GW-80),y:40+Math.random()*(GH-80)};
  if(nodes.every(q=>dist(p,q)> …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Boids with Predator</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#0b1020}
canvas{display:block}
#hud{position:fixed;top:10px;left:12px;color:#cfe3ff;font:14px/1.4 monospace;background:rgba(10,16,32,.6);padding:6px 10px;border-radius:6px;pointer-events:none}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud"></div>
<script>
var cv=document.getElementById("c"),cx=cv.getContext("2d"),hud=document.getElementById("hud"),W,H;
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight}
rs();addEventListener("resize",rs);
var N=60,PER=100,SEP=26,PRED=120,MAXS=2.6,MAXF=0.06,boids,pred,t;
function reset(){
t=0;boids=[];
for(var i=0;i<N;i++){
var a=Math.random()*Math.PI*2;
boids.push({x:Math.random()*W,y:Math.random()*H,v …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Maze Carver &amp; Solver</title>
<style>
body{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b0e14;color:#cdd6f4;font:14px/1.4 monospace}
#h{margin-bottom:10px;letter-spacing:.5px}
b{color:#89dceb}
canvas{background:#11141c;box-shadow:0 0 24px #000;border-radius:4px}
</style>
<div id="h">carved: <b id="a">0</b>/450  |  steps: <b id="b">0</b>  |  phase: <b id="p">carving</b></div>
<canvas id="c" width="800" height="576"></canvas>
<script>
var cv=document.getElementById('c'),g=cv.getContext('2d'),ea=document.getElementById('a'),eb=document.getElementById('b'),ep=document.getElementById('p');
var C=25,R=18,S=32,N=C*R,GOAL=N-1;
var D=[[0,-1,1,4],[1,0,2,8],[0,1,4,1],[-1,0,8,2]];
var w,vis,st,carved,phase,exp,dead,sst,steps,pause;
function idx(cx,cy){return cy*C+c …

Excerpt — the full answer is on the round page.

The team decided to move the weekly status update from Friday afternoon to Monday morning starting next week, and Tom will send out the updated calendar invite reflecting this change by end of day Friday. The team also decided to adopt Priya's new ticket labeling system with five labels instead of twelve, and Priya will update the shared labeling guide document by Wednesday so everyone can start using it. The office plant budget discussion was postponed to the next meeting with no decision made today.

Nova Analytics v4.2 adds new features but shuts down the legacy /v1/reports API, requiring all integrations to migrate to /v3/reports by September 30, 2026.

1. Maria -- finalize the new homepage copy and send it to Ben for review -- by Thursday (Jul 31)
2. Ben -- review the homepage copy and send feedback to Maria -- by Friday (Aug 1)
3. Chen -- fix the broken contact form and push the fix -- by Monday (Aug 4)
4. Maria -- chase the client again about confirming the new logo colors -- by today (Jul 29)
5. Ben -- send the updated privacy policy draft to legal -- by next Wednesday (Aug 6)

The reviewer reports that the blender jug leaks liquid from around the base seal whenever it is filled past the halfway line, leaving liquid on the counter. They also state that speeds 4 through 7 on the 10-speed dial sound and behave identically, with no noticeable difference between them. Additionally, the motor overheats and shuts off automatically after about 90 seconds of continuous blending.

1. Day 1: mix 100g whole wheat flour with 100g water (21C) in jar.
2. Cover loosely; leave in warm spot for 24 hours.
3. Day 2: discard half, feed with 100g flour and 100g water; wait 24 hours.
4. Repeat daily discard-and-feed for about 5 more days, until day 7.
5. Ready when bubbly, tangy, and doubling within 4-6 hours after feeding.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Fireworks</title><style>html,body{margin:0;height:100%;overflow:hidden;background:#000}canvas{display:block}#c{position:fixed;top:8px;left:10px;color:#9cf;font:14px monospace;text-shadow:0 0 4px #06f}</style></head><body><div id="c"></div><canvas id="cv"></canvas><script>
var cv=document.getElementById('cv'),x=cv.getContext('2d'),ct=document.getElementById('c'),W,H;
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight}rs();onresize=rs;
var R=Math.random,P=Math.PI,rockets=[],sparks=[],t=0,next=0;
function launch(){rockets.push({x:W*(.1+.8*R()),y:H,vx:(R()-.5)*1.2,vy:-(H*.011+R()*H*.004),ax:H*(.12+R()*.35),h:R()*360|0,tr:[]})}
function boom(px,py,h1,n,pw,sec){
var h2=(h1+120+R()*120)%360,h3=(h1+40)%360;
for(var i=0;i<n;i++){
var a=R()*2*P,s=(R()*R())*pw+pw*.25,h=[h1,h2,h3][R()*3|0],isec=sec&&R()<.08;
sparks.push({x:px,y:py,vx: …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Rain on Window</title><style>html,body{margin:0;height:100%;overflow:hidden;background:#000}canvas{display:block}</style></head><body><canvas id="c"></canvas><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');let W,H,bg;
const R=(a,b)=>a+Math.random()*(b-a);
function scene(){bg=document.createElement('canvas');bg.width=W;bg.height=H;const b=bg.getContext('2d');const g=b.createLinearGradient(0,0,0,H);g.addColorStop(0,'#0b1026');g.addColorStop(.6,'#151b36');g.addColorStop(1,'#090b18');b.fillStyle=g;b.fillRect(0,0,W,H);b.filter='blur(10px)';for(let i=0;i<40;i++){b.fillStyle=`hsla(${R(18,52)},85%,${R(45,70)}%,${R(.2,.7)})`;const w=R(5,26);b.fillRect(R(0,W),R(H*.2,H*.95),w,w*R(.8,1.8))}for(let i=0;i<8;i++){b.fillStyle=`hsla(${R(185,235)},70%,60%,${R(.12,.35)})`;b.beginPath();b.arc(R(0,W),R(0,H*.45),R(18,60),0,7);b.fi …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lava Lamp</title>
<style>
html,body{margin:0;height:100%;background:#0a0710;display:flex;align-items:center;justify-content:center}
canvas{display:block}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
const W=360,H=620;cv.width=W;cv.height=H;
const CX=W/2,S=6,GW=Math.ceil(W/S),GH=Math.ceil(H/S),TOP=26,BOT=H-26;
let blobs=[],N=0,t0=0;
function hw(y){let u=Math.min(1,Math.max(0,y/H));return 40+62*Math.pow(u,0.9);}
function init(){
N=5+(Math.random()*4|0);
blobs=[];
for(let i=0;i<N;i++){
const y=TOP+30+Math.random()*(BOT-TOP-60);
const m=hw(y)*0.6;
blobs.push({
x:CX+(Math.random()*2-1)*m,
y:y,
r:17+Math.random()*15,
vx:(Math.random()-0.5)*0.3,
vy:(Math.random()-0.5)*0.3,
t:Math.random()
});
}
t0=performance.now();
}
function step(){
for(const b of blobs){
const …

Excerpt — the full answer is on the round page.

<meta charset="utf-8"><title>Fractal Tree</title>
<style>html,body{margin:0;height:100%;overflow:hidden;background:#0c1422}canvas{display:block}#h{position:fixed;top:12px;left:14px;color:#d7ead9;font:14px/1.4 monospace;background:rgba(8,18,12,.5);padding:6px 12px;border-radius:8px;pointer-events:none}</style>
<canvas id="c"></canvas><div id="h">branches: <span id="n">0</span> / <span id="m">0</span></div>
<script>
const cv=document.getElementById("c"),g=cv.getContext("2d"),nEl=document.getElementById("n"),mEl=document.getElementById("m");
let W,H;const rs=()=>{W=cv.width=innerWidth;H=cv.height=innerHeight};rs();addEventListener("resize",rs);
const R=(a,b)=>a+Math.random()*(b-a);
let root,total,maxD,doneAt,cnt,grown;
const GROW=340,LEAF=520;
function mk(d,len,ang){
const n={len,ang,d,seed:R(0,9),kids:[],st:-1};
if(d>0){
const k=d>2&&Math.random()<.3?3:2;
for(let i=0;i<k;i++){
const t=i/(k …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Flowfield</title><style>html,body{margin:0;height:100%;background:#000;overflow:hidden}canvas{display:block}#hud{position:fixed;top:10px;left:12px;color:#9ef;font:13px monospace;text-shadow:0 0 8px #0cf;pointer-events:none}</style></head><body><canvas id="cv"></canvas><div id="hud"></div><script>
var cv=document.getElementById("cv"),g=cv.getContext("2d"),hud=document.getElementById("hud"),W,H;
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight;g.fillStyle="#000";g.fillRect(0,0,W,H)}
rs();onresize=rs;
var seed=0,scale=0,N=0,P=[],t=0,mode="run",wx=0,age=0,LIFE=1100;
function hsh(i,j,k){var n=i*374761393+j*668265263+k*1274126177+seed;n=(n^n>>13)*1103515245;n=(n^n>>16)>>>0;return n/4294967295}
function fd(a){return a*a*(3-2*a)}
function lp(a,b,u){return a+(b-a)*u}
function noise(px,py,pz){var xi=Math.floor(px),yi=Math.floor(py) …

Excerpt — the full answer is on the round page.

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.

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.

The neighborhood mobile clinic will open on April 8 at the Maple Community Center on Maple Street. It will operate weekly on Wednesdays from 10 a.m. to 4 p.m. Services include free blood pressure checks, vaccinations, and short medical consultations. Residents can book appointments by phone or in person at the center. Spanish and Vietnamese interpreters will be available during clinic hours to assist visitors who need language support while the clinic is open.

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.

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; it should remain unplugged overnight.
Refer to the cleaning checklist.

Setup steps:
1. Unlock the cabinet.
2. Place the tablet on the stand.
3. Start the room timer.