Janady13/thatstupidcomputer / apps/web/src/animation/desktop/computer-motion.mjs

1/* Construct the SVG controller in a client effect; pose sampling is DOM-free. */ 2import { DESKTOP_STATE_IDS, DESKTOP_PERFORMANCE_BY_ID, safeDesktopState } from './performances.mjs'; 3import { GESTURE_BASELINE, gestureAttributes } from './gesture-geometry.mjs'; 4const global = globalThis; 5 6const STATES = DESKTOP_STATE_IDS; 7const SHOTS = Object.freeze([ 8 {state:'idle',duration:4.8}, {state:'alert',duration:4.7}, 9 {state:'overheating',duration:5.5}, {state:'searching',duration:6.5}, 10 {state:'defeated',duration:4.5}, {state:'revived',duration:6.5} 11]); 12const clamp=(v,a=0,b=1)=>Math.max(a,Math.min(b,v)); 13const mix=(a,b,t)=>a+(b-a)*t; 14const smooth=t=>{t=clamp(t);return t*t*(3-2*t)}; 15const ease=t=>{t=clamp(t);return 1-Math.pow(1-t,3)}; 16const pulse=(t,at,width)=>Math.exp(-Math.pow((t-at)/width,2)); 17const deg=r=>r*Math.PI/180; 18const f=v=>(Math.abs(v)<.0005?0:v).toFixed(2); 19const move=(x,y,a=0,cx=0,cy=0)=>`translate(${f(x)} ${f(y)}) rotate(${f(a)} ${cx} ${cy})`; 20const transformPoint=(x,y,dx,dy,a,cx,cy)=>{ 21 const c=Math.cos(deg(a)),s=Math.sin(deg(a)); 22 return [dx+cx+(x-cx)*c-(y-cy)*s,dy+cy+(x-cx)*s+(y-cy)*c]; 23}; 24const bounce=t=>{ 25 t=clamp(t);const n=7.5625,d=2.75; 26 if(t<1/d)return n*t*t; 27 if(t<2/d){t-=1.5/d;return n*t*t+.75} 28 if(t<2.5/d){t-=2.25/d;return n*t*t+.9375} 29 t-=2.625/d;return n*t*t+.984375; 30}; 31const BLINKS={idle:[.55,2.9,3.2],alert:[1.7,3.7],overheating:[2.9],searching:[1.6,4.5],defeated:[],revived:[2.4,4.9],amused:[4.8],skeptical:[3.9,4.12],sleepy:[],proud:[3.8],startled:[2.1,2.35,4.8],thinking:[2.8,5.7]}; 32function pose(state,t) { 33 // Rigid shells. Only the face and flexible appendages change shape. 34 const p={bodyX:0,bodyY:0,bodyR:0,headX:0,headY:0,headR:0, 35 fanX:714,fanY:842,fanR:13,fanWire:1,fanSpeed:0, 36 eyeOpenL:1,eyeOpenR:1,eyeOpacity:1,browY:0,browL:0,browR:0, 37 browHappy:0,gazeX:0,gazeY:0,noteR:0,heat:0,steam:0,dirt:1, 38 glass:0,glassX:0,glassY:0,glassR:0,cursor:0, 39 plugY:0,plugR:0,cableCoil:0,cableAmp:0,dustKick:0,...GESTURE_BASELINE}; 40 if(STATES.indexOf(state)>=12)return extendedPose(state,t,p); 41 const s=Math.sin,c=Math.cos; 42 const u=t%6.4; 43 if(state==='idle') { 44 const sigh=pulse(u,2.6,1.05); 45 p.bodyR=.7*s(t*.98);p.bodyY=-2.5*(1+c(t*1.3)); 46 p.headR=2.4*s(t*1.12)+3.8*sigh-1.4; 47 p.headY=6*sigh-1.8*c(t*1.3); 48 p.eyeOpenL=.96-.25*sigh;p.eyeOpenR=.96-.18*sigh; 49 p.browY=3*sigh;p.gazeX=10*s(t*.95);p.gazeY=5*sigh; 50 p.fanX=714+14*s(t*1.82);p.fanY=842+4*c(t*3.64);p.fanR=13+6*s(t*1.82); 51 p.fanSpeed=95*pulse(u,1.5,.3)+65*pulse(u,4.85,.2); 52 p.noteR=3.8*s(t*2.3+.6)+1.5*s(t*4.7); 53 p.cableAmp=6;p.plugR=2.8*s(t*1.8);p.plugY=-3*(1+s(t*1.8)); 54 } else if(state==='alert') { 55 const attention=pulse(t,1.3,.38); 56 p.bodyR=-1.1+.5*s(t*1.9);p.bodyY=-7-2*s(t*1.6); 57 p.headR=-4.7+1.9*s(t*1.4)-2*attention;p.headY=-3; 58 p.eyeOpenL=1.85+.15*attention;p.eyeOpenR=1.75+.25*attention; 59 p.browY=-17;p.browL=-10;p.browR=9; 60 p.gazeX=15*s(t*.9);p.gazeY=-7+3*s(t*1.2); 61 p.fanX=714+10*s(t*2.2);p.fanR=13+7*s(t*2.2);p.fanSpeed=18+40*pulse(t%4,2,.25); 62 p.noteR=6*s(t*3.5)*Math.exp(-t*.14); 63 p.cableAmp=12;p.plugR=7*s(t*2.4)*Math.exp(-t*.23);p.plugY=-13*Math.abs(s(t*2.4))*Math.exp(-t*.23); 64 } else if(state==='overheating') { 65 p.bodyX=2.6*s(t*13.5);p.bodyR=.95*s(t*8);p.bodyY=-4*(1+s(t*5)); 66 p.headR=2.8+1.5*s(t*6.4);p.headY=4+2*s(t*5); 67 p.eyeOpenL=.38+.06*s(t*3);p.eyeOpenR=.44+.05*c(t*3); 68 p.browY=13;p.browL=-5;p.browR=5; 69 p.fanX=714+10*s(t*9);p.fanY=842+5*s(t*7);p.fanR=13+8*s(t*7); 70 p.fanSpeed=225+135*s(t*2.4)+40*s(t*7);p.noteR=7*s(t*5.4); 71 p.heat=.88+.1*s(t*.9);p.steam=1;p.cableAmp=13; 72 p.plugR=3*s(t*5);p.plugY=-5*Math.abs(s(t*4));p.dustKick=.7; 73 } else if(state==='searching') { 74 p.bodyR=.9*s(t*1.15);p.bodyY=-4; 75 p.headR=-3+4.3*s(t*1.02);p.headY=-2+3*s(t*1.5); 76 p.eyeOpenL=1.38+.2*s(t*1.3);p.eyeOpenR=1.9-.18*s(t*1.3); 77 p.browY=-12;p.browL=-12+4*s(t*1.1);p.browR=5; 78 p.glass=1;p.glassX=-78+82*c(t*1.08);p.glassY=9*s(t*2.16);p.glassR=4*s(t*1.08); 79 p.gazeX=-10+15*c(t*1.08);p.gazeY=3*s(t*2.16); 80 p.fanX=714+8*s(t*1.65);p.fanR=13+6*s(t*1.65);p.fanSpeed=20*pulse(t%5,3,.4); 81 p.noteR=4*s(t*2.7);p.cableAmp=8;p.plugR=2*s(t*1.65); 82 } else if(state==='defeated') { 83 p.bodyR=1.7;p.headR=7.2+.35*s(t*1.1);p.headY=8; 84 p.eyeOpacity=0;p.eyeOpenL=.1;p.eyeOpenR=.1; 85 p.fanX=920;p.fanY=1068;p.fanR=-26;p.fanWire=0; 86 p.cursor=1;p.noteR=4+1.2*s(t*1.2);p.cableAmp=2; 87 p.plugR=-4;p.plugY=0; 88 } else if(state==='revived') { 89 const nod=pulse(t%6.2,2.2,.42)-.7*pulse(t%6.2,2.75,.3); 90 p.bodyR=-.55+.5*s(t*1.35);p.bodyY=-4-2*s(t*1.35); 91 p.headR=-2.3+1.5*s(t*1.2)+2.8*nod;p.headY=-3; 92 p.eyeOpenL=1.9-.25*nod;p.eyeOpenR=1.9-.2*nod; 93 p.browY=-14;p.browL=-2;p.browR=2;p.browHappy=1; 94 p.gazeX=9*s(t*.9);p.gazeY=-2; 95 p.fanX=766;p.fanY=831;p.fanR=0;p.fanWire=0;p.fanSpeed=300; 96 p.dirt=0;p.cableCoil=1;p.cableAmp=1; 97 p.noteR=2.8*s(t*2.3);p.plugR=3*s(t*1.6);p.plugY=-5*(1+s(t*1.6)); 98 } else if(state==='amused') { 99 // Three dry chuckles: face leads, heavy housing follows, note settles last. 100 const laugh=pulse(u,.85,.19)+.88*pulse(u,1.3,.2)+.68*pulse(u,1.8,.24); 101 p.headR=-3+3.6*laugh;p.headY=2-9*laugh;p.bodyY=-2-4*laugh; 102 p.eyeOpenL=.38+.3*(1-laugh);p.eyeOpenR=.48+.2*(1-laugh); 103 p.browY=-8;p.browHappy=.8;p.gazeX=4;p.gazeY=-2; 104 p.fanR=13+4*s(t*7)*laugh;p.fanSpeed=35+35*laugh; 105 p.noteR=5*s(t*7)*Math.exp(-(u%3)*.8);p.cableAmp=5;p.plugR=2*s(t*3); 106 } else if(state==='skeptical') { 107 const look=smooth(u/.6),beat=pulse(u,2.3,.35); 108 p.headR=5+1.5*beat;p.headY=2;p.bodyR=-.8; 109 p.eyeOpenL=.5;p.eyeOpenR=1.1;p.browY=-3;p.browL=15;p.browR=-17; 110 p.gazeX=-17*look;p.gazeY=-2;p.fanSpeed=8; 111 p.noteR=2*s(t*1.5);p.cableAmp=2;p.plugR=-3; 112 } else if(state==='sleepy') { 113 const breath=(1+s(t*1.15))*.5,nod=pulse(u,3.6,.65); 114 p.headR=6+5*nod;p.headY=8+10*nod;p.bodyY=2*breath;p.bodyR=1.2; 115 p.eyeOpenL=.19-.13*nod;p.eyeOpenR=.23-.16*nod;p.browY=10; 116 p.gazeY=6;p.fanSpeed=5+9*breath;p.fanR=17; 117 p.noteR=1.5*s(t*.8);p.cableAmp=1;p.plugR=-4; 118 } else if(state==='proud') { 119 const nod=pulse(u,1.4,.26)-.6*pulse(u,1.8,.24); 120 p.bodyY=-8;p.bodyR=-1.1;p.headY=-8;p.headR=-5+2.5*nod; 121 p.eyeOpenL=.76;p.eyeOpenR=.86;p.browY=-13;p.browL=-6;p.browR=6;p.browHappy=.55; 122 p.gazeX=6;p.gazeY=-6;p.fanSpeed=110;p.fanX=730;p.fanY=834; 123 p.noteR=3*s(t*1.7);p.cableAmp=5;p.plugY=-7;p.plugR=6; 124 } else if(state==='startled') { 125 const recoil=Math.exp(-u*1.7),settle=s(u*12)*Math.exp(-u*2); 126 p.bodyX=6*settle;p.bodyY=-13*recoil;p.bodyR=-2*recoil; 127 p.headY=-12*recoil;p.headR=-9*recoil+2*settle; 128 p.eyeOpenL=1.3+1.15*recoil;p.eyeOpenR=1.3+1.05*recoil;p.browY=-9-15*recoil; 129 p.browL=-12*recoil;p.browR=12*recoil;p.gazeY=-4; 130 p.fanR=13+12*settle;p.fanSpeed=25+70*recoil; 131 p.noteR=14*s(u*10)*Math.exp(-u*1.1);p.cableAmp=4+16*recoil;p.plugY=-22*recoil;p.plugR=14*settle; 132 } else if(state==='thinking') { 133 const glance=smooth(u/.7)-smooth((u-3.4)/.8),nod=pulse(u,4.9,.32); 134 p.headR=-6+3*nod;p.headY=-1;p.bodyR=.45*s(t*.7); 135 p.eyeOpenL=.72;p.eyeOpenR=1.13;p.browY=-5;p.browL=-12;p.browR=9; 136 p.gazeX=14*glance;p.gazeY=-9*glance;p.fanSpeed=15+12*nod; 137 p.noteR=2.2*s(t*1.5);p.cableAmp=3;p.plugR=3*s(t*.9); 138 } 139 let b=1; 140 for(const at of BLINKS[state]) b=Math.min(b,1-.95*pulse(t%6.4,at,.063)); 141 p.eyeOpenL*=b;p.eyeOpenR*=b; 142 return p; 143} 144const windowAt=(t,a,b,c,d)=>smooth((t-a)/(b-a))*(1-smooth((t-c)/(d-c))); 145function extendedPose(state,seconds,baseline) { 146 const duration=DESKTOP_PERFORMANCE_BY_ID[state].seconds; 147 const t=Math.min(seconds,duration),s=Math.sin; 148 // Each new performance has a full anticipation, readable hold and recovery. 149 // Every channel returns to its baseline by the finite deadline. 150 const e=windowAt(t,0,.65,duration-1.1,duration); 151 const p={...baseline},beat=pulse(t,1.15,.28),after=pulse(t,1.65,.32); 152 p.gestureOpacity=1;p.cableAmp=4;p.noteR=2*s(t*2.2);p.fanSpeed=25; 153 const arm=(side,x,y,r=0,bend=0,hand=0)=>Object.assign(p,side==='L'?{armLX:x,armLY:y,armLR:r,armLBend:bend,handL:hand}:{armRX:x,armRY:y,armRR:r,armRBend:bend,handR:hand}); 154 if(state==='happy') { 155 const nod=pulse(t,1.25,.22)-.6*pulse(t,1.62,.22); 156 p.bodyY=-7-3*nod;p.headY=-4;p.headR=-3+3*nod;p.browY=-12;p.browHappy=1; 157 p.eyeOpenL=.62;p.eyeOpenR=.7;p.mouthSmile=.92;p.fanSpeed=115;p.cableAmp=5; 158 arm('L',-28,-110,-34,-34);arm('R',32,-115,35,35); 159 } else if(state==='sad') { 160 const sigh=pulse(t,2.0,.65); 161 p.bodyY=5*sigh;p.bodyR=1.7;p.headY=15+5*sigh;p.headR=8;p.browY=6; 162 p.browL=-15;p.browR=15;p.eyeOpenL=.36;p.eyeOpenR=.43;p.gazeY=9;p.mouthSmile=-.8; 163 p.fanSpeed=5;p.fanR=20;p.noteR=3+.7*s(t);p.cableAmp=1;p.plugR=-5; 164 arm('L',-14,37,-20,18);arm('R',9,34,24,-18); 165 } else if(state==='angry') { 166 const stamp=pulse(t,1.38,.13),recoil=pulse(t,1.18,.16); 167 p.bodyY=-8*recoil+6*stamp;p.bodyR=-1.7;p.headR=-4+3*stamp;p.headY=3; 168 p.eyeOpenL=.4;p.eyeOpenR=.46;p.browY=8;p.browL=20;p.browR=-20;p.gazeY=-1; 169 p.mouthSmile=-.7;p.heat=.12;p.steam=.25;p.fanSpeed=165+80*stamp;p.cableAmp=12;p.plugY=-8*stamp; 170 arm('L',-28,-115-22*stamp,-20,-22,1);arm('R',30,-113-18*stamp,20,24,1); 171 } else if(state==='confused') { 172 const turn=smooth((t-.6)/.45)-2*smooth((t-1.35)/.5)+smooth((t-2.35)/.5); 173 p.headR=7*turn;p.headY=-3;p.eyeOpenL=.72;p.eyeOpenR=1.4;p.browY=-8;p.browL=14;p.browR=-15; 174 p.gazeX=18*turn;p.gazeY=-3;p.mouthOpen=.12;p.fanSpeed=12;p.noteR=-3*turn; 175 arm('L',25,-178,-58,-30);arm('R',48,-172,56,32); 176 } else if(state==='sassy') { 177 const dismiss=windowAt(t,.8,1.4,2.35,2.85); 178 p.bodyR=-1.8;p.headR=7;p.headY=-3;p.eyeOpenL=.48;p.eyeOpenR=.86;p.browL=17;p.browR=-13; 179 p.browY=-5;p.gazeX=-17;p.mouthSmile=.4;p.fanSpeed=18;p.noteR=-3; 180 arm('L',65,-100,45,30);arm('R',35+55*dismiss,-190-24*dismiss,25+28*dismiss,60); 181 } else if(state==='eye-roll') { 182 const roll=clamp((t-.8)/1.5),arc=Math.sin(Math.PI*roll); 183 p.gestureOpacity=0;p.headR=4+3*arc;p.headY=3*arc;p.eyeOpenL=.72-.25*arc;p.eyeOpenR=.85-.2*arc; 184 p.gazeX=20*Math.cos(Math.PI*roll);p.gazeY=-20*arc;p.browY=-3;p.browL=11;p.browR=-9; 185 p.mouthSmile=-.3;p.fanSpeed=8;p.cableAmp=2; 186 } else if(state==='facepalm') { 187 const cover=windowAt(t,.35,1.15,2.75,3.6),meet=pulse(t,1.33,.2); 188 p.headR=5+3*cover;p.headY=8*cover+3*meet;p.eyeOpenL=.22;p.eyeOpenR=.25;p.browY=8; 189 p.gazeY=8;p.mouthSmile=-.7;p.fanSpeed=5;p.bodyR=1.1;p.cableAmp=1;p.noteR=4*meet; 190 arm('L',8,5,-12,12);arm('R',-463*cover,-452*cover,-13*cover,100*cover,0); 191 } else if(state==='shrug') { 192 const shoulder=windowAt(t,.4,1.1,2.2,2.8); 193 p.bodyY=-5*shoulder;p.headY=-3;p.headR=-4;p.eyeOpenL=.8;p.eyeOpenR=1.15; 194 p.browY=-14;p.browL=-8;p.browR=12;p.mouthOpen=.16;p.gazeY=-2;p.fanR=13-4*shoulder; 195 arm('L',25,-200*shoulder,-63,-35);arm('R',46,-198*shoulder,63,35); 196 } else if(state==='wave') { 197 const wave=windowAt(t,.7,1.0,2.7,3.0)*Math.sin((t-1)*9.5); 198 p.headR=-4;p.headY=-3;p.eyeOpenL=.75;p.eyeOpenR=.85;p.browY=-10;p.browHappy=.8;p.mouthSmile=.65; 199 p.gazeX=5;p.bodyR=-.7;p.noteR=-2*wave;p.fanSpeed=60; 200 arm('L',5,-5,-8,10);arm('R',25+8*wave,-325+6*wave,18+24*wave,70); 201 } else if(state==='point-left'||state==='point-right') { 202 const right=state==='point-right',lead=windowAt(t,.1,.55,2.9,3.7),nod=pulse(t,2.0,.2); 203 p.gazeX=(right?22:-22)*lead;p.headR=(right?-3:4)+2*nod;p.headY=-3; 204 p.eyeOpenL=1.12;p.eyeOpenR=1.13;p.browY=-10;p.mouthSmile=.4;p.bodyR=right?-1:1; 205 p.fanSpeed=55;p.noteR=2*nod; 206 if(right){arm('R',172,-247,90,15,2);arm('L',12,-25,-15,15);} 207 else{arm('L',32,-249,-90,-15,2);arm('R',-8,-20,12,-10);} 208 } else if(state==='beckon'||state==='demo-invite') { 209 const invite=state==='demo-invite',curlWindow=windowAt(t,.8,1.15,2.7,3.1),curl=(1+Math.sin((t-1.05)*7.5))*.5*curlWindow; 210 const present=invite?smooth((t-2.7)/.65):0; 211 p.headR=-4+2*pulse(t,1.6,.22);p.headY=-4;p.bodyR=-1.4;p.eyeOpenL=.84;p.eyeOpenR=1.13; 212 p.browY=-11;p.browHappy=.65;p.gazeX=14*present;p.mouthSmile=.72;p.fanSpeed=75;p.cableAmp=5; 213 arm('L',-12,-45,-22,-12); 214 arm('R',mix(8,115,present)-18*curl,mix(-255,-196,present)+30*curl,mix(-15,64,present)-25*curl,70, present>.25?0:curl>.62?1:0); 215 } else if(state==='thumbs-up') { 216 const nod=pulse(t,1.3,.24)-.6*pulse(t,1.65,.23); 217 p.headR=-4+4*nod;p.headY=-6;p.bodyY=-3;p.eyeOpenL=.75;p.eyeOpenR=.8;p.browY=-12;p.browHappy=.8; 218 p.mouthSmile=.72;p.fanSpeed=105;p.plugY=-5*nod; 219 arm('L',-3,-25,-8,10);arm('R',35,-250,-8,50,3); 220 } else if(state==='bow') { 221 const bow=windowAt(t,.6,1.7,2.65,3.8); 222 p.bodyR=4*bow;p.bodyY=8*bow;p.headR=15*bow;p.headY=22*bow; 223 p.eyeOpenL=1-.86*bow;p.eyeOpenR=1-.84*bow;p.browY=8*bow;p.gazeY=10*bow;p.mouthSmile=.55; 224 p.fanR=13+5*bow;p.fanSpeed=40;p.noteR=5*bow;p.cableAmp=3; 225 arm('L',175,-72,-72,-25);arm('R',-150,-65,78,30); 226 } else if(state==='shush') { 227 const hush=windowAt(t,.3,1.1,2.7,3.6); 228 p.headR=-4;p.headY=-3;p.eyeOpenL=.76;p.eyeOpenR=.9;p.browY=-9;p.gazeX=-4; 229 p.mouthOpen=.2;p.fanSpeed=3;p.cableAmp=1;p.noteR=0; 230 arm('L',4,8,-10,8);arm('R',-463*hush,-312*hush,0,110*hush,4); 231 } else if(state==='raspberry') { 232 const spit=windowAt(t,.65,1.1,2.0,2.5),flutter=Math.sin(t*27)*spit; 233 p.headR=-3+flutter*.8;p.bodyX=flutter;p.headY=-2;p.eyeOpenL=.48;p.eyeOpenR=.54; 234 p.browY=-3;p.browL=6;p.browR=-6;p.mouthOpen=.8*spit;p.tongue=spit;p.gazeX=1; 235 p.fanSpeed=20+55*spit;p.noteR=3*flutter;p.cableAmp=3+3*spit; 236 arm('L',-18,-68,-34,-20);arm('R',20,-65,32,22); 237 } else if(state==='rude-flip-off'||state==='double-flip-off') { 238 const double=state==='double-flip-off',right=windowAt(t,.62,1.45,duration-1.5,duration-.4),left=double?windowAt(t,1.08,1.9,duration-1.4,duration-.35):0; 239 p.headR=6;p.headY=-3;p.bodyR=-1.8;p.eyeOpenL=.39;p.eyeOpenR=.66;p.browY=1;p.browL=15;p.browR=-17; 240 p.gazeX=double?0:-13;p.mouthSmile=-.25;p.fanSpeed=12;p.cableAmp=3;p.noteR=-2; 241 arm('R',14*right,-305*right,(-10+3*pulse(t,2,.2))*right,50*right,right>.68?5:1); 242 arm('L',double?-15*left:70,double?-294*left:-90,double?9*left:45,-50*left,left>.68?5:double?1:0); 243 } else if(state==='demo-success') { 244 const relief=pulse(t,.85,.3),nod=pulse(t,1.7,.24)-.6*pulse(t,2.08,.2); 245 p.bodyY=-6;p.bodyR=-1;p.headY=-7+4*relief;p.headR=-5+4*nod;p.eyeOpenL=.73;p.eyeOpenR=.78; 246 p.browY=-14;p.browHappy=1;p.mouthSmile=.92;p.dirt=.2;p.fanSpeed=185;p.cableCoil=.45;p.cableAmp=2;p.plugY=-6; 247 arm('L',25,-168,-58,-25);arm('R',38,-261,-10,50,3); 248 } 249 const out={}; 250 for(const key of Object.keys(p))out[key]=key==='handL'||key==='handR'?(e>.02?p[key]:0):mix(baseline[key],p[key],e); 251 return out; 252} 253export function sampleDesktopPose(state,seconds,options={}) { 254 state=safeDesktopState(state,options.attitudeEnabled); 255 if(!Number.isFinite(seconds)||seconds<0)throw new RangeError('Time must be finite and nonnegative'); 256 return pose(state,seconds); 257} 258export class ComputerMotion { 259 constructor(svg,options={}) { 260 if(!svg||svg.tagName.toLowerCase()!=='svg')throw new TypeError('ComputerMotion requires the inline character SVG.'); 261 this.svg=svg;this.options=options;this.nodes={}; 262 for(const node of svg.querySelectorAll('[id]'))this.nodes[node.getAttribute('data-rig-id')||node.id]=node; 263 for(const id of ['body-motion','monitor','fan','rotor-motion','cable-path','connector','search-arm']) { 264 if(!this.nodes[id])throw new Error('Missing required rig layer: '+id); 265 } 266 const cables=options.cables||global.COMPUTER_CABLE_POSES; 267 if(!cables||cables.idle.length!==158||cables.revived.length!==158)throw new Error('Two matching 26-cubic cable poses are required.'); 268 this.cables=cables;this.pathBuffer=new Float64Array(158); 269 this.originalBrows=[this.nodes['brow-left'].getAttribute('d'),this.nodes['brow-right'].getAttribute('d')]; 270 this.attitudeEnabled=options.attitudeEnabled===true; 271 this.requestedState=STATES.includes(options.state)?options.state:'idle'; 272 this.state=safeDesktopState(this.requestedState,this.attitudeEnabled);this.complete=false;this.revision=0; 273 this.age=options.paused&&STATES.indexOf(this.state)>=12?DESKTOP_PERFORMANCE_BY_ID[this.state].peakSeconds:0; 274 this.time=this.age;this.angle=0;this._pose=pose(this.state,this.age);this.from={...this._pose};this.transition=1.15; 275 this.intensity=clamp(options.intensity??1,.3,1.35);this.fps=clamp(options.fps??30,15,60); 276 this.visible=true;this.paused=!!options.paused;this.external=!!options.externalClock;this.destroyed=false;this.raf=0;this.last=0; 277 this.pointer={x:0,y:0,targetX:0,targetY:0};this.nudgeAge=99; 278 this.tour=false;this.tourTime=0;this.shot=0;this.cache=new Map();this.originalAttributes=new Map(); 279 this.media=global.matchMedia('(prefers-reduced-motion: reduce)');this.reduced=this.media.matches; 280 this._media=()=>{this.reduced=this.media.matches;if(this.reduced)this.stopShowcase();if(this.destroyed)return;this._draw(this.reduced?pose(this.state,DESKTOP_PERFORMANCE_BY_ID[this.state].peakSeconds):this._pose);this._sync();}; 281 this._visibility=()=>this._sync(); 282 this._pointerMove=e=>{if(this.paused||this.reduced||this.complete)return;const rect=this.svg.getBoundingClientRect();if(!(rect.width>0&&rect.height>0))return;this.pointer.targetX=clamp((e.clientX-rect.left)/rect.width*2-1,-1,1);this.pointer.targetY=clamp((e.clientY-rect.top)/rect.height*2-1,-1,1);}; 283 this._pointerLeave=()=>{this.pointer.targetX=0;this.pointer.targetY=0;}; 284 this.media.addEventListener('change',this._media);document.addEventListener('visibilitychange',this._visibility); 285 const hit=options.pointerTarget||svg.parentElement;this.hit=hit; 286 if(options.pointer!==false&&hit){hit.addEventListener('pointermove',this._pointerMove,{passive:true});hit.addEventListener('pointerleave',this._pointerLeave,{passive:true});} 287 if('IntersectionObserver' in global){this.io=new IntersectionObserver(entries=>{this.visible=entries[0].isIntersecting;this._sync();},{threshold:.01});this.io.observe(svg);} 288 this._frame=t=>{this.raf=0;if(!this._allowed())return;if(!this.last)this.last=t;const dt=(t-this.last)/1000;if(dt>=1/this.fps-.001){this.last=t;this.advance(Math.min(dt,.08));}if(this._allowed()&&!this.raf)this.raf=requestAnimationFrame(this._frame);}; 289 const initialRevision=this.revision; 290 this._draw(this.reduced?pose(this.state,DESKTOP_PERFORMANCE_BY_ID[this.state].peakSeconds):this._pose); 291 if(!this.destroyed&&this.revision===initialRevision)this._notify(); 292 if(options.autoplay&&!this.reduced&&!this.destroyed&&this.revision===initialRevision)this.playShowcase(); 293 this._sync(); 294 } 295 _set(id,attribute,value) { 296 const key=id+':'+attribute,v=String(value);if(this.cache.get(key)===v)return; 297 const node=this.nodes[id];if(node&&!this.originalAttributes.has(key))this.originalAttributes.set(key,{node,attribute,value:node.getAttribute(attribute)});node?.setAttribute(attribute,v);this.cache.set(key,v); 298 } 299 _allowed(){return !this.destroyed&&!this.paused&&!this.reduced&&!this.complete&&!document.hidden&&this.visible&&!this.external;} 300 _sync(){if(this.destroyed)return;if(this._allowed()){if(!this.raf){this.last=0;this.raf=requestAnimationFrame(this._frame);}}else{cancelAnimationFrame(this.raf);this.raf=0;this.last=0;}this.options.onPlaybackChange?.({paused:this.paused,reduced:this.reduced,visible:this.visible,tour:this.tour});} 301 _notify(){if(this.destroyed)return;this.svg.dataset.state=this.state;this.options.onStateChange?.(this.state);} 302 setState(state,{immediate=false,keepTour=false}={}) { 303 if(this.destroyed)return; 304 const requested=state;state=safeDesktopState(state,this.attitudeEnabled); 305 const revision=++this.revision; 306 if(!keepTour)this.stopShowcase(); 307 if(this.destroyed||this.revision!==revision)return; 308 this.from={...this._pose};this.state=state;this.requestedState=requested;this.age=0;this.complete=false; 309 this.transition=state==='defeated'?1.5:state==='revived'?1.8:state==='startled'?.14:STATES.indexOf(state)>=6?.4:1.05; 310 if(immediate||this.reduced||this.paused){this.age=STATES.indexOf(state)>=12?(this.paused?DESKTOP_PERFORMANCE_BY_ID[state].peakSeconds:0):this.transition;this.from=pose(state,this.age);this._pose={...this.from};} 311 this._notify();if(this.destroyed||this.revision!==revision)return; 312 const staticTime=DESKTOP_PERFORMANCE_BY_ID[state].peakSeconds; 313 this._draw(this.reduced||(this.paused&&STATES.indexOf(state)>=12)?pose(state,staticTime):this._pose); 314 if(!this.destroyed&&this.revision===revision)this._sync(); 315 } 316 playShowcase(){if(this.reduced||this.destroyed)return;this.tour=true;this.tourTime=0;this.shot=0;const revision=this.revision+1;this.setState('idle',{keepTour:true});if(this.destroyed||this.revision!==revision)return;this.paused=false;this._sync();} 317 stopShowcase(){if(this.destroyed)return;this.tour=false;this.options.onProgress?.(0,false);} 318 nudge(){if(!this.reduced&&!this.destroyed&&!this.complete){this.nudgeAge=0;this._sync();}} 319 setIntensity(value){if(this.destroyed)return;this.intensity=clamp(Number(value)||1,.3,1.35);this._draw(this.reduced?pose(this.state,DESKTOP_PERFORMANCE_BY_ID[this.state].peakSeconds):this._pose);} 320 setAttitudeEnabled(value){if(this.destroyed)return;this.attitudeEnabled=value===true;if(!this.attitudeEnabled&&DESKTOP_PERFORMANCE_BY_ID[this.state].requiresAttitude)this.setState('eye-roll',{immediate:true});} 321 pause(){if(this.destroyed)return;this.paused=true;this._sync();} 322 resume(){if(this.destroyed)return;this.paused=false;this._sync();} 323 setExternalClock(value){if(this.destroyed)return;this.external=!!value;this._sync();} 324 seek(seconds) { 325 if(!Number.isFinite(seconds)||seconds<0||seconds>3600)throw new RangeError('Seek time must be finite and between 0 and 3600 seconds'); 326 if(this.destroyed)return; 327 const revision=++this.revision,performance=DESKTOP_PERFORMANCE_BY_ID[this.state]; 328 this.tour=false;this.age=performance.loop?seconds:Math.min(seconds,performance.seconds);this.time=this.age; 329 this.complete=!performance.loop&&this.age>=performance.seconds;this.nudgeAge=99; 330 this.pointer={x:0,y:0,targetX:0,targetY:0};this._pose=pose(this.state,this.age);this.from={...this._pose}; 331 // Deterministic finite quadrature for an explicit offline seek. Live frames 332 // retain the original incremental fan clock; seeking has no hidden history. 333 const steps=Math.min(4096,Math.ceil(this.age*120));let angle=0; 334 for(let i=0;i<steps;i++)angle+=pose(this.state,(i+.5)*this.age/steps).fanSpeed*this.age/steps; 335 this.angle=angle; 336 this._draw(this.reduced?pose(this.state,performance.peakSeconds):this._pose); 337 if(!this.destroyed&&this.revision===revision)this._sync(); 338 } 339 advance(seconds) { 340 if(!Number.isFinite(seconds)||seconds<0)throw new RangeError("Delta must be finite and nonnegative"); 341 if(this.destroyed||this.reduced||this.paused||this.complete||document.hidden||!this.visible)return; 342 let revision=this.revision; 343 const performance=DESKTOP_PERFORMANCE_BY_ID[this.state],dt=clamp(seconds,0,.1); 344 if(!dt)return; 345 this.time+=dt;this.age=performance.loop?this.age+dt:Math.min(performance.seconds,this.age+dt);this.nudgeAge+=dt; 346 if(this.tour){ 347 this.tourTime+=dt;let edge=0,index=SHOTS.length-1; 348 for(let i=0;i<SHOTS.length;i++){edge+=SHOTS[i].duration;if(this.tourTime<edge){index=i;break;}} 349 if(index!==this.shot){this.shot=index;const expected=revision+1;this.setState(SHOTS[index].state,{keepTour:true});if(this.destroyed||this.revision!==expected)return;revision=this.revision;} 350 const total=SHOTS.reduce((sum,x)=>sum+x.duration,0); 351 this.options.onProgress?.(clamp(this.tourTime/total),true); 352 if(this.destroyed||this.revision!==revision)return; 353 if(this.tourTime>=total){this.tour=false;this.options.onProgress?.(1,false);this._sync();} 354 if(this.destroyed||this.revision!==revision)return; 355 } 356 const target=pose(this.state,this.age),k=smooth(this.age/this.transition),p={}; 357 for(const key of Object.keys(target))p[key]=key==='handL'||key==='handR'?target[key]:mix(this.from[key]??0,target[key],k); 358 // The falling fan obeys a visible bounce, while the rigid housing stays intact. 359 if(this.state==='defeated'&&this.age<this.transition){ 360 p.fanY=mix(this.from.fanY,target.fanY,bounce(this.age/this.transition)); 361 p.fanR=mix(this.from.fanR,target.fanR,ease(this.age/this.transition)); 362 } 363 if(this.state==='revived'){ 364 p.bodyY-=16*pulse(this.age,.8,.3);p.headR-=3.5*pulse(this.age,1,.35); 365 p.dustKick+=pulse(this.age,.9,.45); 366 } 367 this.angle+=(p.fanSpeed*dt);this._pose=p; 368 const following=1-Math.exp(-dt*5); 369 this.pointer.x=mix(this.pointer.x,this.pointer.targetX,following); 370 this.pointer.y=mix(this.pointer.y,this.pointer.targetY,following); 371 const finishing=!DESKTOP_PERFORMANCE_BY_ID[this.state].loop&&this.age>=DESKTOP_PERFORMANCE_BY_ID[this.state].seconds; 372 if(finishing)this.complete=true; 373 this._draw(p); 374 if(this.destroyed||this.revision!==revision)return; 375 const current=DESKTOP_PERFORMANCE_BY_ID[this.state]; 376 if(finishing&&!current.loop){ 377 cancelAnimationFrame(this.raf);this.raf=0;this.last=0; 378 this.options.onComplete?.(this.state); 379 if(this.destroyed||this.revision!==revision)return; 380 if(this.options.returnToIdle){this.setState('idle');return;} 381 this._sync(); 382 } 383 } 384 _draw(input) { 385 if(this.destroyed)return; 386 const p={...input};const t=this.reduced?DESKTOP_PERFORMANCE_BY_ID[this.state].peakSeconds:this.time;const q=this.intensity; 387 // Nudge is a damped reaction, never an accumulated transform. 388 const n=!this.reduced&&this.nudgeAge<2?Math.sin(this.nudgeAge*14)*Math.exp(-this.nudgeAge*2.5):0; 389 p.headR+=n*6*q;p.noteR-=n*6*q;p.fanR+=n*5*q; 390 const bx=p.bodyX*q,by=p.bodyY*q,br=p.bodyR*q; 391 const pointerX=this.reduced?0:this.pointer.x,pointerY=this.reduced?0:this.pointer.y; 392 const hx=p.headX,hy=p.headY,hr=p.headR*q+pointerX*1.6*q; 393 this._set('body-motion','transform',move(bx,by,br,530,1070)); 394 this._set('monitor','transform',move(hx,hy,hr,521,592)); 395 this._set('sticky-note','transform',`rotate(${f(p.noteR*q)} 804 439)`); 396 this._set('fan','transform',move(p.fanX,p.fanY,p.fanR)); 397 this._set('rotor-motion','transform',`rotate(${f(this.reduced?0:this.angle%360)})`); 398 // Fan wires remain attached to the tower and the moving housing. 399 const wireEnd=transformPoint(-43*.86,-75*1.04,p.fanX,p.fanY,p.fanR,0,0); 400 const wd=`M692 635 C${f(698+Math.sin(t*1.6)*8*q)} 697 ${f(wireEnd[0]-18)} ${f(wireEnd[1]-37)} ${f(wireEnd[0])} ${f(wireEnd[1])}`; 401 this._set('fan-wiring','transform','translate(0 0)');this._set('fan-wiring','opacity',f(p.fanWire)); 402 this._set('fan-lead','d',wd);this._set('fan-lead-highlight','d',wd); 403 this._set('fan-lead-return','d',`M700 634 C702 682 ${f(wireEnd[0]+12)} ${f(wireEnd[1]-30)} ${f(wireEnd[0]+8)} ${f(wireEnd[1])}`); 404 const gx=(p.gazeX+pointerX*15)*q,gy=(p.gazeY+pointerY*9)*q; 405 for(const [side,cx,cy,opening] of [['left',350,337,p.eyeOpenL],['right',536,332,p.eyeOpenR]]){ 406 this._set('eye-'+side+'-motion','transform',`translate(${f(gx)} ${f(gy)}) translate(${cx} ${cy}) scale(1 ${f(Math.max(.045,opening))}) translate(${-cx} ${-cy})`); 407 this._set('eye-'+side,'opacity',f(p.eyeOpacity)); 408 const color=this._color([201,112,56],[41,38,31],p.heat); 409 this._set('eye-'+side,'fill',color);this._set('brow-'+side,'stroke',color); 410 this._set('brow-'+side,'opacity',f(p.eyeOpacity)); 411 } 412 this._set('brow-left-motion','transform',move(gx*.5,p.browY+gy*.45,p.browL,350,264)); 413 this._set('brow-right-motion','transform',move(gx*.5,p.browY+gy*.45,p.browR,540,260)); 414 const h=p.browHappy; 415 this._set('brow-left','d',`M${f(mix(309,308,h))} ${f(mix(274,263,h))} C${f(mix(341,333,h))} ${f(mix(273,251,h))} ${f(mix(368,364,h))} ${f(mix(264,249,h))} ${f(mix(389,388,h))} ${f(mix(252,256,h))}`); 416 this._set('brow-right','d',`M${f(mix(506,505,h))} ${f(mix(248,251,h))} C${f(mix(534,531,h))} ${f(mix(259,244,h))} ${f(mix(559,564,h))} ${f(mix(265,249,h))} ${f(mix(590,587,h))} ${f(mix(265,261,h))}`); 417 this._set('screen-fill','fill',this._color([41,38,31],[201,112,56],p.heat)); 418 this._set('screen-cursor','opacity',f(p.cursor*(this.reduced?1:(this.age%1.3<.72?1:0)))); 419 this._set('magnifying-glass','opacity',f(p.glass));this._set('search-arm','opacity',f(p.glass)); 420 const glassX=p.glassX,glassY=p.glassY+(1-p.glass)*70,glassR=p.glassR; 421 this._set('magnifying-glass','transform',move(glassX,glassY,glassR,537,330)); 422 const lensEnd=transformPoint(641,415,glassX,glassY,glassR,537,330); 423 const gripPath=`M735 516 C704 506 ${f(lensEnd[0]+55)} ${f(lensEnd[1]+34)} ${f(lensEnd[0])} ${f(lensEnd[1])}`; 424 this._set('search-grip','d',gripPath);this._set('search-grip-highlight','d',gripPath); 425 this._set('connector','transform',move(0,p.plugY*q,p.plugR*q,1142,1043)); 426 this._drawCable(p,{bx,by,br,hx,hy,hr},t,q); 427 // Steam uses three offset paths, not blur or an expensive particle system. 428 this._set('steam','opacity',f(p.steam*.65)); 429 const wispIds=['steam-wisp-left','steam-wisp-center','steam-wisp-right']; 430 wispIds.forEach((id,i)=>{ 431 const life=this.reduced?.3:((t*.45+i*.34)%1); 432 const alpha=this.reduced?.7:Math.sin(Math.PI*life); 433 this._set(id,'opacity',f(alpha)); 434 this._set(id,'transform',move(Math.sin(t*2+i)*13*q,-life*165*q,Math.sin(t*1.7+i)*4*q,925,630)); 435 }); 436 for(const id of ['grime','note-grime','monitor-grime','casing-scuffs'])this._set(id,'opacity',f(p.dirt)); 437 this._set('airborne-dust','transform',move(9*Math.sin(t)*q,-16*(1+Math.sin(t*.7))*q)); 438 this._set('dust-drift','opacity',f(Math.max(p.dirt*.6,p.dustKick))); 439 for(let i=1;i<=8;i++){ 440 const drift=this.reduced?0:((t*.14+i*.137)%1); 441 this._set('dust-drift-'+i,'transform',move(Math.sin(t*.8+i)*17*q+p.dustKick*(i%2?35:-25),-drift*65*q-p.dustKick*48)); 442 this._set('dust-drift-'+i,'opacity',f((.2+.28*Math.sin(Math.PI*drift)))); 443 } 444 this._set('ground-dust','transform',move(0,-p.dustKick*12*q)); 445 for(const [id,attribute,value] of gestureAttributes(p))this._set(id,attribute,value); 446 this._renderedPose={...p};this.options.onFrame?.(this.getSnapshot()); 447 } 448 _drawCable(p,a,t,q) { 449 const out=this.pathBuffer,one=this.cables.idle,two=this.cables.revived; 450 const end=transformPoint(1142,1043,0,p.plugY*q,p.plugR*q,1142,1043); 451 for(let i=0;i<158;i+=2){ 452 let x=mix(one[i],two[i],p.cableCoil),y=mix(one[i+1],two[i+1],p.cableCoil); 453 // All upper passes follow the head; middle passes follow the tower. 454 const headWeight=1-smooth((y-545)/230),bodyWeight=1-smooth((y-625)/390); 455 const hp=transformPoint(x,y,a.hx,a.hy,a.hr,521,592); 456 x=mix(x,hp[0],headWeight);y=mix(y,hp[1],headWeight); 457 const bp=transformPoint(x,y,a.bx,a.by,a.br,530,1070); 458 x=mix(x,bp[0],bodyWeight);y=mix(y,bp[1],bodyWeight); 459 const edge=Math.sin(Math.PI*(i/156)); 460 const amp=p.cableAmp*q*edge; 461 x+=Math.sin(t*2.4-i*.15)*amp;y+=Math.cos(t*2.2-i*.125)*amp*.7; 462 // Three final control/anchor pairs converge exactly on the moving connector. 463 const tail=smooth((i-144)/12);x+=(end[0]-1142)*tail;y+=(end[1]-1043)*tail; 464 out[i]=x;out[i+1]=y; 465 } 466 let d=`M${f(out[0])} ${f(out[1])}`; 467 for(let i=2;i<158;i+=6)d+=` C${f(out[i])} ${f(out[i+1])} ${f(out[i+2])} ${f(out[i+3])} ${f(out[i+4])} ${f(out[i+5])}`; 468 this._set('cable-path','d',d); 469 } 470 _color(a,b,k){return '#'+a.map((v,i)=>Math.round(mix(v,b[i],clamp(k))).toString(16).padStart(2,'0')).join('');} 471 getSnapshot(){const performance=DESKTOP_PERFORMANCE_BY_ID[this.state];return {state:this.state,requestedState:this.requestedState,time:this.time,age:this.age,duration:performance.seconds,progress:Math.min(1,this.age/performance.seconds),loop:performance.loop,paused:this.paused,reduced:this.reduced,visible:this.visible,tour:this.tour,complete:this.complete,fanAngle:this.angle,pose:{...(this._renderedPose||this._pose)}};} 472 snapshot(){return this.getSnapshot();} 473 destroy(){if(this.destroyed)return;this.destroyed=true;cancelAnimationFrame(this.raf);this.io?.disconnect();this.media.removeEventListener('change',this._media);document.removeEventListener('visibilitychange',this._visibility);this.hit?.removeEventListener('pointermove',this._pointerMove);this.hit?.removeEventListener('pointerleave',this._pointerLeave);for(const {node,attribute,value} of this.originalAttributes.values()){if(value===null)node.removeAttribute(attribute);else node.setAttribute(attribute,value);}this.originalAttributes.clear();this.cache.clear();this.raf=0;} 474} 475 476export { STATES as COMPUTER_MOTION_STATES, SHOTS as COMPUTER_MOTION_SHOTS }; 477