(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[54466,28916,19962],{60678:(e,s,t)=>{"use strict";t.d(s,{Z:()=>l});var n=t(67841),r=t(79477),a=t(64833),i=t(82059);let o=r.forwardRef(function(e,s){let{value:t,onChange:r,handleSize:a=16,trackSize:o=3,backgroundColor:l="var(--color-background)",handleColor:p="var(--color-gray-900)",handleFocusColor:d=i.IW,style:u={},...g}=e;return(0,n.jsx)(c,{ref:s,style:{...u,"--handle-color":p,"--handle-focus-color":d,"--background-color":l,"--base-handle-size":a+"px","--track-size":o+"px"},type:"range",value:t,onChange:e=>{"function"==typeof r&&r(Number(e.target.value))},...g})}),c=(0,a.z)("input")({name:"Input",class:"i1i8zjy7",propsAsIs:!1}),l=o;t(43914)},13547:(e,s,t)=>{"use strict";t.d(s,{R0:()=>i,j$:()=>a,x_:()=>r});var n=t(79477);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}}},19962:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>q});var n=t(67841),r=t(79477),a=t(64833),i=t(17034),o=t(69804),c=t(52142),l=t(74631);t(39666);var p=t(95207);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),h=(0,l.Fv)(i,c.ev,c.Ip,10*a,a);return(0,p.Z)(()=>{g(e=>e>c.p0+200?-d:e+h)}),(0,n.jsx)(m,{src:o,style:{width:d,transform:"translate(".concat(u,"px, ").concat(t,"px)")}})},h=(0,a.z)("div")({name:"Wrapper",class:"wto4ngm",propsAsIs:!1}),m=(0,a.z)("img")({name:"CloudImg",class:"cuu4xl",propsAsIs:!1}),x=(0,a.z)("img")({name:"Birds",class:"b1ltth29",propsAsIs:!1}),f=e=>{let{friction:s}=e;return(0,n.jsxs)(h,{children:[(0,n.jsx)(g,{friction:s,initialX:.6*c.p0,y:.35*c.oh,baseSpeed:.1,src:u.cloud1,width:150}),(0,n.jsx)(g,{friction:s,initialX:-.2*c.p0,y:.7*c.oh,baseSpeed:.14,src:u.cloud2,width:160}),(0,n.jsx)(x,{src:u.birds})]})};t(49431);let y="/images/a-friendly-introduction-to-spring-physics",v={planet1:"".concat(y,"/gaseous-planet.png"),planet2:"".concat(y,"/shard-planet.png")},w=e=>{let{x:s,y:t,motionPath:r,src:a,width:i,duration:o}=e;return(0,n.jsx)(z,{src:a,style:{width:i,top:t,offsetPath:"path('".concat(r,"')"),animationDuration:o+"ms"}})},j=()=>(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)"})}),b=(0,a.z)("div")({name:"Wrapper",class:"w1n953hj",propsAsIs:!1}),z=(0,a.z)("img")({name:"PlanetImg",class:"puerl17",propsAsIs:!1}),C=(0,a.z)("div")({name:"CoverWrapper",class:"ctx6yy2",propsAsIs:!1}),I=()=>(0,n.jsxs)(b,{children:[(0,n.jsx)(C,{children:(0,n.jsx)(j,{})}),(0,n.jsx)(w,{x:.6*c.p0,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:v.planet1,duration:6e4,width:100}),(0,n.jsx)(w,{x:.1*c.p0,y:.5*c.oh,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:v.planet2,duration:18e4,width:100})]});t(63865);let k=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)(S,{"data-flipped":String(r),children:[(0,n.jsx)(M,{src:"/images/a-friendly-introduction-to-spring-physics/plank-and-clamp.png"}),"earth"!==t&&"dark"===s&&(0,n.jsx)(Y,{src:"/images/a-friendly-introduction-to-spring-physics/plank-and-clamp-outline.png"})]})},A=e=>{let{type:s,friction:t}=e;switch(s){case"earth":return(0,n.jsx)(f,{friction:t});case"space":return(0,n.jsx)(I,{});case"clear":return null;default:return(0,n.jsx)(R,{})}},W=(0,a.z)("div")({name:"Wrapper",class:"w3ksfmi",propsAsIs:!1}),M=(0,a.z)("img")({name:"PlankAndClampImg",class:"pdi0tvu",propsAsIs:!1}),P=(0,a.z)("img")({name:"ClampImg",class:"cwf3qya",propsAsIs:!1}),S=(0,a.z)("div")({name:"PlankWrapper",class:"pikuq59",propsAsIs:!1}),Y=(0,a.z)(M)({name:"PlankAndClampOutline",class:"p28gbfn",propsAsIs:!0}),F=(0,a.z)("div")({name:"Children",class:"c1tzyw2y",propsAsIs:!1}),R=(0,a.z)("div")({name:"DefaultBackground",class:"d1qno442",propsAsIs:!1}),q=e=>{let{type:s,friction:t,flipped:a,children:l}=e,{colorMode:p}=r.useContext(i.vJ);return(0,n.jsx)(o.default,{height:c.oh,children:(0,n.jsxs)(W,{style:{width:c.p0,height:c.oh},children:[(0,n.jsx)(k,{colorMode:p,type:s,flipped:a}),(0,n.jsx)(F,{children:l}),(0,n.jsx)(A,{type:s,friction:t})]})})};t(2628)},28916:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>W});var n=t(67841),r=t(79477),a=t(64833),i=t(83815),o=t(80243),c=t(75865),l=t(17034),p=t(52142),d=t(13547);let u=()=>{let e=r.useRef(null),s=r.useRef(null),t=(0,d.x_)();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(74631);let h=2*Math.PI,m=e=>Math.round((0,g.Fv)(e,30,400,2,18)),x=(0,a.z)("div")({name:"Wrapper",class:"w1169wkb",propsAsIs:!1}),f=(0,a.z)("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:l,...y}=(0,d.R0)(p.Hu,p.wn);r.useRef(!1);let{canvasRef:v,contextRef:w}=u();return r.useEffect(()=>{let e=function(e){let{width:s,defaultHeight:t,tension:n,dragY:r}=e,a=p.cW-p.dy+r,i=m(n);return(0,g.w6)(a).map(e=>{let s=Math.sin(h*i*(e/a));return{x:(0,g.Fv)(s,-1,1,2,p.Hu-2),y:e}})}({width:p.Hu,defaultHeight:p.Hu,maxHeight:p.wn,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.dy)),s.lineTo(e.x,e.y+p.dy),n===t.length-1&&(s.lineTo(t[0].x,e.y+p.dy),s.lineTo(t[0].x,e.y+2*p.dy))}),s.strokeStyle=n,s.lineWidth=2,s.stroke(),s.closePath()}({ctx:w.current,points:e,springColor:o})},[a,t,o,i,w]),(0,n.jsxs)(x,{children:[(0,n.jsx)(f,{ref:v,...y,style:{...l,display:"block"}}),(0,n.jsx)(c.Z,{size:p.cW})]})};t(4518);let v=(0,a.z)("img")({name:"CharacterImage",class:"cx2jgkd",propsAsIs:!1}),w=(0,a.z)(v)({name:"CharacterImageOutline",class:"c1qthvbz",propsAsIs:!0}),j=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)(v,{draggable:!1,src:t,alt:r,style:{width:i}}),o&&(0,n.jsx)(w,{alt:"",src:o,style:{width:i}})]})});t(60579);let b="/images/a-friendly-introduction-to-spring-physics",z={PORING:{base:"".concat(b,"/poring-default.png"),active:"".concat(b,"/poring-grabbed.png"),outline:"".concat(b,"/poring-outline.png"),width:112.5,height:136.5,translateBy:-3.5,alt:"A cute lil' weight"},MIDGUY:{base:"".concat(b,"/midguy-default.png"),active:"".concat(b,"/midguy-grabbed.png"),outline:"".concat(b,"/midguy-outline.png"),width:142,height:195.5,translateBy:-2,alt:"A normal-sized smiling weight"},THWOMP:{base:"".concat(b,"/thwomp-default.png"),active:"".concat(b,"/thwomp-grabbed.png"),outline:"".concat(b,"/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?z.PORING:e<=2?z.MIDGUY:z.THWOMP).current=t?s.active:s.base,s},I=(0,a.z)("div")({name:"Wrapper",class:"whx7gvu",propsAsIs:!1}),k=(0,a.z)("button")({name:"Weight",class:"wrn6xjb",propsAsIs:!1}),A=(0,a.z)("button")({name:"CancelButton",class:"c1u64ws2",propsAsIs:!1}),W=e=>{let{tension:s=200,friction:t=17,mass:a=1.25,forceColorMode:d,clampStyle:u,includeCancelButton:g}=e,{colorMode:h,setColorMode:m}=r.useContext(l.vJ),x=d||h,[f,v]=r.useState({isDragging:!1,dragY:0}),[w,b]=r.useState({reset:!1,from:{}}),[z,W]=r.useState(!1),M=g&&z,P=(0,i.c0)(e=>{let{down:s,movement:[,t]}=e;v({isDragging:s,dragY:s?t:0}),z||s||W(!0)},{rubberband:.1,axis:"y",bounds:{top:-(.5*p.cW),bottom:.5*p.cW}});r.useEffect(()=>{v({dragY:Math.random()})},[s,t,a]);let S=e=>{e.preventDefault(),["Enter"," "].includes(e.key)&&(b({reset:!0,from:{dragY:50}}),z||W(!0))};return(0,n.jsx)(I,{children:(0,n.jsx)(o.AM,{to:{dragY:f.dragY},config:{tension:s,friction:t,mass:a},immediate:f.isDragging,reset:w.reset,from:w.from,onRest:()=>{w.reset&&b({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)(c.Z,{size:8}),(0,n.jsx)(k,{...P(),onKeyPress:S,style:{transform:"translate(\n                    ".concat(t.translateBy,"px,\n                    ").concat(e.dragY,"px\n                  )")},children:(0,n.jsx)(j,{colorMode:x,imageSrc:t.current,imageAlt:t.alt,outlineImageSrc:t.outline,width:t.width})}),!!M&&(0,n.jsx)(A,{onClick:()=>{b({reset:!0,from:{}}),v({isDragging:!1,dragY:0})},children:"Stop motion"})]})}})})};t(8598)},54466:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>b});var n=t(67841),r=t(64833),a=t(79477),i=t(74631);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.P2)(e=>n(e),s),[s])]};var c=t(60678),l=t(40996),p=t(52142),d=t(19962),u=t(28916);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)(v,{htmlFor:s,children:r}),(0,n.jsx)(c.Z,{orientation:"horizontal",id:s,...a,handleFocusColor:"var(--color-primary)"})]})},h=(0,r.z)("div")({name:"Wrapper",class:"wjo5wob",propsAsIs:!1}),m=(0,r.z)("div")({name:"ControlsWrapper",class:"c1cxcy0x",propsAsIs:!1}),x=(0,r.z)("div")({name:"Controls",class:"c1yeg9s5",propsAsIs:!1}),f=(0,r.z)("div")({name:"SliderWrapper",class:"sras88u",propsAsIs:!1}),y=(0,r.z)("img")({name:"SliderIcon",class:"s1ti69bd",propsAsIs:!1}),v=(0,r.z)("label")({name:"SliderLabel",class:"s8km9j7",propsAsIs:!1}),w=(0,r.z)("div")({name:"FlexSpacer",class:"f1rr8epv",propsAsIs:!1}),j=(0,r.z)("div")({name:"Snippet",class:"snbma2s",propsAsIs:!1}),b=()=>{let e;let[s,t]=o(p.Wj),[r,a]=o(p.xz),[i,c]=o(p.Y5),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)(h,{children:[(0,n.jsxs)(m,{children:[(0,n.jsx)(l.Z,{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.yK,max:p.hH,step:p.A5,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.rN,max:p.Y1,step:(p.Y1-p.rN)/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.ev,max:p.Ip,step:.1,onChange:c})]}),(0,n.jsx)(w,{}),(0,n.jsx)(j,{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(5534)},52142:(e,s,t)=>{"use strict";t.d(s,{A5:()=>p,Hu:()=>n,Ip:()=>f,Wj:()=>d,Y1:()=>h,Y5:()=>y,cW:()=>r,dy:()=>a,ev:()=>x,hH:()=>u,oh:()=>o,p0:()=>c,rN:()=>g,wn:()=>i,xz:()=>m,yK:()=>l});let n=40,r=220,a=10,i=420,o=540,c=245,l=.5,p=1.25,d=1.75,u=3,g=30,h=400,m=200,x=0,f=35,y=12},43914:e=>{e.exports={i1i8zjy7:"i1i8zjy7",i6el1g6:"i6el1g6",wcnkszl:"wcnkszl",shfe3ke:"shfe3ke"}},60579:e=>{e.exports={cx2jgkd:"cx2jgkd",c1qthvbz:"c1qthvbz"}},49431:e=>{e.exports={wto4ngm:"wto4ngm",cuu4xl:"cuu4xl",b1ltth29:"b1ltth29"}},2628:e=>{e.exports={w3ksfmi:"w3ksfmi",pdi0tvu:"pdi0tvu",cwf3qya:"cwf3qya",pikuq59:"pikuq59",p28gbfn:"p28gbfn",c1tzyw2y:"c1tzyw2y",d1qno442:"d1qno442"}},63865:e=>{e.exports={w1n953hj:"w1n953hj",puerl17:"puerl17","moveAlongPath-puerl17":"moveAlongPath-puerl17",ctx6yy2:"ctx6yy2"}},4518:e=>{e.exports={w1169wkb:"w1169wkb",c1yie0pz:"c1yie0pz"}},8598:e=>{e.exports={whx7gvu:"whx7gvu",wrn6xjb:"wrn6xjb",c1u64ws2:"c1u64ws2",fadeIn:"fadeIn"}},5534:e=>{e.exports={wjo5wob:"wjo5wob",c1cxcy0x:"c1cxcy0x",c1yeg9s5:"c1yeg9s5",sras88u:"sras88u",s1ti69bd:"s1ti69bd",s8km9j7:"s8km9j7",f1rr8epv:"f1rr8epv",snbma2s:"snbma2s"}}}]);
//# sourceMappingURL=54466.c9b76d572b6d016c.js.map