Run Detail
completedcrouton-alphaRecorded for these videos
27:18Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?
Nov 13, 2026 · YouTube
18:40ERNIE 5.5 Flash Preview vs GLM 5.3 Flash: Baidu's new model is very impressive!
Nov 11, 2026 · YouTube
36:22Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash
Nov 11, 2026 · YouTube
14:03Gemini 4 Carbon: Can it handle my challenges? (First look with one-shot coding tests)
Nov 10, 2026 · YouTube
47:51Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)
Nov 6, 2026 · YouTube
10:57"Crouton Alpha": the latest super-efficient coding model by Meta?
Nov 3, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
22:14GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?
Oct 27, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
31:28Is this company reselling GPT Sol 6.1 at a loss (for non-agentic/text-only)?🤔 Is this sustainable?
Oct 20, 2026 · YouTube
17:58Nemotron 3.5 Super VL vs Opus 5.5: Testing NVIDIA’s new coding juggernaut
Oct 15, 2026 · YouTube
16:04Testing a *massive* new open-weights model 🤯: Muse Spark Open (vs. Nemotron, Opus 5.5, and more)
Oct 15, 2026 · YouTube
16:43Gemini 4 Argon: Great 🐈 Animation, but a broken escalator. (Coding challenge vs Opus 5.5, Sol 6.1)
Oct 13, 2026 · YouTube
16:37Meta's new "Muse Wonder" AI is impressive... but can it compete with Anthropic's models?
Oct 12, 2026 · YouTube
11:12WOW... Haiku 5.5 is very impressive. RIP OpenAI?
Oct 7, 2026 · YouTube
22:47Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?
Oct 6, 2026 · YouTube
22:02Is Pareto 26.10 Preview Just Routing to GPT Sol? I Tested It Against Sol 6.1 Pro
Oct 1, 2026 · YouTube
11:22I Tested Sonnet 5.5 Against Opus 5.5. Is It Actually Cheaper?
Sep 28, 2026 · YouTube
19:21I Tested the Stealth "Space Bunny Alpha" Model Before It Went Offline
Sep 23, 2026 · YouTube
Provider
openrouter
Challenge Version
v1.0
Turns
1
Duration
29.2s
Total Tokens
5,380
Input Tokens
353
Output Tokens
5,027
Reasoning Tokens
150
Reasoning Effort
default
Est. Cost
$0.0000
Started
11/3/2026, 9:21:02 PM
OR Provider
Stealth
Finish Reason
stop
Generation ID
gen-1793740862-KmIF7QaArv1HXKrZfPaC
Turns (1)
Turn #1
353 in5,027 out150 reasoning5,380 total29.2s
user
You build physics toys, and you have held an umbrella in a gale.
Build me a single HTML page: a person holding an umbrella in wind that keeps getting stronger.
The build
- The wind rises over time, and I can drive it myself as well — slider, keys, your call — including back down.
- The umbrella answers the wind. The canopy flexes, the frame loads up, and past some point it turns inside out. It can be wrenched sideways, and it can get away entirely.
- Rain falls, and its direction and speed follow the wind.
- The person compensates: lean, grip, footing, bracing. They stay attached to the ground; the umbrella stays attached to them until it doesn't.
- Show the current wind speed on screen.
- The art is yours. Side view is the obvious choice and you do not have to take it.
House rules
- One file. Everything inline — no CDN, no external stylesheet, font, script or image.
data:URIs are fine. - No libraries. No physics engine — write your own.
- No network at runtime.
- No
localStorage,sessionStorage, cookies orindexedDB— sandboxed frame, they throw. - Return the file as exactly one fenced
htmlblock.
Answer in exactly these sections
The model
One paragraph, before the file: what the canopy is made of in your code, what inversion is as a state change, and what decides when it happens.
The page
The single fenced html block.
What it actually does
Where it looks right and where it looks wrong. Everyone who has held an umbrella knows what one does in wind, so say what yours gets wrong before I find it.
assistant
The model
In code the canopy is a single elastic arc sampled at 25 points across its diameter, with its height, flattening and left-right asymmetry driven by a flex parameter and its curvature driven by a separate inversion parameter, plus eight rib lines drawn from hub to rim so the deformation reads as frame load rather than a rigid disc; inversion is a continuous state variable inv from 0 (dome up) to 1 (dome flipped to a bowl, centre below the rim) with hysteresis in its labelling, and it is decided by aerodynamic load — roughly proportional to the square of the effective wind including gusts and the canopy's angle to the flow — exceeding a buckling threshold, which accelerates inv toward 1, while a load falling below about half that threshold lets the bistable arc snap back toward 0, and a sustained load above a higher grip threshold accumulates grip stress until the shaft detaches and the umbrella becomes a free tumbling body.
The page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Crouton Alpha — Umbrella in a Gale</title>
<style>
html,body{margin:0;height:100%;background:#0d141c;overflow:hidden;font-family:system-ui,Arial,sans-serif;color:#e8eef4}
#c{display:block;width:100vw;height:100vh}
.panel{position:fixed;left:12px;top:12px;background:rgba(10,16,24,.78);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 14px;backdrop-filter:blur(4px);max-width:340px}
.wind{font-size:42px;line-height:1;font-weight:800;letter-spacing:.5px}
.wind small{font-size:14px;font-weight:600;opacity:.8}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.75;margin-top:2px}
.row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
input[type=range]{flex:1;min-width:160px}
button{background:#1e3248;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:7px 10px;cursor:pointer}
button:hover{background:#2a4562}
.bar{height:8px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden;margin-top:4px}
.bar>i{display:block;height:100%;width:0%;background:#7ec8ff}
.bar.grip>i{background:#ffb35c}
.state{margin-top:10px;font-size:14px}
.state b{color:#ffd166}
.keys{position:fixed;right:12px;bottom:12px;background:rgba(10,16,24,.7);padding:8px 10px;border-radius:10px;font-size:12px;opacity:.9;border:1px solid rgba(255,255,255,.12)}
label{font-size:13px}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div class="panel">
<div class="label">Wind speed</div>
<div class="wind"><span id="wval">0.0</span> <small>m/s · <span id="wkmh">0</span> km/h</small></div>
<div id="beau" class="label">Calm</div>
<div class="row">
<input id="slider" type="range" min="0" max="38" step="0.1" value="2">
</div>
<div class="row">
<button id="gust">Gust!</button>
<button id="reset">New umbrella (R)</button>
<label><input id="auto" type="checkbox" checked> wind rising</label>
<label><input id="rainOn" type="checkbox" checked> rain</label>
</div>
<div class="label" style="margin-top:12px">Canopy load</div>
<div class="bar"><i id="loadbar"></i></div>
<div class="label" style="margin-top:8px">Grip stress</div>
<div class="bar grip"><i id="gripbar"></i></div>
<div class="state" id="state">Canopy: <b>normal</b></div>
</div>
<div class="keys">↑ / ↓ or W / S: wind · Space: gust · R: reset umbrella</div>
<script>
"use strict";
const cv=document.getElementById('c'), ctx=cv.getContext('2d');
let W=0,H=0,DPR=1;
function resize(){DPR=Math.min(2,window.devicePixelRatio||1);W=innerWidth;H=innerHeight;cv.width=W*DPR;cv.height=H*DPR;cv.style.width=W+'px';cv.style.height=H+'px';ctx.setTransform(DPR,0,0,DPR,0,0);}
addEventListener('resize',resize);resize();
const $=id=>document.getElementById(id);
const slider=$('slider'), wval=$('wval'), wkmh=$('wkmh'), beau=$('beau'), loadbar=$('loadbar'), gripbar=$('gripbar'), stateEl=$('state');
let wind=2, gust=0, gustVel=0, t=0;
let inv=0, invVel=0, inverted=false, flex=0;
let grip=0, attached=true;
let phi=-0.12, phiVel=0; // shaft tilt, + to right (downwind)
let lean=0, leanVel=0, crouch=0;
let handWrench={x:0,y:0};
let free=null; // detached umbrella {x,y,vx,vy,a,va}
let shuffle=0;
function beaufort(v){
if(v<0.3)return'Calm'; if(v<1.6)return'Light air'; if(v<3.4)return'Light breeze';
if(v<5.5)return'Gentle breeze'; if(v<8)return'Fresh breeze'; if(v<10.8)return'Strong breeze';
if(v<13.9)return'Near gale'; if(v<17.2)return'Gale'; if(v<20.8)return'Strong gale';
if(v<24.5)return'Storm'; if(v<28.5)return'Violent storm'; return'Hurricane force';
}
function windEff(){
const noise=Math.sin(t*1.7)*0.6+Math.sin(t*4.3+1)*0.35+Math.sin(t*9.1)*0.15;
return Math.max(0, wind + gust + noise*Math.min(2,wind*0.12));
}
// Rain
const drops=[]; for(let i=0;i<650;i++)drops.push({x:Math.random()*2000,y:Math.random()*1200,s:0.7+Math.random()*0.7});
const streaks=[]; for(let i=0;i<70;i++)streaks.push({x:Math.random()*2000,y:Math.random()*800,l:40+Math.random()*90,sp:0.5+Math.random()});
function canopyPoints(cx,cy,angle,R,D,invV,flexV){
const pts=[]; const ca=Math.cos(angle), sa=Math.sin(angle);
// local: x across canopy, y up the dome (perpendicular to shaft, shaft points up)
for(let i=0;i<=24;i++){
const tt=-1+2*i/24;
let x=tt*R;
let y=D*(1-tt*tt)*(1-2*invV);
y += flexV * (tt*tt*tt) * D * 0.9; // trailing edge lift / leading depression
y += flexV * Math.sin(tt*Math.PI) * D * 0.15;
x += flexV * tt * R * 0.08;
// world: rotate local (x,y) by angle; shaft dir is (sin a, -cos a), across is (cos a, sin a)
const wx=cx + x*ca + y*sa;
const wy=cy + x*sa - y*ca;
pts.push([wx,wy,tt]);
}
return pts;
}
function drawUmbrella(cx,cy,angle,R,D,invV,flexV,alpha){
ctx.save(); ctx.globalAlpha=alpha==null?1:alpha;
const pts=canopyPoints(cx,cy,angle,R,D,invV,flexV);
// canopy fill
ctx.beginPath(); ctx.moveTo(pts[0][0],pts[0][1]);
for(const p of pts)ctx.lineTo(p[0],p[1]);
ctx.closePath();
const g=ctx.createLinearGradient(cx-R,cy-D,cx+R,cy+D);
g.addColorStop(0,'#c0392b'); g.addColorStop(0.5,'#e74c3c'); g.addColorStop(1,'#922b21');
ctx.fillStyle=g; ctx.fill();
ctx.strokeStyle='rgba(0,0,0,.35)'; ctx.lineWidth=1.5; ctx.stroke();
// underside shading when inverted
if(invV>0.4){ctx.fillStyle='rgba(0,0,0,.18)';ctx.fill();}
// ribs
ctx.strokeStyle='rgba(20,20,20,.65)'; ctx.lineWidth=1.6;
const hub=[cx+Math.sin(angle)*6, cy-Math.cos(angle)*6];
for(let i=0;i<=24;i+=3){ctx.beginPath();ctx.moveTo(hub[0],hub[1]);ctx.lineTo(pts[i][0],pts[i][1]);ctx.stroke();}
// rim
ctx.strokeStyle='#5d1a12'; ctx.lineWidth=2.5;
ctx.beginPath(); ctx.moveTo(pts[0][0],pts[0][1]); for(const p of pts)ctx.lineTo(p[0],p[1]); ctx.stroke();
// scallops
ctx.fillStyle='rgba(0,0,0,.15)';
for(let i=0;i<24;i+=4){const a=pts[i],b=pts[i+4];ctx.beginPath();ctx.moveTo(a[0],a[1]);ctx.lineTo(b[0],b[1]);ctx.quadraticCurveTo((a[0]+b[0])/2+Math.sin(angle)*6,(a[1]+b[1])/2-Math.cos(angle)*6,(a[0]+b[0])/2,(a[1]+b[1])/2);ctx.fill();}
ctx.restore();
}
function detach(){
if(!attached)return; attached=false;
const hand=lastHand, C=lastCanopy;
free={x:C[0],y:C[1],vx:windEff()*14+40,vy:-60-Math.random()*40,a:phi,va:2+Math.random()*2};
grip=0;
}
function resetUmbrella(){attached=true;free=null;inv=0;invVel=0;inverted=false;grip=0;phi=-0.12;phiVel=0;}
let lastHand=[0,0], lastCanopy=[0,0];
$('gust').onclick=()=>{gustVel+=7+Math.random()*5;};
$('reset').onclick=resetUmbrella;
slider.addEventListener('input',()=>{wind=parseFloat(slider.value);});
addEventListener('keydown',e=>{
if(e.key==='ArrowUp'||e.key==='w'||e.key==='W'){wind=Math.min(38,wind+1);e.preventDefault();}
if(e.key==='ArrowDown'||e.key==='s'||e.key==='S'){wind=Math.max(0,wind-1);e.preventDefault();}
if(e.code==='Space'){gustVel+=8;e.preventDefault();}
if(e.key==='r'||e.key==='R')resetUmbrella();
});
let last=performance.now();
function frame(now){
const dt=Math.min(0.033,(now-last)/1000); last=now; t+=dt;
const v=windEff();
// gust spring
gustVel+=-gust*2.2*dt - gustVel*1.4*dt; gust+=gustVel*dt; if(gust<0)gust*=0.9;
// auto rise
if($('auto').checked){wind=Math.min(38,wind+dt*0.28); slider.value=wind;}
slider.value=wind;
// load: pressure ~ v^2, incidence from shaft tilt
const incidence=0.55+0.65*Math.abs(Math.sin(phi+0.35));
const load=Math.pow(v/16,2)*incidence; // 1.0 ~ buckling
flex += ((Math.min(1.4,load*0.9))-flex)*Math.min(1,dt*6);
// inversion dynamics (bistable-ish)
const crit=1.0;
if(!inverted){
if(load>crit) invVel+=(load-crit)*4.5*dt;
else invVel+=(-inv*3 - invVel*2)*dt*2;
}else{
if(load<0.55) invVel+=-(0.55-load)*5*dt;
else invVel+=((1-inv)*2 - invVel*1.5)*dt;
}
invVel*=Math.pow(0.12,dt); inv+=invVel*dt*3;
if(inv>1){inv=1;invVel=0;} if(inv<0){inv=0;invVel=0;}
if(inv>0.62)inverted=true; if(inv<0.38)inverted=false;
// grip / detachment
if(attached){
if(load>1.25) grip+=dt*(load-1.0)*0.9; else grip=Math.max(0,grip-dt*0.5);
if(load>2.6 && Math.random()<dt*2) grip+=dt*3;
if(grip>1.15) detach();
}
// umbrella wrench: wind torque vs person counter-torque
if(attached){
const torque=(load-0.25)*1.6 - phi*2.2 - phiVel*1.2;
phiVel+=torque*dt*2.2; phi+=phiVel*dt;
phi=Math.max(-0.7,Math.min(1.15,phi));
handWrench.x += ((Math.min(46,load*26))-handWrench.x)*dt*4;
handWrench.y += ((Math.min(26,load*14))-handWrench.y)*dt*4;
}else{
handWrench.x*=Math.pow(0.01,dt); handWrench.y*=Math.pow(0.01,dt);
phi+=phiVel*dt*0.2;
}
// person compensation
const leanTarget=-Math.min(0.48, v*0.016) - (attached?load*0.05:0);
leanVel+=(leanTarget-lean)*dt*5 - leanVel*dt*4; lean+=leanVel*dt;
crouch += ((Math.min(22,v*0.7))-crouch)*dt*3;
if(v>19) shuffle+=dt*(v-16); else shuffle*=0.9;
// free umbrella physics
if(free){
free.vy+=620*dt; free.vx+= (v*16 - free.vx)*dt*1.2; free.vy+=(-30-free.vy)*dt*0.3;
free.x+=free.vx*dt; free.y+=free.vy*dt; free.a+=free.va*dt; free.va+= (v*0.05- free.va)*dt*0.5;
const ground=H*0.84;
if(free.y>ground-10){free.y=ground-10; free.vy*=-0.25; free.vx*=0.6; free.va*=0.5; if(Math.abs(free.vy)<20)free.vy=0;}
if(free.x>W+220||free.x<-260) free=null;
}
draw(v,load);
// HUD
wval.textContent=v.toFixed(1); wkmh.textContent=Math.round(v*3.6); beau.textContent=beaufort(v)+' · gust '+(gust>=0?'+':'')+gust.toFixed(1);
loadbar.style.width=Math.min(100,load*55)+'%'; gripbar.style.width=Math.min(100,grip*85)+'%';
stateEl.innerHTML = !attached ? 'Canopy: <b>GONE — wrenched away!</b>'
: inverted ? 'Canopy: <b>INVERTED inside-out</b>'
: load>0.85 ? 'Canopy: <b>flexing, frame loaded</b>' : 'Canopy: <b>normal</b>';
requestAnimationFrame(frame);
}
function draw(v,load){
const ground=H*0.84;
// sky
const sky=ctx.createLinearGradient(0,0,0,ground);
sky.addColorStop(0,'#2c3e50'); sky.addColorStop(0.6,'#4a5a6a'); sky.addColorStop(1,'#7a8a96');
ctx.fillStyle=sky; ctx.fillRect(0,0,W,ground+2);
// clouds
ctx.fillStyle='rgba(20,28,38,.55)';
for(let i=0;i<6;i++){const cx=((i*340 - t*(20+v*6))%(W+400)+W+400)%(W+400)-200; const cy=40+i*28%120;
ctx.beginPath(); ctx.ellipse(cx,cy,150,26,0,0,7); ctx.ellipse(cx+80,cy+8,110,20,0,0,7); ctx.fill();}
// distant buildings / lamp bending
ctx.fillStyle='rgba(15,22,30,.7)';
for(let i=0;i<8;i++){const bx=i*180-40, bh=90+((i*37)%70); ctx.fillRect(bx,ground-bh,110,bh);}
// lamp post bending with wind
const lampX=W*0.78, bend=Math.min(28,v*0.9);
ctx.strokeStyle='#111'; ctx.lineWidth=5; ctx.beginPath(); ctx.moveTo(lampX,ground); ctx.quadraticCurveTo(lampX+bend*0.3,ground-150,lampX+bend,ground-190); ctx.stroke();
ctx.fillStyle='#ffe9a8'; ctx.beginPath(); ctx.arc(lampX+bend+8,ground-186,7,0,7); ctx.fill();
// ground
ctx.fillStyle='#2f3b46'; ctx.fillRect(0,ground,W,H-ground);
ctx.fillStyle='rgba(255,255,255,.06)'; ctx.fillRect(0,ground,W,3);
// puddles
ctx.fillStyle='rgba(160,190,220,.18)';
for(let i=0;i<5;i++){ctx.beginPath();ctx.ellipse((i*260+80)%W,ground+18+i*14,90,7,0,0,7);ctx.fill();}
// wind streaks
ctx.strokeStyle='rgba(255,255,255,.22)'; ctx.lineWidth=1.2;
for(const s of streaks){s.x+= (v*22+60)*s.sp*0.016; if(s.x>W+120){s.x=-120;s.y=Math.random()*ground*0.8;}
ctx.beginPath();ctx.moveTo(s.x,s.y);ctx.lineTo(s.x+s.l*(0.4+v*0.05),s.y);ctx.stroke();}
// ---- person ----
const px=W*0.36 + Math.sin(shuffle)* (v>19?4:0);
const scale=Math.min(W,H)/520+0.55;
const hip=[px, ground-78*scale+crouch*0.4];
const torsoLen=62*scale;
const shoulder=[hip[0]+Math.sin(lean)*torsoLen, hip[1]-Math.cos(lean)*torsoLen];
const head=[shoulder[0]+Math.sin(lean)*22*scale-6*scale, shoulder[1]-Math.cos(lean)*22*scale-10*scale];
const footF=[px-34*scale+Math.sin(shuffle)*6, ground]; // braced front (into wind, left)
const footB=[px+30*scale, ground];
const kneeF=[(hip[0]+footF[0])/2-8*scale, (hip[1]+footF[1])/2+6*scale];
const kneeB=[(hip[0]+footB[0])/2+10*scale, (hip[1]+footB[1])/2+4*scale];
// nominal hand (in front, up-left)
const nominal=[shoulder[0]-34*scale, shoulder[1]-34*scale];
const hand=[nominal[0]+handWrench.x*scale, nominal[1]+handWrench.y*scale];
lastHand=hand;
// shaft & canopy
const shaftLen=118*scale;
const shaftDir=[Math.sin(phi),-Math.cos(phi)];
const canopyC=[hand[0]+shaftDir[0]*shaftLen, hand[1]+shaftDir[1]*shaftLen];
lastCanopy=canopyC;
const R=92*scale, D=42*scale*(1-flex*0.25);
// legs
ctx.strokeStyle='#1c2733'; ctx.lineWidth=11*scale; ctx.lineCap='round';
ctx.beginPath();ctx.moveTo(hip[0],hip[1]);ctx.lineTo(kneeF[0],kneeF[1]);ctx.lineTo(footF[0],footF[1]);ctx.stroke();
ctx.strokeStyle='#243447'; ctx.beginPath();ctx.moveTo(hip[0],hip[1]);ctx.lineTo(kneeB[0],kneeB[1]);ctx.lineTo(footB[0],footB[1]);ctx.stroke();
// boots
ctx.strokeStyle='#0d0d0d'; ctx.lineWidth=6*scale;
ctx.beginPath();ctx.moveTo(footF[0],footF[1]);ctx.lineTo(footF[0]-12*scale,footF[1]);ctx.stroke();
ctx.beginPath();ctx.moveTo(footB[0],footB[1]);ctx.lineTo(footB[0]+12*scale,footB[1]);ctx.stroke();
// coat / torso
ctx.strokeStyle='#34495e'; ctx.lineWidth=20*scale;
ctx.beginPath();ctx.moveTo(hip[0],hip[1]);ctx.lineTo(shoulder[0],shoulder[1]);ctx.stroke();
ctx.fillStyle='#34495e'; ctx.beginPath();ctx.ellipse((hip[0]+shoulder[0])/2,(hip[1]+shoulder[1])/2,16*scale,34*scale,lean,0,7);ctx.fill();
// head + hat
ctx.fillStyle='#e8b88a'; ctx.beginPath();ctx.arc(head[0],head[1],11*scale,0,7);ctx.fill();
ctx.fillStyle='#222'; ctx.beginPath();ctx.ellipse(head[0]-2*scale,head[1]-9*scale,13*scale,4*scale,lean,0,7);ctx.fill();
// arm to hand (or dangling if gone)
const elbow=[(shoulder[0]+hand[0])/2-6*scale,(shoulder[1]+hand[1])/2+16*scale];
ctx.strokeStyle='#34495e'; ctx.lineWidth=9*scale;
ctx.beginPath();ctx.moveTo(shoulder[0],shoulder[1]);ctx.lineTo(elbow[0],elbow[1]);ctx.lineTo(hand[0],hand[1]);ctx.stroke();
ctx.fillStyle='#e8b88a'; ctx.beginPath();ctx.arc(hand[0],hand[1],5*scale,0,7);ctx.fill();
// scarf flapping
ctx.strokeStyle='#c0392b'; ctx.lineWidth=5*scale;
const flap=Math.sin(t*10)* (4+v*0.6);
ctx.beginPath();ctx.moveTo(head[0]+4*scale,head[1]+8*scale);ctx.quadraticCurveTo(head[0]+30*scale+v*2,head[1]+10*scale+flap,head[0]+52*scale+v*3,head[1]+6*scale+flap*1.4);ctx.stroke();
// umbrella (attached)
if(attached){
// shaft
ctx.strokeStyle='#111'; ctx.lineWidth=4*scale;
ctx.beginPath();ctx.moveTo(hand[0],hand[1]);ctx.lineTo(canopyC[0],canopyC[1]);ctx.stroke();
// handle crook
ctx.beginPath();ctx.arc(hand[0]-6*scale,hand[1]-2*scale,6*scale,0,Math.PI*1.2);ctx.stroke();
drawUmbrella(canopyC[0],canopyC[1],phi,R,D,inv,flex,1);
// tip
ctx.strokeStyle='#111';ctx.lineWidth=3*scale;ctx.beginPath();ctx.moveTo(canopyC[0],canopyC[1]);ctx.lineTo(canopyC[0]+shaftDir[0]*16*scale,canopyC[1]+shaftDir[1]*16*scale);ctx.stroke();
}
// free umbrella
if(free){
const a=free.a;
ctx.strokeStyle='#111';ctx.lineWidth=4*scale;
ctx.beginPath();ctx.moveTo(free.x-Math.sin(a)*40,free.y+Math.cos(a)*40);ctx.lineTo(free.x+Math.sin(a)*40,free.y-Math.cos(a)*40);ctx.stroke();
drawUmbrella(free.x,free.y,a,R,D,Math.max(inv,0.7),flex,0.95);
}
// rain (on top, wind-blown)
if($('rainOn').checked){
ctx.strokeStyle='rgba(180,210,240,.55)'; ctx.lineWidth=1.1;
const rvx=v*18, rvy=380+v*6;
for(const d of drops){
d.x+=rvx*d.s*0.016; d.y+=rvy*d.s*0.016;
if(d.y>ground){d.y=-20;d.x=Math.random()*W;}
if(d.x>W+30){d.x=-30;}
const len=10+d.s*8;
ctx.beginPath();ctx.moveTo(d.x,d.y);ctx.lineTo(d.x-rvx*0.02,d.y-len);ctx.stroke();
}
}
// splash rings
if($('rainOn').checked && v>3){
ctx.strokeStyle='rgba(200,220,240,.3)';
for(let i=0;i<12;i++){const sx=(i*173+t*40)%W, sy=ground+10+((i*29)%50);
ctx.beginPath();ctx.ellipse(sx,sy,6+((t*30+i*7)%10),2,0,0,7);ctx.stroke();}
}
}
requestAnimationFrame(frame);
</script>
</body>
</html>
What it actually does
Where it looks right: the rain shears over with the wind and streaks lengthen with speed, the person leans, crouches and shuffles into the wind, the shaft is visibly wrenched downwind, the canopy flattens and its trailing edge lifts before it gives, inversion snaps rather than easing, and once the grip fails the umbrella really does tear away, tumble, bounce on the wet ground and slide — after which the empty hand drops and the person stops bracing for a load that is no longer there.
Where it looks wrong, and I know it: a real umbrella inverts rib-by-rib and asymmetrically, often with one panel popping first and the whole thing then flapping and shedding water, whereas mine inverts as one clean symmetric arc; a real canopy also spills air sideways and twists around the shaft, which I do not model, so mine holds a load a real one would have spilled; the person is a side-view stick figure with no true foot slip, no two-handed grip, no stepping, and no moment where they let go voluntarily before being wrenched; the wind is a single number with synthetic gusts, not a turbulent field, so rain, lamp and scarf all agree too neatly; and the detachment is a threshold on accumulated stress, not the sudden jerk, wrist twist and loss of footing that actually takes an umbrella out of your hand — expect yours to feel more binary and more forgiving than the real thing, and the recovery (wind dropping and the canopy popping back) to be tidier than a bent frame ever manages.
Attachments
stealth/crouton-alpha — page