bundle.js

!function(t){var e={};function i(s){if(e[s])return e[s].exports;var n=e[s]={i:s,l:!1,exports:{}};return t[s].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=t,i.c=e,i.d=function(t,e,s){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:s})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(i.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(s,n,function(e){return t[e]}.bind(null,n));return s},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";function s(t,e=null,i=null){const s=document.createElement(t);return e&&function(t,e){Object.keys(e).forEach(i=>{switch(i){case"classes":e[i].forEach(e=>t.classList.add(e));break;case"textContent":t.textContent=e[i];break;case"selected":t.selected=e[i];default:t.setAttribute(i,e[i])}})}(s,e),i&&function(t,e){e.forEach(e=>t.appendChild(e))}(s,i),s}i.r(e);class n{constructor({parent:t,max:e,min:i,step:s=1,value:n,prop:a,scope:r,updateFn:h,label:l}){this.prop=a,this.scope=r,this.updateFn=h,this.label=l,this.max=e,this.min=i,this.step=s,this.value=n,this.parent=t,this.node=null,this.input=null,this.output=null,this.render(),this.eventListener()}render(){this.input=s("input",{type:"range",id:this.prop,max:this.max,min:this.min,step:this.step,value:this.value}),this.output=s("output",{textContent:this.value}),this.node=s("div",{classes:["slider"]},[s("label",{for:this.prop,textContent:`${this.label} — `}),this.output,s("br"),this.input]),this.parent.appendChild(this.node)}disable(){this.input.disabled=!0,this.node.style.opacity=.3}enable(){this.input.disabled=!1,this.node.style.opacity=1}eventListener(){this.input.addEventListener("input",this.eventHandler.bind(this))}eventHandler(t){const e=this.input.valueAsNumber;this.output.textContent=e,this.scope[this.prop]=e,this.updateFn()}}class a{constructor({parent:t,prop:e,scope:i=null,updateFn:s,value:n,labelTrue:a="on",labelFalse:r="off",title:h=null}){this.prop=e,this.scope=i,this.updateFn=s,this.labelTrue=a,this.labelFalse=r,this.value=n,this.title=h,this.node=null,this.parent=t,this.render(),this.eventListener()}render(){this.node=s("button",{id:this.prop,classes:["toggle"]},null),this.title&&(this.node.title=this.title),this.value?this.node.innerHTML=this.labelTrue:(this.node.classList.add("deactivated"),this.node.innerHTML=this.labelFalse),this.parent.appendChild(this.node)}eventListener(){this.node.addEventListener("click",this.eventHandler.bind(this))}eventHandler(t){this.node.classList.toggle("deactivated"),this.value=!this.value,this.value?this.node.innerHTML=this.labelTrue:this.node.innerHTML=this.labelFalse,this.scope&&(this.scope[this.prop]=this.value),this.updateFn()}}class r{constructor({parent:t,fn:e,updateFn:i=null,label:s,title:n=null,id:a}){this.fn=e,this.updateFn=i,this.label=s,this.id=a,this.title=n,this.node=null,this.parent=t,this.render(),this.eventListener()}render(){this.node=s("button",{id:this.id},null),this.node.innerHTML=this.label,this.title&&(this.node.title=this.title),this.parent.appendChild(this.node)}eventListener(){this.node.addEventListener("click",this.eventHandler.bind(this))}eventHandler(t){this.fn(),this.updateFn&&this.updateFn()}}const h={saveImg:'<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="save" class="svg-inline--fa fa-save fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"></path></svg>',erase:'<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eraser" class="svg-inline--fa fa-eraser fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z"></path></svg>',randomOptions:'<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="dice-five" class="svg-inline--fa fa-dice-five fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M384 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V96c0-35.35-28.65-64-64-64zM128 384c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-192c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm96 96c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm96 96c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-192c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"></path></svg>',play:'<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play" class="svg-inline--fa fa-play fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>',pause:'<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pause" class="svg-inline--fa fa-pause fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"></path></svg>',cross:'<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>',circle:'<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle" class="svg-inline--fa fa-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path></svg>',circleSolid:'<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" class="svg-inline--fa fa-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>',restart:'<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="redo" class="svg-inline--fa fa-redo fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"></path></svg>',yingYang:'<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="yin-yang" class="svg-inline--fa fa-yin-yang fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 376c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-128c-53.02 0-96 42.98-96 96s42.98 96 96 96c-106.04 0-192-85.96-192-192S141.96 64 248 64c53.02 0 96 42.98 96 96s-42.98 96-96 96zm0-128c-17.67 0-32 14.33-32 32s14.33 32 32 32 32-14.33 32-32-14.33-32-32-32z"></path></svg>'};function l(t){const e=document.querySelector("#ui"),i=document.createElement("div"),s=document.createElement("p");return s.textContent=t,i.appendChild(s),e.appendChild(i),i}function o(t,e=t.min,i=t.max){t.input.value=function(t,e,i=!0){return i?Math.floor(Math.random()*(e-t+1)+t):Math.random()*(e-t)+t}(e,i,!1),t.eventHandler()}class c{constructor(t=0,e=0){this.x=t,this.y=e}static fromPolar(t,e,i=e){const s=e*Math.cos(t),n=i*Math.sin(t);return new this(Math.floor(s),Math.floor(n))}static add(t,e){return new this(t.x+e.x,t.y+e.y)}static sub(t,e){return new this(t.x-e.x,t.y-e.y)}static eq(t,e){return t.x===e.x&&t.y===e.y}add(t){return this.x+=t.x,this.y+=t.y,this}addX(t){return this.x+=t,this}addY(t){return this.y+=t,this}sub(t){return this.x-=t.x,this.y-=t.y,this}subX(t){return this.x-=t,this}subY(t){return this.y-=t,this}mul(t){return this.x=this.x*t,this.y=this.y*t,this}div(t){if(0!==t)return this.x=this.x/t,this.y=this.y/t,this}get magnitude(){return Math.hypot(this.x,this.y)}normalize(){return this.div(this.magnitude),this}getDistance(t={x:0,y:0}){const e=t.x-this.x,i=t.y-this.y;return Math.hypot(e,i)}getAngle(t={x:0,y:0}){return Math.atan2(this.y-t.y,this.x-t.x)}getMiddle(t){const e=.5*(this.x+t.x),i=.5*(this.y+t.y);return new c(e,i)}eq(t){return this.x===t.x&&this.y===t.y}isOpposite(t){return!this.eq(t)&&(this.x===-t.x&&this.y===-t.y)}copy(){return new c(this.x,this.y)}set(t){return this.x=t.x,this.y=t.y,this}change(t,e){return this.x=t,this.y=e,this}}class p{constructor({type:t="sin",amp:e,freq:i=1,phase:s=0,vShift:n=0,angleVel:a,angle:r=0}){this.type=t,this.amp=e,this.freq=i,this.phase=s,this.vShift=n,this.angle=r,this.angleVel=a,this.orig={amp:e,freq:i,phase:s,vShift:n,angle:r,angleVel:a}}oscillate(t=this.angleVel){return this.angle+=t,this.amp*Math.cos(this.freq*this.angle+this.phase)+this.vShift}reset(){return Object.entries(this.orig).forEach((t,e)=>this[t]=e),this}copy(){return new this({amp:this.amp,freq:this.freq,phase:this.phase,vShift:this.vShift,angle:this.angle,angleVel:this.angleVel,type:this.type})}}class u{constructor({ctx:t,radius:e,position:i,damping:s=.9,fixed:n=!1,boundaries:a={n:0,s:t.canvas.clientHeight,w:0,e:t.canvas.clientWidth}}){this.ctx=t,this.boundaries=a,this.radius=e,this.fixed=n,this.position=i,this.acceleration=new c,this.velocity=new c,this.damping=s,this.dragging=!1,this.dragOffset=new c}applyForce(t){this.acceleration.add(t)}update(){this.fixed||(this.velocity.add(this.acceleration),this.velocity.mul(this.damping),this.position.add(this.velocity),this.checkEdges(),this.acceleration.mul(0))}draw(){!function(t,e,i){t.beginPath(),t.arc(i.x,i.y,e,0,2*Math.PI,!1),t.closePath()}(this.ctx,this.radius,this.position),this.ctx.fill()}checkEdges(){(this.position.x>this.boundaries.e||this.position.x<this.boundaries.w)&&(this.position.x=this.position.x>this.boundaries.e?this.boundaries.e:this.boundaries.w,this.velocity.x*=-1),(this.position.y>this.boundaries.s||this.position.y<this.boundaries.n)&&(this.position.y=this.position.y>this.boundaries.s?this.boundaries.s:this.boundaries.n,this.velocity.y*=-1)}handleClick(t,e,i=!1){const s=new c(t,e),n=s.getDistance(this.position);(n<8&&!i||n<30)&&(this.dragging=!0,this.dragOffset.set(this.position.copy().sub(s)))}handleDrag(t,e){this.dragging&&this.position.change(t+this.dragOffset.x,e+this.dragOffset.y)}stopDragging(){this.dragging=!1}}class d{constructor({ctx:t,a:e,b:i,restLength:s=e.getDistance(i),strength:n=.2}){this.ctx=t,this.a=e,this.b=i,this.restLength=s,this.strength=n}update(){let t=c.sub(this.a.position,this.b.position),e=t.magnitude-this.restLength;t.normalize().mul(-1*this.strength*e),this.a.dragging||this.a.applyForce(t),this.b.dragging||(t.mul(-1),this.b.applyForce(t))}draw(){this.ctx.beginPath(),this.ctx.moveTo(this.a.position.x,this.a.position.y),this.ctx.lineTo(this.b.position.x,this.b.position.y),this.ctx.stroke()}}class g{constructor({ctx:t,lineWidth:e,rowNumber:i,sep:s,radius:n,origin:a,structuralSpringStrength:r,shearSpringStrength:h,bendSpringStrength:l}){this.ctx=t,this.lineWidth=e,this.radius=n,this.origin=a,this.sep=s,this.rowNumber=i,this.width=i*s,this.structuralSpringStrength=r,this.shearSpringStrength=h,this.bendSpringStrength=l,this.setup()}col(t){return t%this.rowNumber}row(t){return Math.floor(t/this.rowNumber)}lockParticles(...t){t.length>0&&t.forEach(t=>this.particles[t].fixed=!0)}setup(){this.setParticles(),this.setStructuralSprings(),this.setShearSprings(),this.setBendSprings(),this.ctx.lineWidth=this.lineWidth}setParticles(){this.particles=[];const t=new c(this.rowNumber/2-.5,this.rowNumber/2-.5);this.particles=Array.from({length:this.rowNumber*this.rowNumber},(e,i)=>{return new u({ctx:this.ctx,radius:this.radius,position:new c((this.col(i)-t.x)*this.sep+this.origin.x,(this.row(i)-t.y)*this.sep+this.origin.y)})})}setStructuralSprings(t=this.structuralSpringStrength,e=this.sep){this.structuralSprings=[];for(let[i,s]of this.particles.entries())this.col(i)<this.rowNumber-1&&this.structuralSprings.push(new d({ctx:this.ctx,restLength:e,strength:t,a:s,b:this.particles[i+1]})),this.row(i)<this.rowNumber-1&&this.structuralSprings.push(new d({ctx:this.ctx,restLength:e,strength:t,a:s,b:this.particles[i+this.rowNumber]}))}setShearSprings(t=this.shearSpringStrength,e=this.sep){this.shearSprings=[];for(let[i,s]of this.particles.entries())this.col(i)>0&&this.row(i)<this.rowNumber-1&&this.shearSprings.push(new d({ctx:this.ctx,restLength:e,strength:t,a:s,b:this.particles[i+this.rowNumber-1]})),this.col(i)<this.rowNumber-1&&this.row(i)<this.rowNumber-1&&this.shearSprings.push(new d({ctx:this.ctx,restLength:e,strength:t,a:s,b:this.particles[i+this.rowNumber+1]}))}setBendSprings(t=this.bendSpringStrength){this.bendSprings=[];for(let[e,i]of this.particles.entries())this.col(e)<this.rowNumber-2&&this.bendSprings.push(new d({ctx:this.ctx,restLength:2*this.sep,strength:t,a:i,b:this.particles[e+2]})),this.row(e)<this.rowNumber-2&&this.bendSprings.push(new d({ctx:this.ctx,restLength:2*this.sep,strength:t,a:i,b:this.particles[e+2*this.rowNumber]}))}update(){this.structuralSprings.forEach(t=>t.update()),this.shearSprings.forEach(t=>t.update()),this.bendSprings.forEach(t=>t.update()),this.particles.forEach(t=>t.update())}drawStructuralSprings(){this.structuralSprings.forEach(t=>t.draw())}drawShearSprings(){this.shearSprings.forEach(t=>t.draw())}drawBendSprings(){this.bendSprings.forEach(t=>t.draw())}drawSprings(){this.drawStructuralSprings(),this.drawShearSprings(),this.drawBendSprings()}drawParticles(){this.particles.forEach(t=>t.draw())}setDragging(){this.ctx.canvas.addEventListener("touchstart",t=>{t.preventDefault();const e=t.touches[0];this.particles.forEach(t=>t.handleClick(e.pageX,e.pageY,!0))}),this.ctx.canvas.addEventListener("touchmove",t=>{t.preventDefault();const e=t.touches[0];this.particles.forEach(t=>t.handleDrag(e.pageX,e.pageY))}),this.ctx.canvas.addEventListener("touchend",t=>{t.preventDefault(),this.particles.forEach(t=>t.stopDragging())}),this.ctx.canvas.addEventListener("mousedown",t=>{1===t.buttons&&this.particles.forEach(e=>e.handleClick(t.clientX,t.clientY))}),this.ctx.canvas.addEventListener("mousemove",t=>{this.particles.forEach(e=>e.handleDrag(t.clientX,t.clientY))}),this.ctx.canvas.addEventListener("mouseup",t=>{this.particles.forEach(t=>t.stopDragging())})}}!function(){const t=document.querySelector("#panel"),e=document.querySelector("#toggle-panel");new a({parent:e,prop:"toggle-panel-btn",value:!1,labelTrue:h.circleSolid,labelFalse:h.cross,title:"open/close menu",updateFn:function(){this.value?t.classList.add("hide"):t.classList.remove("hide")}})}(),function({ctx:t}){const e=t.canvas.clientHeight,i=t.canvas.clientWidth,u=new c(i/2,e/2),d=new p({amp:127.5,vShift:127.5,angleVel:.03});let f="white",v=new g({ctx:t,rowNumber:10,sep:35,radius:2,lineWidth:.3,origin:u,structuralSpringStrength:.2,shearSpringStrength:.08,bendSpringStrength:.09});v.setDragging(),t.fillStyle="rgba(255, 255, 255, .05)",t.strokeStyle="rgba(0, 0, 0, .05)";const w=e=>{t.fillStyle=f,t.fillRect(0,0,t.canvas.width,t.canvas.height)};w();const m=t=>{v.lineWidth>0&&v.drawStructuralSprings(),v.drawParticles()},b=e=>{const i=d.oscillate();t.fillStyle=`rgba(${i}, ${i}, ${i}, .5)`,t.strokeStyle=`rgba(${i}, ${i}, ${i}, .5)`,v.update()},x=function(t,e=0,i=(t=>void 0)){let s,n=!1;const a=function(t){let e=0,i=0;const s=t;return t=>{let n=t-e;if(e=t,(i+=n)>s)return i=0,!0}}(e),r=t=>{n||(n=!0),s=window.requestAnimationFrame(l)},h=t=>{s&&(window.cancelAnimationFrame(s),s=void 0,n=!1)},l=(e=0)=>{i()?h():(a(e)&&t(),r())};return{start:r,stop:h,toggle:t=>{(n=!n)?r():h()},get animating(){return n}}}(t=>{m(),b()},0);return document.addEventListener("keyup",t=>{"s"==t.key&&x.toggle(),"e"==t.key&&w(),"r"==t.key&&(w(),v.setup())}),function({mesh:t,oscillator:e,updateFn:i,eraseFn:s,restartFn:c,invertFn:p,animationToggleFn:u,saveImgFn:d}){const g=document.querySelector("#buttons"),f=(new r({parent:g,fn:s,updateFn:null,label:h.erase,title:"erase",id:"erase"}),new r({parent:g,fn:c,updateFn:null,label:h.restart,title:"restart",id:"restart"}),new a({parent:g,prop:"toggle-animation-btn",value:!0,labelTrue:h.pause,labelFalse:h.play,updateFn:u,title:"play/pause"}),new r({parent:g,fn:p,updateFn:null,label:h.yingYang,title:"invert colors",id:"invert-colors"}),new r({parent:g,fn:d,updateFn:null,label:h.saveImg,title:"download png",id:"saveImg"}),l("Grid options")),v=new n({parent:f,max:30,min:2,value:10,label:"row #",prop:"rowNumber",scope:t,updateFn:i}),w=new n({parent:f,max:65,min:10,value:35,label:"nodes distance",prop:"sep",scope:t,updateFn:i}),m=new n({parent:f,max:10,min:0,value:2,label:"particles radius",prop:"radius",scope:t,updateFn:i}),b=new n({parent:f,max:10,min:0,value:.3,step:.01,label:"line width",prop:"lineWidth",scope:t,updateFn:i}),x=l("Spring forces"),y=new n({parent:x,max:.3,min:0,value:.2,step:.01,label:"structural",prop:"structuralSpringStrength",scope:t,updateFn:i}),S=new n({parent:x,max:.3,min:0,value:.08,step:.01,label:"shear",prop:"shearSpringStrength",scope:t,updateFn:i}),F=new n({parent:x,max:.3,min:0,value:.09,step:.01,label:"bend",prop:"bendSpringStrength",scope:t,updateFn:i}),L=l("Other options"),C=new n({parent:L,max:.1,min:0,value:.03,step:.001,label:"oscillator speed",prop:"angleVel",scope:e,updateFn:i}),M=new n({parent:L,max:255,min:0,value:127.5,step:.5,label:"color lightness",prop:"vShift",scope:e,updateFn:i});new r({parent:g,updateFn:null,label:h.randomOptions,title:"randomize values",id:"randomOptions",fn:t=>{o(v),o(w),o(m),o(b),o(y),o(S),o(F),o(C),o(M,87.5,167.5)}})}({mesh:v,oscillator:d,eraseFn:t=>{w()},animationToggleFn:t=>{x.toggle()},saveImgFn:e=>{x.animating&&x.stop(),function(t){const e=s("a",{download:"img.png",href:t.toDataURL("image/png"),style:"display:none"});document.body.appendChild(e),e.click(),e.parentNode.removeChild(e)}(t.canvas)},restartFn:t=>{w(),v.setup()},invertFn:t=>{f="white"===f?"black":"white",w()},updateFn:t=>{w(),v.setup(),d.vShift>127.5?d.amp=127.5-d.vShift%127.5:d.amp=d.vShift}}),{clean:w,draw:m,update:b,animation:x}}({ctx:function(t="canvas"){const e=window.devicePixelRatio,i=window.innerHeight,s=window.innerWidth,n=document.querySelector(t);n.width=s*e,n.height=i*e;const a=n.getContext("2d");return a.scale(e,e),a}()}).animation.start()}]);