29:null 2a:["$","title",null,{"children":"Pendulum pendulus flexibile A pendulum simulation with canvas and javascript | Mathieu Jouhet | Observable"}] 2f:Te3c,/* Pendulum animation with pseudo friction */ canvas = { // We create a new canvas each time, so resizing or changing // orientation doesn't produce any visual glitch const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.fps = this && this.fps || []; canvas.oscillation = this && this.oscillation || []; // Compute simulation initial state // Rotating counter clockwise makes it more intuitive for sliders const angle_rad = - angle * Math.PI / 180; const k = - mass * gravity / (length + radius); let velocity = - initialVelocity; // Resume/continue with new settings or start over? const shouldResume = ( this && this.initParams && resetTime === this.initParams.resetTime && angle_rad === this.initParams.angle_rad && initialVelocity === this.initParams.initialVelocity ); // Using computed k no matter what canvas.k = k; if(shouldResume) { // Resuming simulation console.log('Resuming simulation'); canvas.angle_rad = this.angle_rad; canvas.velocity = this.velocity; canvas.acceleration = this.acceleration; canvas.initParams = this.initParams; canvas.lastTick = this.lastTick; } else { // New simulation console.log('New simulation'); canvas.angle_rad = angle_rad; canvas.velocity = velocity; canvas.lastTick = this && this.lastTick || Date.now(); canvas.initParams = { k, angle_rad, velocity, initialVelocity, resetTime, playing: ( this && this.initParams && typeof this.initParams.playing !== "undefined" && this.initParams.resetTime === resetTime ) ? this.initParams.playing : playing }; } while (playing === canvas.initParams.playing) { while ( Math.abs(canvas.velocity) > 0.0005 || Math.abs(canvas.angle_rad % (Math.PI)) > 0.01 ) { // When using the sliders, the frames can be drawn very quicky after // the previous one was drawn, so we need to delay physics accordingly const target = 1000 / maxFps; let delay = 0; // Use this.lastTick to only limit uppon changing params // Use canvas.lastTick to always limit if(canvas.lastTick) { delay = (Date.now() - canvas.lastTick); delay = (!limit && delay > target * 3 ? target : delay ); } const physicsFrame = limit === false || (delay >= target); if (physicsFrame) { const acceleration = canvas.k * Math.sin(canvas.angle_rad); const timestep = (limit ? target : delay) / 1000; velocity = canvas.velocity + acceleration * timestep; velocity -= mass === 0 ? 0 : velocity * friction * timestep; canvas.angle_rad += velocity * timestep; canvas.velocity = velocity; canvas.acceleration = acceleration; canvas.oscillation.push(canvas.angle_rad / (2 * Math.PI)); if(canvas.oscillation.length > width / 4) { canvas.oscillation.pop(); } } yield drawPendulum( context, canvas.angle_rad, canvas.velocity, physicsFrame ); } // Simulation is over, set angle_rad or initialVelocity to undefined // to trigger a new simulation, playing also needs not to be defined canvas.initParams = { angle_rad: undefined }; yield drawPendulum( context, canvas.angle_rad, canvas.velocity ); } // Simulation paused while(true) { canvas.lastTick = Date.now(); yield drawPendulum( context, canvas.angle_rad, canvas.velocity ); } }30:T595,outputs = html`

K: ${Math.round(canvas.k * 100) / 100} Angle: ${ Math.round( -((canvas.angle_rad) % (2 * Math.PI)) * 180 / Math.PI )}° Revolutions: ${Math.floor(Math.abs((canvas.angle_rad) / (2 * Math.PI)))} Velocity: ${Math.round( canvas.velocity * (Math.abs(canvas.velocity) > 10 ? 10 : 100) ) / (Math.abs(canvas.velocity) > 10 ? 10 : 100)} Acceleration: ${Math.round( canvas.acceleration * (Math.abs(canvas.acceleration) > 10 ? 10 : 100) ) / (Math.abs(canvas.acceleration) > 10 ? 10 : 100)}

`31:T6c3,oscillation = { const height = 80; const margin = 0; // Use the same canvas unless width changes, // in we which case we need to resize it to adapt to the new width const context = this && this._width === width && this.context || DOM.context2d(width, height + margin); const _canvas = context.canvas; if (!(this && this.context)) { _canvas.context = context; _canvas._width = width; } let length = _canvas.length || 0; const imageData = context.getImageData(2, 0, context.canvas.width, context.canvas.height); context.putImageData(imageData, 0, 0); // now clear the right-most pixels: // context.clearRect(context.canvas.width - 1, 0, 1, context.canvas.height); let angle = canvas.angle_rad % (2 * Math.PI); // console.log('o', angle * 180 / Math.PI); if (angle > Math.PI) { angle = -(2 * Math.PI - angle); } if (angle < -Math.PI) { angle = -(2 * -Math.PI - angle); } // console.log(angle * 180 / Math.PI); const o = angle / (2 * Math.PI); const h = o * height; const x = width - 1; const y = margin + height / 2 - h; // Draw median line context.lineWidth = 1; context.beginPath(); context.moveTo(_canvas.lastX ? _canvas.lastX : 0, (height + margin) / 2); context.lineTo(width, (height + margin) / 2); context.strokeStyle = `#dadade44`; context.stroke(); // Plot graph segment context.lineWidth = 1.75; context.beginPath(); context.fillStyle = "transparent"; context.moveTo( _canvas.lastX ? _canvas.lastX : x, _canvas.lastY ? _canvas.lastY : y ); context.lineTo(x + 1 , y); _canvas.lastX = x; _canvas.lastY = y; context.strokeStyle = "#909090"; context.stroke(); _canvas.length = ++length; return _canvas; }32:T5c1,framerate = { const fps = maxFps; const height = 50; const margin = 10; const context = DOM.context2d(width, height + margin); const fpsData = canvas.fps; context.lineWidth = 1; context.beginPath(); context.moveTo(0, margin); context.lineTo(width, margin); context.strokeStyle = "#d0d0d0aa"; context.stroke(); const avg = fpsData.reduce(function(p,c,i){return p+(c-p)/(i+1)},0); context.strokeStyle = `#98188c22`; if (Math.floor(avg) > fps / 2) { context.fillStyle = `#dac0de${avg > fps ? 24 : 12}`; context.rect(0, height + margin, width, - avg/ fps * height); context.fill(); context.strokeStyle = `#98188c33`; } context.lineWidth = 1; context.beginPath(); context.moveTo(0, height + margin - avg/ fps * height); context.lineTo(width, height + margin - avg/ fps * height); context.stroke(); context.fillStyle = "#84848442"; //let sum = 0; for (let i = 0; i < fpsData.length; i++) { const x = fpsData.length - 1 - i; context.fillRect(x * 4, height + margin + 1, 3, - fpsData[i] / fps * height - 1); context.lineWidth = 0.75; context.beginPath(); context.moveTo(x * 4, height + margin - fpsData[i] / fps * height); context.lineTo(x * 4 + 3, height + margin - fpsData[i] / fps * height); context.strokeStyle = "#848484aa"; context.stroke(); //sum += fpsData[x]; } // const avg = sum / fpsData.length; context.canvas.average = avg; return context.canvas; }33:T13f1,function drawPendulum(context, currentAngleRad = 0, velocity = 0, registerTick = false) { context.clearRect(0, 0, width, height + margin * 2); context.save(); const maxLength = Math.floor(width * (height / width) - yPosition - radius) / 2; const maxYpos = height / 2.5; const scale = (gravity < 0 ? Math.min(Math.pow(1 - Math.abs(gravity) / 3.4, 2), 1) : 1); const scale2 = Math.round((gravity < 0 ? scale / 4 + 3/4 : scale) * 10) / 10; //context.scale(scale2, scale2); context.translate( 0, //(gravity < 0 ? (1 - scale2) * width * 0.5 / scale2 : 0), margin + (1 - scale) * (gravity < 0 ? (length + radius * 2.18 - yPosition) : 0) ); context.lineWidth = Math.max(2, radius / 12); //const showAxis = false; const currentAngle = currentAngleRad * 180 / Math.PI; const eyeDistance = radius / 2.42; // We'll draw a quadratic curve to represent flexibility, so we need to compute // the inflection point position and the resulting angle at the end of the curve const inflectionPointPosition = 1/3 * length / (length + radius); const flexibilityShift = { x: -velocity * flexibility * length / 100, y: (length + radius) * inflectionPointPosition * (0.4 + flexibility / 1.42) } flexibilityShift.angle = Math.asin( flexibilityShift.x / Math.sqrt( Math.pow(flexibilityShift.x, 2) + Math.pow(length - flexibilityShift.y, 2) ) ); // Imbalance is just a measure of how far we're being from being vertical // Which is why we only car about the absolute value const imbalance = Math.abs(Math.sin(currentAngleRad)); // Pow on values ranging from 0 to 1 is an easy way to get an interesting motion // Since reaction is also going from 0 to 1 we'll pow to 2.5 to 1.5 const reactionIntensity = Math.pow(imbalance, 3 - reaction); // I don't know about you, but I would be amazed should gravity be reversed const mouthReaction = Math.max(reaction, gravity > 0 ? 0 : 0.5) * reactionIntensity; const mouthAngle = 0.4 * moustachiness + Math.PI * (1 - Math.exp(mouthReaction)); const mouthRadius = Math.max( Math.pow( Math.exp(1-mouthReaction) / Math.exp(1), 3 ) * (radius / 1.984 * Math.max(moustachiness, 0.5)), radius / (3 + Math.max(moustachiness, 0.5) * 4) ); // Draw the pendulum rotational center context.translate(width / 2, yPosition); context.beginPath(); context.arc(0, 0, Math.max(2.5, radius / 14), 0, 2 * Math.PI); context.fill(); // Canvas context makes it really easy context.rotate(currentAngle * Math.PI / 180); context.lineWidth = Math.max(3, radius / 10); // Pendulum line context.beginPath(); context.moveTo(0, length); context.quadraticCurveTo(flexibilityShift.x, flexibilityShift.y, 0, 0); context.stroke(); if(showAxis) { // Quadratic curve inflexion point context.beginPath(); context.arc(flexibilityShift.x, flexibilityShift.y, 4, 0, 2 * Math.PI); context.fill(); // Horizontal and vertical axis before accounting for flexibility context.lineWidth = 0.25; context.beginPath(); context.moveTo(1042, length); context.lineTo(-1042, length); context.moveTo(0, -height * 2); context.lineTo(0, height * 4); context.stroke(); } // Head context.translate(0, length); context.rotate(flexibilityShift.angle * 1.5); // * 1.5 for a more dramatic effect if(showAxis) { // Horizontal and vertical axis after accounting for flexibility context.lineWidth = 0.5; context.beginPath(); context.moveTo(200, 0); context.lineTo(-200, 0); context.moveTo(0, -length); context.lineTo(0, height * 4); context.stroke(); context.fillRect(-202, -2, 4, 4); context.fillRect(202, -2, -4, 4); } context.translate(0, radius); context.lineWidth = Math.floor(radius / 4.21); context.beginPath(); context.arc(0, 0, radius, 0, 2 * Math.PI); context.stroke(); context.fillStyle = '#fff'; context.fill(); // Eyes drawEyes(context, eyeDistance); // Mouth context.translate( 0, (1 - moustachiness) * radius / 8 + ( radius / 3 * Math.min(moustachiness, 0.84) ) ); context.beginPath(); context.arc( 0, moustachiness * radius / 2.042 - ( 1 - mouthReaction ) * mouthRadius * 0.93 + ( 1.11 - moustachiness ) * radius / 3, mouthRadius, mouthAngle, Math.PI - mouthAngle ); context.fill(); // Moustaches context.translate(0, -radius / 6.5); drawMoustache(context, -radius * 0.75, mouthReaction); context.scale(-1, 1); drawMoustache(context, -radius * 0.75, mouthReaction); context.restore(); if(registerTick && context.canvas.lastTick) { let delay = 0; if(context.canvas.lastTick) { delay = (Date.now() - context.canvas.lastTick); } if (delay > 0) { context.canvas.fps.unshift( (1000 / delay) - (delay < 1000 / maxFps && delay || 0) ); if(context.canvas.fps.length > width / 4) { context.canvas.fps.pop(); } } context.canvas.lastTick = Date.now(); } return context.canvas; }34:T4da,function drawMoustache(context, xPos, mouthReaction) { const x = 0; const y = 0; context.save(); const r = mouthReaction === 0 ? mouthReaction : mouthReaction * Math.PI / 7.42 * moustachiness ; context.rotate( (r) ); const ratio = 1; context.scale(Math.min(moustachiness, 1) + moustachiness * mouthReaction * 0.1, moustachiness + 0.3 * moustachiness * moustachiness * mouthReaction ); const rad = radius; context.translate(xPos + (1.5 - moustachiness) * mouthReaction * 20 * moustachiness, mouthReaction * rad * 0.2 + (1.2 - moustachiness) * rad / 7); context.beginPath(); context.moveTo(x - rad * 0.05, -moustachiness * rad * 0.1 * mouthReaction); context.bezierCurveTo( x + rad * 0.42, y + rad * 0.1984 * moustachiness, x + rad * 0.33 - rad * 0.2 * moustachiness * mouthReaction, y - rad * 0.42 + rad * 0.1 * moustachiness * mouthReaction, x + rad * 0.84, y - rad * 0.1 * moustachiness ); context.bezierCurveTo( x + rad, y + rad * 0.28 - rad * 0.05 * moustachiness, x + rad * 0.24 , y + rad * 0.5 + 21 * (1 - moustachiness) - rad * 0.1 * moustachiness * mouthReaction, x - rad * 0.05, -moustachiness * rad * 0.1 * mouthReaction ); context.fill(); context.restore(); }35:Ta94,sinEye = { const height = 50; const margin = 15; // Use the same canvas unless width changes, // in we which case we need to resize it to adapt to the new width const context = this && this._width === width && this.context || DOM.context2d(width + 300, height + margin * 2); const context2 = this && this._width === width && this.context2 || DOM.context2d(width, height + margin * 2); const _canvas = context2.canvas; if (!(this && this.context)) { _canvas.context = context; _canvas.context2 = context2; _canvas._width = width; } let length = _canvas.length || 0; const imageData = context.getImageData(2, 0, context.canvas.width, context.canvas.height); context.putImageData(imageData, 0, 0); const h = canvas.sinEye * height / 2; const x = width - 1; const y = margin + height / 2 - h; // Draw median line context.lineWidth = 1; context.beginPath(); context.moveTo(_canvas.lastX ? _canvas.lastX : 0, height / 2 + margin); context.lineTo(width, height / 2 + margin); context.strokeStyle = `#dadade44`; context.stroke(); // Plot graph segment context.lineWidth = 1.75; context.beginPath(); context.moveTo( _canvas.lastX ? _canvas.lastX : x, _canvas.lastY ? _canvas.lastY : y ); context.lineTo(x + 1 , y); _canvas.lastX = x; _canvas.lastY = y; context.lineWidth = 2.5; context.strokeStyle = canvas.scaleEye === 1 ? '#90909055' : '#dd33dd'; context.stroke(); if (canvas.scaleEye !== 1 && (!_canvas.lastScale || _canvas.lastScale === 1 )) { const offsetX = ((3.5 - period) * 3) * scale; const text = 'BLINK'; context.font = "8px Arial"; const metrics = context.measureText(text); // rectangle context.strokeStyle = '#dd33dd'; context.fillStyle = '#ffffff'; context.lineWidth = 0.5; const paddingH = 3; const paddingV = 2; context.fillRect( offsetX + x + metrics.width - paddingH, y - metrics.actualBoundingBoxAscent - paddingV, metrics.width + paddingH * 2, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent + paddingV * 2 ); context.strokeRect( offsetX + x + metrics.width - paddingH, y - metrics.actualBoundingBoxAscent - paddingV, metrics.width + paddingH * 2, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent + paddingV * 2 ); // text context.fillStyle = '#dd33dd'; context.fillText( text, offsetX + x + metrics.width, y ); } _canvas.lastScale = canvas.scaleEye; const imageData2 = context.getImageData(0, 0, context.canvas.width, context.canvas.height); context2.putImageData(imageData2, 0, 0); return _canvas; }36:T1231,html`

CSS is form,
form follows function[s],
indeed, that is a pun

`37:T8a1,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); if (title) form.append( html`${title}` ); form.append( html`` ); if (description) form.append( html`

${description}

` ); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }38:T4fb,function checkbox(config = {}) { let { value: formValue, title, description, submit, disabled, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); return form; }39:[] 2d:{"id":"e97d1c219b14b989","slug":"pendulum-pendulus-flexibile","title":"Pendulum pendulus flexibile A pendulum simulation with canvas and javascript","thumbnail":"52fb4176c6ac9dae6d7b087e90531d6a86599646dd7557669b722d723f2b0456","access_level":"public","create_time":"$D2021-01-14T12:10:46.997Z","update_time":"$D2022-09-30T07:14:30.258Z","view_time":null,"first_public_time":"$D2021-01-14T12:20:24.185Z","has_unpublished_edits":null,"fork":false,"stars":30,"starred":false,"owner":{"type":"team","id":"56478bd83f2190f0","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":"starter_2024"},"version":614,"publish_version":614,"role":null,"authored":false,"authors":[{"type":"individual","id":"e5f68da25a5a2366","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":null}],"members":[{"type":"individual","id":"e5f68da25a5a2366","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"3bb657500226a15a","slug":"doodles","title":"Doodles","owner":{"id":"56478bd83f2190f0","login":"daformat","name":"Mathieu Jouhet"}},"type":"notebook","body":{"title":"Pendulum pendulus flexibile A pendulum simulation with canvas and javascript","cells":[{"id":0,"value":"md`# Pendulum pendulus flexibile A pendulum simulation with canvas and javascript\nLet's have fun creating a pendulum simulation with canvas and javascript, using a credible enough approximation to explore gravity and angular momentums.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"{\n const text = html`\n\t

\n\t\tPlay with the settings sliders below to explore their impact on the pendulum balancing motion. You can try changing the length to increase or decrease velocity like with a yo-yo (reduce radius to get greater length), or set friction to 0 or 1 and see how long you can keep this guy swinging.\n\t

\n\n\t

\n\t\tGo nuts with physics: add some initial velocity to give him quite a boost.\n\t\tWhat happens when you set mass or gravity to 0 while the pendulum is already in motion?\n\t\tOh, and since we're talking about it, you can totally reverse gravity and have him fly, fear not though, he's firmly anchored to its rotation point\n\t

\n `;\n return text;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"viewof x = controls()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"viewof length = slider({\n min: 0,\n max: Math.floor(height - yPosition - radius * 2.25 - 33 - margin),\n value: 150,\n step: 1,\n title: \"Length\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof radius = slider({\n min: Math.floor(height/20),\n max: Math.floor((width * scale - yPosition) / 10),\n value: height/6,\n step: 1,\n title: \"Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"viewof flexibility = slider({\n min: 0,\n max: 1.42,\n value: 1.23,\n step: 0.01,\n title: \"Flexibility\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"viewof moustachiness = slider({\n min: 0,\n max: 1.23,\n value: 1,\n step: 0.01,\n title: \"Moustachiness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof mass = slider({\n min: 0,\n max: 3142,\n value: 1500,\n step: 16,\n title: \"Mass\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"viewof friction = slider({\n min: 0,\n max: 1,\n value: 0.1,\n step: 0.01,\n title: \"Friction\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof angle = slider({\n min: -179,\n max: 179,\n value: -100,\n step: 1,\n title: \"Initial angle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"viewof initialVelocity = slider({\n min: -21,\n max: 21,\n value: 1,\n step: 0.1,\n title: \"Initial Velocity\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// We're talking about g (g-force), not G (gravitional constant)\n// g is the acceleration due to gravity and g = G * objMass * obj2Mass / r^2\n// with r being the distance between the two objects center of mass.\n\n// Now, you're probably going to say that changing the pendulum's mass would change g,\n// but then I would tell you how insignificant is the pendulum's mass compared to the\n// planet's he's swinging on, so we can consider the gravitationnal acceleration constant.\n// The same reasoning applies to the pendulum length when compared to the planet radius.\n\n// The pendulum mass is still playing a role on the angular momentum though,\n// like the total length of the pendulum does, too, when we compute k:\n// k = - mass * gravity / (length + radius);\n\nviewof gravity = slider({\n min: -4.04,\n max: 25,\n value: 8.5,\n step: 0.01,\n title: \"Gravity\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"viewof reaction = slider({\n min: 0,\n max: 1,\n value: 0.7,\n step: 0.1,\n title: \"Reaction\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof yPosition = slider({\n min: 8,\n max: height / 2.5,\n value: 8,\n step: 1,\n title: \"y\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"viewof baseHeight = slider({\n min: 200,\n max: 520,\n value: 320,\n step: 1,\n title: \"base height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`## Values`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`## Oscillation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`## Physics FPS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"viewof limit = checkbox({\n description: \"Limit the framerate to maxFps value\",\n options: [{ value: \"toggle\", label: \"Limit fps\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"// this is a limit, not a target\nmaxFps = 70","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"average = Math.round(framerate.average * 10) / 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`## Drawing functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"viewof showAxis = checkbox({\n description: \"Draw pendulum axis and velocity based flexibility axis\",\n options: [{ value: \"toggle\", label: \"Show axis\" }],\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"function drawEyes(context, eyeDistance) {\n context.fillStyle = '#000';\n\n const eyeY = -(moustachiness - 0.5) * radius / 8 * moustachiness;\n const t = performance.now() / 1000;\n const eyeRadius = radius / 8;\n const sin = Math.sin(t * period);\n const percentile = (period / 2) / 100;\n const crop = 1 - percentile;\n const scale = 1 - Math.max(0, sin - crop) / percentile;\n context.canvas.sinEye = sin;\n context.canvas.scaleEye = scale;\n\n context.save();\n context.translate(eyeDistance, - radius / 4);\n context.scale(1, scale);\n context.beginPath();\n context.arc(0, eyeY, eyeRadius, 0, 2 * Math.PI);\n context.fill();\n\n context.translate(-eyeDistance * 2, 0);\n context.beginPath();\n context.arc(0, eyeY, eyeRadius, 0, 2 * Math.PI);\n context.fill();\n context.restore();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"viewof period = slider({\n min: 1,\n max: 5,\n value: 4,\n step: 0.1,\n title: \"Blink period\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof reset = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof play = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"controls = () => {\nconst buttons = html`\n\n`\nbuttons.value = true\n \nbuttons.play.onclick = event => {\n document.querySelector('.btn.play').click();\n event.preventDefault(); // Don’t submit the form.\n // buttons.dispatchEvent(new CustomEvent(\"input\")); \n}\nbuttons.reset.onclick = event => {\n event.preventDefault(); // Don’t submit the form.\n buttons.dispatchEvent(new CustomEvent(\"input\")); \n document.querySelector('.btn.reset').click();\n}\nreturn buttons\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`## And thanks for all the fish`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"baseWidth = 954;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"scale = width / baseWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"height = baseHeight * scale","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"margin = 42 * scale","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"resetTime = {\n reset;\n return Date.now();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"// Don't trust this boolean, he's a liar\nplaying = {play; return !this ;}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"function slider(config = {}) {\n let {\n min = 0,\n max = 1,\n value = (max + min) / 2,\n step = \"any\",\n precision = 2,\n title,\n description,\n disabled,\n getValue,\n format,\n display,\n submit\n } = typeof config === \"number\" ? { value: config } : config;\n precision = Math.pow(10, precision);\n if (!getValue)\n getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\",\n title,\n description,\n submit,\n format,\n display,\n attributes: { min, max, step, disabled, value },\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`\n## Want some more?\nLearn [how to draw and animate simple blob shapes with svg and javascript](https://observablehq.com/@daformat/drawing-blobs-with-svg), or, you know, just stare at those wiggly things for some time. Either way, should be fun!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 2e:"$2d:body"