Claude Sonnet 5

Der Ball kostet 0,05 Euro (5 Cent). Wenn der Ball x kostet, kostet der Schläger x + 1,00 Euro; zusammen ergibt das 2x + 1,00 = 1,10 Euro, also x = 0,05 Euro. Die intuitive Antwort "10 Cent" ist falsch, da der Schläger dann nur 90 Cent mehr kosten würde statt der geforderten 1,00 Euro.

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

Begründung: Fakt (2) legt Grün fest auf Position 1. Da Rot direkt links von Blau steht und Gelb direkt rechts von Blau steht, müssen Rot, Blau und Gelb in genau dieser Reihenfolge unmittelbar aufeinanderfolgen. Da Position 1 bereits durch Grün belegt ist, bleibt für dieses Dreierblock nur Positionen 2-3-4: Rot auf 2, Blau auf 3, Gelb auf 4.

1) 'to bite the bullet' – etwas Unangenehmes tapfer auf sich nehmen; deutsche Entsprechung: "in den sauren Apfel beißen"
2) 'the ball is in your court' – jetzt liegt die Entscheidung bei dir; deutsche Entsprechung: "der Ball liegt jetzt bei dir" bzw. "du bist am Zug"
3) 'it's raining cats and dogs' – es regnet extrem stark; deutsche Entsprechung: "es schüttet wie aus Eimern"

1. Sanft zu Zahnfleisch, hart im Ergebnis
2. Weniger Plastik, mehr Verantwortung
3. Bewusst putzen, bewusst leben

Ein Tag hat 24 Stunden, eine Stunde hat 60 Minuten, also hat ein Tag 24 × 60 = 1440 Minuten. Ein normales Jahr hat 365 Tage, also ergibt sich 365 × 1440 = 525.600 Minuten.

Endergebnis: 525600

Die nächste Zahl ist 33.
Regel: Jede Zahl entsteht, indem man die vorherige Zahl verdoppelt und 1 subtrahiert (bzw. die Differenzen zwischen den Zahlen verdoppeln sich jeweils: 1, 2, 4, 8, 16).

Bevor wir ausliefern, muss ich die Testergebnisse prüfen und möglicherweise zwei Fehler beheben.

Hey, kurzes Update: Wir mussten unser Meeting von heute auf morgen 10 Uhr verschieben. Passt das bei dir?

Diese Edelstahl-Trinkflasche ist auslaufsicher, spülmaschinenfest und hält Getränke stundenlang heiß oder kalt. Robust, leicht und ideal für Sport, Büro oder Reisen. Der doppelwandige Vakuumschutz sorgt für zuverlässige Temperaturkontrolle, dein perfekter Begleiter für jeden Tag.

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

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

9. "Alle bis auf 9" bedeutet, dass genau 9 Schafe überleben, unabhängig von der ursprünglichen Anzahl von 17.

5 Minuten. Jede einzelne Maschine braucht 5 Minuten, um ein Teil herzustellen, unabhängig davon, wie viele andere Maschinen gleichzeitig laufen. Da alle 100 Maschinen parallel arbeiten, stellt jede von ihnen in denselben 5 Minuten ein Teil her. Somit entstehen 100 Teile in 5 Minuten.

[
  {"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 things out of proportion — at the end of the day, we can live with it.

Given: m = 2 kg, h = 5 m, g = 9.8 m/s^2, frictionless incline, starts from rest.

Energy conservation: loss in potential energy equals gain in kinetic energy.
m·g·h = (1/2)·m·v^2

(a) Speed at the bottom:
v = sqrt(2·g·h) = sqrt(2 × 9.8 × 5) = sqrt(98) ≈ 9.9 m/s

(b) Kinetic energy at the bottom:
KE = m·g·h = 2 × 9.8 × 5 = 98 J
(Check: KE = (1/2)·m·v^2 = 0.5 × 2 × 9.9^2 ≈ 98 J)

Final answers: v ≈ 9.9 m/s, KE ≈ 98 J

Given: speed = 108 km/h

(a) Convert to meters per second:
108 km/h = 108 × (1000 m / 3600 s) = 108,000 / 3600 = 30.0 m/s

(b) Convert to miles per hour:
108 km/h ÷ 1.60934 km/mile = 67.1085... mph ≈ 67.1 mph

Final answers: 30.0 m/s and 67.1 mph

Given: altitude h = 400 km, Earth radius R = 6371 km, μ = 398600 km^3/s^2

Distance from Earth's center:
r = R + h = 6371 + 400 = 6771 km

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

(b) Orbital period:
T = 2π·r / v = 2 × π × 6771 / 7.67 ≈ 42543.5 / 7.67 ≈ 5545 s

Convert to minutes:
T ≈ 5545 / 60 ≈ 92.4 minutes

Final answers: v ≈ 7.67 km/s, T ≈ 92.4 minutes

Given: V = 12 V, I = 0.5 A

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

(b) Electrical power dissipated (P = V·I):
P = 12 × 0.5 = 6 W
(Check: P = I^2·R = 0.5^2 × 24 = 0.25 × 24 = 6 W)

Final answers: R = 24 Ω, P = 6 W

Given: f = 10 cm, d_o = 15 cm

(a) Image distance using the thin lens equation:
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

Since d_i is positive, the image is real (formed on the opposite side of the lens from the object, where light actually converges). Since m is negative, the image is inverted, and since |m| = 2 > 1, it is also magnified (twice the size of the object).

Given:
m = 2 kg
c = 4186 J/(kg*K)
ΔT = 80°C - 20°C = 60 K (a temperature difference of 1°C equals 1 K, so this conversion is direct)

Formula:
Q = m * c * ΔT

Calculation:
Q = 2 kg * 4186 J/(kg*K) * 60 K
Q = 2 * 4186 * 60
Q = 8372 * 60
Q = 502,320 J

Convert to kilojoules:
Q = 502,320 J / 1000 = 502.32 kJ

Final answer:
Q = 502,320 J = 502.32 kJ

Step 1: Households in the city
A city of 10,000,000 people, with an average household size of about 2.5 people, gives:
10,000,000 / 2.5 = 4,000,000 households

Step 2: Share of households owning a piano
Pianos are a minority-ownership item — not everyone has room, money, or interest. A reasonable estimate is that about 1 in 100 households (1%) owns a piano, counting private homes, but not yet counting institutions.
4,000,000 * 0.01 = 40,000 pianos in private households

Step 3: Add institutional pianos
Schools, churches, music schools, concert halls, hotels, and universities also own pianos. This is a smaller number but not negligible — say roughly 10% on top of the household count.
40,000 * 1.1 ≈ 44,000 pianos total in the city

Step 4: How often each piano gets tuned
A piano used regularly is usually tuned about once a year (some more, some less, some pianos are neglected for years — 1 …

Excerpt — the full answer is on the round page.

Sunlight looks white, but it's actually a mix of all the colors of the rainbow. When that sunlight travels through Earth's atmosphere, it bumps into the tiny molecules that make up our air (mostly nitrogen and oxygen).

When light hits something much smaller than its own wavelength, like these air molecules, it gets scattered in random directions. This scattering doesn't affect all colors equally: blue and violet light, which have shorter, "tighter" wavelengths, get scattered much more strongly than red or orange light, which have longer wavelengths. So as sunlight passes through the atmosphere, its blue component gets bounced around in all directions far more than the other colors.

The result is that when you look up at the sky, away from the sun itself, you're seeing this scattered blue light coming at you from every direction across the sky. Red and yellow light mostly just travels s …

Excerpt — the full answer is on the round page.

Why moving clocks run slow

One of the starting points of special relativity is a strange but experimentally confirmed fact: the speed of light in empty space is the same for every observer, no matter how fast that observer is moving. This one rule has a surprising side effect on time itself.

Imagine a very simple "clock" made of a photon of light bouncing back and forth between two mirrors, one on the floor and one on the ceiling of a spaceship. Each round trip of the light beam counts as one "tick."

If you are standing inside that spaceship, moving along with it, you see the light go straight up and straight down. Simple.

But now imagine watching that same spaceship fly past you at high speed. From your outside point of view, the light doesn't just go straight up and down anymore — because the whole ship is also moving forward, the light has to travel diagonally, tracing out a longe …

Excerpt — the full answer is on the round page.

The double-slit experiment without a detector

Imagine a barrier with two thin parallel slits cut into it, and a screen behind it that lights up wherever a particle lands. You fire electrons (or photons) at the barrier one at a time, so only a single particle is in flight at any moment — there's no way for particles to be bumping into each other or interfering with each other physically.

If electrons behaved like ordinary tiny bullets, you'd expect each one to go through either the left slit or the right slit and land in one of two clumps directly behind the slits, building up two simple bands on the screen over time.

That is not what happens. Instead, as thousands of individual electrons land one at a time, they build up a pattern of alternating bright and dark stripes — an interference pattern, the same kind of pattern you get when two overlapping water ripples reinforce each other i …

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;height:100%;background:#000;overflow:hidden}
canvas{display:block}
</style></head>
<body>
<canvas id="c"></canvas>
<script>
const c=document.getElementById('c');
const ctx=c.getContext('2d');
const ac=document.createElement('canvas');
const actx=ac.getContext('2d');
function resize(){c.width=innerWidth;c.height=innerHeight;ac.width=innerWidth;ac.height=innerHeight;}
resize();
window.addEventListener('resize',resize);
let count=0;
let particles=[];
const f1=0.05,f2=0.007;
function sampleY(maxY){
  while(true){
    const y=(Math.random()*2-1)*maxY;
    const pd=f1*y,pa=f2*y;
    const sa=pa===0?1:Math.sin(pa)/pa;
    const I=sa*sa*Math.cos(pd)*Math.cos(pd);
    if(Math.random()<I)return y;
  }
}
function geo(){
  const cy=c.height/2, barrierX=c.width*0.25, screenX=c.width*0.85;
  const s …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Rope</title>
<style>html,body{margin:0;padding:0;background:#0b1220;overflow:hidden;height:100%}
canvas{display:block}</style></head>
<body>
<canvas id="c"></canvas>
<script>
const cv = document.getElementById('c');
const ctx = cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight;}
resize();
addEventListener('resize', resize);

const N = 40;
const GRAVITY = 900;
const ITER = 12;
const DAMP = 0.995;

let points = [];
let segLen = 0;
let anchorAX, anchorAY, anchorBX, anchorBY;

function initRope(){
  const w = cv.width, h = cv.height;
  anchorAX = w * 0.22; anchorAY = h * 0.14;
  anchorBX = w * 0.78; anchorBY = h * 0.14;
  const straight = Math.hypot(anchorBX - anchorAX, anchorBY - anchorAY);
  const total = straight * 1.55;
  segLen = total / (N - 1);
  points = [];
  for (let i = 0; i < N; i++){
    cons …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2D Wave</title>
<style>
html,body{margin:0;padding:0;background:#000;height:100%;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const W=140,H=100;
const canvas=document.getElementById('c');
const ctx=canvas.getContext('2d');
function resize(){canvas.width=innerWidth;canvas.height=innerHeight;}
resize();
addEventListener('resize',resize);

const grid=document.createElement('canvas');
grid.width=W;grid.height=H;
const gctx=grid.getContext('2d');
const img=gctx.createImageData(W,H);

const N=W*H;
let cur=new Float32Array(N);
let prev=new Float32Array(N);
let nxt=new Float32Array(N);
const c2=0.2;
const damp=0.996;

function idx(x,y){return y*W+x;}

function addPulse(){
  const cx=2+Math.floor(Math.random()*(W-4));
  const cy=2+Math.floor(Math.random()*(H-4)) …

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:#0b2f0b;overflow:hidden}canvas{display:block;margin:20px auto;background:#0a5a24}</style>
</head><body>
<canvas id="c" width="800" height="450"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const W=800,H=450,R=11,M=28,FR=0.992,STOP=0.03;
const colors=['#fff','#e6c200','#1e5ce6','#e63b1e','#5a2ea6','#e67a1e','#1e8f4a','#b5162e','#2c2c2c','#e6c200','#3a7de6'];
let balls=[],resetting=false;
function rack(){
  balls=[{x:M+140,y:H/2,vx:0,vy:0,num:0}];
  const apexX=W-M-190,dx=R*2,dy=R*2.2;
  let n=1;
  for(let row=0;row<4;row++){
    for(let j=0;j<=row;j++){
      balls.push({x:apexX+row*dx,y:H/2+(j-row/2)*dy,vx:0,vy:0,num:n++});
    }
  }
  const ang=(Math.random()-0.5)*0.05;
  balls[0].vx=Math.cos(ang)*10;
  balls[0].vy=Math.sin(ang)*10;
} …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Dijkstra vs A*</title>
<style>
html,body{margin:0;background:#111;color:#eee;font-family:monospace;overflow:hidden}
#lbl{position:absolute;top:8px;left:12px;font-size:13px;white-space:pre}
#lbl2{position:absolute;top:8px;left:482px;font-size:13px;white-space:pre}
canvas{display:block;margin:34px auto 0}
</style></head><body>
<div id="lbl"></div><div id="lbl2"></div>
<canvas id="c" width="930" height="340"></canvas>
<script>
const W=30,H=20,N=W*H,CS=15,GX=10,GY=35,PX=480;
const canvas=document.getElementById('c'),ctx=canvas.getContext('2d');
const lbl=document.getElementById('lbl'),lbl2=document.getElementById('lbl2');
let cost=new Float64Array(N);
function xy(i){return [i%W,(i/W)|0];}
function heur(i){const p=xy(i);return Math.abs(W-1-p[0])+Math.abs(H-1-p[1]);}
function neigh(i){const p=xy(i),x=p[0],y=p[1],r=[];if(x>0)r.push(i-1);i …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Graham Scan</title>
<style>
html,body{margin:0;background:#0b0b12;overflow:hidden;height:100%}
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();
let pts,stack,idx,phase,stepCount,popPoint,lastTime,doneTime;
function cross(o,a,b){return (a.x-o.x)*(b.y-o.y)-(a.y-o.y)*(b.x-o.x);}
function init(){
  pts=[];
  const m=60;
  for(let i=0;i<40;i++) pts.push({x:m+Math.random()*(W-2*m),y:m+Math.random()*(H-2*m)});
  let pivot=pts[0];
  for(const p of pts) if(p.y>pivot.y||(p.y===pivot.y&&p.x<pivot.x)) pivot=p;
  pts.sort((a,b)=>{
    if(a===pivot) return -1;
    if(b===pivot) return 1;
    const ang=p=>Math.atan2(p.y-pivot.y,p.x-pivot. …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Huffman</title><style>
html,body{margin:0;background:#0b0f14;height:100%;overflow:hidden}
canvas{display:block;margin:0 auto;background:#0b0f14}
</style></head><body><canvas id="c" width="960" height="600"></canvas><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const W=cv.width,H=cv.height;
const SENTS=["the quick brown fox jumps over the lazy dog","pack my box with five dozen liquor jugs","sphinx of black quartz judge my vow","the five boxing wizards jump quickly"];
function freq(s){const f={};for(const c of s.toLowerCase())if(c>='a'&&c<='z')f[c]=(f[c]||0)+1;return f;}
function build(f){
 const nodes=Object.keys(f).map(c=>({char:c,freq:f[c]}));
 let active=nodes.slice();
 const steps=[];
 while(active.length>1){
  active.sort((a,b)=>a.freq-b.freq);
  const snap=active.slice();
  const l=active.shift(),r=act …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Kruskal MST</title>
<style>
*{margin:0;padding:0}
html,body{background:#0b0f14;overflow:hidden}
canvas{display:block}
</style>
</head><body>
<canvas id="c"></canvas>
<script>
(function(){
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
let W,H;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
resize();addEventListener('resize',resize);

let nodes,edges,parent,rankArr,edgeIdx,accepted,totalW,tick,doneTimer;

function dist(a,b){return Math.hypot(a.x-b.x,a.y-b.y);}

function find(i){
  while(parent[i]!==i){parent[i]=parent[parent[i]];i=parent[i];}
  return i;
}
function union(a,b){
  a=find(a);b=find(b);
  if(a===b)return false;
  if(rankArr[a]<rankArr[b]){const t=a;a=b;b=t;}
  parent[b]=a;
  if(rankArr[a]===rankArr[b])rankArr[a]++;
  return true;
}

function hue(i){const h=(i*2654435761)%360;return h<0 …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>8 Queens Backtracking</title>
<style>
html,body{margin:0;height:100%;background:#111;display:flex;align-items:center;justify-content:center}
canvas{background:#111;box-shadow:0 0 20px #000}
</style></head>
<body>
<canvas id="c" width="640" height="720"></canvas>
<script>
const cvs=document.getElementById('c'),ctx=cvs.getContext('2d');
let n,queens,row,placements,backtracks,solved,holdStart,last=0,acc=0;
function reset(){
  n=6+Math.floor(Math.random()*5);
  queens=new Array(n).fill(-1);
  row=0;placements=0;backtracks=0;solved=false;holdStart=0;
}
reset();
function safe(r,c){
  for(let i=0;i<r;i++){
    const qc=queens[i];
    if(qc===c||Math.abs(qc-c)===Math.abs(i-r))return false;
  }
  return true;
}
function step(){
  if(solved)return;
  if(row===n){solved=true;holdStart=performance.now();return;}
  let col=queens[row]+1,placed= …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Incremental Delaunay</title>
<style>html,body{margin:0;background:#0a0e14;overflow:hidden}canvas{display:block}
#hud{position:fixed;top:10px;left:14px;color:#9fe;font:14px monospace;text-shadow:0 0 4px #000}</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 resize(){W=cv.width=innerWidth;H=cv.height=innerHeight}resize();addEventListener('resize',resize);
const N=30;let pts,tris,order,idx,phase,ftick,bad;
function cross(o,a,b){return (a.x-o.x)*(b.y-o.y)-(a.y-o.y)*(b.x-o.x)}
function mkTri(a,b,c){if(cross(pts[a],pts[b],pts[c])<0){const t=b;b=c;c=t}return{a,b,c}}
function circum(t){
 const p0=pts[t.a],p1=pts[t.b],p2=pts[t.c];
 const ax=p1.x-p0.x,ay=p1.y-p0.y,bx=p2.x-p0.x,by=p2.y-p0.y;
 const d=2* …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>AVL</title><style>
body{margin:0;background:#111;color:#eee;font-family:monospace}canvas{display:block;margin:20px auto;background:#181818}
</style></head><body>
<canvas id="c" width="900" height="560"></canvas>
<script>
const cv=document.getElementById('c'),cx=cv.getContext('2d');
let root=null,keys=[],idx=0,rot=0,lastRot='',t=0,phase='anim',pause=0;
let before={},after={},beforeCount=0,afterCount=0,curRot=null;
function h(n){return n?n.h:0}
function bf(n){return n?h(n.l)-h(n.r):0}
function upd(n){n.h=1+Math.max(h(n.l),h(n.r))}
function rotR(y){let a=y.l,b=a.r;a.r=y;y.l=b;upd(y);upd(a);return a}
function rotL(a){let y=a.r,b=y.l;y.l=a;a.r=b;upd(a);upd(y);return y}
function ins(n,k){
 if(!n)return{key:k,l:null,r:null,h:1};
 if(k<n.key)n.l=ins(n.l,k);else n.r=ins(n.r,k);
 upd(n);let b=bf(n);
 if(b>1&&k<n.l.key){curRot='LL';return rotR( …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Sieve</title><style>
body{margin:0;background:#111;color:#eee;font-family:monospace}canvas{display:block;margin:20px auto;background:#181818}
</style></head><body>
<canvas id="c" width="820" height="640"></canvas>
<script>
const cv=document.getElementById('c'),cx=cv.getContext('2d');
const N=400,cols=20,rows=20,cell=36,ox=30,oy=60;
let colors={},state,cur,primes,elim,mulQueue,mi,frame,phase,pause;
function hueFor(p){return (p*47)%360}
function idx(n){return n-2}
function xy(n){let i=idx(n);return{x:ox+(i%cols)*cell,y:oy+Math.floor(i/cols)*cell}}
function reset(){
 state=new Array(N+1).fill(0);
 colors={};cur=2;primes=0;elim=0;mulQueue=[];mi=0;phase='findprime';pause=0;frame=0
}
function isPrimeCell(n){return state[n]===0}
function advanceFindPrime(){
 while(cur<=N&&!isPrimeCell(cur))cur++;
 if(cur>N){phase='done';pause=100;return}
 s …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Levenshtein</title><style>
body{margin:0;background:#111;color:#eee;font-family:monospace}canvas{display:block;margin:20px auto;background:#181818}
</style></head><body>
<canvas id="c" width="820" height="560"></canvas>
<script>
const cv=document.getElementById('c'),cx=cv.getContext('2d');
const words=[['carousel','flamingo'],['mountain','elephants'],['brighten','umbrella'],['sandwich','crocodile']];
let a,b,n,m,D,src,order,oi,phase,pause,path,pi,ops;
const cell=44,ox=140,oy=90;
function reset(){
 let pair=words[Math.floor(Math.random()*words.length)];
 a=pair[0];b=pair[1];n=a.length;m=b.length;
 D=[];src=[];
 for(let i=0;i<=n;i++){D.push(new Array(m+1).fill(-1));src.push(new Array(m+1).fill(''))}
 order=[];for(let i=0;i<=n;i++)for(let j=0;j<=m;j++)order.push([i,j]);
 oi=0;phase='fill';pause=0;path=[];pi=0;ops=[]
}
function fillOne() …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Robot Replan</title><style>
body{margin:0;background:#111;color:#eee;font-family:monospace}canvas{display:block;margin:20px auto;background:#181818}
</style></head><body>
<canvas id="c" width="900" height="640"></canvas>
<script>
const cv=document.getElementById('c'),cx=cv.getContext('2d');
const W=30,H=20,cell=28,ox=10,oy=50;
let grid,robot,goal,path,pIdx,replans,steps,frame,phase,pause,pathColor;
function key(x,y){return x+','+y}
function inb(x,y){return x>=0&&x<W&&y>=0&&y<H}
function bfs(sx,sy,gx,gy){
 let q=[[sx,sy]],seen={};seen[key(sx,sy)]=null;
 while(q.length){
  let[x,y]=q.shift();
  if(x===gx&&y===gy){
   let p=[[x,y]],k=key(x,y);
   while(seen[k]!==null){k=seen[k];let[a,b]=k.split(',').map(Number);p.push([a,b])}
   return p.reverse()
  }
  for(let[dx,dy]of[[1,0],[-1,0],[0,1],[0,-1]]){
   let nx=x+dx,ny=y+dy;
   if(inb(nx,n …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Binary Search</title><style>
body{margin:0;background:#111;color:#eee;font-family:monospace}canvas{display:block;margin:20px auto;background:#181818}
</style></head><body>
<canvas id="c" width="900" height="480"></canvas>
<script>
const cv=document.getElementById('c'),cx=cv.getContext('2d');
const N=40,barW=20,gap=2,ox=20,oy=380;
let arr,target,lo,hi,mid,discarded,comparisons,found,phase,pause,frame;
function reset(){
 arr=[];let v=Math.floor(Math.random()*5);
 for(let i=0;i<N;i++){v+=1+Math.floor(Math.random()*5);arr.push(v)}
 target=arr[Math.floor(Math.random()*N)];
 if(Math.random()<0.15)target=-99;
 lo=0;hi=N-1;mid=Math.floor((lo+hi)/2);discarded=new Array(N).fill(false);
 comparisons=0;found=-1;phase='step';pause=0;frame=0
}
function step(){
 if(lo>hi){phase='done';pause=110;return}
 mid=Math.floor((lo+hi)/2);
 comparisons++;
 i …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Flood Fill</title><style>
body{margin:0;background:#111;color:#eee;font-family:monospace}canvas{display:block;margin:20px auto;background:#181818}
</style></head><body>
<canvas id="c" width="900" height="620"></canvas>
<script>
const cv=document.getElementById('c'),cx=cv.getContext('2d');
const W=60,H=40,cell=13,ox=15,oy=50;
let grid,fillColor,startX,startY,visited,frontier,filled,frame,phase,pause;
function key(x,y){return x+','+y}
function reset(){
 let base=Math.floor(Math.random()*360);
 grid=[];for(let x=0;x<W;x++){grid.push(new Array(H).fill(0))}
 let blobCount=5+Math.floor(Math.random()*4);
 for(let b=0;b<blobCount;b++){
  let bx=Math.floor(Math.random()*W),by=Math.floor(Math.random()*H);
  let hue=Math.floor(Math.random()*8);
  let r=4+Math.floor(Math.random()*7);
  for(let x=Math.max(0,bx-r);x<Math.min(W,bx+r);x++)
   for(le …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Maze Backtracker</title><style>
body{margin:0;background:#111;color:#eee;font-family:monospace}canvas{display:block;margin:20px auto;background:#181818}
</style></head><body>
<canvas id="c" width="900" height="640"></canvas>
<script>
const cv=document.getElementById('c'),cx=cv.getContext('2d');
const W=30,H=20,cell=28,ox=15,oy=50;
let walls,visited,stack,carved,phase,pause,frame;
function key(x,y){return x+','+y}
function wkey(x1,y1,x2,y2){return x1<x2||(x1===x2&&y1<y2)?key(x1,y1)+'-'+key(x2,y2):key(x2,y2)+'-'+key(x1,y1)}
function reset(){
 walls={};visited={};
 for(let x=0;x<W;x++)for(let y=0;y<H;y++){
  if(x<W-1)walls[wkey(x,y,x+1,y)]=true;
  if(y<H-1)walls[wkey(x,y,x,y+1)]=true;
 }
 let sx=Math.floor(Math.random()*W),sy=Math.floor(Math.random()*H);
 visited[key(sx,sy)]=true;stack=[[sx,sy]];carved=1;phase='carve';pause=0;frame=0
} …

Excerpt — the full answer is on the round page.

<!doctype html>
<html><head><meta charset="utf-8"><title>KMP</title>
<style>
html,body{margin:0;background:#0b1020;overflow:hidden;height:100%}
canvas{display:block}
</style></head>
<body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight;}
resize();addEventListener('resize',resize);
const ALPH='ABC',CS=18;
let pat,text,lps,matches,i,j,bi,bj,comparisons,phase,patXcur,patXtarget,flash,doneTimer,frameCount;
function rnd(n){return Math.floor(Math.random()*n)}
function randStr(n){let r='';for(let k=0;k<n;k++)r+=ALPH[rnd(ALPH.length)];return r}
function init(){
  const pl=5+rnd(3);
  pat=randStr(pl);
  const tl=46;
  const arr=[];
  for(let k=0;k<tl;k++)arr.push(ALPH[rnd(ALPH.length)]);
  for(let k=0;k<2;k++){const pos=rnd(tl-pl+1);for(let x=0;x<pl;x++)arr[pos+x]=pat[x];}
  text=arr.join …

Excerpt — the full answer is on the round page.

<!doctype html>
<html><head><meta charset="utf-8"><title>Quadtree Collisions</title>
<style>html,body{margin:0;background:#0a0e1a;overflow:hidden;height:100%}canvas{display:block}</style>
</head><body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight;}
resize();addEventListener('resize',resize);
const BW=780,BH=560,BX=20,BY=20,N=120,CAP=4,MINSZ=24;
let balls,nodeCount,pairTests,flashes;
function rnd(a,b){return a+Math.random()*(b-a)}
class QT{
  constructor(x,y,w,h){this.x=x;this.y=y;this.w=w;this.h=h;this.pts=[];this.div=false;this.ch=null;}
  quad(p){const mx=this.x+this.w/2,my=this.y+this.h/2;return (p.x<mx?0:1)+(p.y<my?0:2);}
  subdivide(){
    const w=this.w/2,h=this.h/2,x=this.x,y=this.y;
    this.ch=[new QT(x,y,w,h),new QT(x+w,y,w,h),new QT(x,y+h,w,h),new QT(x+w,y+h,w,h)]; …

Excerpt — the full answer is on the round page.

<!doctype html>
<html><head><meta charset="utf-8"><title>Falling Sand Grid</title>
<style>html,body{margin:0;background:#101014;overflow:hidden;height:100%}canvas{display:block}</style>
</head><body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight;}
resize();addEventListener('resize',resize);
const COLS=150,ROWS=100,CS=6,OX=20,OY=20;
let grid,shade,stepCount,pourX,restCount;
function rnd(n){return Math.floor(Math.random()*n)}
function init(){
  grid=new Uint8Array(COLS*ROWS);
  shade=new Uint8Array(COLS*ROWS);
  stepCount=0;restCount=0;
  pourX=30+rnd(COLS-60);
}
init();
function canMove(x,y){
  const below=grid[(y+1)*COLS+x];
  if(below===0)return true;
  const l=x>0?grid[(y+1)*COLS+x-1]:1;
  const r=x<COLS-1?grid[(y+1)*COLS+x+1]:1;
  return l===0||r===0;
}
function step(){
  for …

Excerpt — the full answer is on the round page.

<!doctype html>
<html><head><meta charset="utf-8"><title>Falling Sand Particles</title>
<style>html,body{margin:0;background:#101014;overflow:hidden;height:100%}canvas{display:block}</style>
</head><body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight;}
resize();addEventListener('resize',resize);
const WX=40,WY=20,WW=600,WH=460,FLOOR=WY+WH,TOTAL=1500,MAXACTIVE=22,CELL=8,G=0.28;
let active,resting,grid,spawned,emitX,minRestY,waitTimer;
function rnd(a,b){return a+Math.random()*(b-a)}
function key(cx,cy){return cx+'_'+cy}
function cellOf(x,y){return [Math.floor((x-WX)/CELL),Math.floor((y-WY)/CELL)]}
function addToGrid(p,idx){
  const[cx,cy]=cellOf(p.x,p.y);
  const k=key(cx,cy);
  if(!grid.has(k))grid.set(k,[]);
  grid.get(k).push(idx);
}
function init(){
  active=[];resting=[];grid …

Excerpt — the full answer is on the round page.

<!doctype html>
<html><head><meta charset="utf-8"><title>Room Evacuation Grid</title>
<style>html,body{margin:0;background:#0d0f14;overflow:hidden;height:100%}canvas{display:block}</style>
</head><body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight;}
resize();addEventListener('resize',resize);
const COLS=40,ROWS=30,CS=16,OX=20,OY=20,NP=60;
let exitX,exitY,dist,cellCol,persons,occupied,leftCount,stepCount,waitTimer,frameCounter;
const STEPI=8;
function idx(x,y){return y*COLS+x}
function isWall(x,y){return (x===0||x===COLS-1||y===0||y===ROWS-1)&&!(x===exitX&&y===exitY);}
function bfs(){
  dist=new Int16Array(COLS*ROWS).fill(-1);
  const q=[[exitX,exitY]];dist[idx(exitX,exitY)]=0;let h=0;
  while(h<q.length){
    const[cx,cy]=q[h++];const d=dist[idx(cx,cy)];
    const nb=[[cx-1,cy] …

Excerpt — the full answer is on the round page.

<!doctype html>
<html><head><meta charset="utf-8"><title>Room Evacuation Continuous</title>
<style>html,body{margin:0;background:#0d0f14;overflow:hidden;height:100%}canvas{display:block}</style>
</head><body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight;}
resize();addEventListener('resize',resize);
const RX=40,RY=40,RW=600,RH=440,NP=60,DH=22;
const DOORY=RY+RH/2,TGX=RX+RW+90,TGY=DOORY;
let people,leftCount,waitTimer;
function rnd(a,b){return a+Math.random()*(b-a)}
function init(){
  people=[];leftCount=0;waitTimer=0;
  let tries=0;
  while(people.length<NP&&tries<20000){
    tries++;
    const r=rnd(6,9);
    const x=rnd(RX+r+4,RX+RW-r-4),y=rnd(RY+r+4,RY+RH-r-4);
    let ok=true;
    for(const p of people){if(Math.hypot(p.x-x,p.y-y)<p.r+r+2){ok=false;break;}}
    if(!ok)continu …

Excerpt — the full answer is on the round page.

<!doctype html>
<html><head><meta charset="utf-8"><title>Diffusion Limited Aggregation</title>
<style>html,body{margin:0;background:#07080c;overflow:hidden;height:100%}canvas{display:block}</style>
</head><body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight;}
resize();addEventListener('resize',resize);
const COLS=200,ROWS=150,CS=4,OX=20,OY=20,NW=260,MAXR=68;
const CX=Math.floor(COLS/2),CY=Math.floor(ROWS/2);
let frozen,frozenList,frozenCount,clusterR,walkers,waitTimer;
function idx(x,y){return y*COLS+x}
function dirs(){return[[1,0],[-1,0],[0,1],[0,-1]][Math.floor(Math.random()*4)]}
function spawnWalker(w){
  const ang=Math.random()*Math.PI*2;
  const rad=Math.max(6,clusterR+8+Math.random()*6);
  w.x=Math.max(1,Math.min(COLS-2,Math.round(CX+Math.cos(ang)*rad)));
  w.y=Math.max(1, …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DLA</title>
<style>
html,body{margin:0;background:#05070d;overflow:hidden;height:100%}
canvas{display:block}
#hud{position:fixed;top:10px;left:12px;color:#9fd;font:14px monospace;text-shadow:0 0 4px #000}
</style></head>
<body>
<canvas id="c"></canvas>
<div id="hud"></div>
<script>
const c=document.getElementById('c'),ctx=c.getContext('2d');
let W,H,cx,cy;
function resize(){W=c.width=innerWidth;H=c.height=innerHeight;cx=W/2;cy=H/2;}
resize();addEventListener('resize',resize);
const N=800,R=2,STICK=4.5,CELL=STICK*2.2;
let px,py,alive,sx,sy,grid,stuckCount,clusterRadius,spawnR,noGrowth;
function key(x,y){return ((x/CELL)|0)+'_'+((y/CELL)|0);}
function addStuck(x,y){
  sx.push(x);sy.push(y);
  const k=key(x,y);
  if(!grid.has(k))grid.set(k,[]);
  grid.get(k).push(sx.length-1);
  stuckCount++;
  const d=Math.hypot(x-cx,y-cy);
  if(d>cl …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Flock</title>
<style>html,body{margin:0;background:#071018;overflow:hidden;height:100%}canvas{display:block}
#h{position:fixed;top:8px;left:10px;color:#9fe;font:14px monospace;text-shadow:0 0 4px #000}</style>
</head><body><canvas id="c"></canvas><div id="h"></div>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d');
let W,H;function rz(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
rz();addEventListener('resize',rz);
const N=200,VIS=55,SEP=22,MAXS=3.6,MINS=1.6;
let bx,by,vx,vy;
function init(){
  bx=new Float64Array(N);by=new Float64Array(N);vx=new Float64Array(N);vy=new Float64Array(N);
  for(let i=0;i<N;i++){
    bx[i]=Math.random()*W;by[i]=Math.random()*H;
    const a=Math.random()*6.283;
    vx[i]=Math.cos(a)*2.5;vy[i]=Math.sin(a)*2.5;
  }
}
init();
const parent=new Int32Array(N);
function find(a){while(pare …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Life</title>
<style>html,body{margin:0;background:#04060a;overflow:hidden;height:100%}canvas{display:block}
#h{position:fixed;top:8px;left:10px;color:#9fe;font:14px monospace;text-shadow:0 0 4px #000}</style>
</head><body><canvas id="c"></canvas><div id="h"></div>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d');
const GW=120,GH=80;
let W,H,cell;
function rz(){W=cv.width=innerWidth;H=cv.height=innerHeight;cell=Math.min(W/GW,H/GH);}
rz();addEventListener('resize',rz);
let grid,age,gen,stable,lastCount;
function idx(x,y){return y*GW+x;}
function place(px,py,pattern){
  for(const [dx,dy] of pattern){
    const gx=(px+dx+GW)%GW,gy=(py+dy+GH)%GH;
    grid[idx(gx,gy)]=1;
  }
}
const GLIDER=[[0,1],[1,2],[2,0],[2,1],[2,2]];
const OSC=[[0,0],[1,0],[2,0]];
function init(){
  grid=new Uint8Array(GW*GH);
  age=new Uint16Arra …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Epicycles</title>
<style>html,body{margin:0;background:#05060c;overflow:hidden;height:100%}canvas{display:block}
#h{position:fixed;top:8px;left:10px;color:#9fe;font:14px monospace;text-shadow:0 0 4px #000}</style>
</head><body><canvas id="c"></canvas><div id="h"></div>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d');
let W,H,cx,cy;
function rz(){W=cv.width=innerWidth;H=cv.height=innerHeight;cx=W/2;cy=H*0.42;}
rz();addEventListener('resize',rz);
const M=140,K=44;
let epis,time,trace,scale;
function shapeFn(kind){
  if(kind===0)return t=>({x:16*Math.pow(Math.sin(t),3)/16,y:-(13*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t))/16});
  if(kind===1)return t=>{const r=1+0.35*Math.cos(5*t);return{x:r*Math.cos(t),y:r*Math.sin(t)};};
  return t=>{const r=1+0.45*Math.sin(4*t)*Math.cos(2*t);return{x:r*Math.cos(t) …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Voronoi</title>
<style>html,body{margin:0;background:#05060c;overflow:hidden;height:100%}canvas{display:block}
#h{position:fixed;top:8px;left:10px;color:#fff;font:14px monospace;text-shadow:0 0 4px #000;z-index:2}</style>
</head><body><canvas id="c"></canvas><div id="h"></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const off=document.createElement('canvas'),octx=off.getContext('2d');
let W,H,LW,LH;
function rz(){
  W=cv.width=innerWidth;H=cv.height=innerHeight;
  LW=off.width=Math.max(60,Math.floor(W/6));
  LH=off.height=Math.max(40,Math.floor(H/6));
}
rz();addEventListener('resize',rz);
const N=25;
let sx,sy,vx,vy,cols;
function init(){
  sx=new Float64Array(N);sy=new Float64Array(N);
  vx=new Float64Array(N);vy=new Float64Array(N);
  cols=[];
  for(let i=0;i<N;i++){
    sx[i]=Math.random()*W;sy[i]= …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>TSP 2-opt</title>
<style>html,body{margin:0;background:#05060c;overflow:hidden;height:100%}canvas{display:block}
#h{position:fixed;top:8px;left:10px;color:#9fe;font:14px monospace;text-shadow:0 0 4px #000}</style>
</head><body><canvas id="c"></canvas><div id="h"></div>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d');
let W,H;function rz(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
rz();addEventListener('resize',rz);
const n=60;
let cx,cy,tour,ti,tj,improvements,total,passImproved,pause,margin;
function d(a,b){const dx=cx[a]-cx[b],dy=cy[a]-cy[b];return Math.hypot(dx,dy);}
function tourLen(){let s=0;for(let k=0;k<n;k++)s+=d(tour[k],tour[(k+1)%n]);return s;}
function nnTour(){
  const used=new Uint8Array(n);
  const t=[0];used[0]=1;
  for(let k=1;k<n;k++){
    const last=t[t.length-1];
    let best=-1,bd=Infin …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Noise Landscape</title>
<style>html,body{margin:0;background:#87ceeb;overflow:hidden;height:100%}canvas{display:block}
#h{position:fixed;top:8px;left:10px;color:#111;font:14px monospace;text-shadow:0 0 4px #fff}</style>
</head><body><canvas id="c"></canvas><div id="h"></div>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d');
let W,H;function rz(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
rz();addEventListener('resize',rz);
let seed;
function hash(i){
  const v=Math.sin(i*127.1+seed*311.7)*43758.5453;
  return v-Math.floor(v);
}
function noise1(t){
  const i0=Math.floor(t),i1=i0+1,f=t-i0;
  const u=f*f*(3-2*f);
  return hash(i0)*(1-u)+hash(i1)*u;
}
function fbm(t){
  let s=0,amp=0.55,freq=1,norm=0;
  for(let o=0;o<3;o++){
    s+=noise1(t*freq)*amp;
    norm+=amp;
    amp*=0.5;freq*=2.1;
  }
  return s/norm;
} …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Gray-Scott</title><style>
body{margin:0;background:#000;overflow:hidden}canvas{display:block;margin:0 auto}
#i{position:fixed;top:8px;left:8px;color:#9f9;font:14px monospace}
</style></head><body><canvas id="c"></canvas><div id="i"></div><script>
const N=140,cv=document.getElementById('c'),ctx=cv.getContext('2d');
cv.width=560;cv.height=560;
const img=ctx.createImageData(N,N);
let A,B,A2,B2,steps=0,dA=1,dB=0.5,f,k;
function idx(x,y){x=(x+N)%N;y=(y+N)%N;return y*N+x}
function init(){
  A=new Float32Array(N*N).fill(1);B=new Float32Array(N*N).fill(0);
  A2=new Float32Array(N*N);B2=new Float32Array(N*N);
  f=0.03+Math.random()*0.03; k=0.055+Math.random()*0.015;
  const blobs=4+Math.floor(Math.random()*4);
  for(let b=0;b<blobs;b++){
    const cx=Math.random()*N,cy=Math.random()*N,r=4+Math.random()*4;
    for(let y=-r;y<r;y++)for(let x=-r …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>L-System Tree</title><style>
body{margin:0;background:#0b1220;overflow:hidden}canvas{display:block}
#i{position:fixed;top:8px;left:8px;color:#dfd;font:14px monospace}
</style></head><body><canvas id="c"></canvas><div id="i"></div><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight}
resize();addEventListener('resize',resize);
let str,depth,branchCount,drawIdx,phase,windT,angInc,lenBase,seed;
function lsystem(){
  const rules={};
  rules['F']=Math.random()<0.5?'F[+F]F[-F]F':'F[+F][-F]F[+F]';
  depth=4+Math.floor(Math.random()*3);
  angInc=18+Math.random()*16;
  let s='F';
  for(let i=0;i<depth;i++){
    let ns='';
    for(const ch of s) ns+= (ch==='F'?rules['F']:ch);
    s=ns;
  }
  return s;
}
function build(){
  str=lsystem();
  lenBase=Math.max(6,90/Math …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Marching Squares</title><style>
body{margin:0;background:#06090f;overflow:hidden}canvas{display:block}
#i{position:fixed;top:8px;left:8px;color:#7cf;font:14px monospace}
</style></head><body><canvas id="c"></canvas><div id="i"></div><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight}
resize();addEventListener('resize',resize);
let balls,cell=16,t=0,segCount=0;
function init(){
  const n=5+Math.floor(Math.random()*3);
  balls=[];
  for(let i=0;i<n;i++){
    balls.push({
      x:Math.random()*cv.width, y:Math.random()*cv.height,
      vx:(Math.random()-0.5)*1.2, vy:(Math.random()-0.5)*1.2,
      r:40+Math.random()*50, ph:Math.random()*100
    });
  }
}
init();
function field(x,y){
  let v=0;
  for(const b of balls){
    const dx=x-b.x, dy=y-b.y;
    v += ( …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Poisson Disk</title><style>
body{margin:0;background:#101418;overflow:hidden}canvas{display:block}
#i{position:fixed;top:8px;left:8px;color:#fc8;font:14px monospace}
</style></head><body><canvas id="c"></canvas><div id="i"></div><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight}
resize();addEventListener('resize',resize);
let r,cellSize,gcols,grows,grid,samples,active,k=30,paused=false;
function init(){
  paused=false;
  ctx.fillStyle='#101418'; ctx.fillRect(0,0,cv.width,cv.height);
  r=8+Math.random()*8;
  cellSize=r/Math.SQRT2;
  gcols=Math.ceil(cv.width/cellSize);
  grows=Math.ceil(cv.height/cellSize);
  grid=new Array(gcols*grows).fill(-1);
  samples=[];
  active=[];
  const x0=cv.width/2, y0=cv.height/2;
  samples.push({x:x0,y:y0});
  active.push(0 …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Starfield</title><style>
body{margin:0;background:#000;overflow:hidden}canvas{display:block}
#i{position:fixed;top:8px;left:8px;color:#fff;font:14px monospace}
</style></head><body><canvas id="c"></canvas><div id="i"></div><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight}
resize();addEventListener('resize',resize);
const N=500;
let stars=[],speed=6,t=0;
function newStar(){
  return {
    x:(Math.random()-0.5)*cv.width*2,
    y:(Math.random()-0.5)*cv.height*2,
    z:Math.random()*1600+50,
    pz:0
  };
}
function init(){
  stars=[];
  for(let i=0;i<N;i++) stars.push(newStar());
  speed=4+Math.random()*4;
  t=0;
}
init();
function loop(){
  ctx.fillStyle='rgba(0,0,0,0.35)';
  ctx.fillRect(0,0,cv.width,cv.height);
  t+=0.01;
  speed=6+Math.sin(t*0.3)*4; …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Wireframe Solids</title><style>
body{margin:0;background:#05070c;overflow:hidden}canvas{display:block}
#i{position:fixed;top:8px;left:8px;color:#8cf;font:14px monospace}
</style></head><body><canvas id="c"></canvas><div id="i"></div><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight}
resize();addEventListener('resize',resize);
function cube(s){
  const v=[];
  for(const x of [-s,s])for(const y of [-s,s])for(const z of [-s,s]) v.push([x,y,z]);
  const e=[];
  for(let i=0;i<8;i++)for(let j=i+1;j<8;j++){
    let d=0; for(let k=0;k<3;k++) if(v[i][k]!==v[j][k]) d++;
    if(d===1) e.push([i,j]);
  }
  return {v,e};
}
function octa(s){
  const v=[[s,0,0],[-s,0,0],[0,s,0],[0,-s,0],[0,0,s],[0,0,-s]];
  const e=[];
  for(let i=0;i<6;i++)for(let j=i+1;j<6;j++){ …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Height Field</title><style>
body{margin:0;background:#04060b;overflow:hidden}canvas{display:block}
#i{position:fixed;top:8px;left:8px;color:#8fd;font:14px monospace}
</style></head><body><canvas id="c"></canvas><div id="i"></div><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight}
resize();addEventListener('resize',resize);
const GS=32;
let ang=0,t=0,seedA,seedB,seedC,frame=0;
function init(){
  seedA=Math.random()*10; seedB=Math.random()*10; seedC=Math.random()*10;
  ang=0; t=0; frame=0;
}
init();
function heightAt(x,y,time){
  const d=Math.sqrt(x*x+y*y);
  return Math.sin(d*0.35-time+seedA)*22 + Math.cos(x*0.22+time*0.7+seedB)*14 + Math.sin(y*0.25-time*0.5+seedC)*14;
}
function project(x,y,z,cx,cy,scale,ca,sa,cb,sb){
  let y1=y*ca - z*sa, z1=y*sa + z*ca …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Raycast Maze</title><style>html,body{margin:0;background:#000;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;}resize();addEventListener('resize',resize);
let map,mw,mh,cx,cy,dir,t,ang,targAng,steps,dirs=[[1,0],[0,1],[-1,0],[0,-1]];
function genMaze(w,h){
  let g=[];for(let y=0;y<h;y++){g.push(new Array(w).fill(1));}
  function carve(x,y){g[y][x]=0;
    let dd=[[2,0],[-2,0],[0,2],[0,-2]];
    for(let i=dd.length-1;i>0;i--){let j=Math.floor(Math.random()*(i+1));[dd[i],dd[j]]=[dd[j],dd[i]];}
    for(const p of dd){let nx=x+p[0],ny=y+p[1];
      if(nx>0&&nx<w-1&&ny>0&&ny<h-1&&g[ny][nx]==1){g[y+p[1]/2][x+p[0]/2]=0;carve(nx,ny);}
    }
  }
  carve(1,1);
  return g …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Rotating Sphere</title><style>html,body{margin:0;background:#000;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;}resize();addEventListener('resize',resize);
let pts,n,ax,ay,light,rot,turns;
function init(){
  n=300+Math.floor(Math.random()*400);
  pts=[];
  const ga=Math.PI*(3-Math.sqrt(5));
  for(let i=0;i<n;i++){
    let y=1-(i/(n-1))*2;
    let r=Math.sqrt(1-y*y);
    let th=ga*i;
    pts.push([Math.cos(th)*r,y,Math.sin(th)*r]);
  }
  ax=(Math.random()*0.6+0.3)*(Math.random()<0.5?-1:1);
  ay=(Math.random()*0.6+0.3)*(Math.random()<0.5?-1:1);
  let lv=[Math.random()-0.5,Math.random()-0.5,Math.random()-0.5];
  let ll=Math.hypot(lv[0],lv[1],lv[2])||1;
  light …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Force Graph</title><style>html,body{margin:0;background:#0a0a12;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;}resize();addEventListener('resize',resize);
let N,nodes,edges,settleT;
function init(){
  N=25;
  nodes=[];
  for(let i=0;i<N;i++){
    nodes.push({x:W/2+(Math.random()-0.5)*200,y:H/2+(Math.random()-0.5)*200,vx:0,vy:0,label:'N'+i});
  }
  edges=[];
  let order=[...Array(N).keys()];
  for(let i=1;i<N;i++){
    let j=order[Math.floor(Math.random()*i)];
    edges.push([i,j]);
  }
  let extra=Math.floor(N*0.6);
  for(let k=0;k<extra;k++){
    let a=Math.floor(Math.random()*N),b=Math.floor(Math.random()*N);
    if(a!=b)edges.push([a,b]);
  }
  settleT=0 …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Circle Packing</title><style>html,body{margin:0;background:#101014;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;}resize();addEventListener('resize',resize);
let circles,grow,fails,doneT;
const MIN=3,TOPM=40;
function maxRadius(x,y){
  let m=Math.min(x,W-x,y-TOPM,H-y);
  for(const c of circles){
    let d=Math.hypot(x-c.x,y-c.y)-c.r;
    if(d<m)m=d;
  }
  return m;
}
function pickSpot(){
  for(let i=0;i<8;i++){
    let x=Math.random()*W,y=TOPM+Math.random()*(H-TOPM);
    let m=maxRadius(x,y);
    if(m>MIN)return{x,y,r:0,cap:m};
  }
  return null;
}
function init(){
  circles=[];fails=0;doneT=0;
  grow=pickSpot();
}
init();
function colorFor(r){
  let h=200- …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Squarified Treemap</title><style>html,body{margin:0;background:#12141a;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;}resize();addEventListener('resize',resize);
let items,cur,t0,TOPM=36;
function init(){
  items=[];
  let n=20;
  for(let i=0;i<n;i++){
    items.push({id:i,base:20+Math.random()*80,freq:0.1+Math.random()*0.3,ph:Math.random()*6.28,hue:(i/n*360)|0});
  }
  cur={};
  for(const it of items)cur[it.id]={x:W/2,y:H/2,w:1,h:1};
  t0=performance.now();
}
init();
function squarify(list,x,y,w,h,out){
  if(list.length===0)return;
  if(list.length===1){out.push({id:list[0].id,x,y,w,h,value:list[0].value});return;}
  const total=list.reduce((s,d)=>s+d.valu …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Sorting Race</title><style>html,body{margin:0;background:#0d0f14;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;}resize();addEventListener('resize',resize);
const N=60;
let arrs,gens,states,doneFlags,names=['Bubble','Insertion','Quicksort'],doneT;
function shuffled(){
  let a=[...Array(N).keys()].map(x=>x+1);
  for(let i=a.length-1;i>0;i--){let j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}
  return a;
}
function* bubbleGen(a,s){
  for(let i=0;i<N-1;i++){
    for(let j=0;j<N-1-i;j++){
      s.mark={idx:[j,j+1],t:'c'};s.comparisons++;yield;
      if(a[j]>a[j+1]){[a[j],a[j+1]]=[a[j+1],a[j]];s.mark={idx:[j,j+1],t:'s'};yield;}
    }
  }
}
function* …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>Sankey Flow</title><style>html,body{margin:0;background:#0c0e13;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;}resize();addEventListener('resize',resize);
const NS=3,NT=4;
let base,freq,phase,acc,parts,t0,hues=['#4fc3f7','#81c784','#ffb74d'];
function init(){
  base=[];freq=[];phase=[];acc=[];
  for(let i=0;i<NS;i++){
    base.push([]);freq.push([]);phase.push([]);acc.push([]);
    for(let j=0;j<NT;j++){
      base[i].push(15+Math.random()*35);
      freq[i].push(0.1+Math.random()*0.25);
      phase[i].push(Math.random()*6.28);
      acc[i].push(0);
    }
  }
  parts=[];
  t0=performance.now();
}
init();
function smooth(t){return t*t*(3-2*t);}
function fram …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Langton's Ant</title>
<style>
html,body{margin:0;padding:0;overflow:hidden;background:#fff}
canvas{display:block}
#hud{position:fixed;top:10px;left:12px;font:14px/1.4 monospace;color:#111;background:rgba(255,255,255,.8);padding:6px 10px;border-radius:6px;pointer-events:none}
</style></head>
<body>
<canvas id="c"></canvas>
<div id="hud"></div>
<script>
(function(){
var canvas=document.getElementById('c');
var ctx=canvas.getContext('2d');
var hud=document.getElementById('hud');
var cs=4;
var W=innerWidth,H=innerHeight;
canvas.width=W;canvas.height=H;
var cols=Math.floor(W/cs),rows=Math.floor(H/cs);
var grid,ax,ay,adir,steps,run=1,lastAx,lastAy;
var MAXSTEPS=140000;
var DX=[0,1,0,-1],DY=[-1,0,1,0];
function init(){
  grid=new Uint8Array(cols*rows);
  ctx.fillStyle='#fff';
  ctx.fillRect(0,0,W,H);
  ax=cols>>1;ay=rows>>1;
  adir=(Math. …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>Rule 110</title>
<style>
html,body{margin:0;padding:0;background:#05060a;overflow:hidden;height:100%;width:100%}
canvas{display:block}
#hud{position:fixed;top:8px;left:10px;font:13px monospace;color:#7ee787;text-shadow:0 0 4px #000;pointer-events:none;user-select:none}
</style></head>
<body>
<canvas id="c"></canvas>
<div id="hud">row 0</div>
<script>
var cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('hud');
var cell=6,cols,W,H,row,y,rowNum,liveColor,deadColor,framesPerRow=3,fc=0;
var maxRows;
function resize(){
  W=window.innerWidth;H=window.innerHeight;
  cv.width=W;cv.height=H;
  cols=Math.max(3,Math.floor(W/cell));
}
function table(l,c,r){
  var i=(l<<2)|(c<<1)|r;
  var t=[0,1,1,1,0,1,1,0];
  return t[i];
}
function newColors(){
  var h=Math.floor(Math.random()*360);
  liveColor='hsl('+h+', …

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>Wireworld</title>
<style>
html,body{margin:0;background:#05070a;overflow:hidden;height:100%}
canvas{display:block;margin:auto}
</style></head><body>
<canvas id="c"></canvas>
<script>
const EMPTY=0,HEAD=1,TAIL=2,COND=3;
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const CS=16;
let W,GH,H,dx,g,g2,stepN,acc=0,last=0;
function idx(x,y){return y*W+x}
function reset(){
  W=16+Math.floor(Math.random()*10);
  H=8+Math.floor(Math.random()*6);
  dx=2+Math.floor(Math.random()*(W-4));
  GH=H+1;
  g=new Uint8Array(W*GH);
  for(let x=0;x<W;x++){g[idx(x,0)]=COND;g[idx(x,H-1)]=COND}
  for(let y=0;y<H;y++){g[idx(0,y)]=COND;g[idx(W-1,y)]=COND}
  g[idx(dx,H-1)]=EMPTY;
  g[idx(dx,H-2)]=COND;
  g[idx(dx,H)]=COND;
  g[idx(1,0)]=TAIL;
  g[idx(2,0)]=HEAD;
  g2=new Uint8Ar …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset=UTF-8><title>Sandpile</title>
<style>html,body{margin:0;background:#0b0b0f;overflow:hidden;height:100%}
canvas{display:block;margin:0 auto;image-rendering:pixelated}
#i{position:fixed;top:10px;left:10px;color:#ddd;font:14px monospace;text-shadow:0 0 4px #000}</style>
</head><body>
<div id=i></div><canvas id=c></canvas>
<script>
var cv=document.getElementById('c'),ctx=cv.getContext('2d'),info=document.getElementById('i');
var N,cs,g,cx,cy,drops,topples,queue,maxDrops;
var colors=['#0b0b0f','#2ecc71','#3aa0ff','#ffd23a','#ff3a3a'];
function idx(r,c){return r*N+c}
function init(){
 N=61+2*(20+Math.floor(Math.random()*40));
 cs=Math.max(2,Math.floor(720/N));
 cv.width=cv.height=cs*N;
 g=new Int32Array(N*N);
 cx=(N-1)/2|0;cy=cx;
 drops=0;topples=0;queue=[];
 maxDrops=N*N*3;
}
init();
function topple(r,c){
 var i=idx(r,c);g[i]-=4;topples++;
 if(r>0)bump …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Brian's Brain</title>
<style>html,body{margin:0;background:#000;overflow:hidden}canvas{display:block;margin:0 auto}#i{position:fixed;top:6px;left:8px;color:#0f8;font:14px monospace;text-shadow:0 0 4px #000}</style>
</head><body>
<canvas id="c"></canvas><div id="i"></div>
<script>
var N=140,S=5;
var cv=document.getElementById('c');
cv.width=N*S;cv.height=N*S;
var x=cv.getContext('2d');
var inf=document.getElementById('i');
var g,cur,nxt,gen,live;
function mk(){var a=new Uint8Array(N*N);return a;}
function seed(){
cur=mk();nxt=mk();gen=0;
for(var i=0;i<N*N;i++){cur[i]=Math.random()<0.22?1:0;}
}
function idx(r,c){return r*N+c;}
function step(){
live=0;
for(var r=0;r<N;r++){
for(var c=0;c<N;c++){
var i=idx(r,c);
var s=cur[i];
var ns;
if(s===1){ns=2;}
else if(s===2){ns=0;}
else{
var cnt=0;
for(var dr=-1;dr<=1;dr++){
for(var dc=-1;dc<=1;d …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Truchet</title>
<style>html,body{margin:0;background:#0b0e14;overflow:hidden}canvas{display:block}#h{position:fixed;top:8px;left:10px;color:#8fe3ff;font:13px monospace;text-shadow:0 0 6px #000}</style>
</head><body><canvas id="c"></canvas><div id="h"></div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),h=document.getElementById('h');
let W,H,cols,rows,S=42,tiles,flips,t0;
function mk(){
 W=cv.width=innerWidth;H=cv.height=innerHeight;
 cols=Math.ceil(W/S)+1;rows=Math.ceil(H/S)+1;
 tiles=new Array(cols*rows);
 for(let i=0;i<tiles.length;i++)tiles[i]={o:Math.random()<.5?0:1,tr:null};
 flips=0;t0=performance.now();
}
function draw(px,py,o,a){
 g.globalAlpha=a;g.beginPath();
 if(o===0){
  g.moveTo(px+S/2,py);g.arc(px,py,S/2,0,Math.PI/2);
  g.moveTo(px+S/2,py+S);g.arc(px+S,py+S,S/2,Math.PI,Math.PI*1.5);
 }else{
  g. …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Hilbert</title><style>html,body{margin:0;background:#000;overflow:hidden}canvas{display:block}#i{position:fixed;top:8px;left:8px;color:#fff;font:14px monospace}</style></head><body><canvas id="c"></canvas><div id="i"></div><script>
const c=document.getElementById('c'),x=c.getContext('2d'),info=document.getElementById('i');
let W,H;
function rs(){W=c.width=innerWidth;H=c.height=innerHeight}
rs();addEventListener('resize',rs);
const orders=[5,6,7];
let oi=Math.floor(Math.random()*3);
let order,n,total,pts,idx,segs,pad,scale;
function d2xy(o,d){
let rx,ry,t=d,X=0,Y=0;
for(let s=1;s<(1<<o);s*=2){
rx=1&(t>>1);
ry=1&(t^rx);
if(ry==0){
if(rx==1){X=s-1-X;Y=s-1-Y}
let tmp=X;X=Y;Y=tmp;
}
X+=s*rx;Y+=s*ry;
t=Math.floor(t/4);
}
return[X,Y];
}
function setup(){
order=orders[oi];
oi=(oi+1)%3;
n=1<<order;
total=n*n;
pts=new Array(total);
for(let i= …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Islamic Star Pattern</title>
<style>
html,body{margin:0;padding:0;height:100%;background:#0a0c14;overflow:hidden}
canvas{display:block}
#hud{position:fixed;top:10px;left:14px;color:#e8c675;font:13px/1.4 monospace;text-shadow:0 0 6px #000;pointer-events:none;letter-spacing:.5px}
</style>
</head>
<body>
<div id="hud"></div>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,dpr;
function rand(a,b){return a+Math.random()*(b-a)}
function randInt(a,b){return Math.floor(rand(a,b+1))}
let N,ca,rotSpeed,hue,angle,cell,strokes;
function sizeGrid(){
  const r=Math.min(W,H)*0.46;
  cell=(r*Math.SQRT2)/N;
}
function resize(){
  dpr=window.devicePixelRatio||1;
  W=window.innerWidth;H=window.innerHeight;
  cv.width=W*dpr;cv.height=H*dpr;
  cv.style.width= …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Moire</title><style>
html,body{margin:0;background:#0a0a0a;overflow:hidden;height:100%}
canvas{display:block}
#i{position:fixed;top:10px;left:10px;color:#7fffb0;font:13px monospace;text-shadow:0 0 4px #000;pointer-events:none}
</style></head><body>
<canvas id="c"></canvas><div id="i"></div>
<script>
(function(){
var c=document.getElementById('c'),x=c.getContext('2d'),info=document.getElementById('i');
var W,H;
function resize(){W=c.width=innerWidth;H=c.height=innerHeight;}
window.onresize=resize;resize();

function mkLayer(spacing){
 var s=document.createElement('canvas');
 s.width=W;s.height=H;
 var g=s.getContext('2d');
 g.fillStyle='#fff';g.fillRect(0,0,W,H);
 g.strokeStyle='#000';g.lineWidth=1;
 var maxR=Math.hypot(W,H)/2+spacing*2;
 for(var r=spacing;r<maxR;r+=spacing){
  g.beginPath();g.arc(W/2,H/2,r,0,Math.PI*2);g.stroke(); …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Penrose</title>
<style>
html,body{margin:0;background:#0b0b12;overflow:hidden;height:100%}
canvas{display:block}
#hud{position:fixed;top:10px;left:12px;color:#e8e8f0;font:13px/1.4 monospace;text-shadow:0 0 6px #000,0 0 2px #000;pointer-events:none}
</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 W,H;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
addEventListener('resize',resize);resize();

var phi=(1+Math.sqrt(5))/2;
function add(a,b){return {x:a.x+b.x,y:a.y+b.y};}
function sub(a,b){return {x:a.x-b.x,y:a.y-b.y};}
function mul(a,s){return {x:a.x*s,y:a.y*s};}

function seedTris(){
  var tris=[],rot=Math.random()*Math.PI*2;
  for(var i=0;i<10;i++){
    var a1=Mat …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset=utf8><title>Ants</title><style>
html,body{margin:0;background:#0c0c10;overflow:hidden}
canvas{display:block}
#u{position:fixed;top:8px;left:8px;color:#8f8;font:13px monospace;text-shadow:0 0 4px #000}
</style></head><body>
<canvas id=c></canvas><div id=u></div>
<script>
(function(){
var W,H,cols,rows,cs=8,c=document.getElementById('c'),x=c.getContext('2d'),u=document.getElementById('u');
var nest,food,pf,ph,ants,carried,tick;
function init(){
 W=c.width=innerWidth;H=c.height=innerHeight;
 cols=Math.ceil(W/cs);rows=Math.ceil(H/cs);
 pf=new Float32Array(cols*rows);ph=new Float32Array(cols*rows);
 nest={x:W*0.5,y:H*0.5};
 food={x:Math.random()*W*0.8+W*0.1,y:Math.random()*H*0.8+H*0.1};
 while(Math.hypot(food.x-nest.x,food.y-nest.y)<Math.min(W,H)*0.35){
  food={x:Math.random()*W*0.8+W*0.1,y:Math.random()*H*0.8+H*0.1};
 }
 ants=[];
 var n=80+Math.floor( …

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;padding:0;background:#000;overflow:hidden}canvas{display:block}</style>
</head><body>
<canvas id="c"></canvas>
<script>
var c=document.getElementById('c'),ctx=c.getContext('2d');
var oc=document.createElement('canvas'),octx=oc.getContext('2d');
var W,H,cols,rows,trail,trail2,agents,N,steps,CELL=8;
var SO=9,SA=.45,RA=.32,SP=1.2,DEP=5,DECAY=.9,VSCALE=7,MAXSTEPS=4200;
function idx(x,y){x=Math.floor(x);y=Math.floor(y);x=((x%cols)+cols)%cols;y=((y%rows)+rows)%rows;return y*cols+x}
function sense(a,ang){var sx=a.x+Math.cos(ang)*SO,sy=a.y+Math.sin(ang)*SO;return trail[idx(sx,sy)]}
function resize(){W=innerWidth;H=innerHeight;c.width=W;c.height=H;cols=Math.ceil(W/CELL);rows=Math.ceil(H/CELL);oc.width=cols;oc.height=rows}
function initSim(){
resize();
trail=new Float32Array(cols*rows);
trail2=new F …

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;overflow:hidden;background:#0b1210}canvas{display:block}</style></head><body><canvas id="c"></canvas><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
let W,H,cols,rows,cell=14,food,prey,pred;
function initSim(){
W=cv.width=innerWidth;H=cv.height=innerHeight;
cols=Math.floor(W/cell);rows=Math.floor(H/cell);
food=new Float32Array(cols*rows);
for(let i=0;i<food.length;i++)food[i]=Math.random();
prey=[];pred=[];
for(let i=0;i<130;i++)prey.push({x:Math.random()*W,y:Math.random()*H,vx:0,vy:0,e:50});
for(let i=0;i<18;i++)pred.push({x:Math.random()*W,y:Math.random()*H,vx:0,vy:0,e:80});
}
initSim();
function fIdx(x,y){let cx=Math.min(cols-1,Math.max(0,(x/cell)|0));let cy=Math.min(rows-1,Math.max(0,(y/cell)|0));return cy*cols+cx;}
function step(){
for(let i=0;i<food.length; …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Nagel-Schreckenberg Ring</title>
<style>
html,body{margin:0;padding:0;background:#0b0f14;overflow:hidden;height:100%}
canvas{display:block}
#hud{position:fixed;top:10px;left:14px;color:#cfe8ff;font:14px/1.4 monospace;text-shadow:0 1px 3px #000;pointer-events:none}
</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,cx,cy,R;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;cx=W/2;cy=H/2;R=Math.min(W,H)*0.38;}
addEventListener('resize',resize);resize();

const L=140,VMAX=5,P=0.32,MAXSTEPS=650;
let N,cars,stepCount,acc=0,last=0;
const STEP_MS=220;

function initSim(){
  N=22+Math.floor(Math.random()*10);
  cars=[];
  const gap=L/N;
  for(let i=0;i<N;i++){
    const p0=Math.floor(i …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Crowd Exit</title>
<style>html,body{margin:0;overflow:hidden;background:#0b0d12}canvas{display:block}</style>
</head><body><canvas id="c"></canvas><script>
const cv=document.getElementById('c'),x=cv.getContext('2d');
let W,H;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight}
resize();addEventListener('resize',resize);
function bounds(){return{L:W*0.15,R:W*0.85,T:H*0.1,B:H*0.8,dc:W*0.5,dh:Math.max(16,W*0.018)}}
let people=[],exits=[],drained=0,last=0;
function spawn(n){
  people=[];
  const b=bounds();
  for(let i=0;i<n;i++){
    people.push({
      x:b.L+10+Math.random()*(b.R-b.L-20),
      y:b.T+10+Math.random()*((b.B-b.T)*0.75),
      vx:0,vy:0
    });
  }
}
spawn(260+Math.floor(Math.random()*140));
const ACC=260,REP=2000,WF=9,MAXSPD=150,RAD=4,MIND=9;
function tick(t){
  if(!last)last=t;
  const dt=Math.min(0.033,(t …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bresenham Spokes</title>
<style>html,body{margin:0;height:100%;background:#04070a;display:flex;align-items:center;justify-content:center}
canvas{background:#04070a}</style></head><body>
<canvas id="c" width="620" height="620"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),W=cv.width,H=cv.height,cx=W/2,cy=H/2;
const PAL=[[255,90,90],[255,180,60],[255,240,90],[120,255,140],[80,220,255],[130,150,255],[220,110,255],[255,110,190]];
let ns,nc,maxR,radii,baseAngles,rot,rotSpeed,revealCount,rotExtra,pts,total;
function line(x0,y0,x1,y1,col){
x0=Math.round(x0);y0=Math.round(y0);x1=Math.round(x1);y1=Math.round(y1);
let dx=Math.abs(x1-x0),sx=x0<x1?1:-1;
let dy=-Math.abs(y1-y0),sy=y0<y1?1:-1;
let err=dx+dy;
while(true){
pts.push(x0,y0,col[0],col[1],col[2]);
if(x0===x1&&y0===y1)break;
const e2=2*err;
if(e2>=dy){ …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>De Casteljau</title>
<style>html,body{margin:0;overflow:hidden;background:#0b0f1a;font-family:monospace}canvas{display:block}#hud{position:fixed;top:8px;left:8px;color:#9fd;font-size:13px;line-height:1.4;pointer-events:none;text-shadow:0 0 4px #000}</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 resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
resize();addEventListener('resize',resize);
function R(a,b){return a+Math.random()*(b-a);}
function newPt(){return {x:R(W*0.15,W*0.85),y:R(H*0.15,H*0.85),vx:R(-.15,.15),vy:R(-.15,.15)};}
let pts,t,trail,speed;
function init(){
 pts=[newPt(),newPt(),newPt(),newPt()];
 t=0;trail=[];
 speed=R(0.0016,0.0026);
}
init();
function lerp(a,b,t){return …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Sutherland-Hodgman</title><style>
html,body{margin:0;background:#0b0f14;height:100%;overflow:hidden}
canvas{display:block;margin:20px auto;background:#0b0f14}
#i{position:fixed;top:8px;left:12px;color:#9fb3c8;font:14px monospace}
</style></head><body>
<div id="i"></div>
<canvas id="c" width="900" height="560"></canvas>
<script>
(function(){
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),info=document.getElementById('i');
const L=180,R=720,T=90,B=470;
let poly=[],t0=performance.now(),cyc=9000;
function rnd(a,b){return a+Math.random()*(b-a)}
function makePoly(){
const n=5+Math.floor(Math.random()*4),base=rnd(80,120),p=[];
for(let i=0;i<n*2;i++){
const ang=i*Math.PI/n,r=i%2===0?base*rnd(0.85,1.15):base*rnd(0.3,0.55);
p.push([Math.cos(ang)*r,Math.sin(ang)*r]);
}
return p;
}
poly=makePoly();
function xform(p,cx,cy,th){
con …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Floyd-Steinberg</title>
<style>
html,body{margin:0;height:100%;background:#0b0b0e;overflow:hidden}
#c{width:100vw;height:calc(100vh - 28px);image-rendering:pixelated;image-rendering:crisp-edges;display:block;background:#000}
#i{position:fixed;left:0;right:0;bottom:0;height:28px;line-height:28px;padding:0 10px;
box-sizing:border-box;font:13px monospace;color:#9ef;background:#000;border-top:1px solid #234}
</style></head>
<body>
<canvas id="c"></canvas><div id="i"></div>
<script>
var W=160,H=100;
var cv=document.getElementById('c');cv.width=W;cv.height=H;
var ctx=cv.getContext('2d');
var info=document.getElementById('i');
var img=ctx.createImageData(W,H);
var err=new Float32Array(W*H);
var frame=0,inst;

function newInstance(){
  inst={
    a1:0.02+Math.random()*0.08, b1:0.02+Math.random()*0.08,
    a2:0.01+Math.random()*0.05, b2:0.0 …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Scanline Fill</title>
<style>
html,body{margin:0;background:#0a0a14;overflow:hidden;height:100%}
canvas{display:block}
#hud{position:fixed;top:8px;left:10px;color:#8fd3ff;font:12px monospace;text-shadow:0 0 4px #000;
 background:rgba(0,0,0,.35);padding:4px 8px;border-radius:4px}
</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;}
addEventListener('resize',rs);rs();
function rnd(a,b){return a+Math.random()*(b-a);}
function gcd(a,b){return b?gcd(b,a%b):a;}
let poly,t0;
function newPoly(){
 const n=Math.floor(rnd(7,12));
 const cand=[];
 for(let s=2;s<=Math.floor(n/2);s++) if(gcd(s,n)===1) cand.push(s);
 const step=cand.length?cand[Math.floor(Mat …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<style>html,body{margin:0;padding:0;background:#0b0f1a;overflow:hidden}canvas{display:block}</style>
</head><body>
<canvas id="c"></canvas>
<script>
const cvs=document.getElementById('c'),ctx=cvs.getContext('2d');
cvs.width=innerWidth;cvs.height=innerHeight;
const cs=22;
let cols,rows,grid,start,goal,open,closed,gScore,fScore,cameFrom,path,done,nodesExpanded,noPath,pauseCounter;

function key(x,y){return x+','+y;}
function heuristic(a,b){return Math.abs(a.x-b.x)+Math.abs(a.y-b.y);}
function neighbors(n){
  const r=[],dirs=[[1,0],[-1,0],[0,1],[0,-1]];
  for(const d of dirs){
    const x=n.x+d[0],y=n.y+d[1];
    if(x>=0&&x<cols&&y>=0&&y<rows&&grid[y][x]===0)r.push({x,y});
  }
  return r;
}
function randCell(){
  let x,y;
  do{x=Math.floor(Math.random()*cols);y=Math.floor(Math.random()*rows);}while(grid[y][x]===1);
  return {x,y};
}
functio …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Maze</title>
<style>
html,body{margin:0;background:#111;height:100%;overflow:hidden}
canvas{display:block;margin:0 auto;background:#111}
#info{position:fixed;top:8px;left:8px;color:#eee;font:14px monospace}
</style></head>
<body>
<div id="info"></div>
<canvas id="c"></canvas>
<script>
var canvas=document.getElementById('c');
var ctx=canvas.getContext('2d');
var info=document.getElementById('info');
var cs=20;
var cols,rows,grid,stack,current,carved,finished,pauseTimer;

function resize(){
  canvas.width=Math.min(window.innerWidth,900);
  canvas.height=Math.min(window.innerHeight-10,700);
  cols=Math.floor(canvas.width/cs);
  rows=Math.floor(canvas.height/cs);
}

function Cell(i,j){
  this.i=i;this.j=j;this.visited=false;
  this.walls={top:true,right:true,bottom:true,left:true};
}

function index(i,j){
  if(i<0||j<0||i>=cols||j>=row …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf8"><title>BFS Flood Fill</title>
<style>
html,body{margin:0;background:#0a0e14;height:100%;overflow:hidden}
canvas{display:block}
#hud{position:fixed;top:10px;left:12px;color:#cfe8ff;font:14px monospace;text-shadow:0 0 4px #000}
</style></head>
<body>
<div id="hud"></div>
<canvas id="c"></canvas>
<script>
var cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('hud');
var W,H,cell=22,cols,rows,grid,dist,queue,qh,front,step,filled,total,seed,state,timer;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
window.addEventListener('resize',resize);resize();
function makeRegion(){
cols=Math.floor(W/cell);rows=Math.floor(H/cell);
grid=new Array(cols*rows);
var cx=cols/2,cy=rows/2;
var rad=Math.min(cols,rows)/2*0.85;
var blobs=3+Math.floor(Math.random()*3);
var bx=[],by=[],br=[];
for(var i=0;i<blobs;i++ …

Excerpt — the full answer is on the round page.

<!doctype html><html><head><meta charset="utf-8"><title>Dijkstra</title>
<style>html,body{margin:0;background:#111;color:#eee;font:14px monospace;overflow:hidden}
#c{display:block;margin:10px auto;background:#111}</style></head>
<body><canvas id="c" width="640" height="420"></canvas>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d');
const COLS=32,ROWS=18,TOP=34;
const CS=Math.floor(Math.min(cv.width/COLS,(cv.height-TOP)/ROWS));
let cost,dist,vis,prev,src,tgt,settled,phase,path,pIdx,wait,speed;
function idx(r,c){return r*COLS+c;}
function neigh(i){
  let r=(i/COLS)|0,c=i%COLS,o=[];
  if(r>0)o.push(idx(r-1,c));
  if(r<ROWS-1)o.push(idx(r+1,c));
  if(c>0)o.push(idx(r,c-1));
  if(c<COLS-1)o.push(idx(r,c+1));
  return o;
}
function init(){
  cost=new Array(COLS*ROWS);
  for(let i=0;i<cost.length;i++)cost[i]=1+Math.floor(Math.random()*9);
  dist=new Array(COLS*ROWS).fill(In …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Voronoi Flood Fill</title>
<style>
html,body{margin:0;padding:0;background:#0a0a0f;overflow:hidden;height:100%}
canvas{display:block}
#hud{position:fixed;top:10px;left:10px;color:#eee;font:14px monospace;background:rgba(0,0,0,.4);padding:6px 10px;border-radius:6px}
</style></head>
<body>
<div id="hud">cells: 0</div>
<canvas id="c"></canvas>
<script>
const cvs=document.getElementById('c'),ctx=cvs.getContext('2d'),hud=document.getElementById('hud');
let W,H,cell=10,cols,rows,grid,queue,seeds,colors,claimed,frontier,ticksPerFrame=1,frameSkip=0;

function resize(){
  W=cvs.width=window.innerWidth;
  H=cvs.height=window.innerHeight;
}
window.addEventListener('resize',resize);
resize();

function rand(min,max){return Math.random()*(max-min)+min;}

function hsl(h){return `hsl(${h},75%,58%)`;}

function init(){
  cell=Math.max(6,Math.floor …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bubble Sort</title>
<style>html,body{margin:0;background:#111;overflow:hidden;height:100%}canvas{display:block}#c{position:fixed;top:8px;left:10px;color:#eee;font:14px monospace;text-shadow:0 0 3px #000}</style>
</head><body>
<canvas id="cv"></canvas>
<div id="c"></div>
<script>
const canvas=document.getElementById('cv');
const ctx=canvas.getContext('2d');
let W,H;
function resize(){W=canvas.width=innerWidth;H=canvas.height=innerHeight;}
resize();window.onresize=resize;
const N=80;
let arr,i,j,comparisons,sortedFrom,fa,fb,flashTimer,done,pauseTimer;
function init(){
  arr=[];
  for(let k=0;k<N;k++)arr.push(Math.random()*0.85+0.06);
  i=N-1;j=0;comparisons=0;sortedFrom=N;fa=-1;fb=-1;flashTimer=0;done=false;pauseTimer=0;
}
init();
const label=document.getElementById('c');
function step(){
  if(done){
    pauseTimer++;
    if(pauseTime …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>Quicksort Visualization</title>
<style>
html,body{margin:0;background:#111;overflow:hidden;height:100%}
canvas{display:block}
#s{position:fixed;top:10px;left:10px;color:#0f0;font:16px monospace;text-shadow:0 0 3px #000}
</style></head>
<body>
<canvas id="c"></canvas>
<div id="s"></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),sEl=document.getElementById('s');
let W,H;
function resize(){W=cv.width=window.innerWidth;H=cv.height=window.innerHeight;}
resize();window.addEventListener('resize',resize);

const N=80;
let arr,swaps,gen,active,pivot,cmp,swapping,done,restarting;

function init(){
  arr=[];
  for(let i=0;i<N;i++) arr.push(Math.random()*0.85+0.1);
  swaps=0;
  active=[0,N-1];
  pivot=-1;cmp=[-1,-1];swapping=null;done=false;restarting=false;
  gen=qsort(0,N-1);
}

function* qsort(lo,hi){
  active= …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Merge Sort Visualization</title>
<style>
html,body{margin:0;height:100%;background:#0d0f14;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;}
resize();
addEventListener('resize',resize);

const n=80;
let values,order,disp,target,colorOf,width,lo,mid,hi,left,right,i,j,k,activePair,finished,passNum,finishTimer,acc,lastT;

function init(){
  values=[];
  for(let x=0;x<n;x++) values.push(18+Math.random()*(H*0.72));
  order=[];
  for(let x=0;x<n;x++) order.push(x);
  disp=order.slice();
  target=order.slice();
  colorOf=new Array(n).fill(0);
  width=1; lo=0; passNum=1; finished=false; finishTimer=0; acc=0;
  activePair=false;
  advance();
}

function ad …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Heap Sort Visualization</title>
<style>
html,body{margin:0;padding:0;background:#111;overflow:hidden;height:100%}
canvas{display:block}
#info{position:fixed;top:10px;left:10px;color:#eee;font:16px monospace;text-shadow:0 0 4px #000}
</style></head>
<body>
<div id="info">Swaps: 0</div>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),info=document.getElementById('info');
function resize(){cv.width=innerWidth;cv.height=innerHeight;}
resize();addEventListener('resize',resize);

let N=80,arr,swaps,gen,ev,sortedFrom,done,frame=0;

function rnd(a){for(let i=0;i<N;i++)a[i]=20+Math.random()*260;return a;}
function swapA(a,x,y){const t=a[x];a[x]=a[y];a[y]=t;}

function* siftDown(a,i,n){
 while(true){
  let l=2*i+1,r=2*i+2,largest=i;
  yield {t:'cmp',i,l,r};
  if(l<n&&a[l]>a[largest])largest=l; …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Radix Sort Visualization</title>
<style>html,body{margin:0;background:#111;overflow:hidden}canvas{display:block}#info{position:fixed;top:10px;left:10px;color:#eee;font:16px monospace;text-shadow:0 0 4px #000}</style>
</head><body>
<div id="info"></div>
<canvas id="c"></canvas>
<script>
const c=document.getElementById('c'),ctx=c.getContext('2d'),info=document.getElementById('info');
function resize(){c.width=innerWidth;c.height=innerHeight;}
resize();addEventListener('resize',resize);
const N=80,MAXV=999,PLACES=3,DUR=50,HOLD=25;
let vals,cur,tgt,start,place,pass,animT,phase,holdT;
function digitAt(v,p){return Math.floor(v/Math.pow(10,p))%10;}
function computeTargets(){
  let order=new Array(N);
  for(let i=0;i<N;i++)order[Math.round(cur[i])]=i;
  let b=Array.from({length:10},()=>[]);
  for(let s=0;s<N;s++){let idx=order[s];b[digitAt( …

Excerpt — the full answer is on the round page.

Sunday.

If the day after tomorrow is two days before Thursday, then the day after tomorrow must be Tuesday (since Tuesday + 2 days = Thursday). Counting back two days from Tuesday (the day after tomorrow) gives today. Tuesday minus 2 days is Sunday, so today is Sunday.

Assumptions: average lifespan ~80 years; average daily fluid intake (water, drinks, soups) ~2 liters/day; intake is roughly constant across life (lower as infant, slightly higher as adult, averages out).
Calculation: 2 L/day x 365 days/year = 730 L/year.
730 L/year x 80 years = 58,400 L.
Rounding for estimate uncertainty (climate, body size, diet vary intake 1.5-3L/day).

~58,000 liters

Ana owns the parrot, Ben owns the cat, and Cleo owns the dog.

Since Ana is allergic to animal fur, she cannot own the cat or dog (both furred), so she owns the parrot. Ben's pet cannot fly, ruling out the parrot (already Ana's anyway) and leaving Ben with either the cat or the dog. The dog's owner is older than Ben, which means Ben himself cannot be the dog's owner, so Ben owns the cat. That leaves the dog for Cleo.

The smallest such number is 52.

Reasoning:
- Need n ≡ 1 (mod 3), n ≡ 2 (mod 5), n ≡ 3 (mod 7).
- First combine the mod 5 and mod 7 conditions. Numbers that are 3 mod 7: 3, 10, 17, 24, 31, 38, 45, 52, ...
  Among these, find which are also 2 mod 5: 17 (17 = 3·5+2), then every 35 more: 17, 52, 87, ...
- Now check the mod 3 condition among 17, 52, 87, ...:
  17 mod 3 = 2 (no)
  52 mod 3 = 1 (yes)
- Verify 52: 52 = 3·17+1 (remainder 1), 52 = 5·10+2 (remainder 2), 52 = 7·7+3 (remainder 3). All conditions hold, and it's the smallest such positive integer (by CRT the solutions repeat every 3·5·7 = 105).

Answer: 52

2/11

There are 11 equally likely outcomes with at least one die showing a 4: (4,1),(4,2),(4,3),(4,4),(4,5),(4,6),(1,4),(2,4),(3,4),(5,4),(6,4). Of these, only (4,5) and (5,4) sum to 9. So the conditional probability is 2/11.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Double Pendulum</title>
<style>
html,body{margin:0;background:#000;overflow:hidden;height:100%}
canvas{display:block}
#t{position:fixed;top:10px;left:12px;color:#7fffa0;font:15px monospace;text-shadow:0 0 4px #000}
</style></head>
<body>
<canvas id="c"></canvas><div id="t"></div>
<script>
const c=document.getElementById('c'),ctx=c.getContext('2d'),td=document.getElementById('t');
function rs(){c.width=innerWidth;c.height=innerHeight;ctx.fillStyle='#000';ctx.fillRect(0,0,c.width,c.height);}
addEventListener('resize',rs);

const m1=12,m2=12,l1=Math.min(innerWidth,innerHeight)*0.16,l2=l1,g=1400;
let a1,a2,w1,w2,t0,px,py,hue,maxT,steps;

function reset(){
  a1=Math.random()*Math.PI*2-Math.PI;
  a2=Math.random()*Math.PI*2-Math.PI;
  w1=0;w2=0;
  t0=performance.now();
  hue=Math.random()*360;
  maxT=18+Math.random()*10;
  steps=0;
  px=n …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Cloth</title><style>html,body{margin:0;overflow:hidden;background:#0d1117}canvas{display:block}#w{position:fixed;top:10px;left:12px;color:#dfe6ee;font:14px monospace;z-index:1;text-shadow:0 0 4px #000}</style></head>
<body><div id="w"></div><canvas id="c"></canvas>
<script>
(function(){
const canvas=document.getElementById('c'),ctx=canvas.getContext('2d'),wEl=document.getElementById('w');
let W,H;
function resize(){W=canvas.width=innerWidth;H=canvas.height=innerHeight;}
resize();addEventListener('resize',resize);
const COLS=15,ROWS=10;
let points,constraints,startX,startY,spacing,t,windSeed,gravity;
function idx(x,y){return y*COLS+x;}
function init(){
  t=0;
  windSeed=Math.random()*1000;
  gravity=0.35+Math.random()*0.15;
  spacing=Math.min((W*0.65)/(COLS-1),(H*0.55)/(ROWS-1));
  startX=W/2-(COLS-1)*spacing/2;
  startY=H*0.12;
  po …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Wave Interference</title>
<style>
html,body{margin:0;padding:0;overflow:hidden;background:#000}
canvas{position:fixed;top:0;left:0;width:100vw;height:100vh}
#info{position:fixed;top:10px;left:10px;color:#9ff;font:14px monospace;text-shadow:0 0 4px #000;z-index:2}
</style></head>
<body>
<div id="info"></div>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c');
const ctx=cv.getContext('2d');
const W=200,H=125;
cv.width=W;cv.height=H;
const img=ctx.createImageData(W,H);
const info=document.getElementById('info');
let wavelength,k,omega,sepBase,sepAmp,sepSpeed,t=0,frame=0,life;

function randomize(){
  wavelength=6+Math.random()*8;
  k=2*Math.PI/wavelength;
  omega=0.15+Math.random()*0.15;
  sepBase=W*0.35+Math.random()*W*0.15;
  sepAmp=W*0.15+Math.random()*W*0.15;
  sepSpeed=0.004+Math.random()*0.006;
  life=Math.r …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf8"><title>N-Body Gravity</title><style>html,body{margin:0;overflow:hidden;background:#000}#hud{position:fixed;top:8px;left:10px;color:#eee;font:14px monospace;text-shadow:0 0 4px #000}</style></head><body><canvas id="cv"></canvas><div id="hud"></div><script>
const cv=document.getElementById('cv'),ctx=cv.getContext('2d'),hud=document.getElementById('hud');
let W=cv.width=innerWidth,H=cv.height=innerHeight;
addEventListener('resize',()=>{W=cv.width=innerWidth;H=cv.height=innerHeight;});
const G=1;
let bodies=[],restarting=false;
function init(){
bodies=[];
const cx=W/2,cy=H/2,starM=9000+Math.random()*2000;
bodies.push({x:cx,y:cy,vx:0,vy:0,m:starM,r:15,c:'#ffdd55',alive:1});
for(let i=0;i<6;i++){
const m=8+Math.random()*35;
const ang=Math.random()*Math.PI*2;
const dist=55+Math.random()*Math.min(W,H)*0.35;
const x=cx+Math.cos(ang)*dist,y=cy+Math.s …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Sloshing Water</title><style>
html,body{margin:0;height:100%;background:#111;display:flex;align-items:center;justify-content:center;font-family:sans-serif}
#wrap{position:relative}
#hud{position:absolute;top:8px;left:8px;color:#9cf;font-size:14px;pointer-events:none}
canvas{background:#0b1622;border:2px solid #2a3a4a;border-radius:6px}
</style></head><body>
<div id="wrap"><canvas id="c" width="640" height="420"></canvas><div id="hud">Tilt: 0.0&deg;</div></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('hud');
const W=cv.width,H=cv.height,N=200,R=5;
let pts=[],t=0,lastTheta=0;
function init(){
 pts=[];
 for(let i=0;i<N;i++){
  pts.push({x:W/2+(Math.random()-0.5)*160,y:40+Math.random()*120,vx:(Math.random()-0.5)*2,vy:0});
 }
 t=0;
}
init();
function step(){
 t+=16;
 if(t>24000){ …

Excerpt — the full answer is on the round page.

That was a total flop — now we're caught with our pants down, but giving up is simply not an option.

Subject: Formal Complaint – Defective Blender: Refund or Replacement Requested

Dear Customer Service Team,

I am writing to formally report an issue with the blender I recently purchased. The unit stopped working after only two days of use, emitting sparks during operation, which poses a serious safety concern and is unacceptable for a newly received product.

Given the severity of this fault, I request that you either issue a full refund or dispatch a replacement unit as soon as possible. As the item is unsafe in its current state, I would appreciate your prompt attention to this matter.

I look forward to your swift response and a satisfactory resolution.

Kind regards,
[Your Name]

To get this benefit, you must submit the fully completed application on time. If you don't, you lose your right to it.

Das haben wir vermasselt – das beschönigen wir nicht. Aber wir bringen das in Ordnung, und es kostet Sie keinen Cent.

We may have to postpone the current appointment; it's a sensitive topic, and I don't want to spread any venom.

{
  "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. 241.47
2. 1001, 1003, 1006
3. Order 1005, value 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

<!DOCTYPE html><html><head><meta charset="utf-8"><title>BST Animation</title>
<style>
html,body{margin:0;padding:0;overflow:hidden;background:#0b1020;font-family:sans-serif}
canvas{display:block}
#info{position:fixed;top:10px;left:10px;color:#cbd5e1;font-size:14px;background:rgba(15,23,42,.6);padding:6px 10px;border-radius:6px}
</style></head>
<body>
<div id="info">Nodes: 0</div>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),info=document.getElementById('info');
function resize(){cv.width=innerWidth;cv.height=innerHeight;}
resize();addEventListener('resize',resize);

let root=null,nodes=[],values=[],insIdx=0,phase='insert',target=null,path=[],pathIdx=0,phaseStart=0;
const INS_MS=550,PAUSE_MS=800,STEP_MS=650,END_MS=1800;

function randSet(){
  const s=new Set();
  const cnt=15+Math.floor(Math.random()*6);
  while(s.size<cnt) s.add(1+Math.f …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Hash Table Animation</title>
<style>html,body{margin:0;height:100%;background:#0b0e14;overflow:hidden}canvas{display:block}</style>
</head><body>
<canvas id="c"></canvas>
<script>
const c=document.getElementById('c'),x=c.getContext('2d');
function rs(){c.width=innerWidth;c.height=innerHeight}
rs();addEventListener('resize',rs);
const N=12;
let buckets,total,limit,lastAdd;
function reset(){
 buckets=Array.from({length:N},()=>[]);
 total=0;
 limit=40+Math.floor(Math.random()*21);
 lastAdd=0;
}
reset();
function colorFor(n){
 if(n<=1)return '#2ecc71';
 if(n<=3)return '#f1c40f';
 return '#e74c3c';
}
function frame(t){
 if(t-lastAdd>150){
  lastAdd=t;
  if(total<limit){
   const key=1+Math.floor(Math.random()*999);
   const h=key%N;
   buckets[h].push(key);
   total++;
  } else {
   reset();
  }
 }
 draw();
 requestAnimationFrame(frame); …

Excerpt — the full answer is on the round page.

<!doctype html><html><head><meta charset="utf-8"><title>Min-Heap Visualizer</title><style>
html,body{margin:0;padding:0;overflow:hidden;background:#0b1220;height:100%}
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;}
resize();addEventListener('resize',resize);

let heap=[];
let insCount=0, extCount=0;
let extractedMsg='', extractedTimer=0;
const MAX=14;

function sleep(ms){return new Promise(r=>setTimeout(r,ms));}
function rndVal(){return 1+Math.floor(Math.random()*99);}

function targetPos(i){
  const level=Math.floor(Math.log2(i+1));
  const levelStart=(1<<level)-1;
  const posInLevel=i-levelStart;
  const levelCount=1<<level;
  const x=W*(posInLevel+1)/(levelCount+1);
  const y=90+level*80;
  return {x,y};
}

function ma …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Ring Buffer</title><style>
html,body{margin:0;background:#111;height:100%;display:flex;align-items:center;justify-content:center;font-family:sans-serif;color:#eee}
#info{position:absolute;top:10px;left:10px;font-size:16px}
</style></head><body>
<div id="info"></div>
<canvas id="c" width="500" height="500"></canvas>
<script>
(function(){
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const info=document.getElementById('info');
const N=18, cx=250, cy=250, R=170, sr=16;
let slots,pAngle,cAngle,pSpeed,cSpeed,pIndex,cIndex,flash,last,elapsed;
function reset(){
 slots=new Array(N).fill(0);
 pAngle=0; cAngle=0;
 pSpeed=0.6+Math.random()*0.4;
 cSpeed=0.5+Math.random()*0.4;
 pIndex=0; cIndex=0;
 flash=0; elapsed=0;
}
reset();
last=performance.now();

function wander(s,min,max){
 s+= (Math.random()-0.5)*0.6;
 if(s<min)s=min; i …

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:#0b0e17;overflow:hidden}canvas{display:block}</style>
</head><body><canvas id="c"></canvas><script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
function rs(){cv.width=innerWidth;cv.height=innerHeight;if(head)layout()}
let idc=0,head=null,nodes=[],phase='idle',timer=0.6,pend={},hm={x:0,y:0},last=performance.now();
rs();onresize=rs;
function mk(v){return{val:v,x:0,y:0,tx:0,ty:0,ax:0,ay:0,next:null,fade:1,hl:0,rdy:0,dead:0}}
function chain(){let a=[],n=head;while(n&&a.length<60){a.push(n);n=n.next}return a}
function layout(){const a=chain();const bw=90,gap=50,cols=Math.max(1,Math.floor((cv.width-100)/(bw+gap)));a.forEach((n,i)=>{const r=Math.floor(i/cols),c=i%cols;n.tx=80+c*(bw+gap);n.ty=140+r*110})}
function fresh(){idc=0;head=null;nodes=[];const n= …

Excerpt — the full answer is on the round page.

1. SnackSeal Grip — Clips shut, stands tall, stays fresh
2. BagStand Clamp — Airtight seal, no more spills
3. CrispLock Trio — Fold, clip, stand it upright

(a) Teenagers:
The AquaGlow bottle holds 750 ml and keeps your drinks ice-cold for a full 12 hours, so you're covered all day. It's made from BPA-free plastic and comes with a built-in straw for easy sipping on the go. Plus it's dishwasher-safe and available in 4 colors, so you can grab your favorite.

(b) Seniors:
The AquaGlow bottle has a generous 750 ml capacity and keeps beverages cold for up to 12 hours, making it easy to stay hydrated throughout the day. It is made from BPA-free plastic for your safety and includes a built-in straw for comfortable, convenient drinking. For easy care, the bottle is dishwasher-safe and is offered in a choice of 4 colors.

1. 20% Off Winter Jackets, Nov 1-15 Only
2. Tell Us What You Think of Our App
3. New: Free Returns Within 60 Days
4. Winter Jacket Sale Starts November 1st
5. Quick Survey + Big News on Returns

She ran, red umbrella flapping like a wounded bird, but the platform emptied as the train pulled away without her. Rain needled the tracks. Across the harbor, a lighthouse blinked steady and patient, as if to say some departures simply mean you were meant to stay.

"Quality You Can Trust" makes no verifiable claim and is so generic it could be slapped on a toothpaste, a mattress, or a law firm with zero rewording. It ignores the one thing that actually matters to hikers and campers considering this product: whether it charges their phone reliably off-grid, in the sun, without extra weight or bulk.
1. "Sun Up, Phone Charged. Anywhere the Trail Takes You."
2. "No Outlet Needed. Just Sky."

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Selection vs Shell Sort Race</title>
<style>
html,body{margin:0;padding:0;background:#0d1117;overflow:hidden;height:100%}
canvas{display:block}
</style></head>
<body>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
let N=30;
function resize(){cv.width=innerWidth;cv.height=innerHeight;}
addEventListener('resize',resize);resize();
function shuffled(){let a=[];for(let i=1;i<=N;i++)a.push(i);for(let i=a.length-1;i>0;i--){let j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;}
function mkPanel(type){return {type,n:N,cmp:0,done:false,doneTime:0,swap:null,cmpPair:null};}
let selP=mkPanel('sel'),shellP=mkPanel('shell');
function initSel(p,arr){p.arr=arr.slice();p.boundary=0;p.j=1;p.minIdx=0;p.cmp=0;p.done=false;p.swap=null;p.cmpPair=null;}
function initShell(p,arr){p.arr=ar …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>BFS Flood</title>
<style>html,body{margin:0;height:100%;background:#0b0b0f;display:flex;align-items:center;justify-content:center}canvas{background:#0b0b0f}</style>
</head><body>
<canvas id="c"></canvas>
<script>
const cols=20,rows=15,cs=32;
const canvas=document.getElementById('c');
canvas.width=cols*cs;
canvas.height=rows*cs+34;
const ctx=canvas.getContext('2d');
const total=cols*rows;
let walls,start,goal,dist,rings,path,visitedCount,state,ringIdx,pathIdx,timer=0,last=0;
const FLOOD_STEP=140,PATH_STEP=90,PAUSE=900;

function idx(x,y){return y*cols+x;}

function genMaze(){
  while(true){
    walls=new Array(total).fill(false);
    for(let i=0;i<total;i++){ if(Math.random()<0.25) walls[i]=true; }
    start=idx(0,0);
    goal=idx(cols-1,rows-1);
    walls[start]=false;
    walls[goal]=false;
    const d=new Array(total).fill(-1); …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Prim MST</title><style>
html,body{margin:0;background:#0b0f1a;overflow:hidden}
canvas{display:block;margin:0 auto;background:#0b0f1a}
</style></head><body>
<canvas id="c" width="900" height="620"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const GW=900,GH=430,CH=150,GAP=10;
let nodes,edges,inTree,treeEdges,history,frontier,chosen,mode,timer,n;
function dist(a,b){return Math.hypot(a.x-b.x,a.y-b.y)}
function init(){
n=20+Math.floor(Math.random()*6);
nodes=[];
for(let i=0;i<n;i++)nodes.push({x:40+Math.random()*(GW-80),y:40+Math.random()*(GH-80)});
edges=[];
const R=260;
for(let i=0;i<n;i++)for(let j=i+1;j<n;j++){const d=dist(nodes[i],nodes[j]);if(d<R)edges.push({a:i,b:j,w:d});}
inTree=new Array(n).fill(false);
inTree[Math.floor(Math.random()*n)]=true;
treeEdges=[];history=[0];frontier=[];chosen=nul …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Boids</title>
<style>html,body{margin:0;background:#0b0e14;overflow:hidden}canvas{display:block}#hud{position:fixed;top:8px;left:10px;color:#9fe;font:14px monospace;text-shadow:0 0 4px #000}</style>
</head><body>
<div id="hud"></div>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
addEventListener('resize',resize);resize();

const N=60;
const PERCEPT=70, SEPD=24, PREDR=140;
function rnd(a,b){return a+Math.random()*(b-a);}

function init(){
  const boids=[];
  for(let i=0;i<N;i++){
    boids.push({x:rnd(0,W),y:rnd(0,H),vx:rnd(-2,2),vy:rnd(-2,2)});
  }
  const pred={x:rnd(0,W),y:rnd(0,H),ang:rnd(0,6.28),vx:0,vy:0};
  return {boids,pred,t:0};
}
let state=init();

function wrap(b …

Excerpt — the full answer is on the round page.

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Maze Gen &amp; Solve</title>
<style>
body{margin:0;background:#0d0d12;color:#eee;font-family:sans-serif;display:flex;flex-direction:column;align-items:center}
#info{padding:10px;font-size:15px}
#info span{font-weight:bold;color:#ffe066}
canvas{background:#000;border:1px solid #333}
</style></head><body>
<div id="info">Carved: <span id="c1">0</span>/<span id="tot"></span>    Steps: <span id="c2">0</span>    <span id="ph"></span></div>
<canvas id="cv"></canvas>
<script>
const cols=25,rows=18,cs=26;
const cv=document.getElementById('cv');
cv.width=cols*cs;cv.height=rows*cs;
const ctx=cv.getContext('2d');
const c1=document.getElementById('c1'),c2=document.getElementById('c2'),ph=document.getElementById('ph');
document.getElementById('tot').textContent=cols*rows;
let grid,stack,carved,phase,solveStack,steps,pauseTimer;
function newCell( …

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 the following week. They also agreed to adopt Priya's new five-label ticket labeling system in place of the old twelve-label one, with Priya committing to update the shared labeling guide document by Wednesday. The office plant budget discussion was postponed to the next meeting with no decision made, and Tom agreed to send out the updated calendar invite reflecting the Monday change by end of day Friday.

The legacy /v1/reports API is being shut down and all integrations must migrate to /v3/reports by September 30, 2026.

1. Maria -- finalize the new homepage copy and send it to Ben for review -- by Thursday
2. Ben -- review the homepage copy and send feedback to Maria -- by Friday
3. Chen -- fix the broken contact form -- by Monday
4. Maria -- chase the client for confirmation on the new logo colors -- today
5. Ben -- send the privacy policy draft to legal -- by next Wednesday

The reviewer reports that the blender's jug leaks liquid around the base seal whenever it is filled past the halfway mark. They also state that speed settings 4 through 7 on the 10-speed dial sound and function identically, with no perceptible difference between them. Additionally, they note that the motor automatically shuts off after about 90 seconds of continuous use due to overheating.

1. Mix 100g whole wheat flour with 100g water (21°C); cover loosely 24 hours.
2. Discard half the mixture; feed with 100g flour and 100g water.
3. Repeat discard-and-feed daily for about 5 more days.
4. By day 7, look for bubbles and a tangy smell.
5. Starter is ready once it doubles within 4-6 hours of feeding.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Fireworks</title><style>html,body{margin:0;height:100%;background:#000;overflow:hidden}canvas{display:block}#c{position:fixed;top:8px;left:8px;color:#fff;font:12px monospace;z-index:2;opacity:.8}</style></head><body>
<div id="c"></div>
<canvas id="cv"></canvas>
<script>
(function(){
const cv=document.getElementById('cv'),ctx=cv.getContext('2d'),cd=document.getElementById('c');
function resize(){cv.width=innerWidth;cv.height=innerHeight}
resize();addEventListener('resize',resize);
const G=0.05,DRAG=0.988;
let rockets=[],sparks=[];
const COLORS=[['#ff3b30','#ff9500','#ffcc00'],['#34c759','#30d158','#00ffab'],['#0a84ff','#5ac8fa','#64d2ff'],['#af52de','#ff2d95','#ffffff'],['#ffd60a','#ff453a','#ff9f0a'],['#ff6ec7','#7dfff0','#fff']];
function rnd(a,b){return a+Math.random()*(b-a)}
function spawnRocket(){
  const x=rnd(cv.width*0.15,cv. …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Rain</title><style>
html,body{margin:0;padding:0;overflow:hidden;background:#000;height:100%}
canvas{display:block}
#c{position:fixed;top:8px;left:8px;color:#cde;font:14px sans-serif;text-shadow:0 0 4px #000;z-index:2}
</style></head><body>
<div id="c">0</div><canvas id="cv"></canvas>
<script>
const cv=document.getElementById('cv'),ctx=cv.getContext('2d'),cnt=document.getElementById('c');
let W,H;
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
rs();addEventListener('resize',rs);
let drops=[],bg=[];
function initBG(){bg=[];for(let i=0;i<6;i++)bg.push({x:Math.random()*W,y:Math.random()*H,r:60+Math.random()*120,c:`hsl(${Math.random()*360},60%,${30+Math.random()*20}%)`});}
initBG();
function spawn(){drops.push({x:Math.random()*W,y:Math.random()*H,r:1+Math.random()*2,vy:0,vx:0,phase:'grow',trail:[],life:0});}
for(let i=0;i …

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:#0a0409;overflow:hidden}
canvas{display:block}
#hud{position:fixed;top:10px;left:14px;color:#ffb37a;font:12px monospace;text-shadow:0 0 6px #000;opacity:.85}
</style></head><body>
<canvas id="c"></canvas><div id="hud"></div>
<script>
(function(){
var cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('hud');
var W,H,lampX,lampY,lampW,lampH,lampR,blobs,last,restartAt;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;lampW=Math.min(W*0.42,260);lampH=H*0.82;lampX=W/2-lampW/2;lampY=H*0.09;lampR=lampW/2;}
function rnd(a,b){return a+Math.random()*(b-a);}
function makeBlob(){
var r=rnd(26,46);
return {x:rnd(lampX+r,lampX+lampW-r),y:rnd(lampY+r,lampY+lampH-r),r:r,vx:rnd(-6,6),vy:rnd(-6,6),t:rnd(0.2,0.8)};
}
function initBlobs() …

Excerpt — the full answer is on the round page.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Fractal Tree</title><style>html,body{margin:0;height:100%;background:#0a1420;overflow:hidden}canvas{display:block}#c{position:fixed;top:8px;left:10px;color:#a9e6ff;font:14px monospace;text-shadow:0 0 4px #000}</style></head><body><canvas id="cv"></canvas><div id="c"></div><script>
const cv=document.getElementById('cv'),x=cv.getContext('2d'),lb=document.getElementById('c');
function rs(){cv.width=innerWidth;cv.height=innerHeight}
rs();addEventListener('resize',rs);
function R(a,b){return a+Math.random()*(b-a)}
let br,t,dl,gd,ph,wu,tx,ty;
function build(){
br=[];tx=cv.width/2;ty=cv.height*0.96;
const md=Math.floor(R(8,11));
function add(pi,ang,len,dep){
const leaf=dep<=0;
const col='hsl('+Math.floor(R(90,150))+',70%,55%)';
br.push({p:pi,ang:ang,len:len,dep:dep,leaf:leaf,col:col});
const i=br.length-1;
if(dep>0){
const n=(dep>2&&Math.r …

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;overflow:hidden;background:#000}canvas{display:block}#c{position:fixed;top:8px;left:8px;color:#fff;font:12px monospace;z-index:2}</style>
</head><body>
<div id="c"></div>
<canvas id="cv"></canvas>
<script>
const cv=document.getElementById('cv'),ctx=cv.getContext('2d');
let W,H;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
resize();addEventListener('resize',resize);
const cnt=document.getElementById('c');
let N=300+Math.floor(Math.random()*300);
let seedA,seedB,seedC,seedD;
function reseed(){
  seedA=Math.random()*1000;seedB=Math.random()*1000;seedC=Math.random()*1000;seedD=Math.random()*1000;
}
reseed();
function noise(x,y,t){
  return Math.sin(x*0.006+seedA+t*0.15)+Math.sin(y*0.007+seedB-t*0.12)+
         Math.sin((x+y)*0.004+seedC+t*0.08)+Math.sin((x-y)*0.005+seedD+t …

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, its official launch date, at the Maple Community Center, the community building located on Maple Street. Beginning that week, the clinic will keep regular weekly hours every Wednesday from 10 a.m. to 4 p.m. During these hours, it will offer free blood pressure checks, vaccinations, and short medical consultations. Residents can book an appointment either by phone or in person at the center, and Spanish and Vietnamese interpreters will be available throughout clinic hours to help visitors.

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 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.
See below for the cleaning checklist.

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