Run Detail

The model

The canopy is a side-on cross-section made of two ribs. Each rib is a five-link articulated chain with one root angle at the crown and four bending joints, and I integrate those angles as real degrees of freedom. Every link gets a quasi-steady plate-aerodynamic force from the local relative wind: pressure on the faces, form drag, and wake suction on the lee side. That force is fed back to the joints through the Jacobian and to the umbrella body, which is a rigid stick pinned to the hand by a spring that can slip. Each rib's root angle sits in a double-well torsional potential, and inversion is passing over the barrier into the second well.

• Open state. A deep well at about 66° from the shaft, with a barrier of about 13 N·m.
• Inverted state. A shallower well at about 120°, with a barrier of about 6.5 N·m. This is why inside-out is sticky and needs a shove to undo.
• What flips it. Net aerodynamic root torque plus inertia against the barrier. That torque comes mostly from lee-side suction and from wind entering the cavity once the wrist can no longer hold the umbrella into the wind.
• After it flips. The fabric drags the other rib over (strong one-way coupling). The rest curvature of the joints swings from dome to bowl with a kink, and the pressure coefficients swap sides, so the canopy suddenly becomes a cup.

The page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gale</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#10151c;color:#eaf0f6;font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.panel{position:fixed;left:12px;top:10px;width:min(350px,calc(100vw - 24px));background:rgba(10,16,24,.66);border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:10px 12px 9px;user-select:none}
.big{font-size:44px;font-weight:700;line-height:1;letter-spacing:-1px}
.big small{font-size:16px;font-weight:500;letter-spacing:0;opacity:.75;margin-left:4px}
.big .km{font-size:14px;font-weight:400;opacity:.6;margin-left:10px;letter-spacing:0}
#wdesc{font-size:12px;opacity:.8;margin:3px 0 7px;min-height:15px}
input[type=range]{width:100%;margin:2px 0 6px;accent-color:#e5b13a}
.row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
button{font:inherit;font-size:12px;color:#eaf0f6;background:#243244;border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:4px 8px;cursor:pointer}
button:hover{background:#2f4157}
.bar{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:8px;font-size:11px;margin:3px 0;opacity:.95}
.bar i{display:block;height:7px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.bar b{display:block;height:100%;width:0;background:#5cc98a;border-radius:4px}
#state{font-size:12px;margin-top:6px;color:#f3d48a;min-height:15px}
.keys{font-size:10.5px;opacity:.55;margin-top:5px;line-height:1.35}
#toast{position:fixed;left:50%;bottom:6%;transform:translateX(-50%);font-size:22px;font-weight:600;padding:6px 16px;border-radius:8px;background:rgba(10,16,24,.55);opacity:0;transition:opacity .35s;pointer-events:none;white-space:nowrap}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div class="panel">
  <div class="big"><span id="ws">0.0</span><small>m/s</small><span class="km" id="wkm"></span></div>
  <div id="wdesc"></div>
  <input type="range" id="sl" min="0" max="40" step="0.1" value="2">
  <div class="row">
    <button id="bRamp">Rising: on</button><button id="bGust">Gust</button><button id="bFlip">Pop back</button><button id="bLet">Let go</button><button id="bNew">New umbrella</button>
  </div>
  <div class="bar"><span>Frame load</span><i><b id="bFrame"></b></i></div>
  <div class="bar"><span>Grip</span><i><b id="bGrip"></b></i></div>
  <div class="bar"><span>Footing</span><i><b id="bFoot"></b></i></div>
  <div id="state"></div>
  <div class="keys">↑/↓ or ←/→: wind ±1 m/s (Shift ±5) · Space: toggle rising · G gust · F pop it back · X let go · R new umbrella</div>
</div>
<div id="toast"></div>
<script>
(function(){
'use strict';
const $=id=>document.getElementById(id);
const cv=$('c'),ctx=cv.getContext('2d');
let VW=1,VH=1,DPR=1,S=100,GY=100;
function resize(){DPR=Math.min(2,window.devicePixelRatio||1);VW=window.innerWidth;VH=window.innerHeight;cv.width=Math.round(VW*DPR);cv.height=Math.round(VH*DPR);S=Math.min(VH/5.4,VW/8.5);GY=VH*0.88;}
window.addEventListener('resize',resize);resize();

const clamp=(x,a,b)=>x<a?a:(x>b?b:x);
const lerp=(a,b,t)=>a+(b-a)*t;
const sm=x=>{x=clamp(x,0,1);return x*x*(3-2*x);};
const rnd=(a,b)=>a+Math.random()*(b-a);
const hash=n=>{const s=Math.sin(n*127.1+311.7)*43758.5453;return s-Math.floor(s);};
const mix=(a,b,t)=>'rgb('+Math.round(lerp(a[0],b[0],t))+','+Math.round(lerp(a[1],b[1],t))+','+Math.round(lerp(a[2],b[2],t))+')';
const G=9.81,RHO=1.2,DT=1/360;

/* ================= WIND ================= */
let T=0,Wset=2,Wm=2,auto=true,WX=0,WY=0,vDisp=0;
const RATE=0.4;
let gusts=[],nextGust=7;
function turb(t){return 0.5*Math.sin(0.9*t+1.3)+0.35*Math.sin(2.1*t+4.1)+0.28*Math.sin(3.7*t+0.4)+0.18*Math.sin(6.3*t+2.2)+0.1*Math.sin(11*t+5);}
// wind at world x, current time; gust fronts travel downwind so you can watch them arrive
function wind(x){
  const Uc=3+0.8*Wm,tau=T-x/Uc;
  const inten=0.08+0.20*Math.min(1,Wm/22);
  let ge=0;
  for(let i=0;i<gusts.length;i++){const e=gusts[i],z=(tau-e.t0)/e.dur;if(z>-1&&z<2.2)ge+=e.amp*Math.exp(-8*(z-0.5)*(z-0.5));}
  const gs=0.5*Wm+3;
  WX=Wm*(1+inten*turb(tau))+ge*gs;
  WY=Wm*0.10*turb(tau*1.37+9)+0.22*ge*gs;
}
const BF=[[0.3,'Calm'],[1.6,'Light air'],[3.4,'Light breeze'],[5.5,'Gentle breeze'],[8,'Moderate breeze'],[10.8,'Fresh breeze'],[13.9,'Strong breeze'],[17.2,'Near gale'],[20.8,'Gale'],[24.5,'Strong gale'],[28.5,'Storm'],[32.7,'Violent storm'],[1e9,'Hurricane force']];
function beaufort(v){for(let i=0;i<BF.length;i++)if(v<BF[i][0])return i;return 12;}

/* ================= UMBRELLA CONSTANTS ================= */
const SEG=0.13,M_NODE=0.025,SHAFT=1.0,GRIP_S=0.15,SC=0.62,M_U=0.6,I_U=0.11;
const AL_O=1.15,AL_B=1.62,AL_I=2.10,AL_MIN=0.55,AL_MAX=2.75;
const W1=AL_B-AL_O,W2=AL_I-AL_B,B_OPEN=13,B_INV=6.5;
const K1=B_OPEN/(0.3849*W1),K2=B_INV/(0.3849*W2);
const CA=1.4,KJ=[18,11,6.5,3.6],CJ=[0.6,0.32,0.15,0.05];
const REST_OPEN=[-0.09,-0.09,-0.09,-0.09],REST_INV=[0.06,-0.22,0.22,0.08];
// double-well root torque: open well, barrier, inverted well
function elastic(al){
  if(al<AL_O){const x=al-AL_O;let t=-60*x-120*x*x*x;if(al<AL_MIN)t-=600*(al-AL_MIN);return t;}
  if(al<AL_B){const x=al-AL_O,q=x/W1;return -K1*x*(1-q*q);}
  if(al<AL_I){const y=al-AL_I,q=y/W2;return -K2*y*(1-q*q);}
  const y=al-AL_I;let t=-60*y;if(al>AL_MAX)t-=600*(al-AL_MAX);return t;
}
function mkRib(side){
  const r={side:side,al:AL_O,w:0,d:[-0.09,-0.09,-0.09,-0.09],dw:[0,0,0,0],sig:0,load:0,init:true,
    P:[],Pp:[],vx:new Float64Array(6),vy:new Float64Array(6),fx:new Float64Array(6),fy:new Float64Array(6),
    gx:new Float64Array(6),gy:new Float64Array(6),nx:new Float64Array(5),ny:new Float64Array(5),Q:new Float64Array(5)};
  for(let k=0;k<6;k++){r.P.push({x:0,y:0});r.Pp.push({x:0,y:0});}
  return r;
}
const U={x:0,y:0,th:-0.1,vx:0,vy:0,om:0,ax:0,ay:0,alp:0,held:true,ribs:[mkRib(-1),mkRib(1)],Fcx:0,Fcy:0,Fc:0,wristTau:0,fixOn:0,calm:0,over:0,nInv:0};

/* ================= PERSON ================= */
const Pn={x:0,v:0,L:0,Lw:0,s:0.12,brace:0,stam:1,Tf:0,vEst:0,thT:-0.1,hHip:0.85,Hb:1.68,hc:0.9,
  hip:{x:0,y:0},sho:{x:0,y:0},head:{x:0,y:0},hand:{x:0,y:0},hvx:0,hvy:0,ph:false,
  upx:0,upy:1,fwx:-1,fwy:0,kg:2200,cg:60,fuse:0,copUse:0,a1x:0,a1y:0,a2x:0,a2y:0};
const PM=70;
function gripMax(){return (170+230*Pn.brace)*Pn.stam;}
function pGeom(dt){
  const p=Pn,LEG=0.86;
  p.hHip=Math.sqrt(Math.max(0.36,LEG*LEG-p.s*p.s));
  p.Hb=p.hHip+0.83;p.hc=0.54*p.Hb;
  const su=Math.sin(p.L),cu=Math.cos(p.L);
  p.upx=su;p.upy=cu;p.fwx=-cu;p.fwy=su;         // person faces -x (into the wind)
  p.hip.x=p.x+p.hHip*su;p.hip.y=p.hHip*cu;
  const hs=p.Hb-0.33;p.sho.x=p.x+hs*su;p.sho.y=hs*cu;
  const hh=p.Hb-0.12,hd=0.03+0.05*p.brace;
  p.head.x=p.x+hh*su+p.fwx*hd-p.upx*0.05*p.brace;p.head.y=hh*cu+p.fwy*hd-p.upy*0.05*p.brace;
  const f=0.40-0.14*p.brace,d=0.26+0.14*p.brace;
  const hx=p.sho.x+f*p.fwx-d*p.upx,hy=p.sho.y+f*p.fwy-d*p.upy;
  if(dt>0&&p.ph){p.hvx=(hx-p.hand.x)/dt;p.hvy=(hy-p.hand.y)/dt;}else{p.hvx=0;p.hvy=0;}
  p.hand.x=hx;p.hand.y=hy;p.ph=true;
}

/* ================= FX STATE ================= */
let camX=0,shake=0,shx=0,shy=0,cloudOff=0,toastT=0;
function toast(msg){const t=$('toast');t.textContent=msg;t.style.opacity=1;clearTimeout(toastT);toastT=setTimeout(()=>{t.style.opacity=0;},2200);}

/* ================= UMBRELLA STEP ================= */
let CFx=0,CFy=0;
function contact(px,py,vx,vy,k){
  if(py>=0){CFx=0;CFy=0;return;}
  let fy=k*(-py)-25*vy;if(fy<0)fy=0;
  CFy=fy;CFx=-0.7*fy*Math.tanh(vx/0.3);
}
function release(msg){
  if(!U.held)return;
  U.held=false;U.Fcx=0;U.Fcy=0;U.Fc=0;U.wristTau=0;U.over=0;
  shake=7;toast(msg);
}
function stepUmb(dt){
  const u=U,hand=Pn.hand;
  const ax=Math.sin(u.th),ay=Math.cos(u.th),bx=ay,by=-ax;
  const rCx=(SHAFT-SC)*ax,rCy=(SHAFT-SC)*ay;
  const Cx=u.x+rCx,Cy=u.y+rCy;
  wind(Cx);const wx=WX,wy=WY;
  const R0=u.ribs[0],R1=u.ribs[1];
  R0.sig=sm((R0.al-(AL_B-0.3))/0.6);R1.sig=sm((R1.al-(AL_B-0.3))/0.6);
  let BFx=0,BFy=0,Btq=0;
  for(let ri=0;ri<2;ri++){
    const r=u.ribs[ri],pr=u.ribs[1-ri],s=r.side,sig=r.sig;
    // --- kinematics of the chain ---
    let px=Cx,py=Cy,beta=r.al;
    r.P[0].x=px;r.P[0].y=py;
    for(let i=0;i<5;i++){
      if(i>0)beta+=r.d[i-1];
      const sb=Math.sin(beta),cb=Math.cos(beta);
      r.nx[i]=s*cb*bx+sb*ax;r.ny[i]=s*cb*by+sb*ay;       // normal on the original outer face
      px+=SEG*(s*sb*bx-cb*ax);py+=SEG*(s*sb*by-cb*ay);
      r.P[i+1].x=px;r.P[i+1].y=py;
    }
    for(let k=0;k<6;k++){
      if(r.init){r.vx[k]=0;r.vy[k]=0;}else{r.vx[k]=(r.P[k].x-r.Pp[k].x)/dt;r.vy[k]=(r.P[k].y-r.Pp[k].y)/dt;}
      r.Pp[k].x=r.P[k].x;r.Pp[k].y=r.P[k].y;
      r.fx[k]=0;r.fy[k]=-M_NODE*G;
    }
    r.init=false;
    // --- aerodynamics per link ---
    for(let i=0;i<5;i++){
      const mx=0.5*(r.P[i].x+r.P[i+1].x),my=0.5*(r.P[i].y+r.P[i+1].y);
      const rx=wx-0.5*(r.vx[i]+r.vx[i+1]),ry=wy-0.5*(r.vy[i]+r.vy[i+1]);
      const sp=Math.hypot(rx,ry);if(sp<0.05)continue;
      const wxn=rx/sp,wyn=ry/sp,nx=r.nx[i],ny=r.ny[i];
      const c=wxn*nx+wyn*ny;
      const reach=Math.max(0.05,Math.abs((mx-Cx)*bx+(my-Cy)*by));
      const q=0.5*RHO*sp*sp*(Math.PI*reach*SEG*0.85);
      const aw=ax*wxn+ay*wyn;
      const Eo=clamp(0.3+1.2*aw,0,1),Ei=clamp(0.3-1.2*aw,0,1);   // does the wind get into the cavity?
      let Fn;
      if(c>0)Fn=q*lerp(1.7,1.3,sig)*lerp(Eo,1,sig)*c*c;          // air pushing from the -n side
      else Fn=-q*lerp(1.6,2.4,sig)*lerp(1,Ei,sig)*c*c;           // air pressing on the +n face
      const cc=c*(1-2*sig);
      const sw=cc>=0?1:Math.max(0,1+cc/0.7);
      const Fs=q*0.65*(1-0.8*lerp(Eo,Ei,sig))*sw*(1-2*sig);       // wake suction on the convex side
      const Fd=q*0.55*(1-c*c);                                     // bluff-body drag
      const Fx=(Fn+Fs)*nx+Fd*wxn,Fy=(Fn+Fs)*ny+Fd*wyn;
      r.fx[i]+=0.5*Fx;r.fy[i]+=0.5*Fy;r.fx[i+1]+=0.5*Fx;r.fy[i+1]+=0.5*Fy;
    }
    // ground contact for free-flying canopy
    for(let k=1;k<6;k++){
      if(r.P[k].y<0){contact(r.P[k].x,r.P[k].y,r.vx[k],r.vy[k],3000);r.fx[k]+=CFx;r.fy[k]+=CFy;}
      BFx+=r.fx[k];BFy+=r.fy[k];
    }
    BFx+=r.fx[0];BFy+=r.fy[0];
    // --- generalized forces (incl. inertial forces from body motion) ---
    for(let k=0;k<6;k++){
      const rrx=r.P[k].x-u.x,rry=r.P[k].y-u.y;
      const abx=u.ax+u.alp*rry-u.om*u.om*rrx,aby=u.ay-u.alp*rrx-u.om*u.om*rry;
      r.gx[k]=r.fx[k]-M_NODE*abx;r.gy[k]=r.fy[k]-M_NODE*aby;
    }
    let Sx=0,Sy=0,acc=0;
    for(let i=4;i>=0;i--){Sx+=r.gx[i+1];Sy+=r.gy[i+1];acc+=SEG*(r.nx[i]*Sx+r.ny[i]*Sy);r.Q[i]=acc;}
    // --- root DOF ---
    let Ir=0;for(let k=1;k<6;k++){const dx=r.P[k].x-Cx,dy=r.P[k].y-Cy;Ir+=M_NODE*(dx*dx+dy*dy);}
    if(Ir<0.01)Ir=0.01;
    const el=elastic(r.al),tauRoot=el-CA*r.w;
    r.load+=((Math.abs(el)/(r.al>AL_B?B_INV:B_OPEN))-r.load)*Math.min(1,dt/0.05);
    let tA=r.Q[0]+tauRoot;
    const dS=pr.sig-sig;tA+=dS>0?16*dS:3*dS;                   // fabric drags the other rib through
    if(u.fixOn>0&&r.al>AL_O+0.2)tA-=12;                        // the person shoving it back
    r.w=clamp(r.w+tA/Ir*dt,-40,40);r.al+=r.w*dt;
    Btq+=s*tauRoot;
    // --- bending joints ---
    for(let j=1;j<=4;j++){
      const rest=lerp(REST_OPEN[j-1],REST_INV[j-1],sig);
      let dj=r.d[j-1],wj=r.dw[j-1],Ij=0;
      for(let k=j+1;k<6;k++){const dx=r.P[k].x-r.P[j].x,dy=r.P[k].y-r.P[j].y;Ij+=M_NODE*(dx*dx+dy*dy);}
      if(Ij<3e-4)Ij=3e-4;
      let tj=r.Q[j]-KJ[j-1]*(dj-rest)-CJ[j-1]*wj;
      if(dj>1.1)tj-=800*(dj-1.1);else if(dj<-1.1)tj-=800*(dj+1.1);
      wj=clamp(wj+tj/Ij*dt,-80,80);dj+=wj*dt;
      r.d[j-1]=dj;r.dw[j-1]=wj;
    }
  }
  // --- rigid body: frame + handle ---
  let Fx=BFx,Fy=BFy-M_U*G,Tq=Btq+(rCy*BFx-rCx*BFy);
  {// shaft drag
    const rr=0.5-SC,rx=rr*ax,ry=rr*ay;
    const vx=u.vx+u.om*ry,vy=u.vy-u.om*rx;
    const wrx=wx-vx,wry=wy-vy,wa=wrx*ax+wry*ay,px=wrx-wa*ax,py=wry-wa*ay;
    const k=0.5*RHO*1.1*0.03*Math.hypot(px,py),fx=k*px,fy=k*py;
    Fx+=fx;Fy+