Run Detail

completedgpt-5.6-terra

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

Batched — not timed

Total Tokens

7,665

Input Tokens

369

Output Tokens

7,296

Reasoning Tokens

1,034

Reasoning Effort

default

Est. Cost

$0.0441

Started

9/22/2026, 9:45:01 PM

OR Provider

OpenAI

Finish Reason

stop

Generation ID

gen-batch-1790113501-00b8bc85acd4aa71620e

Turns (1)

Turn #1

369 in7,296 out1,034 reasoning7,665 total

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 small custom spring-and-drag model: a curved cloth silhouette, radial ribs, and a shaft whose angle is pushed by wind force and pulled back toward the holder’s hand. “Inside out” is a state transition rather than a texture swap: the canopy’s dome profile interpolates through flat into an inverted bowl while the ribs reverse their bend. Wind load scales roughly with wind speed squared, accumulates as frame stress, and inversion occurs when sustained load exceeds the current grip/bracing capacity; still higher sustained load can tear the umbrella free and give it its own airborne motion.

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>
  :root {
    color-scheme: dark;
    --ink: #eaf5ff;
    --panel: rgba(8, 20, 34, .76);
    --line: rgba(207, 235, 255, .25);
    --accent: #8ee8ff;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #07111d;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
  }
  #hud {
    position: fixed;
    top: 16px;
    left: 16px;
    width: min(355px, calc(100vw - 32px));
    padding: 14px 15px 13px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.24);
    backdrop-filter: blur(8px);
    user-select: none;
  }
  #title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 9px;
    letter-spacing: .08em;
    font-size: 11px;
    color: #b8d8ed;
  }
  #speed {
    font-family: Georgia, serif;
    color: white;
    font-size: 31px;
    line-height: 1;
    letter-spacing: -.05em;
  }
  #speed small {
    font: 11px ui-monospace, monospace;
    letter-spacing: 0;
    color: #b8d8ed;
    margin-left: 5px;
  }
  .row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 11px;
    font-size: 11px;
    color: #b8d8ed;
  }
  .row label { white-space: nowrap; }
  input[type="range"] {
    width: 100%;
    accent-color: #8ee8ff;
    cursor: ew-resize;
  }
  #state {
    margin-top: 10px;
    min-height: 18px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: .04em;
    color: #d8edff;
  }
  #help {
    position: fixed;
    right: 17px;
    bottom: 15px;
    color: rgba(221,240,255,.75);
    font-size: 10px;
    line-height: 1.7;
    text-align: right;
    user-select: none;
    text-shadow: 0 1px 3px #06101b;
  }
  kbd {
    padding: 1px 4px;
    border: 1px solid rgba(225,245,255,.4);
    border-radius: 3px;
    font: inherit;
    color: white;
  }
</style>
</head>
<body>
<canvas id="scene"></canvas>

<div id="hud">
  <div id="title">
    <span>WEATHER STATION / EXPOSED PEDESTRIAN</span>
    <span id="mode">AUTO RISING</span>
  </div>
  <div id="speed">0.0 <small>m/s</small></div>
  <div class="row">
    <label for="wind">WIND DRIVE</label>
    <input id="wind" type="range" min="0" max="110" value="8" step="1" aria-label="Wind speed">
  </div>
  <div id="state">A light breeze catches the canopy.</div>
</div>

<div id="help">
  <div><kbd>←</kbd> <kbd>→</kbd> steer wind &nbsp; <kbd>A</kbd> auto rise</div>
  <div><kbd>R</kbd> reset umbrella after disaster</div>
</div>

<script>
(() => {
  "use strict";

  const canvas = document.getElementById("scene");
  const ctx = canvas.getContext("2d");
  const windSlider = document.getElementById("wind");
  const speedEl = document.getElementById("speed");
  const stateEl = document.getElementById("state");
  const modeEl = document.getElementById("mode");

  let W = 0, H = 0, dpr = 1;
  function resize() {
    dpr = Math.min(window.devicePixelRatio || 1, 2);
    W = innerWidth; H = innerHeight;
    canvas.width = W * dpr;
    canvas.height = H * dpr;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  }
  addEventListener("resize", resize);
  resize();

  const rain = Array.from({ length: 280 }, () => ({
    x: Math.random(), y: Math.random(), z: .25 + Math.random() * .9
  }));

  let drive = 8;
  let actualWind = 8;
  let auto = true;
  let userPause = 0;
  let last = performance.now();
  let elapsed = 0;
  let heldKeys = {};
  let flash = 0;

  const u = {
    detached: false,
    inverted: 0,
    inversionVelocity: 0,
    stress: 0,
    torque: 0,
    shaftAngle: 0,
    shaftVelocity: 0,
    pos: { x: 0, y: 0 },
    vel: { x: 0, y: 0 },
    spin: 0,
    spinVel: 0,
    escapedFor: 0
  };

  function resetUmbrella() {
    u.detached = false;
    u.inverted = 0;
    u.inversionVelocity = 0;
    u.stress = 0;
    u.torque = 0;
    u.shaftAngle = 0;
    u.shaftVelocity = 0;
    u.vel.x = u.vel.y = 0;
    u.spin = u.spinVel = 0;
    u.escapedFor = 0;
    flash = 1;
  }

  function setDrive(v, pause = true) {
    drive = Math.max(0, Math.min(110, v));
    windSlider.value = drive;
    if (pause) {
      auto = false;
      userPause = 7;
    }
  }

  windSlider.addEventListener("input", () => setDrive(+windSlider.value));
  addEventListener("keydown", e => {
    if (["ArrowLeft","ArrowRight","a","A","r","R"].includes(e.key)) e.preventDefault();
    heldKeys[e.key] = true;
    if (e.key === "a" || e.key === "A") { auto = true; userPause = 0; }
    if (e.key === "r" || e.key === "R") resetUmbrella();
  });
  addEventListener("keyup", e => heldKeys[e.key] = false);

  function lerp(a,b,t) { return a + (b-a)*t; }
  function clamp(v,a,b) { return Math.max(a, Math.min(b, v)); }
  function smooth(current, target, speed, dt) {
    return current + (target - current) * (1 - Math.exp(-speed * dt));
  }

  function personGeometry(wind) {
    const ground = H * .80;
    const baseX = W * .38;
    const bracing = clamp(wind / 105, 0, 1);
    const lean = -bracing * .25 - clamp(u.stress / 150, 0, .12);
    const hip = { x: baseX + Math.sin(lean) * 83, y: ground - 103 };
    const shoulder = { x: hip.x + Math.sin(lean) * 78, y: hip.y - Math.cos(lean) * 78 };
    const head = { x: shoulder.x + Math.sin(lean) * 28, y: shoulder.y - Math.cos(lean) * 28 };
    const frontFoot = { x: baseX + 42 + bracing * 18, y: ground };
    const backFoot = { x: baseX - 35 - bracing * 23, y: ground };
    const hand = u.detached
      ? { x: shoulder.x + 20, y: shoulder.y + 34 }
      : { x: shoulder.x + 42 + bracing * 8, y: shoulder.y + 24 };
    return { ground, baseX, lean, hip, shoulder, head, frontFoot, backFoot, hand, bracing };
  }

  function umbrellaHub(hand) {
    if (u.detached) return { x: u.pos.x, y: u.pos.y };
    const len = 142;
    return {
      x: hand.x + Math.sin(u.shaftAngle) * len,
      y: hand.y - Math.cos(u.shaftAngle) * len
    };
  }

  function update(dt) {
    elapsed += dt;
    flash = Math.max(0, flash - dt * 2);
    if (heldKeys.ArrowLeft) setDrive(drive - 35 * dt);
    if (heldKeys.ArrowRight) setDrive(drive + 35 * dt);

    if (!auto) {
      userPause -= dt;
      if (userPause <= 0) auto = true;
    }
    if (auto) drive = Math.min(110, drive + dt * (1.1 + drive * .009));
    windSlider.value = drive;

    const gust = Math.sin(elapsed * 1.5) * (2 + drive * .055)
      + Math.sin(elapsed * 4.1 + 1.2) * (drive > 38 ? 2.8 : .6);
    const targetWind = Math.max(0, drive + gust);
    actualWind = smooth(actualWind, targetWind, 1.4, dt);

    const p = personGeometry(actualWind);
    const load = Math.max(0, actualWind * actualWind / 78);
    const grip = 38 + p.bracing * 28;
    const gustFactor = 1 + Math.max(0, Math.sin(elapsed * 3.1)) * .18;

    if (!u.detached) {
      const force = load * gustFactor;
      const desiredAngle = clamp(force / 145, 0, 1.15) * .72 + u.inverted * .16;
      u.shaftVelocity += (desiredAngle - u.shaftAngle) * 13 * dt;
      u.shaftVelocity *= Math.exp(-7 * dt);
      u.shaftAngle += u.shaftVelocity * dt;

      const overload = force - grip;
      u.stress += overload * dt * .72;
      u.stress -= dt * (10 + p.bracing * 8);
      u.stress = clamp(u.stress, 0, 180);

      const inversionTarget = u.stress > 50 || actualWind > 69 ? 1 : 0;
      u.inversionVelocity += (inversionTarget - u.inverted) * 6.5 * dt;
      u.inversionVelocity *= Math.exp(-5 * dt);
      u.inverted = clamp(u.inverted + u.inversionVelocity * dt, 0, 1);

      if (actualWind > 88 && u.stress > 103 && u.inverted > .75) {
        u.detached = true;
        const h = umbrellaHub(p.hand);
        u.pos.x = h.x; u.pos.y = h.y;
        u.vel.x = actualWind * 4.0 + 70;
        u.vel.y = -80;
        u.spinVel = .8 + actualWind * .025;
        u.escapedFor = 0;
      }
    } else {
      u.escapedFor += dt;
      const drag = .25 + u.inverted * .18;
      u.vel.x += (actualWind * 6.2 - u.vel.x) * drag * dt;
      u.vel.y += 185 * dt;
      u.vel.y *= Math.exp(-.18 * dt);
      u.pos.x += u.vel.x * dt;
      u.pos.y += u.vel.y * dt;
      u.spinVel += Math.sin(elapsed * 6) * .18 * dt;
      u.spin += u.spinVel * dt;
      u.inverted = smooth(u.inverted, 1, 2, dt);

      if (u.pos.y > H + 240 || u.pos.x > W + 280) {
        u.pos.x = -180;
        u.pos.y = H * .18;
        u.vel.x = actualWind * 5;
        u.vel.y = -40;
      }
    }

    speedEl.innerHTML = actualWind.toFixed(1) + ' <small>m/s</small>';
    modeEl.textContent = auto ? "AUTO RISING" : "MANUAL HOLD";
    if (u.detached) {
      stateEl.textContent = "LOST IT. The umbrella is now airborne.";
    } else if (u.inverted > .62) {
      stateEl.textContent = "FRAME INVERTED — grip is still holding.";
    } else if (u.stress > 72) {
      stateEl.textContent = "Ribs are loaded. The canopy is about to turn.";
    } else if (actualWind > 45) {
      stateEl.textContent = "Bracing hard against gusts.";
    } else if (actualWind > 20) {
      stateEl.textContent = "Canopy flexing in a fresh wind.";
    } else {
      stateEl.textContent = "A light breeze catches the canopy.";
    }
  }

  function line(x1,y1,x2,y2,color,width=1) {
    ctx.beginPath();
    ctx.moveTo(x1,y1); ctx.lineTo(x2,y2);
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.stroke();
  }

  function drawBackground() {
    const sky = ctx.createLinearGradient(0,0,0,H);
    sky.addColorStop(0, "#10263b");
    sky.addColorStop(.52, "#29485b");
    sky.addColorStop(1, "#6e8079");
    ctx.fillStyle = sky;
    ctx.fillRect(0,0,W,H);

    const haze = ctx.createLinearGradient(0,H*.54,0,H);
    haze.addColorStop(0,"rgba(203,226,220,.10)");
    haze.addColorStop(1,"rgba(10,25,31,.28)");
    ctx.fillStyle = haze;
    ctx.fillRect(0,H*.48,W,H*.32);

    ctx.fillStyle = "rgba(12,30,37,.52)";
    for (let i=0; i<13; i++) {
      const x = i * W / 12 - 20;
      const h = 25 + ((i * 43) % 95);
      ctx.fillRect(x, H*.80-h, W/12+2, h);
      if (i % 3 === 0) {
        ctx.fillStyle = "rgba(174,204,195,.15)";
        ctx.fillRect(x+8, H*.80-h+14, 3, 5);
        ctx.fillRect(x+20, H*.80-h+28, 3, 5);
        ctx.fillStyle = "rgba(12,30,37,.52)";
      }
    }

    ctx.fillStyle = "#172c2d";
    ctx.fillRect(0,H*.80,W,H*.20);
    ctx.fillStyle = "rgba(177,202,174,.16)";
    ctx.fillRect(0,H*.80,W,2);
  }

  function drawRain() {
    const dx = actualWind * .42;
    const dy = 260 + actualWind * 1.6;
    const len = 6 + actualWind * .13;
    ctx.lineWidth = 1;
    for (const r of rain) {
      r.y += dy * .0014 * r.z;
      r.x += dx * .0014 * r.z / Math.max(W,1);
      if (r.y > 1.08 || r.x > 1.08) {
        r.y = -Math.random() * .15;
        r.x = Math.random() * .18 - .12;
      }
      const x = r.x * W, y = r.y * H;
      ctx.strokeStyle = `rgba(210,239,255,${.12 + r.z*.28})`;
      ctx.beginPath();
      ctx.moveTo(x,y);
      ctx.lineTo(x + dx * .045 * r.z, y + len * r.z);
      ctx.stroke();
    }
  }

  function drawPerson(p) {
    const stressColor = u.stress > 65 ? "#ffc979" : "#bed6dc";
    ctx.lineCap = "round";
    ctx.lineJoin = "round";

    // Ground shadows and planted feet.
    ctx.strokeStyle = "rgba(4,12,14,.4)";
    ctx.lineWidth = 10;
    line(p.backFoot.x-12,p.ground+2,p.backFoot.x+18,p.ground+2,"rgba(4,12,14,.35)",10);
    line(p.frontFoot.x-12,p.ground+2,p.frontFoot.x+18,p.ground+2,"rgba(4,12,14,.35)",10);

    // Legs.
    const kneeBack = { x: lerp(p.hip.x,p.backFoot.x,.48)-13, y:p.ground-47 };
    const kneeFront = { x: lerp(p.hip.x,p.frontFoot.x,.53)+11, y:p.ground-42 };
    line(p.hip.x,p.hip.y,kneeBack.x,kneeBack.y,"#182733",13);
    line(kneeBack.x,kneeBack.y,p.backFoot.x,p.backFoot.y,"#17232e",12);
    line(p.hip.x+4,p.hip.y,kneeFront.x,kneeFront.y,"#243844",14);
    line(kneeFront.x,kneeFront.y,p.frontFoot.x,p.frontFoot.y,"#1b2c36",12);
    line(p.backFoot.x-6,p.ground,p.backFoot.x+18,p.ground,"#101a21",7);
    line(p.frontFoot.x-5,p.ground,p.frontFoot.x+20,p.ground,"#101a21",7);

    // Coat torso.
    ctx.save();
    ctx.translate(p.hip.x,p.hip.y);
    ctx.rotate(p.lean);
    ctx.fillStyle = "#29495b";
    ctx.beginPath();
    ctx.moveTo(-25,4); ctx.lineTo(-21,-72); ctx.quadraticCurveTo(0,-89,26,-69);
    ctx.lineTo(25,7); ctx.quadraticCurveTo(0,15,-25,4); ctx.fill();
    ctx.strokeStyle = "#10202b"; ctx.lineWidth = 2; ctx.stroke();
    ctx.restore();

    // Head and scarf.
    ctx.fillStyle = "#b98263";
    ctx.beginPath(); ctx.arc(p.head.x,p.head.y,16,0,Math.PI*2); ctx.fill();
    ctx.fillStyle = "#1a222d";
    ctx.beginPath(); ctx.arc(p.head.x-3,p.head.y-7,17,Math.PI*.9,Math.PI*2.05); ctx.fill();
    line(p.shoulder.x-8,p.shoulder.y-5,p.shoulder.x+19,p.shoulder.y+5,"#dba259",7);

    // Rear arm fights the front arm.
    const elbow = { x:p.shoulder.x+22, y:p.shoulder.y+42 };
    line(p.shoulder.x,p.shoulder.y,elbow.x,elbow.y,"#203947",11);
    line(elbow.x,elbow.y,p.hand.x,p.hand.y,"#203947",10);

    if (!u.detached) {
      line(p.shoulder.x+9,p.shoulder.y+2,p.hand.x,p.hand.y,stressColor,8);
      ctx.fillStyle = "#d7a179";
      ctx.beginPath(); ctx.arc(p.hand.x,p.hand.y,6,0,Math.PI*2); ctx.fill();
    } else {
      line(p.shoulder.x+9,p.shoulder.y+2,p.hand.x,p.hand.y,"#203947",8);
      ctx.fillStyle = "#d7a179";
      ctx.beginPath(); ctx.arc(p.hand.x,p.hand.y,6,0,Math.PI*2); ctx.fill();
    }
  }

  function transformPoint(hub, x, y, angle) {
    const c = Math.cos(angle), s = Math.sin(angle);
    return { x: hub.x + x*c - y*s, y: hub.y + x*s + y*c };
  }

  function drawUmbrella(hand) {
    const hub = umbrellaHub(hand);
    const angle = u.detached ? u.spin : u.shaftAngle;
    const inv = u.inverted;
    const scale = 1 + clamp(u.stress / 180, 0, .12);
    const pts = [];

    for (let i=0; i<=12; i++) {
      const t = i / 12;
      const x = (t-.5) * 226 * scale;
      const arch = 1 - Math.pow(Math.abs(t-.5)*2, 1.72);
      const normalY = 27 - arch * 61;
      const insideOutY = -22 + arch * 66;
      const windwardFlatten = (1-t) * clamp(actualWind/105,0,.35) * 22;
      const y = lerp(normalY, insideOutY, inv) + windwardFlatten;
      pts.push(transformPoint(hub,x,y,angle));
    }

    if (!u.detached) {
      line(hand.x,hand.y,hub.x,hub.y,"#18212a",7);
      line(hand.x,hand.y,hub.x,hub.y,"#a5bdc4",2);
      const hook = transformPoint(hand, 0, 0, u.shaftAngle);
      ctx.strokeStyle = "#a5bdc4"; ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.arc(hand.x + 8, hand.y + 10, 9, .2, Math.PI*1.2);
      ctx.stroke();
    }

    // Canopy fabric.
    ctx.beginPath();
    ctx.moveTo(pts[0].x,pts[0].y);
    for (let i=1;i<pts.length;i++) {
      const a = pts[i-1], b = pts[i];
      const mx=(a.x+b.x)/2, my=(a.y+b.y)/2;
      ctx.quadraticCurveTo(a.x,a.y,mx,my);
    }
    ctx.lineTo(pts[pts.length-1].x,pts[pts.length-1].y);
    ctx.lineTo(hub.x,hub.y + (inv ? 17 : 12));
    ctx.closePath();

    const fabric = ctx.createLinearGradient(hub.x-100,hub.y-45,hub.x+120,hub.y+45);
    fabric.addColorStop(0, inv > .5 ? "#d06b6b" : "#315c78");
    fabric.addColorStop(.48, inv > .5 ? "#e28a77" : "#4d89a7");
    fabric.addColorStop(1, inv > .5 ? "#a84b59" : "#234760");
    ctx.fillStyle = fabric;
    ctx.fill();
    ctx.strokeStyle = inv > .5 ? "#6c2636" : "#142d3e";
    ctx.lineWidth = 3;
    ctx.stroke();

    // Loaded radial frame.
    for (let i=0;i<pts.length;i+=2) {
      const end = pts[i];
      const bowX = lerp(hub.x,end.x,.54) + Math.cos(angle) * (inv ? -4 : 4);
      const bowY = lerp(hub.y,end.y,.54) + Math.sin(angle) * (inv ? -4 : 4);
      ctx.strokeStyle = u.stress > 72 ? "#ffd084" : "#b8d5dc";
      ctx.lineWidth = 1.25;
      ctx.beginPath();
      ctx.moveTo(hub.x,hub.y);
      ctx.quadraticCurveTo(bowX,bowY,end.x,end.y);
      ctx.stroke();
    }

    ctx.fillStyle = "#d7edf0";
    ctx.beginPath(); ctx.arc(hub.x,hub.y,4.5,0,Math.PI*2); ctx.fill();

    if (u.stress > 55 && !u.detached) {
      ctx.strokeStyle = `rgba(255,189,106,${clamp((u.stress-50)/75,0,.9)})`;
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.arc(hub.x,hub.y,15 + Math.sin(elapsed*15)*2,0,Math.PI*2);
      ctx.stroke();
    }
  }

  function drawWind() {
    const alpha = clamp(actualWind / 120, .05, .42);
    ctx.strokeStyle = `rgba(221,245,255,${alpha})`;
    ctx.lineWidth = 1.2;
    const count = Math.floor(4 + actualWind / 8);
    for (let i=0; i<count; i++) {
      const y = H*.12 + ((i * 71 + elapsed*47*(i%2?1:-1)) % (H*.65));
      const x = ((i*163 + elapsed*(80+actualWind*2)) % (W+180)) - 120;
      const len = 28 + actualWind * .75;
      ctx.beginPath();
      ctx.moveTo(x,y);
      ctx.bezierCurveTo(x+len*.3,y-4,x+len*.65,y+3,x+len,y-2);
      ctx.stroke();
    }
  }

  function render() {
    drawBackground();
    drawWind();
    drawRain();
    const p = personGeometry(actualWind);
    drawPerson(p);
    drawUmbrella(p.hand);

    if (flash > 0) {
      ctx.fillStyle = `rgba(220,250,255,${flash*.10})`;
      ctx.fillRect(0,0,W,H);
    }
  }

  function frame(now) {
    const dt = Math.min(.035, (now-last)/1000 || .016);
    last = now;
    update(dt);
    render();
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
})();
</script>
</body>
</html>

What it actually does

It looks convincing at the readable, toy-physics level: wind ramps up automatically, rain slants with it, the person leans and widens their stance, the shaft is wrenched downwind, ribs visibly load, the canopy progressively flattens and reverses, and a sufficiently bad gale can strip the umbrella away. It is wrong in several familiar umbrella ways: the canopy is effectively a two-dimensional sheet rather than a true rotating 3D cup, wind always comes from one horizontal direction instead of changing with turbulent gusts, the person’s hands never realistically slip one at a time, and the inversion threshold is deliberately stable enough to be playable rather than as annoyingly abrupt and asymmetric as a real cheap umbrella.

Attachments

openai/gpt-5.6-terra — page