Run Detail

completedparticle-1

Unscored

Every model's answer from this round

Recorded for these videos

27:18

Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?

Nov 13, 2026 · YouTube

18:40

ERNIE 5.5 Flash Preview vs GLM 5.3 Flash: Baidu's new model is very impressive!

Nov 11, 2026 · YouTube

36:22

Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash

Nov 11, 2026 · YouTube

14:03

Gemini 4 Carbon: Can it handle my challenges? (First look with one-shot coding tests)

Nov 10, 2026 · YouTube

47:51

Ranking 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:58

Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency

Oct 28, 2026 · YouTube

22:14

GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?

Oct 27, 2026 · YouTube

29:55

Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.

Oct 26, 2026 · YouTube

31:28

Is this company reselling GPT Sol 6.1 at a loss (for non-agentic/text-only)?🤔 Is this sustainable?

Oct 20, 2026 · YouTube

17:58

Nemotron 3.5 Super VL vs Opus 5.5: Testing NVIDIA’s new coding juggernaut

Oct 15, 2026 · YouTube

16:04

Testing a *massive* new open-weights model 🤯: Muse Spark Open (vs. Nemotron, Opus 5.5, and more)

Oct 15, 2026 · YouTube

16:43

Gemini 4 Argon: Great 🐈 Animation, but a broken escalator. (Coding challenge vs Opus 5.5, Sol 6.1)

Oct 13, 2026 · YouTube

16:37

Meta's new "Muse Wonder" AI is impressive... but can it compete with Anthropic's models?

Oct 12, 2026 · YouTube

11:12

WOW... Haiku 5.5 is very impressive. RIP OpenAI?

Oct 7, 2026 · YouTube

22:47

Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?

Oct 6, 2026 · YouTube

22:02

Is Pareto 26.10 Preview Just Routing to GPT Sol? I Tested It Against Sol 6.1 Pro

Oct 1, 2026 · YouTube

11:22

I Tested Sonnet 5.5 Against Opus 5.5. Is It Actually Cheaper?

Sep 28, 2026 · YouTube

19:21

I Tested the Stealth "Space Bunny Alpha" Model Before It Went Offline

Sep 23, 2026 · YouTube

Provider

openrouter

Challenge Version

v1.0

Turns

Duration

118.0s

Total Tokens

43,486

Input Tokens

452

Output Tokens

43,034

Reasoning Tokens

34,984

Reasoning Effort

default

Est. Cost

$0.0431

Started

10/28/2026, 8:07:23 PM

OR Provider

Particle AI

Finish Reason

stop

Generation ID

gen-1793218041-0bUpQicNqPn80kkG4jJ1

Turns (1)

Turn #1

452 in43,034 out34,984 reasoning43,486 total117.9s

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 or indexedDB — sandboxed frame, they throw.
Return the file as exactly one fenced html block.

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

The canopy is a surface of revolution sampled every frame: for each radius r out to the rim R and each azimuth φ, a point sits at height z(r) = h(1−(r/R)²)(1−2·inv) + h·inv and is pushed downwind by a billow term proportional to dynamic pressure. inv is a single scalar state — 0 is the normal dome (apex above the rim), 1 is fully inside out (apex at the hub, rim flared up around it, ribs pointing outward-up). It is not a mesh that crumples; it is a continuous flip driven by a stiff, underdamped spring, so the transition overshoots and wobbles. What decides it: a hysteresis latch on the normalised load (wind/13.5)². Above ~1.02 the latch sets inv → 1 and kicks the spring; it only releases back below 0.36. Inversion also multiplies the drag coefficient by ~1.85, which is what usually turns "inside out" into "gone" a few seconds later — the grip budget is a separate spring-fed stamina pool that drains under sustained load.

The page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Umbrella in a Gale</title>
<style>
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#070a10;
    font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:#cfe0ee;-webkit-user-select:none;user-select:none}
  canvas{display:block;position:fixed;inset:0}
  #hud{position:fixed;left:22px;top:18px;pointer-events:none}
  #windval{font-size:46px;font-weight:200;letter-spacing:-1.5px;line-height:1;
    font-variant-numeric:tabular-nums;text-shadow:0 2px 20px rgba(0,0,0,.85)}
  #windval small{font-size:13px;font-weight:400;opacity:.5;letter-spacing:1.5px;margin-left:5px}
  #status{margin-top:9px;font-size:10px;letter-spacing:3px;text-transform:uppercase;
    opacity:.45;height:13px;transition:color .15s,opacity .15s}
  #status.warn{color:#ffb066;opacity:1}
  #status.bad{color:#ff5f4a;opacity:1}
  #bar{position:fixed;left:22px;top:100px;width:170px;height:2px;background:rgba(255,255,255,.10);
    border-radius:2px;overflow:hidden}
  #barfill{height:100%;width:0%;background:linear-gradient(90deg,#4fa8d8,#ffb347,#ff4a3d)}
  #controls{position:fixed;left:22px;bottom:20px;right:22px;display:flex;align-items:center;
    gap:16px;flex-wrap:wrap}
  #controls label{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;opacity:.4}
  input[type=range]{-webkit-appearance:none;appearance:none;width:min(320px,46vw);height:22px;
    background:transparent;cursor:pointer}
  input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(255,255,255,.16);border-radius:2px}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;
    border-radius:50%;background:#dceaf5;margin-top:-5.5px;box-shadow:0 0 12px rgba(120,200,255,.7)}
  input[type=range]::-moz-range-track{height:2px;background:rgba(255,255,255,.16);border-radius:2px}
  input[type=range]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:#dceaf5}
  .hint{font-size:9px;letter-spacing:2px;text-transform:uppercase;opacity:.28}
  .hint b{font-weight:600;opacity:.9}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud">
  <div id="windval">0.0<small>M/S</small></div>
  <div id="status">calm</div>
  <div id="bar"><div id="barfill"></div></div>
</div>
<div id="controls">
  <label>wind</label>
  <input id="wind" type="range" min="0" max="34" step="0.1" value="3">
  <div class="hint"><b>&#8593;&#8595;</b> wind &nbsp; <b>A</b> auto &nbsp; <b>R</b> reset</div>
</div>
<script>
(function(){
'use strict';

var cv = document.getElementById('c');
var ctx = cv.getContext('2d');
var windvalEl = document.getElementById('windval');
var statusEl = document.getElementById('status');
var barfillEl = document.getElementById('barfill');
var sliderEl = document.getElementById('wind');

var W=0,H=0,DPR=1,scale=1,groundY=0,personX=0;

function clamp(v,a,b){ return v<a?a:(v>b?b:v); }

/* ---------------- state ---------------- */
var S = {
  t: 0,
  windTarget: 3,
  wind: 3,
  auto: true,
  autoPause: 0,
  inv: 0, invV: 0, inverted: false,
  tilt: 0, tiltV: 0,
  bend: 0,
  load: 0,
  Fdrag: 0,
  stamina: 1,
  lean: 0,
  attached: true,
  goneTimer: 0,
  fx:0, fy:0, fvx:0, fvy:0, frot:0, frotV:0,
  flash: 0,
  pose: null
};

var rain = [];
var streaks = [];

function initRain(){
  rain = [];
  var n = Math.round(clamp(W*H/4200, 180, 540));
  for (var i=0;i<n;i++){
    rain.push({
      x: Math.random()*W*1.6 - W*0.3,
      y: Math.random()*H,
      z: 0.3 + Math.random()*0.9,
      l: 0.6 + Math.random()*0.9
    });
  }
  streaks = [];
  for (var j=0;j<34;j++){
    streaks.push({
      x: Math.random()*W,
      y: Math.random()*groundY,
      len: 30 + Math.random()*90,
      sp: 0.4 + Math.random()*0.9
    });
  }
}

function resize(){
  DPR = Math.min(window.devicePixelRatio||1, 2);
  W = window.innerWidth; H = window.innerHeight;
  cv.width = Math.round(W*DPR); cv.height = Math.round(H*DPR);
  cv.style.width = W+'px'; cv.style.height = H+'px';
  ctx.setTransform(DPR,0,0,DPR,0,0);
  scale = clamp(H/800, 0.5, 1.3);
  groundY = H*0.84;
  personX = W*0.38;
  initRain();
}

/* ---------------- physics ---------------- */
function detach(){
  S.attached = false;
  S.goneTimer = 0;
  var p = S.pose;
  S.fx = p ? p.hubX : personX;
  S.fy = p ? p.hubY : groundY-300;
  S.frot = S.tilt;
  S.fvx = 70 + S.wind*9;
  S.fvy = -150 - S.wind*3.5;
  S.frotV = 2.6 + Math.random()*3.2;
  S.flash = 1;
}

function reset(){
  S.windTarget = 3; S.wind = 3;
  S.inv = 0; S.invV = 0; S.inverted = false;
  S.tilt = 0; S.tiltV = 0; S.bend = 0;
  S.attached = true; S.stamina = 1; S.goneTimer = 0;
  S.lean = 0; S.auto = true; S.autoPause = 0;
  S.flash = 0;
}

function computePose(){
  var sc = scale, gy = groundY, px = personX;
  var legLen = 92*sc, torsoLen = 64*sc, headR = 15*sc;
  var lean = S.lean;

  var hipX = px - Math.sin(lean)*legLen*0.85;
  var hipY = gy - Math.cos(lean)*legLen*0.85;
  var shX  = hipX - Math.sin(lean)*torsoLen;
  var shY  = hipY - Math.cos(lean)*torsoLen;
  var headX = shX - Math.sin(lean)*(headR+9*sc);
  var headY = shY - Math.cos(lean)*(headR+9*sc);

  var load = Math.min(S.load, 2.2);
  var handX, handY;
  if (S.attached){
    handX = shX + (22 + 15*load)*sc;
    handY = shY - (56 - 13*load)*sc;
  } else {
    handX = shX + 12*sc;
    handY = shY + 42*sc;
  }

  var L = 100*sc;
  var hubX = handX + Math.sin(S.tilt)*L;
  var hubY = handY - Math.cos(S.tilt)*L;

  S.pose = {
    hipX:hipX, hipY:hipY, shX:shX, shY:shY,
    headX:headX, headY:headY,
    handX:handX, handY:handY,
    hubX:hubX, hubY:hubY,
    legLen:legLen, torsoLen:torsoLen, headR:headR, L:L, lean:lean,
    footL:[px-20*sc, gy], footR:[px+22*sc, gy]
  };
}

function update(dt){
  S.t += dt;
  S.flash = Math.max(0, S.flash - dt*2.6);

  if (S.auto && S.autoPause <= 0) S.windTarget = Math.min(34, S.windTarget + 0.72*dt);
  S.autoPause = Math.max(0, S.autoPause - dt);

  var g = Math.sin(S.t*1.31)*0.5 + Math.sin(S.t*2.73+1.7)*0.32 + Math.sin(S.t*5.11+4.2)*0.18;
  S.wind = Math.max(0, S.windTarget*(1 + 0.17*g) + 0.9*Math.sin(S.t*3.7+2.1));

  var load = (S.wind*S.wind)/(13.5*13.5);
  S.load = load;

  /* inversion latch */
  if (!S.inverted && load > 1.02){ S.inverted = true; S.invV += 8; S.flash = 1; }
  else if (S.inverted && load < 0.36){ S.inverted = false; S.invV -= 3; }

  var invT = S.inverted ? 1 : 0;
  S.invV += (invT - S.inv)*260*dt - S.invV*9*dt;
  S.inv += S.invV*dt;
  if (S.inv < -0.18){ S.inv = -0.18; S.invV *= -0.3; }
  if (S.inv >  1.28){ S.inv =  1.28; S.invV *= -0.3; }

  /* tilt / wrench */
  var tiltT = Math.min(1.15, load*0.40 + Math.max(0,S.inv)*0.24);
  S.tiltV += (tiltT - S.tilt)*95*dt - S.tiltV*12*dt;
  S.tilt += S.tiltV*dt;

  /* shaft bend */
  var bendT = Math.min(1, load*0.42 + Math.max(0,S.inv)*0.5);
  S.bend += (bendT - S.bend)*9*dt;

  /* body lean */
  var leanT = Math.min(0.42, load*0.15 + Math.max(0,S.inv)*0.06);
  if (!S.attached) leanT = 0.02;
  S.lean += (leanT - S.lean)*5*dt;

  /* grip budget */
  var Fdrag = 85*load*(1 + 0.85*Math.max(0,S.inv));
  S.Fdrag = Fdrag;
  var gripLimit = 270*(0.55 + 0.45*S.stamina);
  var stress = Fdrag/270;
  S.stamina -= dt*0.20*Math.max(0, stress-0.55);
  S.stamina += dt*0.14*Math.max(0, 0.55-stress);
  S.stamina = clamp(S.stamina, 0.15, 1);

  if (S.attached && Fdrag > gripLimit) detach();

  /* free flight */
  if (!S.attached){
    S.fvx += (S.wind*15 - S.fvx)*1.4*dt;
    S.fvy += 760*dt;
    S.fvy *= (1 - 0.7*dt);
    S.fx += S.fvx*dt;
    S.fy += S.fvy*dt;
    S.frot += S.frotV*dt;
    S.frotV *= (1 - 0.55*dt);
    S.goneTimer += dt;
    if (S.goneTimer > 6.5) reset();
  }

  computePose();
}

/* ---------------- drawing helpers ---------------- */
function limb(x1,y1,x2,y2,bend,width,color){
  var mx=(x1+x2)*0.5, my=(y1+y2)*0.5;
  var dx=x2-x1, dy=y2-y1;
  var len=Math.hypot(dx,dy)||1;
  var nx=-dy/len, ny=dx/len;
  ctx.strokeStyle=color;
  ctx.lineWidth=width;
  ctx.lineCap='round';
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  ctx.quadraticCurveTo(mx+nx*bend, my+ny*bend, x2, y2);
  ctx.stroke();
}

function drawUmbrella(hubX, hubY, tilt, inv, flex, handX, handY, bend){
  var sc = scale;
  var R = 108*sc;
  var h = 46*sc;
  var ct = Math.cos(tilt), st = Math.sin(tilt);

  function P(v,u){ return [hubX + v*ct + u*st, hubY + v*st - u*ct]; }

  var billow = R*(0.26*flex + 0.22*Math.max(0,inv));

  function surf(r, phi){
    var rr = r/R;
    var z = h*(1-rr*rr)*(1-2*inv) + h*inv;
    var v = r*Math.cos(phi) + billow*(1-rr*rr);
    return P(v, z);
  }

  var N = 8, sag = 0.075;
  function rEff(phi){
    var s = Math.sin(N*phi*0.5);
    return R*(1 - sag*s*s);
  }

  /* shaft */
  var perpX = Math.cos(tilt), perpY = Math.sin(tilt);
  var mx = (handX+hubX)*0.5 + perpX*bend*18*sc;
  var my = (handY+hubY)*0.5 + perpY*bend*18*sc;
  ctx.beginPath();
  ctx.moveTo(handX, handY);
  ctx.quadraticCurveTo(mx, my, hubX, hubY);
  ctx.strokeStyle = '#39424e';
  ctx.lineWidth = 5.5*sc;
  ctx.lineCap = 'round';
  ctx.stroke();
  ctx.strokeStyle = 'rgba(190,215,240,0.22)';
  ctx.lineWidth = 1.6*sc;
  ctx.stroke();

  /* canopy silhouette */
  var STEPS = 180;
  ctx.beginPath();
  for (var i=0;i<=STEPS;i++){
    var phi = i/STEPS*Math.PI*2;
    var q = surf(rEff(phi), phi);
    if (i) ctx.lineTo(q[0],q[1]); else ctx.moveTo(q[0],q[1]);
  }
  ctx.closePath();

  var cg = ctx.createLinearGradient(hubX-R*0.9, hubY-h*2.0, hubX+R*0.9, hubY+h*1.6);
  cg.addColorStop(0, '#e8604f');
  cg.addColorStop(0.42, '#c33a2e');
  cg.addColorStop(1, '#6e1a14');
  ctx.fillStyle = cg;
  ctx.fill();
  ctx.strokeStyle = 'rgba(35,8,6,0.9)';
  ctx.lineWidth = 2*sc;
  ctx.stroke();

  /* ribs */
  ctx.strokeStyle = 'rgba(70,18,14,0.5)';
  ctx.lineWidth = 1.5*sc;
  for (var k2=0;k2<=4;k2++){
    var a = k2*Math.PI/4;
    ctx.beginPath();
    for (var k=0;k<=14;k++){
      var qq = surf(R*k/14, a);
      if (k) ctx.lineTo(qq[0],qq[1]); else ctx.moveTo(qq[0],qq[1]);
    }
    ctx.stroke();
  }

  /* rim light */
  ctx.beginPath();
  for (var i2=0;i2<=STEPS;i2++){
    var ph2 = i2/STEPS*Math.PI*2;
    var q2 = surf(rEff(ph2), ph2);
    if (i2) ctx.lineTo(q2[0],q2[1]); else ctx.moveTo(q2[0],q2[1]);
  }
  ctx.strokeStyle = 'rgba(255,190,170,0.26)';
  ctx.lineWidth = 2.2*sc;
  ctx.stroke();

  /* ferrule */
  var apex = surf(0,0);
  ctx.beginPath();
  ctx.moveTo(apex[0], apex[1]);
  ctx.lineTo(apex[0] + st*11*sc, apex[1] - ct*11*sc);
  ctx.strokeStyle = '#9aa6b2';
  ctx.lineWidth = 3*sc;
  ctx.lineCap = 'round';
  ctx.stroke();
}

function drawPerson(){
  var p = S.pose;
  if (!p) return;
  var sc = scale;

  var coat = '#26364a';
  var coatDark = '#1a2634';
  var trouser = '#151d27';
  var skin = '#c9a58a';

  /* legs */
  limb(p.hipX, p.hipY, p.footL[0], p.footL[1], 12*sc, 13*sc, trouser);
  limb(p.hipX, p.hipY, p.footR[0], p.footR[1], 12*sc, 13*sc, trouser);

  /* feet */
  ctx.fillStyle = '#0d131a';
  ctx.beginPath(); ctx.ellipse(p.footL[0]-4*sc, p.footL[1], 13*sc, 5*sc, 0,0,Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.ellipse(p.footR[0]+4*sc, p.footR[1], 13*sc, 5*sc, 0,0,Math.PI*2); ctx.fill();

  /* coat skirt */
  ctx.beginPath();
  ctx.moveTo(p.hipX-16*sc, p.hipY-6*sc);
  ctx.lineTo(p.hipX+16*sc, p.hipY-6*sc);
  ctx.lineTo(p.hipX+21*sc, p.hipY+34*sc);
  ctx.lineTo(p.hipX-21*sc, p.hipY+34*sc);
  ctx.closePath();
  ctx.fillStyle = coatDark;
  ctx.fill();

  /* torso */
  ctx.strokeStyle = coat;
  ctx.lineWidth = 30*sc;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(p.hipX, p.hipY);
  ctx.lineTo(p.shX, p.shY);
  ctx.stroke();

  /* hood behind head */
  ctx.fillStyle = coatDark;
  ctx.beginPath();
  ctx.arc(p.headX - 3*sc, p.headY - 2*sc, p.headR*1.32, 0, Math.PI*2);
  ctx.fill();

  /* head */
  ctx.fillStyle = skin;
  ctx.beginPath();
  ctx.arc(p.headX, p.headY, p.headR, 0, Math.PI*2);
  ctx.fill();

  /* hood over top */
  ctx.fillStyle = coat;
  ctx.beginPath();
  ctx.arc(p.headX - 2*sc, p.headY - 3*sc, p.headR*1.18, Math.PI*0.92, Math.PI*2.18);
  ctx.fill();
}

function drawArms(){
  var p = S.pose;
  if (!p) return;
  var sc = scale;
  var sleeve = '#2c3d52';
  var skin = '#c9a58a';

  if (S.attached){
    var h2x = p.handX + Math.sin(S.tilt)*24*sc;
    var h2y = p.handY - Math.cos(S.tilt)*24*sc;
    limb(p.shX, p.shY, h2x, h2y, 11*sc, 10*sc, sleeve);
    limb(p.shX, p.shY, p.handX, p.handY, 13*sc, 10*sc, sleeve);
    ctx.fillStyle = skin;
    ctx.beginPath(); ctx.arc(p.handX, p.handY, 5.5*sc, 0, Math.PI*2); ctx.fill();
    ctx.beginPath(); ctx.arc(h2x, h2y, 5.5*sc, 0, Math.PI*2); ctx.fill();
  } else {
    limb(p.shX, p.shY, p.handX, p.handY, 10*sc, 10*sc, sleeve);
    ctx.fillStyle = skin;
    ctx.beginPath(); ctx.arc(p.handX, p.handY, 5.5*sc, 0, Math.PI*2); ctx.fill();
  }
}

function drawFreeUmbrella(){
  if (S.attached) return;
  if (S.fx < -300 || S.fx > W+300 || S.fy > H+300) return;
  var sc = scale;
  var ct = Math.cos(S.frot), st = Math.sin(S.frot);
  var handX = S.fx - st*100*sc;
  var handY = S.fy + ct*100*sc;
  var flex = Math.min(1.4, S.load*0.85);
  drawUmbrella(S.fx, S.fy, S.frot, S.inv, flex, handX, handY, 0.35);
}

/* ---------------- rain ---------------- */
function updateRain(dt){
  for (var i=0;i<rain.length;i++){
    var p = rain[i];
    var vx = S.wind*20*p.z;
    var vy = 780*p.z;
    p.x += vx*dt;
    p.y += vy*dt;
    if (p.y > H+40){
      p.y = -40 - Math.random()*140;
      p.x = Math.random()*W*1.8 - W*0.6;
    }
    if (p.x > W+100) p.x -= W+200;
    if (p.x < -100) p.x += W+200;
  }
}

function drawRain(lo, hi, alpha){
  ctx.beginPath();
  for (var i=0;i<rain.length;i++){
    var p = rain[i];
    if (p.z < lo || p.z >= hi) continue;
    var vx = S.wind*20*p.z;
    var vy = 780*p.z;
    var k = 0.030*p.l;
    ctx.moveTo(p.x, p.y);
    ctx.lineTo(p.x - vx*k, p.y - vy*k);
  }
  ctx.strokeStyle = 'rgba(160,200,235,'+alpha+')';
  ctx.lineWidth = 1.1;
  ctx.stroke();
}

function drawStreaks(dt){
  var w = S.wind;
  if (w < 2) return;
  var a = clamp((w-2)/26, 0, 1);
  ctx.strokeStyle = 'rgba(170,205,235,'+(0.11*a)+')';
  ctx.lineWidth = 1;
  ctx.beginPath();
  for (var i=0;i<streaks.length;i++){
    var s = streaks[i];
    s.x += (w*14*s.sp + 20)*dt;
    if (s.x > W+140){ s.x = -140; s.y = Math.random()*groundY; }
    ctx.moveTo(s.x, s.y);
    ctx.lineTo(s.x + s.len*(0.35+0.65*a), s.y);
  }
  ctx.stroke();
}

/* ---------------- render ---------------- */
function render(dt){
  /* sky */
  var sky = ctx.createLinearGradient(0,0,0,groundY);
  sky.addColorStop(0,'#05080d');
  sky.addColorStop(0.5,'#0e1620');
  sky.addColorStop(1,'#1a2733');
  ctx.fillStyle = sky;
  ctx.fillRect(0,0,W,groundY+2);

  /* ground */
  var gg = ctx.createLinearGradient(0,groundY,0,H);
  gg.addColorStop(0,'#1c2731');
  gg.addColorStop(0.35,'#111a22');
  gg.addColorStop(1,'#070b0f');
  ctx.fillStyle = gg;
  ctx.fillRect(0,groundY,W,H-groundY);

  /* horizon glow */
  var hg = ctx.createLinearGradient(0,groundY-110,0,groundY+8);
  hg.addColorStop(0,'rgba(90,140,180,0)');
  hg.addColorStop(1,'rgba(90,140,180,0.11)');
  ctx.fillStyle = hg;
  ctx.fillRect(0,groundY-110,W,120);

  ctx.strokeStyle = 'rgba(130,170,200,0.20)';
  ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(0,groundY); ctx.lineTo(W,groundY); ctx.stroke();

  drawStreaks(dt);
  drawRain(0, 0.58, 0.20);

  /* ground shadow */
  ctx.save();
  ctx.globalAlpha = 0.4;
  ctx.fillStyle = '#000';
  ctx.beginPath();
  ctx.ellipse(personX, groundY+5, 48*scale, 9*scale, 0, 0, Math.PI*2);
  ctx.fill();
  ctx.restore();

  /* scene */
  if (S.attached){
    drawPerson();
    var p = S.pose;
    var flex = Math.min(1.4, S.load*0.85);
    drawUmbrella(p.hubX, p.hubY, S.tilt, S.inv, flex, p.handX, p.handY, S.bend);
    drawArms();
  } else {
    drawPerson();
    drawArms();
    drawFreeUmbrella();
  }

  drawRain(0.58, 1.01, 0.34);

  /* vignette */
  var vg = ctx.createRadialGradient(W*0.5,H*0.45,Math.min(W,H)*0.22, W*0.5,H*0.5,Math.max(W,H)*0.78);
  vg.addColorStop(0,'rgba(0,0,0,0)');
  vg.addColorStop(1,'rgba(0,0,0,0.68)');
  ctx.fillStyle = vg;
  ctx.fillRect(0,0,W,H);

  /* inversion flash */
  if (S.flash > 0.01){
    ctx.fillStyle = 'rgba(255,238,215,'+(S.flash*0.16)+')';
    ctx.fillRect(0,0,W,H);
  }

  /* HUD */
  windvalEl.innerHTML = S.wind.toFixed(1) + '<small>M/S</small>';
  barfillEl.style.width = (clamp(S.wind/34,0,1)*100).toFixed(1) + '%';

  var st = 'calm', cls = '';
  if (!S.attached){ st = 'umbrella gone'; cls = 'bad'; }
  else if (S.inverted){ st = 'inverted'; cls = 'bad'; }
  else if (S.load > 0.78){ st = 'straining'; cls = 'warn'; }
  else if (S.load > 0.42){ st = 'gusty'; }
  else if (S.load > 0.12){ st = 'breeze'; }
  if (statusEl.textContent !== st) statusEl.textContent = st;
  if (statusEl.className !== cls) statusEl.className = cls;

  if (!dragging) sliderEl.value = S.windTarget.toFixed(1);
}

/* ---------------- loop ---------------- */
var last = performance.now();
var acc = 0;
var STEP = 1/120;

function frame(now){
  var dt = (now-last)/1000;
  last = now;
  if (dt > 0.1) dt = 0.1;
  acc += dt;
  var n = 0;
  while (acc >= STEP && n < 14){ update(STEP); acc -= STEP; n++; }
  if (n >= 14) acc = 0;
  updateRain(dt);
  render(dt);
  requestAnimationFrame(frame);
}

/* ---------------- input ---------------- */
var dragging = false;
sliderEl.addEventListener('pointerdown', function(){ dragging = true; });
window.addEventListener('pointerup', function(){ dragging = false; });
sliderEl.addEventListener('input', function(){
  S.windTarget = parseFloat(sliderEl.value);
  S.autoPause = 4;
});

window.addEventListener('keydown', function(e){
  if (e.key === 'ArrowUp' || e.key === 'ArrowRight'){
    S.windTarget = Math.min(34, S.windTarget + 1.5); S.autoPause = 4; e.preventDefault();
  } else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft'){
    S.windTarget = Math.max(0, S.windTarget - 1.5); S.autoPause = 4; e.preventDefault();
  } else if (e.key === 'r' || e.key === 'R'){
    reset();
  } else if (e.key === 'a' || e.key === 'A'){
    S.auto = !S.auto;
  }
});

window.addEventListener('resize', resize);

/* ---------------- boot ---------------- */
resize();
computePose();
requestAnimationFrame(frame);

})();
</script>
</body>
</html>

What it actually does

It gets the sequence right, which is the part that matters: the canopy billows and flattens as pressure builds, the shaft bows downwind, the person leans in and stacks both hands on the handle, and then at roughly 13–14 m/s the canopy snaps through with an overshoot wobble and sits there as a bowl. The drag jump after inversion is what usually kills it — the grip stamina drains, the limit drops, and the whole thing tumbles off upwind-to-downwind a second or two later. Rain angle and streak length track the wind, and the free umbrella keeps its inverted shape while it flies.

Where it's wrong, and you'll see it:

The inversion is a smooth scalar flip, not a fabric event. Real canopies invert asymmetrically — one panel pops first, the rim folds over on one side, the ribs kink at a joint. Mine flips the entire surface of revolution at once, so the mid-transition frame is a flat disc rather than a crumpled mess. It reads as a snap because it's fast, but freeze it and it's wrong.
The ribs never actually break or bend past straight. They're just curves drawn on a surface that changes shape. A real rib takes a permanent set after inversion; mine springs perfectly back to the original dome when the wind drops below ~8 m/s.
The person is a rigid puppet. The lean is a single angle about the feet, the knees don't absorb anything, and the feet never slide or scuff. A real person in a 20 m/s gust with an umbrella is doing a lot of small stepping and hip work that I've reduced to one damped spring.
The grip is one number. There's no distinction between the hand that's actually holding and the one bracing, no wrist roll, no moment arm. The umbrella detaches the instant a scalar force crosses a scalar limit, which is a clean event but not a physical one — real escapes are usually a slow slip or a single violent yank.
The canopy has no thickness and no back face. When it inverts you see the same gradient, just mirrored, so the "underside" of the fabric is never really rendered. It's a silhouette trick, and it holds up at speed but not if you stare.
Wind is a scalar, not a field. No shear, no ground boundary layer, no turbulence length scale — the gusts are three sine waves, so the umbrella gets pushed by a signal that's suspiciously periodic if you watch it for a minute.

Attachments

particle-ai/particle-1 — page