(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[42521,44805,62641],{69495:(e,s,t)=>{"use strict";t.d(s,{A:()=>c});var n=t(87687),r=t(52751),a=t(31928),i=t(22559);let o=r.forwardRef(function(e,s){let{value:t,onChange:r,handleSize:a=16,trackSize:o=3,backgroundColor:c="var(--color-background)",handleColor:p="var(--color-gray-900)",handleFocusColor:d=i.PV,style:u={},...g}=e;return(0,n.jsx)(l,{ref:s,style:{...u,"--handle-color":p,"--handle-focus-color":d,"--background-color":c,"--base-handle-size":a+"px","--track-size":o+"px"},type:"range",value:t,onChange:e=>{"function"==typeof r&&r(Number(e.target.value))},...g})}),l=(0,a.I)("input")({name:"Input",class:"i1i8zjy7",propsAsIs:!1}),c=o;t(42379)},67638:(e,s,t)=>{"use strict";t.d(s,{JC:()=>a,RC:()=>i,mZ:()=>r});var n=t(52751);let r=()=>void 0===window.devicePixelRatio?1:window.devicePixelRatio,a=()=>{let[e,s]=n.useState(r);return n.useEffect(()=>{let e=()=>{s(r())};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),e},i=(e,s)=>{let t=r();return{style:{width:e,height:s},width:e*t,height:s*t}}},42521:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>W});var n=t(87687),r=t(52751),a=t(31928),i=t(65601),o=t(51611),l=t(6010),c=t(68852);t(21583);var p=t(24283);let d="/images/a-friendly-introduction-to-spring-physics",u={birds:"".concat(d,"/birds.png"),cloud1:"".concat(d,"/cloud-1.png"),cloud2:"".concat(d,"/cloud-2.png")},g=e=>{let{initialX:s,y:t,baseSpeed:a,friction:i,src:o,width:d}=e,[u,g]=r.useState(s),m=(0,c.S8)(i,l.mM,l.eV,10*a,a);return(0,p.A)(()=>{g(e=>e>l.DX+200?-d:e+m)}),(0,n.jsx)(h,{src:o,style:{width:d,transform:"translate(".concat(u,"px, ").concat(t,"px)")}})},m=(0,a.I)("div")({name:"Wrapper",class:"wto4ngm",propsAsIs:!1}),h=(0,a.I)("img")({name:"CloudImg",class:"cuu4xl",propsAsIs:!1}),x=(0,a.I)("img")({name:"Birds",class:"b1ltth29",propsAsIs:!1}),f=e=>{let{friction:s}=e;return(0,n.jsxs)(m,{children:[(0,n.jsx)(g,{friction:s,initialX:.6*l.DX,y:.35*l.kz,baseSpeed:.1,src:u.cloud1,width:150}),(0,n.jsx)(g,{friction:s,initialX:-.2*l.DX,y:.7*l.kz,baseSpeed:.14,src:u.cloud2,width:160}),(0,n.jsx)(x,{src:u.birds})]})};t(91835);let y="/images/a-friendly-introduction-to-spring-physics",j={planet1:"".concat(y,"/gaseous-planet.png"),planet2:"".concat(y,"/shard-planet.png")},v=e=>{let{x:s,y:t,motionPath:r,src:a,width:i,duration:o}=e;return(0,n.jsx)(b,{src:a,style:{width:i,top:t,offsetPath:"path('".concat(r,"')"),animationDuration:o+"ms"}})},w=()=>(0,n.jsx)("svg",{viewBox:"0 0 491 145",style:{width:"100%"},children:(0,n.jsx)("path",{d:"M0 144.5V0.5H490.5V39C490.5 39 463.251 32.066 445.5 32.5C393.509 33.7712 378.985 120.551 331 100.5C313.099 93.02 311.386 74.6931 293 68.5C245.5 52.5 214.348 62.0443 165.5 68.5C92.0652 78.205 0 144.5 0 144.5Z",fill:"var(--color-background)"})}),I=(0,a.I)("div")({name:"Wrapper",class:"w1n953hj",propsAsIs:!1}),b=(0,a.I)("img")({name:"PlanetImg",class:"puerl17",propsAsIs:!1}),C=(0,a.I)("div")({name:"CoverWrapper",class:"ctx6yy2",propsAsIs:!1}),k=()=>(0,n.jsxs)(I,{children:[(0,n.jsx)(C,{children:(0,n.jsx)(w,{})}),(0,n.jsx)(v,{x:.6*l.DX,y:0,motionPath:"M191.297 60.4795C193.069 76.9426 184.449 93.0142 168.942 105.688C153.44 118.358 131.102 127.583 105.601 130.329C80.1004 133.074 56.3109 128.814 38.4667 119.734C20.6176 110.652 8.77468 96.783 7.00233 80.3198C5.22998 63.8567 13.8497 47.7851 29.3566 35.1117C44.8593 22.4416 67.197 13.2161 92.6977 10.4708C118.198 7.72551 141.988 11.9852 159.832 21.0652C177.681 30.1477 189.524 44.0164 191.297 60.4795Z",src:j.planet1,duration:6e4,width:100}),(0,n.jsx)(v,{x:.1*l.DX,y:.5*l.kz,motionPath:"M83.5 8.5C53.7174 28.4021 111.152 63.9236 144.5 77C171.404 87.5497 199.812 54.9569 218.5 77C238.224 100.265 221.881 131.248 200.5 153C180.755 173.087 146.428 150.115 131.5 174C109.161 209.743 198.724 206.677 211 247C234.919 325.566 24.9436 357.14 3 278C-18.6315 199.985 189.468 263.421 187 182.5C186.109 153.284 180.553 133.767 160.5 112.5C136.268 86.8012 84.1261 117.122 75 83C65.3292 46.8411 169.592 44.7735 144.5 17C128.376 -0.847078 103.498 -4.86358 83.5 8.5Z",src:j.planet2,duration:18e4,width:100})]});t(72985);let A=e=>{let{colorMode:s,type:t,flipped:r}=e;return"space"===t?(0,n.jsx)(P,{src:"/images/a-friendly-introduction-to-spring-physics/top-clamp.png"}):(0,n.jsxs)(D,{"data-flipped":String(r),children:[(0,n.jsx)(S,{src:"/images/a-friendly-introduction-to-spring-physics/plank-and-clamp.png"}),"earth"!==t&&"dark"===s&&(0,n.jsx)(E,{src:"/images/a-friendly-introduction-to-spring-physics/plank-and-clamp-outline.png"})]})},z=e=>{let{type:s,friction:t}=e;switch(s){case"earth":return(0,n.jsx)(f,{friction:t});case"space":return(0,n.jsx)(k,{});case"clear":return null;default:return(0,n.jsx)(X,{})}},M=(0,a.I)("div")({name:"Wrapper",class:"w3ksfmi",propsAsIs:!1}),S=(0,a.I)("img")({name:"PlankAndClampImg",class:"pdi0tvu",propsAsIs:!1}),P=(0,a.I)("img")({name:"ClampImg",class:"cwf3qya",propsAsIs:!1}),D=(0,a.I)("div")({name:"PlankWrapper",class:"pikuq59",propsAsIs:!1}),E=(0,a.I)(S)({name:"PlankAndClampOutline",class:"p28gbfn",propsAsIs:!0}),F=(0,a.I)("div")({name:"Children",class:"c1tzyw2y",propsAsIs:!1}),X=(0,a.I)("div")({name:"DefaultBackground",class:"d1qno442",propsAsIs:!1}),W=e=>{let{type:s,friction:t,flipped:a,children:c}=e,{colorMode:p}=r.useContext(i.dH);return(0,n.jsx)(o.default,{height:l.kz,children:(0,n.jsxs)(M,{style:{width:l.DX,height:l.kz},children:[(0,n.jsx)(A,{colorMode:p,type:s,flipped:a}),(0,n.jsx)(F,{children:c}),(0,n.jsx)(z,{type:s,friction:t})]})})};t(16366)},44805:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>M});var n=t(87687),r=t(52751),a=t(31928),i=t(35832),o=t(42077),l=t(19901),c=t(65601),p=t(6010),d=t(67638);let u=()=>{let e=r.useRef(null),s=r.useRef(null),t=(0,d.mZ)();return r.useEffect(()=>{if(!e.current){console.warn("Canvas reference not found on mount, so no canvas stuff will happen");return}if(s.current=e.current.getContext("2d"),s.current)return s.current.scale(t,t),()=>{var e;null===(e=s.current)||void 0===e||e.scale(1/t,1/t)}},[t]),{canvasRef:e,contextRef:s}};var g=t(68852);let m=2*Math.PI,h=e=>Math.round((0,g.S8)(e,30,400,2,18)),x=(0,a.I)("div")({name:"Wrapper",class:"w1169wkb",propsAsIs:!1}),f=(0,a.I)("canvas")({name:"Canvas",class:"c1yie0pz",propsAsIs:!1}),y=e=>{let{colorMode:s,dragY:t,tension:a,character:i}=e,o="dark"===s?"#FFF":"#000",{style:c,...y}=(0,d.RC)(p.$E,p.kO);r.useRef(!1);let{canvasRef:j,contextRef:v}=u();return r.useEffect(()=>{let e=function(e){let{width:s,defaultHeight:t,tension:n,dragY:r}=e,a=p.GF-p.CX+r,i=h(n);return(0,g.y1)(a).map(e=>{let s=Math.sin(m*i*(e/a));return{x:(0,g.S8)(s,-1,1,2,p.$E-2),y:e}})}({width:p.$E,defaultHeight:p.$E,maxHeight:p.kO,tension:a,dragY:t,springColor:o,character:i});!function(e){let{ctx:s,points:t,springColor:n}=e,{width:r,height:a}=s.canvas;s.clearRect(0,0,r,a),s.beginPath(),t.forEach((e,n)=>{0===n&&(s.moveTo(e.x,0),s.lineTo(e.x,p.CX)),s.lineTo(e.x,e.y+p.CX),n===t.length-1&&(s.lineTo(t[0].x,e.y+p.CX),s.lineTo(t[0].x,e.y+2*p.CX))}),s.strokeStyle=n,s.lineWidth=2,s.stroke(),s.closePath()}({ctx:v.current,points:e,springColor:o})},[a,t,o,i,v]),(0,n.jsxs)(x,{children:[(0,n.jsx)(f,{ref:j,...y,style:{...c,display:"block"}}),(0,n.jsx)(l.A,{size:p.GF})]})};t(76736);let j=(0,a.I)("img")({name:"CharacterImage",class:"cx2jgkd",propsAsIs:!1}),v=(0,a.I)(j)({name:"CharacterImageOutline",class:"c1qthvbz",propsAsIs:!0}),w=r.memo(e=>{let{colorMode:s,imageSrc:t,imageAlt:r,outlineImageSrc:a,width:i}=e,o="dark"===s?a:null;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(j,{draggable:!1,src:t,alt:r,style:{width:i}}),o&&(0,n.jsx)(v,{alt:"",src:o,style:{width:i}})]})});t(3960);let I="/images/a-friendly-introduction-to-spring-physics",b={PORING:{base:"".concat(I,"/poring-default.png"),active:"".concat(I,"/poring-grabbed.png"),outline:"".concat(I,"/poring-outline.png"),width:112.5,height:136.5,translateBy:-3.5,alt:"A cute lil' weight"},MIDGUY:{base:"".concat(I,"/midguy-default.png"),active:"".concat(I,"/midguy-grabbed.png"),outline:"".concat(I,"/midguy-outline.png"),width:142,height:195.5,translateBy:-2,alt:"A normal-sized smiling weight"},THWOMP:{base:"".concat(I,"/thwomp-default.png"),active:"".concat(I,"/thwomp-grabbed.png"),outline:"".concat(I,"/thwomp-outline.png"),width:200,height:250,translateBy:-5,alt:"A mean son of a gun, heavy A F"}},C=function(e){let s,t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return(s=e<=1?b.PORING:e<=2?b.MIDGUY:b.THWOMP).current=t?s.active:s.base,s},k=(0,a.I)("div")({name:"Wrapper",class:"whx7gvu",propsAsIs:!1}),A=(0,a.I)("button")({name:"Weight",class:"wrn6xjb",propsAsIs:!1}),z=(0,a.I)("button")({name:"CancelButton",class:"c1u64ws2",propsAsIs:!1}),M=e=>{let{tension:s=200,friction:t=17,mass:a=1.25,forceColorMode:d,clampStyle:u,includeCancelButton:g}=e,{colorMode:m,setColorMode:h}=r.useContext(c.dH),x=d||m,[f,j]=r.useState({isDragging:!1,dragY:0}),[v,I]=r.useState({reset:!1,from:{}}),[b,M]=r.useState(!1),S=g&&b,P=(0,i.i3)(e=>{let{down:s,movement:[,t]}=e;j({isDragging:s,dragY:s?t:0}),b||s||M(!0)},{rubberband:.1,axis:"y",bounds:{top:-(.5*p.GF),bottom:.5*p.GF}});r.useEffect(()=>{j({dragY:Math.random()})},[s,t,a]);let D=e=>{e.preventDefault(),["Enter"," "].includes(e.key)&&(I({reset:!0,from:{dragY:50}}),b||M(!0))};return(0,n.jsx)(k,{children:(0,n.jsx)(o.c7,{to:{dragY:f.dragY},config:{tension:s,friction:t,mass:a},immediate:f.isDragging,reset:v.reset,from:v.from,onRest:()=>{v.reset&&I({reset:!1,from:{}})},children:e=>{let t=C(a,f.isDragging);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(y,{colorMode:x,tension:s,dragY:e.dragY,character:t}),(0,n.jsx)(l.A,{size:8}),(0,n.jsx)(A,{...P(),onKeyPress:D,style:{transform:"translate(\n                    ".concat(t.translateBy,"px,\n                    ").concat(e.dragY,"px\n                  )")},children:(0,n.jsx)(w,{colorMode:x,imageSrc:t.current,imageAlt:t.alt,outlineImageSrc:t.outline,width:t.width})}),!!S&&(0,n.jsx)(z,{onClick:()=>{I({reset:!0,from:{}}),j({isDragging:!1,dragY:0})},children:"Stop motion"})]})}})})};t(48301)},62641:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>I});var n=t(87687),r=t(31928),a=t(52751),i=t(68852);let o=function(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:22,[t,n]=a.useState(e);return[t,a.useMemo(()=>(0,i.nF)(e=>n(e),s),[s])]};var l=t(69495),c=t(54729),p=t(6010),d=t(42521),u=t(44805);let g=e=>{let{id:s,icon:t,label:r,...a}=e;return(0,n.jsxs)(f,{children:[(0,n.jsx)(y,{src:t}),(0,n.jsx)(j,{htmlFor:s,children:r}),(0,n.jsx)(l.A,{orientation:"horizontal",id:s,...a,handleFocusColor:"var(--color-primary)"})]})},m=(0,r.I)("div")({name:"Wrapper",class:"wjo5wob",propsAsIs:!1}),h=(0,r.I)("div")({name:"ControlsWrapper",class:"c1cxcy0x",propsAsIs:!1}),x=(0,r.I)("div")({name:"Controls",class:"c1yeg9s5",propsAsIs:!1}),f=(0,r.I)("div")({name:"SliderWrapper",class:"sras88u",propsAsIs:!1}),y=(0,r.I)("img")({name:"SliderIcon",class:"s1ti69bd",propsAsIs:!1}),j=(0,r.I)("label")({name:"SliderLabel",class:"s8km9j7",propsAsIs:!1}),v=(0,r.I)("div")({name:"FlexSpacer",class:"f1rr8epv",propsAsIs:!1}),w=(0,r.I)("div")({name:"Snippet",class:"snbma2s",propsAsIs:!1}),I=()=>{let e;let[s,t]=o(p.Tu),[r,a]=o(p.Do),[i,l]=o(p.jN),f=0===i?"space":"earth";"space"===f?e="dark":"earth"===f&&(e="light");let y="{\n  mass: ".concat(s,",\n  tension: ").concat(r,",\n  friction: ").concat(i,",\n}");return(0,n.jsxs)(m,{children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(c.A,{style:{marginRight:48},children:"Experimenting with parameters is the best way to develop an intuitive understanding of them!"}),(0,n.jsxs)(x,{children:[(0,n.jsx)(g,{icon:"/images/a-friendly-introduction-to-spring-physics/icon-mass.png",id:"mass",label:"Mass",value:s,min:p._b,max:p.GM,step:p.UN,onChange:t,numOfMarks:3}),(0,n.jsx)(g,{icon:"/images/a-friendly-introduction-to-spring-physics/icon-tension.png",id:"tension",label:"Tension",value:r,min:p.sg,max:p.Kg,step:(p.Kg-p.sg)/16,onChange:a,numOfMarks:16}),(0,n.jsx)(g,{icon:"/images/a-friendly-introduction-to-spring-physics/icon-friction.png",id:"friction",label:"Friction",value:i,min:p.mM,max:p.eV,step:.1,onChange:l})]}),(0,n.jsx)(v,{}),(0,n.jsx)(w,{children:y})]}),(0,n.jsx)(d.default,{type:f,friction:i,children:(0,n.jsx)(u.default,{includeCancelButton:!0,forceColorMode:e,tension:r,friction:i,mass:s})})]})};t(80724)},6010:(e,s,t)=>{"use strict";t.d(s,{$E:()=>n,CX:()=>a,DX:()=>l,Do:()=>h,GF:()=>r,GM:()=>u,Kg:()=>m,Tu:()=>d,UN:()=>p,_b:()=>c,eV:()=>f,jN:()=>y,kO:()=>i,kz:()=>o,mM:()=>x,sg:()=>g});let n=40,r=220,a=10,i=420,o=540,l=245,c=.5,p=1.25,d=1.75,u=3,g=30,m=400,h=200,x=0,f=35,y=12},42379:e=>{e.exports={i1i8zjy7:"i1i8zjy7",i6el1g6:"i6el1g6",wcnkszl:"wcnkszl",shfe3ke:"shfe3ke"}},3960:e=>{e.exports={cx2jgkd:"cx2jgkd",c1qthvbz:"c1qthvbz"}},91835:e=>{e.exports={wto4ngm:"wto4ngm",cuu4xl:"cuu4xl",b1ltth29:"b1ltth29"}},16366:e=>{e.exports={w3ksfmi:"w3ksfmi",pdi0tvu:"pdi0tvu",cwf3qya:"cwf3qya",pikuq59:"pikuq59",p28gbfn:"p28gbfn",c1tzyw2y:"c1tzyw2y",d1qno442:"d1qno442"}},72985:e=>{e.exports={w1n953hj:"w1n953hj",puerl17:"puerl17","moveAlongPath-puerl17":"moveAlongPath-puerl17",ctx6yy2:"ctx6yy2"}},76736:e=>{e.exports={w1169wkb:"w1169wkb",c1yie0pz:"c1yie0pz"}},48301:e=>{e.exports={whx7gvu:"whx7gvu",wrn6xjb:"wrn6xjb",c1u64ws2:"c1u64ws2",fadeIn:"fadeIn"}},80724:e=>{e.exports={wjo5wob:"wjo5wob",c1cxcy0x:"c1cxcy0x",c1yeg9s5:"c1yeg9s5",sras88u:"sras88u",s1ti69bd:"s1ti69bd",s8km9j7:"s8km9j7",f1rr8epv:"f1rr8epv",snbma2s:"snbma2s"}}}]);
//# sourceMappingURL=62641.0300e9599a751816.js.map