Model profile
Claude Opus
28/29answered (R1–R30)
1DNF / pending
8.28avg. score · 19 scored rounds (R1–R30)
Rounds & answers 24
▶ R6 · Extraction → JSON Open round →
{"name": "AquaPur X2 Trinkbrunnen", "brand": "PetFlow", "price_eur": 29.99, "weight_g": 800, "features": ["Dreifach-Filter", "extrem leises 2-Watt-Pumpsystem", "spuelmaschinenfester Edelstahlaufsatz"], "in_stock": false}▶ R7 · Sentiment classification Open round →
[{"id":1,"sentiment":"positive"},{"id":2,"sentiment":"negative"},{"id":3,"sentiment":"neutral"},{"id":4,"sentiment":"negative"},{"id":5,"sentiment":"positive"},{"id":6,"sentiment":"neutral"},{"id":7,"sentiment":"neutral"},{"id":8,"sentiment":"negative"},{"id":9,"sentiment":"positive"},{"id":10,"sentiment":"neutral"}]▶ R8 · Translation DE↔EN Open round →
That's old news — the early bird catches the worm, and those who come late get what they deserve. We pulled the cart out of the mud, but now we mustn't put the cart before the horse. --- Probieren geht über Studieren: Unser knappes Budget zwang uns, hier und da Abstriche zu machen, und trotzdem lief der Launch reibungslos über die Bühne.
▶ R9 · One-liner code Open round →
1. ^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$
2. SELECT customer_id, SUM(amount) AS total FROM orders GROUP BY customer_id ORDER BY total DESC LIMIT 5;
3. [.items[].id]
4. nav a[href^="http"]
5. awk '{print $1}' access.log | sort -u | wc -l▶ R10 · Facts quiz Open round →
1. Canberra 2. 1989 3. W 4. I'm a teapot 5. Franz Kafka 6. Saturn 7. 101010 8. 443 9. Linus Torvalds 10. 97
▶ R11 · Micro-copy & slogans Open round →
1. Frisches Wasser, das Ihre Katze liebt. 2. Frisch gebacken, mit Liebe gemacht. 3. Vergleiche jedes KI-Modell an einem Ort. 4. Stille hoeren. Alles andere ausblenden. 5. Ein Passwort. Alle sicher.
▶ R13 · Image prompts Open round →
1. Photorealistic ergonomic gaming chair, sleek black-and-red mesh, in a neon-lit streaming room, purple and cyan RGB glow, dual monitors softly bokeh in background, cinematic lighting, ultra-detailed, 4k. 2. Photorealistic craft gin bottle on a polished wooden bar, moody evening light, warm amber glow, condensation droplets, botanicals nearby, shallow depth of field, cinematic atmosphere, ultra-detailed, 4k. 3. Photorealistic e-scooter leaning against a vibrant graffiti wall, urban morning light, soft golden sunrise, wet pavement reflections, empty city street, cinematic mood, sharp detail, 4k.
▶ R14 · Product names Open round →
1. HydroPing — Sip smarter, stay hydrated 2. AquaNudge — Your gentle drink reminder 3. PulseFlask — Never forget to drink 4. DropWise — Hydration that taps you 5. SipSync — Water reminders that flow
▶ R15 · CSS spinner Open round →
```html
<div class="spinner"></div>
<style>
.spinner {
width: 48px;
height: 48px;
border: 5px solid #e0e0e0;
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
```▶ R16 · Explain it to a child (German) Open round →
Ein Akku ist wie ein Sparschwein, aber statt Münzen speichert er Strom. Wenn du dein Handy auflädst, steckst du Energie hinein, so wie du Münzen ins Sparschwein wirfst. Beim Benutzen holt das Handy die Energie wieder heraus, bis das Sparschwein leer ist. Dann füllst du es beim nächsten Laden einfach wieder auf.
▶ R17 · Logic riddle★ 9.5/10 Open round →
Ich ziehe aus der Kiste mit dem Etikett "Gemischt", denn da dieses Etikett falsch ist, enthält sie sortenrein nur eine Fruchtart. Ziehe ich z. B. einen Apfel, ist dies die "Äpfel"-Kiste. Die mit "Birnen" beschriftete Kiste kann dann keine Birnen (Etikett falsch) und keine Äpfel (schon vergeben) enthalten, ist also "Gemischt". Die mit "Äpfel" beschriftete Kiste erhält folglich das Etikett "Birnen".
▶ R18 · German registers & tone★ 9/10 Open round →
1. Sehr geehrte Damen und Herren, wir müssen Ihnen leider mitteilen, dass wir den vereinbarten Liefertermin nicht einhalten können, und bitten dies zu entschuldigen. 2. Update: Der Liefertermin ist nicht zu halten. 3. Sorry, das mit dem Liefertermin wird bei uns leider nix.
▶ R19 · Table QA★ 10/10 Open round →
1. VitaSip 2. 830 3. PureFlow 4. 19,51 5. 3
▶ R20 · JSON repair★ 10/10 Open round →
{"name": "Trinkflasche Pro", "price": 29.90, "tags": ["outdoor", "sport"], "stock": {"berlin": 12, "muenchen": 7, "hamburg": null}, "active": true}▶ R21 · Sorting race bubble/insertion/selectionOK★ 8.5/10 Open round →
Show code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sorting Race</title>
<style>
body{background:#0f172a;color:#e2e8f0;font-family:system-ui,sans-serif;margin:0;padding:20px;text-align:center}
h1{font-size:20px;margin:0 0 16px}
.race{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.panel{background:#1e293b;border-radius:10px;padding:12px;width:260px}
.panel h2{font-size:14px;margin:0 0 8px}
canvas{background:#0f172a;border-radius:6px;width:100%;height:150px}
.done{color:#34d399;font-weight:bold;height:18px;font-size:13px}
</style>
</head>
<body>
<h1>Sorting Race \u2014 40 values</h1>
<div class="race">
<div class="panel"><h2>Bubble Sort</h2><canvas id="c0" width="240" height="150"></canvas><div class="done" id="d0"></div></div>
<div class="panel"><h2>Insertion Sort</h2><canvas id="c1" width="240" height="150"></canvas><div class="done" id="d1"></div></div>
<div class="panel"><h2>Selection Sort</h2><canvas id="c2" width="240" height="150"></canvas><div class="done" id="d2"></div></div>
</div>
<script>
const N=40, base=[];
for(let i=0;i<N;i++)base.push(Math.random());
function clone(a){return a.slice()}
function draw(id,arr,active){
const cv=document.getElementById(id),g=cv.getContext('2d'),w=cv.width/N;
g.clearRect(0,0,cv.width,cv.height);
for(let i=0;i<N;i++){
g.fillStyle=active&&active.includes(i)?'#f59e0b':'#38bdf8';
const h=arr[i]*cv.height;
g.fillRect(i*w,cv.height-h,w-1,h);
}
}
function* bubble(a){
for(let i=0;i<a.length;i++)for(let j=0;j<a.length-1-i;j++){
if(a[j]>a[j+1]){[a[j],a[j+1]]=[a[j+1],a[j]];}
yield[j,j+1];
}
}
function* insertion(a){
for(let i=1;i<a.length;i++){let k=a[i],j=i-1;
while(j>=0&&a[j]>k){a[j+1]=a[j];j--;yield[j+1,i];}
a[j+1]=k;yield[j+1,i];
}
}
function* selection(a){
for(let i=0;i<a.length;i++){let m=i;
for(let j=i+1;j<a.length;j++){if(a[j]<a[m])m=j;yield[i,j,m];}
[a[i],a[m]]=[a[m],a[i]];yield[i,m];
}
}
const runners=[
{c:'c0',d:'d0',a:clone(base),g:null,f:bubble},
{c:'c1',d:'d1',a:clone(base),g:null,f:insertion},
{c:'c2',d:'d2',a:clone(base),g:null,f:selection}
];
runners.forEach(r=>r.g=r.f(r.a));
function tick(){
let running=false;
for(const r of runners){
if(r.done){continue;}
const step=r.g.next();
if(step.done){r.done=true;draw(r.c,r.a,[]);document.getElementById(r.d).textContent='DONE';}
else{running=true;draw(r.c,r.a,step.value);}
}
if(running)requestAnimationFrame(tick);
}
runners.forEach(r=>draw(r.c,r.a,[]));
requestAnimationFrame(tick);
</script>
</body>
</html>▶ R22 · Hexagon ballsOK★ 8.5/10 Open round →
Show code
<!doctype html><html><head><meta charset="utf-8"><title>Hexagon Balls</title>
<style>body{margin:0;background:#111;display:flex;justify-content:center;align-items:center;height:100vh}canvas{background:#000}</style>
</head><body>
<canvas id="c" width="600" height="600"></canvas>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d');
const cx=300,cy=300,R=250,g=0.25,N=6;
let ang=0,omega=0.007;
const cols=['#ff4757','#ffa502','#2ed573','#1e90ff','#eccc68','#ff6b81','#7bed9f','#70a1ff'];
let balls=[];
for(let i=0;i<8;i++){balls.push({x:cx+(Math.random()-0.5)*220,y:cy+(Math.random()-0.5)*220,vx:(Math.random()-0.5)*5,vy:(Math.random()-0.5)*5,r:14,c:cols[i]});}
function verts(){let v=[];for(let i=0;i<N;i++){let a=ang+i*Math.PI/3;v.push([cx+R*Math.cos(a),cy+R*Math.sin(a)]);}return v;}
function step(){
for(let b of balls){b.vy+=g;b.x+=b.vx;b.y+=b.vy;}
for(let i=0;i<balls.length;i++)for(let j=i+1;j<balls.length;j++){
let a=balls[i],b=balls[j],dx=b.x-a.x,dy=b.y-a.y,d=Math.hypot(dx,dy),m=a.r+b.r;
if(d<m&&d>0){let nx=dx/d,ny=dy/d,ov=(m-d)/2;a.x-=nx*ov;a.y-=ny*ov;b.x+=nx*ov;b.y+=ny*ov;
let dvx=b.vx-a.vx,dvy=b.vy-a.vy,p=dvx*nx+dvy*ny;if(p<0){a.vx+=p*nx;a.vy+=p*ny;b.vx-=p*nx;b.vy-=p*ny;}}
}
let vs=verts();
for(let b of balls){
for(let i=0;i<N;i++){
let a=vs[i],c=vs[(i+1)%N],ex=c[0]-a[0],ey=c[1]-a[1];
let nx=ey,ny=-ex,l=Math.hypot(nx,ny);nx/=l;ny/=l;
let mx=(a[0]+c[0])/2-cx,my=(a[1]+c[1])/2-cy;
if(nx*mx+ny*my<0){nx=-nx;ny=-ny;}
let dist=(b.x-a[0])*nx+(b.y-a[1])*ny;
if(dist>-b.r){
let rx=b.x-cx,ry=b.y-cy,wvx=-omega*ry,wvy=omega*rx;
let ux=b.vx-wvx,uy=b.vy-wvy,dot=ux*nx+uy*ny;
if(dot>0){ux-=2*dot*nx;uy-=2*dot*ny;b.vx=ux+wvx;b.vy=uy+wvy;}
let pen=dist+b.r;b.x-=nx*pen;b.y-=ny*pen;
}
}
}
ang+=omega;
}
function draw(){
x.clearRect(0,0,600,600);
let vs=verts();x.beginPath();x.moveTo(vs[0][0],vs[0][1]);for(let i=1;i<N;i++)x.lineTo(vs[i][0],vs[i][1]);x.closePath();
x.strokeStyle='#0ff';x.lineWidth=3;x.stroke();
for(let b of balls){x.beginPath();x.arc(b.x,b.y,b.r,0,7);x.fillStyle=b.c;x.fill();}
}
function loop(){step();draw();requestAnimationFrame(loop);}loop();
</script></body></html>▶ R23 · Pendulum waveOK★ 8.5/10 Open round →
Show code
<!doctype html><html><head><meta charset="utf-8"><title>Pendulum Wave</title>
<style>body{margin:0;background:#0d0d1a;display:flex;justify-content:center;align-items:center;height:100vh}canvas{background:#0d0d1a}</style>
</head><body>
<canvas id="c" width="700" height="560"></canvas>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d');
const N=15,cycle=30,base=20,amp=0.55,py0=50,k=178;
let pend=[];
for(let i=0;i<N;i++){let f=(base+i)/cycle;pend.push({f:f,L:k/(f*f),px:80+i*38,hue:i/N*300});}
let t0=performance.now();
function loop(now){
let t=(now-t0)/1000;
x.clearRect(0,0,700,560);
x.fillStyle='#444';x.fillRect(60,py0-4,600,4);
for(let p of pend){
let th=amp*Math.cos(2*Math.PI*p.f*t);
let bx=p.px+p.L*Math.sin(th),by=py0+p.L*Math.cos(th);
x.strokeStyle='rgba(255,255,255,0.25)';x.lineWidth=1;
x.beginPath();x.moveTo(p.px,py0);x.lineTo(bx,by);x.stroke();
x.beginPath();x.arc(bx,by,9,0,7);x.fillStyle='hsl('+p.hue+',80%,60%)';x.fill();
}
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script></body></html>▶ R24 · Maze race BFS/DFS/A*OK★ 8.5/10 Open round →
Show code
<!doctype html><html><head><meta charset="utf-8"><title>Pathfinding Race</title>
<style>body{margin:0;background:#111;color:#eee;font-family:sans-serif;text-align:center}
.row{display:flex;justify-content:center;gap:20px;margin-top:10px}
.p{display:inline-block}canvas{background:#000}h3{margin:6px}</style>
</head><body>
<h2>BFS vs DFS vs A*</h2>
<div class="row" id="row"></div>
<script>
const G=25,CS=12,W=G*CS;
let grid;
function nbrs(c){let x=c%G,y=(c-x)/G,r=[];
if(x>0)r.push(c-1);if(x<G-1)r.push(c+1);if(y>0)r.push(c-G);if(y<G-1)r.push(c+G);
return r.filter(n=>grid[n]===0);}
function solvable(){let q=[0],s=new Set([0]);while(q.length){let c=q.shift();if(c===G*G-1)return true;for(let n of nbrs(c))if(!s.has(n)){s.add(n);q.push(n);}}return false;}
function genMaze(){while(true){grid=[];for(let i=0;i<G*G;i++)grid.push(Math.random()<0.28?1:0);grid[0]=0;grid[G*G-1]=0;if(solvable())return;}}
function h(c){let x=c%G,y=(c-x)/G;return (G-1-x)+(G-1-y);}
function makeAlgo(name,type){return {name,type,frontier:[{c:0,g:0,f:0}],visited:new Set([0]),parent:new Map(),done:false,path:null};}
function stepAlgo(a){
if(a.done)return;let cur;
if(a.type==='bfs')cur=a.frontier.shift();
else if(a.type==='dfs')cur=a.frontier.pop();
else{let bi=0;for(let i=1;i<a.frontier.length;i++)if(a.frontier[i].f<a.frontier[bi].f)bi=i;cur=a.frontier.splice(bi,1)[0];}
if(!cur){a.done=true;return;}
let c=cur.c,gc=cur.g||0;
if(c===G*G-1){a.done=true;let p=[],t=c;while(t!==undefined){p.push(t);t=a.parent.get(t);}a.path=p;return;}
for(let n of nbrs(c))if(!a.visited.has(n)){a.visited.add(n);a.parent.set(n,c);let ng=gc+1;a.frontier.push({c:n,g:ng,f:ng+h(n)});}
}
let algos=[],ctxs=[];
genMaze();
const defs=[['BFS','bfs'],['DFS','dfs'],['A*','astar']];
for(let d of defs){
let div=document.createElement('div');div.className='p';
let t=document.createElement('h3');t.textContent=d[0];
let cv=document.createElement('canvas');cv.width=W;cv.height=W;
let st=document.createElement('div');st.textContent='searching...';st.style.color='#0f0';
div.appendChild(t);div.appendChild(cv);div.appendChild(st);
document.getElementById('row').appendChild(div);
let a=makeAlgo(d[0],d[1]);a.st=st;algos.push(a);ctxs.push(cv.getContext('2d'));
}
function draw(a,ctx){
for(let i=0;i<G*G;i++){let x=i%G,y=(i-x)/G;ctx.fillStyle=grid[i]?'#333':'#000';ctx.fillRect(x*CS,y*CS,CS,CS);}
a.visited.forEach(c=>{let x=c%G,y=(c-x)/G;ctx.fillStyle='rgba(80,120,255,0.5)';ctx.fillRect(x*CS,y*CS,CS,CS);});
if(a.path)for(let c of a.path){let x=c%G,y=(c-x)/G;ctx.fillStyle='#ff0';ctx.fillRect(x*CS,y*CS,CS,CS);}
ctx.fillStyle='#0f0';ctx.fillRect(0,0,CS,CS);ctx.fillStyle='#f00';ctx.fillRect((G-1)*CS,(G-1)*CS,CS,CS);
}
function loop(){
for(let i=0;i<algos.length;i++){let a=algos[i];
for(let s=0;s<3;s++)stepAlgo(a);
draw(a,ctxs[i]);
if(a.done)a.st.textContent=a.path?'DONE':'no path';
}
requestAnimationFrame(loop);
}
loop();
</script></body></html>▶ R25 · Sorting race quick/merge/heapOK★ 8.5/10 Open round →
Show code
<!doctype html><html><head><meta charset="utf-8"><title>Sorting Race</title>
<style>body{margin:0;background:#111;color:#eee;font-family:sans-serif;text-align:center}canvas{background:#111}</style>
</head><body>
<h2>Quicksort vs Mergesort vs Heapsort</h2>
<canvas id="c" width="960" height="320"></canvas>
<script>
const cv=document.getElementById('c'),x=cv.getContext('2d');
const N=60;
function qsort(a,rec){function sw(i,j){let t=a[i];a[i]=a[j];a[j]=t;rec.push({i,v:a[i]});rec.push({i:j,v:a[j]});}
function qs(lo,hi){if(lo>=hi)return;let p=a[hi],i=lo;for(let j=lo;j<hi;j++)if(a[j]<p){sw(i,j);i++;}sw(i,hi);qs(lo,i-1);qs(i+1,hi);}qs(0,a.length-1);}
function msort(a,rec){let tmp=a.slice();function ms(lo,hi){if(hi-lo<2)return;let m=(lo+hi)>>1;ms(lo,m);ms(m,hi);
let i=lo,j=m,k=lo;while(i<m&&j<hi)tmp[k++]=a[i]<=a[j]?a[i++]:a[j++];while(i<m)tmp[k++]=a[i++];while(j<hi)tmp[k++]=a[j++];
for(let q=lo;q<hi;q++){a[q]=tmp[q];rec.push({i:q,v:a[q]});}}ms(0,a.length);}
function hsort(a,rec){let n=a.length;function sw(i,j){let t=a[i];a[i]=a[j];a[j]=t;rec.push({i,v:a[i]});rec.push({i:j,v:a[j]});}
function hf(n,i){let l=2*i+1,r=2*i+2,m=i;if(l<n&&a[l]>a[m])m=l;if(r<n&&a[r]>a[m])m=r;if(m!==i){sw(i,m);hf(n,m);}}
for(let i=(n>>1)-1;i>=0;i--)hf(n,i);for(let i=n-1;i>0;i--){sw(0,i);hf(i,0);}}
let base=[];for(let i=0;i<N;i++)base.push(i+1);
for(let i=N-1;i>0;i--){let j=Math.random()*(i+1)|0;let t=base[i];base[i]=base[j];base[j]=t;}
let algos=[{name:'Quicksort',fn:qsort},{name:'Mergesort',fn:msort},{name:'Heapsort',fn:hsort}];
for(let a of algos){let arr=base.slice();a.rec=[];a.fn(arr,a.rec);a.work=base.slice();a.ptr=0;a.hi=-1;}
const PW=320,bw=4;
function draw(){
x.clearRect(0,0,960,320);
for(let p=0;p<3;p++){let a=algos[p],ox=p*PW+12;
x.fillStyle='#fff';x.font='14px sans-serif';x.fillText(a.name,ox,20);
if(a.ptr>=a.rec.length){x.fillStyle='#0f0';x.fillText('DONE',ox+130,20);}
for(let i=0;i<N;i++){let h=a.work[i]/N*260;
x.fillStyle=(i===a.hi)?'#ff3860':'#3ea0ff';
x.fillRect(ox+i*bw,300-h,bw-1,h);}
}
}
function loop(){
for(let a of algos){for(let s=0;s<2;s++){if(a.ptr<a.rec.length){let r=a.rec[a.ptr++];a.work[r.i]=r.v;a.hi=r.i;}}}
draw();requestAnimationFrame(loop);
}
loop();
</script></body></html>▶ R26 · Projectile ballisticsOK★ 8.5/10 Open round →
Show code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Projectile Motion</title>
<style>html,body{margin:0;background:#0b1020;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,ground;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;ground=H-60;}
addEventListener('resize',resize);resize();
const angles=[20,34,48,61,75],speed=Math.min(W,H)*0.9,g=400,ox=80;
const colors=['#ff5a5f','#ffb703','#8ecae6','#90ee90','#c77dff'];
let balls=[];
function reset(){oy=ground;balls=angles.map((a,i)=>{const r=a*Math.PI/180;return{x:ox,y:ground,vx:Math.cos(r)*speed,vy:-Math.sin(r)*speed,trail:[],landed:false,land:0,c:colors[i]};});}
let oy;reset();
let last=performance.now();
function step(t){const dt=Math.min((t-last)/1000,0.033);last=t;
ctx.fillStyle='#0b1020';ctx.fillRect(0,0,W,H);
ctx.strokeStyle='#334';ctx.beginPath();ctx.moveTo(0,ground);ctx.lineTo(W,ground);ctx.stroke();
let allLanded=true;
for(const b of balls){
if(!b.landed){allLanded=false;
b.vy+=g*dt;b.x+=b.vx*dt;b.y+=b.vy*dt;
b.trail.push({x:b.x,y:b.y});if(b.trail.length>120)b.trail.shift();
if(b.y>=ground){b.y=ground;b.landed=true;b.land=b.x;}
}
for(let i=0;i<b.trail.length;i++){const p=b.trail[i];ctx.globalAlpha=i/b.trail.length*0.7;ctx.fillStyle=b.c;ctx.beginPath();ctx.arc(p.x,p.y,2,0,7);ctx.fill();}
ctx.globalAlpha=1;ctx.fillStyle=b.c;ctx.beginPath();ctx.arc(b.x,b.y,7,0,7);ctx.fill();
if(b.landed){ctx.strokeStyle=b.c;ctx.beginPath();ctx.moveTo(b.land,ground);ctx.lineTo(b.land,ground+18);ctx.stroke();
ctx.fillStyle=b.c;ctx.font='12px sans-serif';ctx.fillText(Math.round((b.land-ox)/10)+'m',b.land-10,ground+34);}
}
if(allLanded){if(!balls.doneAt)balls.doneAt=t;if(t-balls.doneAt>1200)reset();}
requestAnimationFrame(step);}
requestAnimationFrame(step);
</script>
</body>
</html>▶ R27 · Double-pendulum chaosOK★ 8.5/10 Open round →
Show code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Double Pendulum Chaos</title>
<style>html,body{margin:0;background:#05070f;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,cx,cy;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;cx=W/2;cy=H/2-100;}
addEventListener('resize',resize);resize();
const L1=140,L2=140,m1=12,m2=12,g=1;
function mk(a1){return{a1,a2:a1,p1:0,p2:0,trail:[]};}
const pends=[{s:mk(2.0),c:'#ff4d6d'},{s:mk(2.001),c:'#4dd2ff'}];
function acc(s){const{a1,a2,p1,p2}=s;
const d=a1-a2,sd=Math.sin(d),cd=Math.cos(d);
const den=m1+m2*sd*sd;
const a1a=(-g*(2*m1+m2)*Math.sin(a1)-m2*g*Math.sin(a1-2*a2)-2*sd*m2*(p2*p2*L2+p1*p1*L1*cd))/(L1*2*den);
const a2a=(2*sd*(p1*p1*L1*(m1+m2)+g*(m1+m2)*Math.cos(a1)+p2*p2*L2*m2*cd))/(L2*2*den);
return[a1a,a2a];}
function integ(s){const dt=0.12;const[a1a,a2a]=acc(s);s.p1+=a1a*dt;s.p2+=a2a*dt;s.a1+=s.p1*dt;s.a2+=s.p2*dt;}
function step(){ctx.fillStyle='#05070f';ctx.fillRect(0,0,W,H);
for(const P of pends){const s=P.s;for(let k=0;k<3;k++)integ(s);
const x1=cx+L1*Math.sin(s.a1),y1=cy+L1*Math.cos(s.a1);
const x2=x1+L2*Math.sin(s.a2),y2=y1+L2*Math.cos(s.a2);
s.trail.push([x2,y2]);if(s.trail.length>600)s.trail.shift();
ctx.strokeStyle=P.c;ctx.lineWidth=1;ctx.beginPath();
for(let i=0;i<s.trail.length;i++){ctx.globalAlpha=i/s.trail.length;const p=s.trail[i];i?ctx.lineTo(p[0],p[1]):ctx.moveTo(p[0],p[1]);}
ctx.stroke();ctx.globalAlpha=1;
ctx.strokeStyle=P.c;ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(cx,cy);ctx.lineTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke();
ctx.fillStyle=P.c;ctx.beginPath();ctx.arc(x1,y1,m1/2,0,7);ctx.fill();ctx.beginPath();ctx.arc(x2,y2,m2/2,0,7);ctx.fill();
}
requestAnimationFrame(step);}
step();
</script>
</body>
</html>▶ R28 · Particle fountainOK★ 8.5/10 Open round →
Show code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Particle Fountain</title>
<style>html,body{margin:0;background:#050810;overflow:hidden;font-family:sans-serif}
canvas{display:block}#ui{position:fixed;top:10px;left:10px;color:#9cf}</style>
</head>
<body>
<div id="ui">Wind <input id="wind" type="range" min="-200" max="200" value="0"></div>
<canvas id="c"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),wind=document.getElementById('wind');
let W,H;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
addEventListener('resize',resize);resize();
const g=300,N=200,P=[];
function spawn(p){p.x=W/2;p.y=H-10;p.vx=(Math.random()-0.5)*80;p.vy=-(300+Math.random()*250);p.life=1;p.h=180+Math.random()*80;}
for(let i=0;i<N;i++){P.push({});spawn(P[i]);}
let last=performance.now();
function step(t){const dt=Math.min((t-last)/1000,0.033);last=t;const w=+wind.value;
ctx.fillStyle='rgba(5,8,16,0.35)';ctx.fillRect(0,0,W,H);
for(const p of P){
p.vy+=g*dt;p.vx+=w*dt;p.x+=p.vx*dt;p.y+=p.vy*dt;
if(p.y>H-6){p.y=H-6;p.vy*=-0.55;p.vx*=0.8;p.life-=0.25;if(Math.abs(p.vy)<40&&p.life<0.5)spawn(p);}
if(p.x<0||p.x>W)spawn(p);
ctx.fillStyle='hsl('+p.h+',90%,60%)';ctx.beginPath();ctx.arc(p.x,p.y,2.5,0,7);ctx.fill();
}
requestAnimationFrame(step);}
requestAnimationFrame(step);
</script>
</body>
</html>▶ R29 · Orbital mechanicsOK★ 8.5/10 Open round →
Show code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Orbital Mechanics</title>
<style>html,body{margin:0;background:#02040a;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,cx,cy;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;cx=W/2;cy=H/2;}
addEventListener('resize',resize);resize();
const G=2000,M=1000;
function body(r,c,ecc){const v=Math.sqrt(G*M/r)*(ecc||1);return{x:r,y:0,vx:0,vy:v,c,trail:[]};}
const bodies=[body(70,'#8ecae6'),body(120,'#90ee90'),body(180,'#ffb703'),body(90,'#ff5a5f',0.55)];
const dt=0.05;
function grav(b){for(let k=0;k<4;k++){const r2=b.x*b.x+b.y*b.y,r=Math.sqrt(r2),a=G*M/r2;b.vx-=a*b.x/r*dt;b.vy-=a*b.y/r*dt;b.x+=b.vx*dt;b.y+=b.vy*dt;}}
function step(){ctx.fillStyle='#02040a';ctx.fillRect(0,0,W,H);
ctx.fillStyle='#ffd23f';ctx.beginPath();ctx.arc(cx,cy,12,0,7);ctx.fill();
for(const b of bodies){grav(b);
b.trail.push([b.x,b.y]);if(b.trail.length>400)b.trail.shift();
ctx.strokeStyle=b.c;ctx.beginPath();
for(let i=0;i<b.trail.length;i++){ctx.globalAlpha=i/b.trail.length*0.8;const p=b.trail[i];i?ctx.lineTo(cx+p[0],cy+p[1]):ctx.moveTo(cx+p[0],cy+p[1]);}
ctx.stroke();ctx.globalAlpha=1;
ctx.fillStyle=b.c;ctx.beginPath();ctx.arc(cx+b.x,cy+b.y,4,0,7);ctx.fill();
}
requestAnimationFrame(step);}
step();
</script>
</body>
</html>▶ R30 · Spring-mass chainOK★ 8.5/10 Open round →
Show code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Spring-Mass Chain</title>
<style>html,body{margin:0;background:#0a0e1a;overflow:hidden}canvas{display:block;cursor:grab}</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;init();}
const N=12,k=0.25,damp=0.96,rest=0;let m=[],restLen,grab=-1,mx=0,my=0;
function init(){restLen=W*0.7/(N-1);const y=H/2,x0=W*0.15;m=[];for(let i=0;i<N;i++)m.push({x:x0+i*restLen,y,vx:0,vy:0,anchor:i==0||i==N-1});}
addEventListener('resize',resize);resize();
cv.onmousedown=e=>{for(let i=0;i<N;i++){if(m[i].anchor)continue;if(Math.hypot(e.clientX-m[i].x,e.clientY-m[i].y)<16){grab=i;break;}}mx=e.clientX;my=e.clientY;};
cv.onmousemove=e=>{mx=e.clientX;my=e.clientY;};
addEventListener('mouseup',()=>grab=-1);
function step(){
for(let i=0;i<N;i++){const p=m[i];if(p.anchor)continue;
if(i==grab){p.x=mx;p.y=my;p.vx=0;p.vy=0;continue;}
let fx=0,fy=0;
for(const j of[i-1,i+1]){const q=m[j];const dx=q.x-p.x,dy=q.y-p.y,d=Math.hypot(dx,dy)||1;const f=k*(d-restLen);fx+=f*dx/d;fy+=f*dy/d;}
p.vx=(p.vx+fx)*damp;p.vy=(p.vy+fy)*damp;p.x+=p.vx;p.y+=p.vy;
}
ctx.fillStyle='#0a0e1a';ctx.fillRect(0,0,W,H);
ctx.strokeStyle='#5a7bb5';ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(m[0].x,m[0].y);for(let i=1;i<N;i++)ctx.lineTo(m[i].x,m[i].y);ctx.stroke();
for(let i=0;i<N;i++){const p=m[i];ctx.fillStyle=i==grab?'#ffd23f':p.anchor?'#888':'#4dd2ff';ctx.beginPath();ctx.arc(p.x,p.y,i==grab?11:8,0,7);ctx.fill();}
requestAnimationFrame(step);}
step();
</script>
</body>
</html>Answer excerpts above cover R6–R30. Classic rounds R1–R5 live on their own round pages and aren't duplicated here.