Run Detail
completeddeepseek-v4.1-flash-1017Recorded 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
293.9s
Total Tokens
43,764
Input Tokens
400
Output Tokens
43,364
Reasoning Tokens
34,735
Reasoning Effort
default
Est. Cost
$0.0522
Started
10/19/2026, 1:28:54 PM
OR Provider
Crusoe
Finish Reason
stop
Generation ID
gen-1792416534-Osd1Zw4hPRPLcwNfXumC
Turns (1)
Turn #1
400 in43,364 out34,735 reasoning43,764 total293.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 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
The canopy is a 29-point flexible arc in the umbrella’s local frame, rotated with the shaft and deformed by a wind-flex term; inversion is a continuous state variable that flips the rim’s vertical offset from “dome” to “bowl” with a spring-and-velocity snap, while a boolean inverted state is set when wind pressure and shaft angle cross a threshold. The load is wind speed squared times inversion/flex drag factors, and when that load exceeds the person’s bracing grip capacity the grip meter drains; at zero the umbrella detaches into a free tumbling body with drag, gravity, and spin.
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>
html, body {
margin: 0;
height: 100%;
overflow: hidden;
background: #0b1020;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
canvas {
display: block;
width: 100vw;
height: 100vh;
}
#hud {
position: fixed;
top: 16px;
left: 16px;
color: #e8f0ff;
text-shadow: 0 2px 12px rgba(0,0,0,.7);
pointer-events: none;
}
#windReadout {
font-size: clamp(30px, 6vw, 64px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
}
#windReadout span {
font-size: 0.35em;
font-weight: 600;
opacity: .75;
letter-spacing: 0;
}
#status {
margin-top: 6px;
font-size: 14px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
#controls {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
max-width: 560px;
background: rgba(8,14,24,.78);
border: 1px solid rgba(255,255,255,.12);
border-radius: 16px;
padding: 12px 14px;
color: #e8f0ff;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 10px 40px rgba(0,0,0,.35);
backdrop-filter: blur(10px);
}
.row {
display: flex;
align-items: center;
gap: 10px;
}
.row label {
font-size: 13px;
opacity: .85;
}
input[type=range] {
flex: 1;
accent-color: #ffb347;
min-width: 80px;
}
button {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
color: #fff;
border-radius: 8px;
padding: 6px 10px;
cursor: pointer;
font: inherit;
font-size: 13px;
}
button:hover {
background: rgba(255,255,255,.18);
}
#gripBar {
width: 90px;
height: 6px;
background: rgba(255,255,255,.15);
border-radius: 3px;
overflow: hidden;
}
#gripFill {
height: 100%;
width: 100%;
background: linear-gradient(90deg, #ff5a5a, #ffb347, #7dffb0);
}
.hint {
font-size: 11px;
opacity: .55;
}
@media (max-width: 520px) {
#controls { left: 8px; right: 8px; bottom: 8px; }
#hud { left: 12px; top: 12px; }
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud">
<div id="windReadout">0.0 <span>m/s</span></div>
<div id="status">HOLDING</div>
</div>
<div id="controls">
<div class="row">
<label for="windSlider">wind</label>
<input id="windSlider" type="range" min="0" max="35" step="0.1" value="4">
<label><input type="checkbox" id="auto" checked> auto rise</label>
<button id="reset">Reset</button>
</div>
<div class="row">
<span style="font-size:13px; opacity:.85;">grip</span>
<div id="gripBar"><div id="gripFill"></div></div>
<span class="hint" style="margin-left:auto;">↑/↓ wind · Space auto · R reset</span>
</div>
</div>
<script>
(() => {
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const windReadout = document.getElementById('windReadout');
const windSlider = document.getElementById('windSlider');
const autoCheckbox = document.getElementById('auto');
const resetBtn = document.getElementById('reset');
const statusEl = document.getElementById('status');
const gripFill = document.getElementById('gripFill');
const DPR = Math.min(window.devicePixelRatio || 1, 2);
let W = 0;
let H = 0;
let scale = 1;
let groundY = 0;
let personX = 0;
let shaftLength = 150;
let canopyHalfWidth = 95;
let canopyDrop = 42;
let time = 0;
let last = performance.now();
let windTarget = 4;
let wind = 4;
let autoRise = true;
const person = {
lean: 0,
brace: 0,
crouch: 0
};
const umbrella = {
attached: true,
theta: 0,
omega: 0,
inversion: 0,
inversionVel: 0,
inverted: false,
flex: 0,
load: 0,
grip: 1,
hand: { x: 0, y: 0 },
hub: { x: 0, y: 0 },
free: {
x: 0,
y: 0,
vx: 0,
vy: 0,
angle: 0,
spin: 0,
inversion: 0,
flex: 0
}
};
let pose = null;
let rain = [];
let windLines = [];
function clamp(v, a, b) {
return Math.max(a, Math.min(b, v));
}
function computePose() {
const S = scale;
const lean = person.lean;
const brace = person.brace;
const crouch = person.crouch;
const legLen = (95 - crouch * 20) * S;
const torsoLen = (75 - crouch * 10) * S;
const footSpread = (18 + brace * 14) * S;
const feet = [
{ x: personX - footSpread, y: groundY },
{ x: personX + footSpread, y: groundY }
];
const hip = {
x: personX + Math.sin(lean) * legLen * 0.55,
y: groundY - Math.cos(lean) * legLen * 0.55 - crouch * 10 * S
};
const shoulder = {
x: hip.x + Math.sin(lean) * torsoLen,
y: hip.y - Math.cos(lean) * torsoLen
};
const head = {
x: shoulder.x + Math.sin(lean) * 24 * S,
y: shoulder.y - Math.cos(lean) * 24 * S
};
const hand = {
x: shoulder.x + (28 + brace * 18) * S,
y: shoulder.y - (28 - brace * 8) * S
};
const knees = feet.map((foot, i) => {
const mx = (hip.x + foot.x) / 2;
const my = (hip.y + foot.y) / 2;
const bend = (12 + brace * 8) * S * (i === 0 ? -1 : 1);
return { x: mx + bend, y: my - 8 * S };
});
return { hip, shoulder, head, hand, feet, knees, lean, brace };
}
function initParticles() {
rain = [];
for (let i = 0; i < 260; i++) {
rain.push({
x: Math.random() * W,
y: Math.random() * H,
len: 8 + Math.random() * 18,
alpha: 0.15 + Math.random() * 0.35,
width: 0.8 + Math.random() * 1.2
});
}
windLines = [];
for (let i = 0; i < 35; i++) {
windLines.push({
x: Math.random() * W,
y: Math.random() * groundY,
len: 20 + Math.random() * 80,
speed: 0.5 + Math.random() * 1.5,
alpha: 0.04 + Math.random() * 0.12
});
}
}
function resize() {
W = window.innerWidth;
H = window.innerHeight;
canvas.width = Math.floor(W * DPR);
canvas.height = Math.floor(H * DPR);
canvas.style.width = W + 'px';
canvas.style.height = H + 'px';
ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
scale = Math.max(0.55, Math.min(1.5, Math.min(W / 1100, H / 750)));
groundY = H * 0.82;
personX = W * 0.44;
shaftLength = 150 * scale;
canopyHalfWidth = 95 * scale;
canopyDrop = 42 * scale;
initParticles();
pose = computePose();
}
function resetSimulation() {
windTarget = 4;
wind = 4;
autoRise = true;
autoCheckbox.checked = true;
windSlider.value = 4;
umbrella.attached = true;
umbrella.theta = 0;
umbrella.omega = 0;
umbrella.inversion = 0;
umbrella.inversionVel = 0;
umbrella.inverted = false;
umbrella.flex = 0;
umbrella.load = 0;
umbrella.grip = 1;
umbrella.free = {
x: 0,
y: 0,
vx: 0,
vy: 0,
angle: 0,
spin: 0,
inversion: 0,
flex: 0
};
person.lean = 0;
person.brace = 0;
person.crouch = 0;
time = 0;
pose = computePose();
}
function detachUmbrella() {
if (!umbrella.attached) return;
umbrella.attached = false;
umbrella.grip = 0;
const hub = umbrella.hub || {
x: pose.hand.x,
y: pose.hand.y - shaftLength
};
umbrella.free = {
x: hub.x,
y: hub.y,
vx: wind * 0.9 + 30,
vy: -20 - wind * 0.3,
angle: umbrella.theta,
spin: (Math.random() - 0.5) * 6 + umbrella.theta * 3,
inversion: umbrella.inversion,
flex: umbrella.flex
};
}
function updateUmbrella(dt) {
if (umbrella.attached) {
const hand = pose.hand;
const hub = {
x: hand.x + shaftLength * Math.sin(umbrella.theta),
y: hand.y - shaftLength * Math.cos(umbrella.theta)
};
umbrella.hand = hand;
umbrella.hub = hub;
const pressure = wind * wind * 0.0012;
const invFactor = 1 + umbrella.inversion * 1.4;
const flexFactor = 1 + umbrella.flex * 0.4;
const load = pressure * invFactor * flexFactor;
umbrella.load = load;
const windTorque = load * 1.8 * Math.cos(umbrella.theta + 0.2);
const spring = 1.2 * umbrella.theta;
const damping = 0.6 * umbrella.omega;
const accel = (windTorque - spring - damping) * 6;
umbrella.omega += accel * dt;
umbrella.theta += umbrella.omega * dt;
if (umbrella.theta > 1.25) {
umbrella.theta = 1.25;
umbrella.omega *= -0.2;
}
if (umbrella.theta < -0.25) {
umbrella.theta = -0.25;
umbrella.omega *= -0.2;
}
const invThreshold = 15 + 5 * Math.cos(umbrella.theta);
if (!umbrella.inverted && wind > invThreshold && umbrella.theta > 0.12) {
umbrella.inverted = true;
umbrella.inversionVel += 3.5;
}
if (umbrella.inverted && wind < 8) {
umbrella.inverted = false;
}
const targetInv = umbrella.inverted ? 1 : 0;
const invAccel = (targetInv - umbrella.inversion) * 60 - umbrella.inversionVel * 8;
umbrella.inversionVel += invAccel * dt;
umbrella.inversion += umbrella.inversionVel * dt;
if (umbrella.inversion < 0) {
umbrella.inversion = 0;
umbrella.inversionVel *= -0.2;
}
if (umbrella.inversion > 1) {
umbrella.inversion = 1;
umbrella.inversionVel *= -0.2;
}
const flexTarget = clamp((wind - 4) / 26, 0, 1) * (1 - 0.3 * umbrella.inversion);
umbrella.flex += (flexTarget - umbrella.flex) * Math.min(1, dt * 4);
const gripCapacity = 1.0 + person.brace * 0.9;
const excess = Math.max(0, load - gripCapacity);
umbrella.grip -= excess * dt * 1.8;
umbrella.grip += (1 - umbrella.grip) * dt * 0.25;
umbrella.grip = clamp(umbrella.grip, 0, 1);
if (umbrella.grip <= 0.001) {
detachUmbrella();
}
} else {
const f = umbrella.free;
f.vx += (wind * 1.1 - f.vx) * Math.min(1, dt * 1.2);
f.vy += 80 * dt;
f.vy += (wind * 0.1 - f.vy) * Math.min(1, dt * 0.2);
f.x += f.vx * dt;
f.y += f.vy * dt;
f.angle += f.spin * dt;
f.spin += (Math.random() - 0.5) * 2 * dt;
if (f.y > groundY - 20 * scale) {
f.y = groundY - 20 * scale;
f.vy *= -0.3;
f.vx *= 0.8;
f.spin *= 0.8;
}
}
}
function update(dt) {
time += dt;
if (autoRise) {
windTarget = Math.min(35, windTarget + 0.32 * dt);
}
const gust =
Math.sin(time * 0.9) * 0.7 +
Math.sin(time * 2.3 + 1.7) * 0.35 +
Math.sin(time * 5.1 + 0.4) * 0.15;
const targetWind = Math.max(0, windTarget + gust * (0.5 + windTarget * 0.03));
wind += (targetWind - wind) * Math.min(1, dt * 3.5);
person.brace += (clamp(wind / 30, 0, 1) - person.brace) * Math.min(1, dt * 3);
person.crouch += (clamp((wind - 8) / 25, 0, 0.6) - person.crouch) * Math.min(1, dt * 2);
const targetLean = -Math.min(0.45, wind * 0.013 + person.brace * 0.05);
person.lean += (targetLean - person.lean) * Math.min(1, dt * 3.5);
pose = computePose();
updateUmbrella(dt);
for (const l of windLines) {
l.x += (wind * 12 + 30) * l.speed * dt;
if (l.x > W + 100) {
l.x = -100 - Math.random() * 200;
l.y = Math.random() * groundY;
l.len = 20 + Math.random() * 80;
l.alpha = 0.04 + Math.random() * 0.12;
}
}
const vx = wind * 16 + 30;
const vy = 500 + wind * 2;
for (const p of rain) {
p.x += vx * dt;
p.y += vy * dt;
if (p.y > groundY + 20 || p.x > W + 50 || p.x < -200) {
p.x = Math.random() * W - (wind > 15 ? W * 0.4 : 0);
p.y = -20 - Math.random() * H * 0.5;
p.len = 8 + Math.random() * 18;
p.alpha = 0.15 + Math.random() * 0.35;
p.width = 0.8 + Math.random() * 1.2;
}
}
updateUI();
}
function drawClouds() {
ctx.save();
ctx.globalAlpha = 0.10;
ctx.fillStyle = '#b8d0e8';
for (let i = 0; i < 6; i++) {
const x = ((time * (8 + i * 2) + i * 260) % (W + 500)) - 250;
const y = 50 + i * 38;
ctx.beginPath();
ctx.ellipse(x, y, 160 + i * 20, 34 + i * 4, 0, 0, Math.PI * 2);
ctx.fill();
}
ctx.restore();
}
function drawPuddles() {
ctx.save();
ctx.globalAlpha = 0.16;
ctx.fillStyle = '#a8d0f0';
const puddles = [
{ x: W * 0.18, y: groundY + 28 * scale, rx: 70, ry: 9 },
{ x: W * 0.72, y: groundY + 46 * scale, rx: 110, ry: 13 },
{ x: W * 0.48, y: groundY + 78 * scale, rx: 55, ry: 7 }
];
for (const p of puddles) {
ctx.beginPath();
ctx.ellipse(p.x, p.y, p.rx * scale, p.ry * scale, 0, 0, Math.PI * 2);
ctx.fill();
}
ctx.restore();
}
function drawWindStreaks() {
ctx.save();
ctx.lineCap = 'round';
for (const l of windLines) {
ctx.strokeStyle = `rgba(200,220,255,${l.alpha})`;
ctx.lineWidth = 1.2;
ctx.beginPath();
ctx.moveTo(l.x, l.y);
ctx.lineTo(l.x + l.len, l.y - l.len * 0.04);
ctx.stroke();
}
ctx.restore();
}
function drawRain() {
ctx.save();
ctx.lineCap = 'round';
const vx = wind * 16 + 30;
const vy = 500 + wind * 2;
const dx = vx / vy;
for (const p of rain) {
const len = p.len * (0.7 + wind * 0.02);
ctx.strokeStyle = `rgba(180,210,255,${p.alpha})`;
ctx.lineWidth = p.width;
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.x - dx * len, p.y - len);
ctx.stroke();
}
ctx.restore();
}
function drawCanopy(hubX, hubY, angle, inversion, flex, alpha) {
const S = scale;
const halfW = canopyHalfWidth * (1 + 0.08 * flex);
const drop = canopyDrop * (1 - 0.15 * flex);
const N = 28;
const pts = [];
const cos = Math.cos(angle);
const sin = Math.sin(angle);
for (let i = 0; i <= N; i++) {
const u = -1 + 2 * i / N;
let localX = u * halfW;
let localY = drop * u * u * (1 - 2 * inversion);
const w = (u + 1) * 0.5;
localX += flex * w * 10 * S;
localY += flex * w * 6 * S * (1 - 0.5 * inversion);
localY += Math.sin(u * Math.PI * 3 + time * 8) * flex * 1.5 * S;
const wx = hubX + localX * cos - localY * sin;
const wy = hubY + localX * sin + localY * cos;
pts.push({ x: wx, y: wy });
}
ctx.save();
ctx.globalAlpha = alpha;
ctx.beginPath();
ctx.moveTo(pts[0].x, pts[0].y);
for (let i = 1; i < pts.length; i++) {
ctx.lineTo(pts[i].x, pts[i].y);
}
ctx.closePath();
const grad = ctx.createLinearGradient(
hubX - halfW,
hubY - drop,
hubX + halfW,
hubY + drop
);
if (inversion < 0.5) {
grad.addColorStop(0, '#ff6b4a');
grad.addColorStop(0.45, '#ffb347');
grad.addColorStop(1, '#ff8a3d');
} else {
grad.addColorStop(0, '#ff8a3d');
grad.addColorStop(0.45, '#ffd166');
grad.addColorStop(1, '#ff6b4a');
}
ctx.fillStyle = grad;
ctx.fill();
ctx.strokeStyle = 'rgba(80,30,20,0.85)';
ctx.lineWidth = 2 * S;
ctx.stroke();
ctx.strokeStyle = 'rgba(90,40,30,0.45)';
ctx.lineWidth = 1.5 * S;
for (let k = 1; k <= 5; k++) {
const t = k / 6;
const rx = pts[0].x + (pts[N].x - pts[0].x) * t;
const ry = pts[0].y + (pts[N].y - pts[0].y) * t;
const dx = rx - hubX;
const dy = ry - hubY;
const len = Math.hypot(dx, dy) || 1;
const px = -dy / len;
const py = dx / len;
const bend = (inversion < 0.5 ? 1 : -1) * 4 * S * (1 - Math.abs(t - 0.5) * 2);
const mx = (hubX + rx) / 2 + px * bend;
const my = (hubY + ry) / 2 + py * bend;
ctx.beginPath();
ctx.moveTo(hubX, hubY);
ctx.quadraticCurveTo(mx, my, rx, ry);
ctx.stroke();
}
ctx.beginPath();
ctx.arc(hubX, hubY, 5 * S, 0, Math.PI * 2);
ctx.fillStyle = '#3a2a2a';
ctx.fill();
ctx.strokeStyle = '#ffd166';
ctx.lineWidth = 1.5 * S;
ctx.stroke();
ctx.restore();
}
function drawAttachedUmbrella() {
const S = scale;
const hand = pose.hand;
const hub = umbrella.hub;
const dx = hub.x - hand.x;
const dy = hub.y - hand.y;
const len = Math.hypot(dx, dy) || 1;
const px = -dy / len;
const py = dx / len;
const bend = Math.min(
25 * S,
umbrella.load * 18 * S * (1 + umbrella.inversion * 0.5)
);
const mx = (hand.x + hub.x) / 2 + px * bend;
const my = (hand.y + hub.y) / 2 + py * bend;
ctx.save();
ctx.lineCap = 'round';
ctx.strokeStyle = '#1b1b1b';
ctx.lineWidth = 6 * S;
ctx.beginPath();
ctx.moveTo(hand.x, hand.y);
ctx.quadraticCurveTo(mx, my, hub.x, hub.y);
ctx.stroke();
ctx.strokeStyle = 'rgba(200,200,200,0.35)';
ctx.lineWidth = 2 * S;
ctx.beginPath();
ctx.moveTo(hand.x, hand.y);
ctx.quadraticCurveTo(mx, my, hub.x, hub.y);
ctx.stroke();
ctx.strokeStyle = '#3a2a2a';
ctx.lineWidth = 5 * S;
ctx.beginPath();
ctx.arc(hand.x - 2 * S, hand.y + 4 * S, 8 * S, Math.PI * 0.1, Math.PI * 1.1);
ctx.stroke();
ctx.restore();
drawCanopy(hub.x, hub.y, umbrella.theta, umbrella.inversion, umbrella.flex, 1);
}
function drawFreeUmbrella() {
const S = scale;
const f = umbrella.free;
const hub = { x: f.x, y: f.y };
const hand = {
x: hub.x - shaftLength * Math.sin(f.angle),
y: hub.y + shaftLength * Math.cos(f.angle)
};
ctx.save();
ctx.lineCap = 'round';
ctx.strokeStyle = '#1b1b1b';
ctx.lineWidth = 6 * S;
ctx.beginPath();
ctx.moveTo(hand.x, hand.y);
ctx.lineTo(hub.x, hub.y);
ctx.stroke();
ctx.strokeStyle = 'rgba(200,200,200,0.35)';
ctx.lineWidth = 2 * S;
ctx.beginPath();
ctx.moveTo(hand.x, hand.y);
ctx.lineTo(hub.x, hub.y);
ctx.stroke();
ctx.strokeStyle = '#3a2a2a';
ctx.lineWidth = 5 * S;
ctx.beginPath();
ctx.arc(hand.x - 2 * S, hand.y + 4 * S, 8 * S, Math.PI * 0.1, Math.PI * 1.1);
ctx.stroke();
ctx.restore();
drawCanopy(hub.x, hub.y, f.angle, f.inversion, f.flex, 1);
}
function drawPerson() {
if (!pose) pose = computePose();
const S = scale;
const p = pose;
ctx.save();
ctx.fillStyle = 'rgba(0,0,0,0.28)';
ctx.beginPath();
ctx.ellipse(
personX,
groundY + 4 * S,
(60 + p.brace * 20) * S,
12 * S,
0,
0,
Math.PI * 2
);
ctx.fill();
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.strokeStyle = '#1a2436';
ctx.lineWidth = 15 * S;
for (let i = 0; i < 2; i++) {
const foot = p.feet[i];
const knee = p.knees[i];
ctx.beginPath();
ctx.moveTo(p.hip.x, p.hip.y);
ctx.lineTo(knee.x, knee.y);
ctx.lineTo(foot.x, foot.y);
ctx.stroke();
}
ctx.fillStyle = '#0d1118';
for (const foot of p.feet) {
ctx.beginPath();
ctx.ellipse(
foot.x + (foot.x < personX ? -4 * S : 4 * S),
foot.y - 2 * S,
12 * S,
6 * S,
0,
0,
Math.PI * 2
);
ctx.fill();
}
ctx.strokeStyle = '#2f4a6b';
ctx.lineWidth = 28 * S;
ctx.beginPath();
ctx.moveTo(p.hip.x, p.hip.y);
ctx.lineTo(p.shoulder.x, p.shoulder.y);
ctx.stroke();
ctx.strokeStyle = 'rgba(120,170,220,0.25)';
ctx.lineWidth = 8 * S;
ctx.beginPath();
ctx.moveTo(p.hip.x + 6 * S, p.hip.y - 10 * S);
ctx.lineTo(p.shoulder.x + 6 * S, p.shoulder.y + 10 * S);
ctx.stroke();
ctx.strokeStyle = '#243a54';
ctx.lineWidth = 10 * S;
ctx.beginPath();
ctx.moveTo(p.shoulder.x, p.shoulder.y);
const elbow = { x: p.shoulder.x - 18 * S, y: p.shoulder.y + 28 * S };
const farHand = { x: p.hip.x - 10 * S, y: p.hip.y - 5 * S };
ctx.lineTo(elbow.x, elbow.y);
ctx.lineTo(farHand.x, farHand.y);
ctx.stroke();
ctx.fillStyle = '#2f4a6b';
ctx.beginPath();
ctx.arc(p.head.x, p.head.y, 16 * S, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#d9b38c';
ctx.beginPath();
ctx.arc(p.head.x - 5 * S, p.head.y + 1 * S, 9 * S, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#c99a73';
ctx.beginPath();
ctx.moveTo(p.head.x - 13 * S, p.head.y + 1 * S);
ctx.lineTo(p.head.x - 18 * S, p.head.y + 4 * S);
ctx.lineTo(p.head.x - 12 * S, p.head.y + 6 * S);
ctx.closePath();
ctx.fill();
ctx.strokeStyle = '#2f4a6b';
ctx.lineWidth = 11 * S;
ctx.beginPath();
ctx.moveTo(p.shoulder.x, p.shoulder.y);
const hand = p.hand;
const elbow2 = {
x: (p.shoulder.x + hand.x) / 2 + 8 * S,
y: (p.shoulder.y + hand.y) / 2 + 10 * S
};
ctx.lineTo(elbow2.x, elbow2.y);
ctx.lineTo(hand.x, hand.y);
ctx.stroke();
ctx.fillStyle = '#d9b38c';
ctx.beginPath();
ctx.arc(hand.x, hand.y, 6 * S, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
function draw() {
const sky = ctx.createLinearGradient(0, 0, 0, groundY);
sky.addColorStop(0, '#0b1220');
sky.addColorStop(0.55, '#1b2a44');
sky.addColorStop(1, '#3b4d61');
ctx.fillStyle = sky;
ctx.fillRect(0, 0, W, groundY);
drawClouds();
const gg = ctx.createLinearGradient(0, groundY, 0, H);
gg.addColorStop(0, '#2a3a3a');
gg.addColorStop(1, '#0d1418');
ctx.fillStyle = gg;
ctx.fillRect(0, groundY, W, H - groundY);
ctx.strokeStyle = 'rgba(180,210,230,0.18)';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(0, groundY);
ctx.lineTo(W, groundY);
ctx.stroke();
drawPuddles();
drawWindStreaks();
if (umbrella.attached) {
drawAttachedUmbrella();
}
drawPerson();
if (!umbrella.attached) {
drawFreeUmbrella();
}
drawRain();
}
function updateUI() {
windReadout.innerHTML = `${wind.toFixed(1)} <span>m/s</span>`;
windSlider.value = windTarget.toFixed(1);
autoCheckbox.checked = autoRise;
gripFill.style.width = (umbrella.grip * 100).toFixed(1) + '%';
let statusText = 'HOLDING';
let color = '#7dffb0';
if (!umbrella.attached) {
statusText = 'LOST — press R';
color = '#ff6b6b';
} else if (umbrella.inversion > 0.5) {
statusText = 'INSIDE OUT';
color = '#ffb347';
} else if (umbrella.theta > 0.8) {
statusText = 'WRENCHED SIDEWAYS';
color = '#ffd166';
} else if (wind > 15) {
statusText = 'BRACING';
color = '#9fd0ff';
}
statusEl.textContent = statusText;
statusEl.style.color = color;
}
function loop(now) {
const dt = Math.min(0.033, (now - last) / 1000);
last = now;
update(dt);
draw();
requestAnimationFrame(loop);
}
windSlider.addEventListener('input', () => {
windTarget = parseFloat(windSlider.value);
autoRise = false;
autoCheckbox.checked = false;
});
autoCheckbox.addEventListener('change', () => {
autoRise = autoCheckbox.checked;
});
resetBtn.addEventListener('click', resetSimulation);
window.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') {
windTarget = Math.min(35, windTarget + 1.5);
autoRise = false;
autoCheckbox.checked = false;
e.preventDefault();
} else if (e.key === 'ArrowDown') {
windTarget = Math.max(0, windTarget - 1.5);
autoRise = false;
autoCheckbox.checked = false;
e.preventDefault();
} else if (e.key === ' ') {
autoRise = !autoRise;
autoCheckbox.checked = autoRise;
e.preventDefault();
} else if (e.key === 'r' || e.key === 'R') {
resetSimulation();
}
});
window.addEventListener('resize', resize);
resize();
resetSimulation();
updateUI();
last = performance.now();
requestAnimationFrame(loop);
})();
</script>
</body>
</html>
What it actually does
It gets the broad sequence right: the person leans into the wind, widens their stance, crouches, and the umbrella shaft tilts downwind; the canopy visibly flexes, then flips inside out with a springy snap; the grip meter drains under high load and the umbrella can tear away and tumble off. The rain slants and speeds up with the wind, and the wind readout tracks the gusty actual speed rather than just the slider target.
What it gets wrong: the canopy is a 2D side-view arc, not a real 3D membrane, so inversion is a smooth local flip rather than a sudden asymmetric pop with fabric snapping and ribs buckling individually. The person’s feet never slip, the ground is perfectly flat, and the wind is a single horizontal scalar with no turbulence eddies or vertical component. The detached umbrella is a simple drag/gravity/spin body, not a colliding, folding object, and the grip model is a scalar meter rather than hand, wrist, shoulder, and footing mechanics. The inversion threshold is tuned for feel, not measured from real umbrella aerodynamics.
Attachments
deepseek/deepseek-v4.1-flash-1017 — page