Model profile
GPT-5.5 (codex)
25/29answered (R1–R30)
4DNF / pending
8.12avg. score · 19 scored rounds (R1–R30)
Rounds & answers 24
▶ R6 · Extraction → JSON5.8 s 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 classification6.4 s 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↔EN6.5 s Open round →
That's old hat, after all — life punishes those who come too late. 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, an allen Ecken und Enden zu sparen, doch der Start lief wie am Schnürchen.
▶ R9 · One-liner code6.0 s Open round →
1. `^\d{4}-(0[1-9]|1[0-2])-\d{2}$`
2. `SELECT customer_id, SUM(amount) AS total FROM orders GROUP BY customer_id ORDER BY total DESC LIMIT 5;`
3. `.items[].id`
4. `nav a[href^="http://"], nav a[href^="https://"]`
5. `awk '{print $1}' access.log | sort -u | wc -l`▶ R10 · Facts quiz7.7 s 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 & slogans5.2 s Open round →
1. Fresh flowing water, happier stainless-steel cat sips. 2. Warm bread, sweeter mornings, family-made daily. 3. Compare AI models smarter, faster, clearer. 4. Silence the world, hear every detail. 5. Secure every login with one master key.
▶ R13 · Image promptsDNF / pending Open round →
No answer available.
▶ R14 · Product namesDNF / pending Open round →
No answer available.
▶ R15 · CSS spinnerDNF / pending Open round →
No answer available.
▶ R16 · Explain it to a child (German)DNF / pending Open round →
No answer available.
▶ R17 · Logic riddle★ 4.5/10 Open round →
Ziehen Sie aus der Kiste mit dem Etikett **„Gemischt“**. Da alle Etiketten falsch sind, kann diese Kiste nicht gemischt sein; die gezogene Frucht zeigt also, ob sie nur **Äpfel** oder nur **Birnen** enthält. Die Kiste mit dem Etikett der gezogenen Frucht ist dann **Gemischt**, weil sie weder das eigene Etikett noch den Inhalt der „Gemischt“-Kiste haben kann. Die letzte übrige Kiste bekommt das verbleibende Einzelfrucht-Etikett.
📝 Box riddle: right box, but the relabeling is logically impossible (drawn fruit’s label = Mixed cannot happen)
▶ R18 · German registers & tone★ 7/10 Open round →
1. Leider müssen wir Ihnen mitteilen, dass wir den vereinbarten Liefertermin nicht einhalten können. 2. Der geplante Liefertermin kann nicht gehalten werden. 3. Wir schaffen den Liefertermin diesmal leider nicht.
📝 colleague line misses the casual register (reads neutral)
▶ 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.9,"tags":["outdoor","sport"],"stock":{"berlin":12,"muenchen":7,"hamburg":null},"active":true}▶ R21 · Sorting race bubble/insertion/selection20.6 sOK★ 8.5/10 Open round →
Show code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sort Race</title>
<style>
html,body{margin:0;height:100%;background:#111;color:#eee;font-family:system-ui}
body{display:grid;place-items:center}
canvas{width:min(1100px,96vw);height:min(720px,92vh);background:#181818;border:1px solid #333}
</style>
</head>
<body>
<canvas id="c" width="1100" height="720"></canvas>
<script>
const c=document.getElementById("c"),x=c.getContext("2d"),N=40;
let base=Array.from({length:N},(_,i)=>i+1);
for(let i=N-1;i>0;i--){let j=Math.random()*(i+1)|0;[base[i],base[j]]=[base[j],base[i]]}
function bubble(a){let i=0,j=0;return()=>{if(i>=N-1)return 1;if(j<N-i-1){if(a[j]>a[j+1])[a[j],a[j+1]]=[a[j+1],a[j]];j++}else{j=0;i++}return i>=N-1}}
function insertion(a){let i=1,j=1,key=a[1],hold=0;return()=>{if(i>=N)return 1;if(!hold){key=a[i];j=i-1;hold=1}if(j>=0&&a[j]>key){a[j+1]=a[j];j--}else{a[j+1]=key;i++;hold=0}return i>=N}}
function selection(a){let i=0,j=1,m=0;return()=>{if(i>=N-1)return 1;if(j<N){if(a[j]<a[m])m=j;j++}else{[a[i],a[m]]=[a[m],a[i]];i++;m=i;j=i+1}return i>=N-1}}
let sims=[
{name:"BUBBLE SORT",a:base.slice(),step:null,done:0,color:"#49a6ff"},
{name:"INSERTION SORT",a:base.slice(),step:null,done:0,color:"#62d26f"},
{name:"SELECTION SORT",a:base.slice(),step:null,done:0,color:"#ffbd45"}
];
sims[0].step=bubble(sims[0].a);sims[1].step=insertion(sims[1].a);sims[2].step=selection(sims[2].a);
function draw(){
x.clearRect(0,0,c.width,c.height);
sims.forEach((s,p)=>{
let y=p*240,w=c.width,h=240,pad=28,bw=(w-pad*2)/N;
x.fillStyle="#202020";x.fillRect(0,y,w,h-1);
x.fillStyle="#eee";x.font="22px system-ui";x.fillText(s.name,24,y+34);
if(s.done){x.fillStyle="#fff";x.font="30px system-ui";x.fillText("DONE",w-120,y+38)}
for(let i=0;i<N;i++){
let bh=s.a[i]/N*(h-72),bx=pad+i*bw,by=y+h-22-bh;
x.fillStyle=s.color;x.fillRect(bx,by,Math.max(2,bw-2),bh);
}
});
}
function tick(){
for(let k=0;k<3;k++)if(!sims[k].done)for(let n=0;n<2;n++)sims[k].done=sims[k].step();
draw();
if(sims.some(s=>!s.done))requestAnimationFrame(tick);
}
draw();setTimeout(tick,400);
</script>
</body>
</html>▶ R22 · Hexagon balls34.4 sOK★ 8.5/10 Open round →
Show code
<!doctype html>
<html>
<body style="margin:0;overflow:hidden;background:#111">
<canvas id="c"></canvas>
<script>
const c=document.getElementById("c"),x=c.getContext("2d");
let W,H,D,rot=0,last=0,balls=[];
const N=8,G=500,E=.98,wr=.35;
function size(){
D=devicePixelRatio||1;W=innerWidth;H=innerHeight;c.width=W*D;c.height=H*D;c.style.width=W+"px";c.style.height=H+"px";x.setTransform(D,0,0,D,0,0)
}
onresize=size;size();
function dot(a,b,c,d){return a*c+b*d}
function init(){
balls=[];
for(let i=0;i<N;i++)balls.push({x:W/2+(Math.random()-.5)*120,y:H/2+(Math.random()-.5)*120,vx:(Math.random()-.5)*260,vy:(Math.random()-.5)*180,r:14+Math.random()*5,h:i*45})
}
init();
function verts(R){
let a=[],cx=W/2,cy=H/2;
for(let i=0;i<6;i++)a.push({x:cx+R*Math.cos(rot+i*Math.PI/3),y:cy+R*Math.sin(rot+i*Math.PI/3)});
return a
}
function step(t){
let dt=Math.min((t-last)/1000,.03)||.016;last=t;rot+=wr*dt;
let cx=W/2,cy=H/2,R=Math.min(W,H)*.42,V=verts(R);
for(const b of balls){b.vy+=G*dt;b.x+=b.vx*dt;b.y+=b.vy*dt}
for(let k=0;k<3;k++){
for(let i=0;i<N;i++)for(let j=i+1;j<N;j++){
let a=balls[i],b=balls[j],dx=b.x-a.x,dy=b.y-a.y,d=Math.hypot(dx,dy)||1,m=a.r+b.r;
if(d<m){
let nx=dx/d,ny=dy/d,p=(m-d)/2;a.x-=nx*p;a.y-=ny*p;b.x+=nx*p;b.y+=ny*p;
let rvx=b.vx-a.vx,rvy=b.vy-a.vy,vn=dot(rvx,rvy,nx,ny);
if(vn<0){let q=-(1+E)*vn/2,ix=q*nx,iy=q*ny;a.vx-=ix;a.vy-=iy;b.vx+=ix;b.vy+=iy}
}
}
for(const b of balls)for(let i=0;i<6;i++){
let A=V[i],B=V[(i+1)%6],ex=B.x-A.x,ey=B.y-A.y,nx=-ey,ny=ex,l=Math.hypot(nx,ny);
nx/=l;ny/=l;
let mx=(A.x+B.x)/2,my=(A.y+B.y)/2;
if(dot(cx-mx,cy-my,nx,ny)<0){nx=-nx;ny=-ny}
let d=dot(b.x-A.x,b.y-A.y,nx,ny);
if(d<b.r){
b.x+=nx*(b.r-d);b.y+=ny*(b.r-d);
let px=b.x-nx*b.r,py=b.y-ny*b.r,wx=-wr*(py-cy),wy=wr*(px-cx);
let vn=dot(b.vx-wx,b.vy-wy,nx,ny);
if(vn<0){b.vx-=(1+E)*vn*nx;b.vy-=(1+E)*vn*ny}
}
}
}
x.clearRect(0,0,W,H);
x.beginPath();V.forEach((p,i)=>i?x.lineTo(p.x,p.y):x.moveTo(p.x,p.y));x.closePath();
x.lineWidth=5;x.strokeStyle="#ddd";x.stroke();
for(const b of balls){
x.beginPath();x.arc(b.x,b.y,b.r,0,7);
x.fillStyle=`hsl(${b.h},80%,60%)`;x.fill();x.strokeStyle="#fff8";x.stroke()
}
requestAnimationFrame(step)
}
requestAnimationFrame(step);
</script>
</body>
</html>▶ R23 · Pendulum wave16.6 sOK★ 8.5/10 Open round →
Show code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pendulum Wave</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#071018}
canvas{display:block;width:100%;height:100%}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const c=document.getElementById("c"),x=c.getContext("2d");
let W,H,DPR;
function size(){
DPR=devicePixelRatio||1;
W=c.width=innerWidth*DPR;
H=c.height=innerHeight*DPR;
c.style.width=innerWidth+"px";
c.style.height=innerHeight+"px";
x.setTransform(DPR,0,0,DPR,0,0);
}
addEventListener("resize",size);size();
const n=15,g=9.81,base=2.15,step=.035,amp=.34;
const p=Array.from({length:n},(_,i)=>({
k:i,
T:base+i*step,
hue:190+i*9
}));
function draw(t){
t/=1000;
const w=innerWidth,h=innerHeight;
x.clearRect(0,0,w,h);
const top=h*.15,span=w*.82,gap=span/(n-1),ox=w*.09;
x.lineWidth=1.5;
for(const q of p){
const L=(g*(q.T/(2*Math.PI))**2)*90;
const px=ox+q.k*gap,py=top;
const a=amp*Math.sin(2*Math.PI*t/q.T);
const bx=px+Math.sin(a)*L,by=py+Math.cos(a)*L;
x.strokeStyle="rgba(170,210,230,.55)";
x.beginPath();x.moveTo(px,py);x.lineTo(bx,by);x.stroke();
const r=Math.max(7,Math.min(15,gap*.18));
const grad=x.createRadialGradient(bx-r*.35,by-r*.45,2,bx,by,r);
grad.addColorStop(0,`hsl(${q.hue},95%,78%)`);
grad.addColorStop(1,`hsl(${q.hue},75%,42%)`);
x.fillStyle=grad;
x.beginPath();x.arc(bx,by,r,0,7);x.fill();
}
x.fillStyle="rgba(230,245,255,.8)";
x.fillRect(w*.06,top-3,w*.88,6);
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
</script>
</body>
</html>▶ R24 · Maze race BFS/DFS/A*26.3 sSTAT★ 8/10 Open round →
📝 complete with DONE + path, but random obstacles instead of a real maze (8.0)
Show code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pathfinding Race</title>
<style>
body{margin:0;background:#111;color:#eee;font:16px system-ui;display:grid;place-items:center;min-height:100vh}
.wrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.panel{background:#1b1b1b;padding:12px;border:1px solid #333}
h2{margin:0 0 8px;text-align:center;font-size:18px}
canvas{width:250px;height:250px;image-rendering:pixelated;background:#000;display:block}
.stat{text-align:center;margin-top:8px;height:22px;color:#6ee7b7;font-weight:700}
</style>
</head>
<body>
<div class="wrap">
<div class="panel"><h2>BFS</h2><canvas id="bfs" width="250" height="250"></canvas><div id="sbfs" class="stat"></div></div>
<div class="panel"><h2>DFS</h2><canvas id="dfs" width="250" height="250"></canvas><div id="sdfs" class="stat"></div></div>
<div class="panel"><h2>A*</h2><canvas id="astar" width="250" height="250"></canvas><div id="sastar" class="stat"></div></div>
</div>
<script>
const N=25,S=10,start=0,goal=N*N-1,dirs=[[1,0],[-1,0],[0,1],[0,-1]];
let maze;
function gen(){
while(1){
maze=Array.from({length:N},(_,y)=>Array.from({length:N},(_,x)=>Math.random()<.32));
maze[0][0]=maze[N-1][N-1]=0;
let q=[start],seen=new Set([start]);
for(let i=0;i<q.length;i++){
let p=q[i],x=p%N,y=p/N|0;
if(p==goal)return;
for(let [dx,dy] of dirs){
let nx=x+dx,ny=y+dy,np=ny*N+nx;
if(nx>=0&&ny>=0&&nx<N&&ny<N&&!maze[ny][nx]&&!seen.has(np))seen.add(np),q.push(np);
}
}
}
}
function make(kind,id){
return {kind,cv:document.getElementById(id),st:document.getElementById("s"+id),open:[start],
seen:new Set([start]),par:{},done:0,path:[],vis:[],g:{[start]:0}};
}
function step(a){
if(a.done)return;
let cur;
if(a.kind=="dfs")cur=a.open.pop();
else if(a.kind=="astar"){
let bi=0,bv=1e9;
for(let i=0;i<a.open.length;i++){let p=a.open[i],x=p%N,y=p/N|0,v=a.g[p]+N-1-x+N-1-y;if(v<bv)bv=v,bi=i}
cur=a.open.splice(bi,1)[0];
}else cur=a.open.shift();
if(cur==null){a.done=1;return}
a.vis.push(cur);
if(cur==goal){
for(let p=goal;p!=null;p=a.par[p])a.path.push(+p);
a.done=1;a.st.textContent="DONE";return;
}
let x=cur%N,y=cur/N|0;
for(let [dx,dy] of dirs){
let nx=x+dx,ny=y+dy,np=ny*N+nx;
if(nx<0||ny<0||nx>=N||ny>=N||maze[ny][nx])continue;
if(a.kind=="astar"){
let ng=a.g[cur]+1;
if(a.g[np]==null||ng<a.g[np]){a.g[np]=ng;a.par[np]=cur;if(!a.open.includes(np))a.open.push(np)}
}else if(!a.seen.has(np)){a.seen.add(np);a.par[np]=cur;a.open.push(np)}
}
}
function draw(a){
let c=a.cv.getContext("2d");
c.fillStyle="#050505";c.fillRect(0,0,250,250);
for(let y=0;y<N;y++)for(let x=0;x<N;x++)if(maze[y][x]){c.fillStyle="#333";c.fillRect(x*S,y*S,S,S)}
c.fillStyle="#2563eb";for(let p of a.vis)c.fillRect(p%N*S,(p/N|0)*S,S,S);
c.fillStyle="#facc15";for(let p of a.path)c.fillRect(p%N*S,(p/N|0)*S,S,S);
c.fillStyle="#22c55e";c.fillRect(0,0,S,S);c.fillStyle="#ef4444";c.fillRect(240,240,S,S);
}
gen();
let algs=[make("bfs","bfs"),make("dfs","dfs"),make("astar","astar")];
function tick(){for(let i=0;i<8;i++)algs.forEach(step);algs.forEach(draw);if(algs.some(a=>!a.done))requestAnimationFrame(tick)}
tick();
</script>
</body>
</html>▶ R25 · Sorting race quick/merge/heap24.0 sSTAT★ 9/10 Open round →
📝 flawless: 3 panels sorted, labels + DONE (9.0)
Show code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sort Race</title>
<style>
html,body{margin:0;height:100%;background:#111;color:#eee;font-family:system-ui}
canvas{display:block;width:100vw;height:100vh}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const N=60,base=[...Array(N)].map((_,i)=>i+1);
for(let i=N-1;i>0;i--){let j=(Math.random()*(i+1))|0;[base[i],base[j]]=[base[j],base[i]]}
function quick(a){
let s=[];
function sw(i,j){[a[i],a[j]]=[a[j],a[i]];s.push([i,a[i],j,a[j]])}
function q(l,r){
if(l>=r)return;
let p=a[r],i=l;
for(let j=l;j<r;j++)if(a[j]<p)sw(i++,j);
sw(i,r);q(l,i-1);q(i+1,r)
}
q(0,a.length-1);return s
}
function merge(a){
let s=[];
function m(l,r){
if(r-l<2)return;
let n=(l+r)>>1;m(l,n);m(n,r);
let x=a.slice(l,n),y=a.slice(n,r),i=0,j=0,k=l;
while(i<x.length||j<y.length){
let v=j>=y.length||i<x.length&&x[i]<=y[j]?x[i++]:y[j++];
a[k]=v;s.push([k,v]);k++
}
}
m(0,a.length);return s
}
function heap(a){
let s=[];
function sw(i,j){[a[i],a[j]]=[a[j],a[i]];s.push([i,a[i],j,a[j]])}
function down(n,i){
for(;;){
let l=i*2+1,r=l+1,b=i;
if(l<n&&a[l]>a[b])b=l;if(r<n&&a[r]>a[b])b=r;
if(b==i)break;sw(i,b);i=b
}
}
for(let i=(a.length>>1)-1;i>=0;i--)down(a.length,i);
for(let n=a.length-1;n>0;n--){sw(0,n);down(n,0)}
return s
}
let runs=[
{name:"QUICKSORT",a:base.slice(),steps:null,done:0,col:"#38bdf8"},
{name:"MERGESORT",a:base.slice(),steps:null,done:0,col:"#34d399"},
{name:"HEAPSORT",a:base.slice(),steps:null,done:0,col:"#f59e0b"}
];
runs[0].steps=quick(runs[0].a.slice());
runs[1].steps=merge(runs[1].a.slice());
runs[2].steps=heap(runs[2].a.slice());
runs.forEach(r=>r.a=base.slice());
let cv=c,ctx=cv.getContext("2d"),tick=0;
function fit(){cv.width=innerWidth*devicePixelRatio;cv.height=innerHeight*devicePixelRatio;ctx.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0)}
onresize=fit;fit();
function step(r){
if(r.done)return;
let z=r.steps.shift();
if(!z){r.done=1;return}
for(let i=0;i<z.length;i+=2)r.a[z[i]]=z[i+1]
}
function draw(){
let w=innerWidth,h=innerHeight,pad=22,gap=18,pw=(w-pad*2-gap*2)/3,ph=h-pad*2;
ctx.clearRect(0,0,w,h);ctx.textAlign="left";ctx.font="700 16px system-ui";
runs.forEach((r,idx)=>{
for(let k=0;k<5;k++)step(r);
let x=pad+idx*(pw+gap),y=pad+34,bw=pw/N;
ctx.fillStyle="#1f2937";ctx.fillRect(x,pad,pw,ph);
ctx.fillStyle="#e5e7eb";ctx.fillText(r.name+(r.done?" DONE":""),x+12,pad+23);
for(let i=0;i<N;i++){
let bh=(ph-58)*r.a[i]/N;
ctx.fillStyle=r.col;
ctx.fillRect(x+i*bw+1,y+ph-46-bh,Math.max(1,bw-2),bh)
}
});
requestAnimationFrame(draw)
}
draw();
</script>
</body>
</html>▶ R26 · Projectile ballistics23.2 sOK★ 8.5/10 Open round →
Show code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Projectile Motion</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#101820;font-family:Arial,sans-serif}
canvas{display:block;width:100vw;height:100vh}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const c=document.getElementById("c"),x=c.getContext("2d");
let W,H,DPR,ground,start,balls,last=0,scale=0.8;
const angles=[20,34,48,62,75],colors=["#ff595e","#ffca3a","#8ac926","#1982c4","#b5179e"];
const v0=360,g=420;
function resize(){
DPR=devicePixelRatio||1; W=innerWidth; H=innerHeight;
c.width=W*DPR; c.height=H*DPR; x.setTransform(DPR,0,0,DPR,0,0);
ground=H-70; start={x:60,y:ground}; reset();
}
function reset(){
balls=angles.map((a,i)=>{
let r=a*Math.PI/180;
return {a,i,x:start.x,y:start.y,vx:v0*Math.cos(r),vy:-v0*Math.sin(r),trail:[],landed:false,landX:null,t:0};
});
last=performance.now();
}
function drawGrid(){
x.strokeStyle="#2d3b45"; x.lineWidth=1;
x.beginPath(); x.moveTo(0,ground); x.lineTo(W,ground); x.stroke();
x.fillStyle="#d8e2e8"; x.font="14px Arial";
x.fillText("0 m",start.x-8,ground+26);
for(let m=100;m<900;m+=100){
let px=start.x+m*scale;
if(px>W-30) break;
x.strokeStyle="#51616c"; x.beginPath(); x.moveTo(px,ground-6); x.lineTo(px,ground+6); x.stroke();
x.fillStyle="#9fb1bc"; x.fillText(m+" m",px-18,ground+26);
}
}
function cannon(){
x.fillStyle="#c6d2da"; x.beginPath(); x.arc(start.x,start.y,11,0,Math.PI*2); x.fill();
x.fillStyle="#8797a1"; x.fillRect(start.x-42,start.y+12,70,14);
}
function step(now){
let dt=Math.min((now-last)/1000,.033); last=now;
x.clearRect(0,0,W,H);
let grd=x.createLinearGradient(0,0,0,H);
grd.addColorStop(0,"#162634"); grd.addColorStop(1,"#0d141a");
x.fillStyle=grd; x.fillRect(0,0,W,H);
drawGrid(); cannon();
let all=true;
for(const b of balls){
if(!b.landed){
b.t+=dt; b.x=start.x+b.vx*b.t*scale; b.y=start.y+(b.vy*b.t+.5*g*b.t*b.t)*scale;
b.trail.push({x:b.x,y:b.y});
if(b.trail.length>70)b.trail.shift();
if(b.y>=ground){b.y=ground;b.landed=true;b.landX=b.x;b.trail.push({x:b.x,y:b.y});}
}
if(!b.landed)all=false;
for(let i=1;i<b.trail.length;i++){
x.strokeStyle=colors[b.i]+Math.floor(255*i/b.trail.length).toString(16).padStart(2,"0");
x.lineWidth=3; x.beginPath(); x.moveTo(b.trail[i-1].x,b.trail[i-1].y); x.lineTo(b.trail[i].x,b.trail[i].y); x.stroke();
}
x.fillStyle=colors[b.i]; x.beginPath(); x.arc(b.x,b.y,7,0,Math.PI*2); x.fill();
if(b.landed){
x.strokeStyle=colors[b.i]; x.beginPath(); x.moveTo(b.landX,ground-16); x.lineTo(b.landX,ground+16); x.stroke();
x.fillStyle=colors[b.i]; x.font="13px Arial";
x.fillText(Math.round((b.landX-start.x)/scale)+" m",b.landX-22,ground-22-14*b.i);
}
}
if(all)setTimeout(reset,900);
requestAnimationFrame(step);
}
addEventListener("resize",resize);
resize();
requestAnimationFrame(step);
</script>
</body>
</html>▶ R27 · Double-pendulum chaos22.2 sOK★ 8.5/10 Open round →
Show code
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#05070c}
canvas{display:block;width:100%;height:100%}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const c=document.getElementById("c"),x=c.getContext("2d");
let W,H,D,trail;
function size(){
D=devicePixelRatio||1; W=c.width=innerWidth*D; H=c.height=innerHeight*D;
c.style.width=innerWidth+"px"; c.style.height=innerHeight+"px";
x.setTransform(D,0,0,D,0,0); trail=document.createElement("canvas");
trail.width=innerWidth; trail.height=innerHeight;
}
addEventListener("resize",size); size();
const tc=trail.getContext("2d"),L1=150,L2=150,m1=12,m2=12,g=9.81,dt=0.02;
const ps=[
{a1:Math.PI/2,a2:Math.PI/2,v1:0,v2:0,col:"#00e5ff",last:null},
{a1:Math.PI/2+0.001,a2:Math.PI/2,v1:0,v2:0,col:"#ff3b8a",last:null}
];
function acc(s){
let {a1,a2,v1,v2}=s,den=2*m1+m2-m2*Math.cos(2*a1-2*a2);
let n1=-g*(2*m1+m2)*Math.sin(a1);
let n2=-m2*g*Math.sin(a1-2*a2);
let n3=-2*Math.sin(a1-a2)*m2*(v2*v2*L2+v1*v1*L1*Math.cos(a1-a2));
let A1=(n1+n2+n3)/(L1*den);
let n4=2*Math.sin(a1-a2);
let n5=v1*v1*L1*(m1+m2)+g*(m1+m2)*Math.cos(a1)+v2*v2*L2*m2*Math.cos(a1-a2);
let A2=n4*n5/(L2*den);
return [A1,A2];
}
function step(s){
for(let i=0;i<4;i++){
let [a,b]=acc(s);
s.v1+=a*dt/4; s.v2+=b*dt/4;
s.a1+=s.v1*dt/4; s.a2+=s.v2*dt/4;
}
}
function pos(s){
let ox=innerWidth/2,oy=innerHeight/3;
let x1=ox+L1*Math.sin(s.a1),y1=oy+L1*Math.cos(s.a1);
let x2=x1+L2*Math.sin(s.a2),y2=y1+L2*Math.cos(s.a2);
return [ox,oy,x1,y1,x2,y2];
}
function draw(){
x.setTransform(D,0,0,D,0,0);
tc.fillStyle="rgba(5,7,12,.035)"; tc.fillRect(0,0,innerWidth,innerHeight);
for(const p of ps){
for(let i=0;i<6;i++)step(p);
let q=pos(p);
if(p.last){
tc.strokeStyle=p.col; tc.lineWidth=1.6; tc.beginPath();
tc.moveTo(p.last[0],p.last[1]); tc.lineTo(q[4],q[5]); tc.stroke();
}
p.last=[q[4],q[5]];
}
x.clearRect(0,0,innerWidth,innerHeight); x.drawImage(trail,0,0);
for(const p of ps){
let q=pos(p);
x.strokeStyle=p.col; x.lineWidth=3; x.beginPath();
x.moveTo(q[0],q[1]); x.lineTo(q[2],q[3]); x.lineTo(q[4],q[5]); x.stroke();
x.fillStyle=p.col; x.beginPath(); x.arc(q[2],q[3],7,0,7); x.fill();
x.beginPath(); x.arc(q[4],q[5],9,0,7); x.fill();
}
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
```▶ R28 · Particle fountain16.3 sOK★ 8.5/10 Open round →
Show code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Particle Fountain</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#10151f;color:white;font-family:system-ui}
canvas{display:block;width:100vw;height:100vh}
#ui{position:fixed;left:16px;top:16px;background:#0008;padding:10px 12px;border-radius:8px}
input{vertical-align:middle}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="ui">Wind <input id="wind" type="range" min="-0.25" max="0.25" step="0.01" value="0"></div>
<script>
const c=document.getElementById("c"),x=c.getContext("2d"),wind=document.getElementById("wind");
let W,H,DPR,ps=[];
function size(){
DPR=devicePixelRatio||1; W=innerWidth; H=innerHeight;
c.width=W*DPR; c.height=H*DPR; x.setTransform(DPR,0,0,DPR,0,0);
}
addEventListener("resize",size); size();
function spawn(p){
p.x=W/2; p.y=H-6;
p.vx=(Math.random()-.5)*2.2;
p.vy=-8-Math.random()*6;
p.r=2+Math.random()*3;
p.life=1;
p.h=185+Math.random()*55;
}
for(let i=0;i<200;i++){let p={};spawn(p);p.y-=Math.random()*H*.8;ps.push(p)}
let last=performance.now();
function loop(t){
let dt=Math.min((t-last)/16.67,2); last=t;
x.fillStyle="rgba(16,21,31,.28)"; x.fillRect(0,0,W,H);
let wx=parseFloat(wind.value)*dt, g=.18*dt;
for(const p of ps){
p.vx+=wx; p.vy+=g; p.x+=p.vx*dt; p.y+=p.vy*dt;
if(p.x<p.r){p.x=p.r;p.vx*=-.55}
if(p.x>W-p.r){p.x=W-p.r;p.vx*=-.55}
if(p.y>H-p.r){
p.y=H-p.r; p.vy*=-.48; p.vx*=.72;
if(Math.abs(p.vy)+Math.abs(p.vx)<1.1)spawn(p);
}
p.life*=.997;
if(p.y>H+20||p.life<.08)spawn(p);
x.beginPath();
x.fillStyle=`hsla(${p.h},90%,62%,${Math.max(.25,p.life)})`;
x.arc(p.x,p.y,p.r,0,Math.PI*2);
x.fill();
}
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script>
</body>
</html>▶ R29 · Orbital mechanics21.0 sOK★ 8.5/10 Open round →
Show code
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Orbital Mechanics</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#050711}
canvas{display:block;width:100%;height:100%}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const c=document.getElementById("c"),x=c.getContext("2d");
let W,H,cx,cy,dpr;
function size(){
dpr=devicePixelRatio||1; W=innerWidth; H=innerHeight;
c.width=W*dpr; c.height=H*dpr; x.setTransform(dpr,0,0,dpr,0,0);
cx=W/2; cy=H/2;
}
addEventListener("resize",size); size();
const mu=90000, dt=.018, scale=1;
function body(name,r,clr,rad,phase=0){
let a=phase, px=Math.cos(a)*r, py=Math.sin(a)*r, v=Math.sqrt(mu/r);
return {name,x:px,y:py,vx:-Math.sin(a)*v,vy:Math.cos(a)*v,clr,rad,tr:[]};
}
const bodies=[
body("p1",95,"#6ec6ff",4,.4),
body("p2",155,"#ffd166",5,2.1),
body("p3",230,"#9cff8f",6,4.2)
];
let ra=360,rp=42,a=(ra+rp)/2,vc=Math.sqrt(mu*(2/ra-1/a));
bodies.push({name:"comet",x:ra,y:0,vx:0,vy:vc,clr:"#ffffff",rad:3,tr:[]});
function step(){
for(const b of bodies){
let r2=b.x*b.x+b.y*b.y, r=Math.sqrt(r2), acc=-mu/(r2*r);
b.vx+=b.x*acc*dt; b.vy+=b.y*acc*dt;
}
for(const b of bodies){
b.x+=b.vx*dt; b.y+=b.vy*dt;
b.tr.push([b.x,b.y]);
if(b.tr.length>520)b.tr.shift();
}
}
function draw(){
x.fillStyle="rgba(5,7,17,.22)";
x.fillRect(0,0,W,H);
let g=x.createRadialGradient(cx,cy,0,cx,cy,42);
g.addColorStop(0,"#fff7b0"); g.addColorStop(.35,"#ffb347"); g.addColorStop(1,"rgba(255,120,20,0)");
x.fillStyle=g; x.beginPath(); x.arc(cx,cy,42,0,7); x.fill();
x.fillStyle="#ffd35a"; x.beginPath(); x.arc(cx,cy,13,0,7); x.fill();
for(const b of bodies){
for(let i=1;i<b.tr.length;i++){
let p=b.tr[i-1], q=b.tr[i], alpha=i/b.tr.length;
x.strokeStyle=b.clr+Math.floor(alpha*160).toString(16).padStart(2,"0");
x.lineWidth=b.name==="comet"?1.4:1;
x.beginPath(); x.moveTo(cx+p[0]*scale,cy+p[1]*scale);
x.lineTo(cx+q[0]*scale,cy+q[1]*scale); x.stroke();
}
}
for(const b of bodies){
x.fillStyle=b.clr;
x.beginPath(); x.arc(cx+b.x*scale,cy+b.y*scale,b.rad,0,7); x.fill();
}
}
function loop(){
for(let i=0;i<5;i++)step();
draw();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
```▶ R30 · Spring-mass chain22.0 sSTAT★ 8.5/10 Open round →
📝 12 masses + separate anchors, clean (8.5)
Show code
<!doctype html>
<html>
<body style="margin:0;overflow:hidden;background:#111">
<canvas id="c"></canvas>
<script>
const c=document.getElementById("c"),x=c.getContext("2d"),N=12;
let W,H,drag=-1,mouse={x:0,y:0},m=[];
function size(){
W=c.width=innerWidth;H=c.height=innerHeight;
let gap=W/(N+3), y=H/2;
m=[...Array(N)].map((_,i)=>({x:gap*(i+2),y,vx:0,vy:0}));
}
size();addEventListener("resize",size);
function pos(e){
const r=c.getBoundingClientRect();
mouse.x=(e.clientX-r.left)*c.width/r.width;
mouse.y=(e.clientY-r.top)*c.height/r.height;
}
c.onmousedown=e=>{
pos(e);let best=999;
m.forEach((p,i)=>{let d=(p.x-mouse.x)**2+(p.y-mouse.y)**2;if(d<best&&d<900)best=d,drag=i});
};
c.onmousemove=e=>{pos(e)};
onmouseup=()=>drag=-1;
function spring(a,b,k=0.018,d=0.045,L){
let dx=b.x-a.x,dy=b.y-a.y,len=Math.hypot(dx,dy)||1;
let nx=dx/len,ny=dy/len,rel=(b.vx-a.vx)*nx+(b.vy-a.vy)*ny;
let f=k*(len-L)+d*rel,fx=f*nx,fy=f*ny;
if(!a.fixed){a.vx+=fx;a.vy+=fy}
if(!b.fixed){b.vx-=fx;b.vy-=fy}
}
function loop(){
x.clearRect(0,0,W,H);
let gap=W/(N+3), A={x:gap,y:H/2,vx:0,vy:0,fixed:1}, B={x:gap*(N+2),y:H/2,vx:0,vy:0,fixed:1};
if(drag>-1){m[drag].x=mouse.x;m[drag].y=mouse.y;m[drag].vx=m[drag].vy=0}
spring(A,m[0],0.02,0.05,gap);
for(let i=0;i<N-1;i++)spring(m[i],m[i+1],0.02,0.05,gap);
spring(m[N-1],B,0.02,0.05,gap);
for(let i=0;i<N;i++)if(i!==drag){
m[i].vy+=(H/2-m[i].y)*0.001;
m[i].vx*=0.992;m[i].vy*=0.992;
m[i].x+=m[i].vx;m[i].y+=m[i].vy;
}
x.lineWidth=3;x.strokeStyle="#74d6ff";x.beginPath();
x.moveTo(A.x,A.y);m.forEach(p=>x.lineTo(p.x,p.y));x.lineTo(B.x,B.y);x.stroke();
x.fillStyle="#ddd";[A,B].forEach(p=>{x.beginPath();x.arc(p.x,p.y,7,0,7);x.fill()});
m.forEach((p,i)=>{
x.fillStyle=i===drag?"#ffcb4d":"#f3f6ff";
x.beginPath();x.arc(p.x,p.y,16,0,7);x.fill();
x.strokeStyle="#111";x.lineWidth=2;x.stroke();
});
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>Answer excerpts above cover R6–R30. Classic rounds R1–R5 live on their own round pages and aren't duplicated here.