2b:null 2c:["$","title",null,{"children":"Bezier curve interpolation | Soumik Rakshit | Observable"}] 31:Ta8a,// Library WindowParams = {canvas; class WindowParams { constructor() { this.canvasElement = document.getElementById("myCanvas"); this.canvasWidth = this.canvasElement.width; this.canvasHeight = this.canvasElement.height; console.log('width, height =', this.canvasWidth, this.canvasHeight); this.canvasCenter = glm.vec2.fromValues( this.canvasWidth / 2, this.canvasHeight / 2 ); this.pixels_per_meter = pixelsPerMillimeter * 1000; // World x and y axes wrt canvas canvas coordinates. Don't know why we're // keeping these. this.worldXRelCanvas = glm.vec2.fromValues(this.pixels_per_meter, 0.0); this.worldYRelCanvas = glm.vec2.fromValues(0.0, -this.pixels_per_meter); this.canvasFromWorld = glm.mat3.fromScaling( glm.mat3.create(), glm.vec2.fromValues(this.pixels_per_meter, -this.pixels_per_meter) ); this.canvasFromWorld = glm.mat3.mul( glm.mat3.create(), glm.mat3.fromTranslation(glm.mat3.create(), this.canvasCenter), this.canvasFromWorld ); console.log("canvasFromWorld =", this.canvasFromWorld); this.canvas = this.canvasElement.getContext("2d"); } clearRect() { this.canvas.clearRect(0, 0, this.canvasWidth, this.canvasHeight); } xPointToCanvas(out, point) { out = glm.vec2.transformMat3(out, point, this.canvasFromWorld); return out; } lengthToCanvas(l) { return this.pixels_per_meter * l; } canvasBoundsInWorldUnits() { const toWorld = glm.mat3.invert(glm.mat3.create(), this.canvasFromWorld); console.log('worldFromCanvas =', toWorld); const min = glm.vec2.transformMat3( glm.vec2.create(), glm.vec2.fromValues(0, 0), toWorld ); const max = glm.vec2.transformMat3( glm.vec2.create(), glm.vec2.fromValues(this.canvasWidth, this.canvasHeight), toWorld ); return { min, max }; } moveTo(p) { const canvasPoint = this.xPointToCanvas(glm.vec2.create(), p); this.canvas.moveTo(canvasPoint[0], canvasPoint[1]); } lineTo(p) { const canvasPoint = this.xPointToCanvas(glm.vec2.create(), p); this.canvas.lineTo(canvasPoint[0], canvasPoint[1]); } bezierCurveTo(curvePoints) { let points = curvePoints.map(p => this.xPointToCanvas(glm.vec2.create(), p)); // TODO: remove moveTo, be same as canvas' API this.canvas.moveTo(points[0][0], points[0][1]); // starting end point this.canvas.bezierCurveTo( // cp 1 points[1][0], points[1][1], // cp 2 points[2][0], points[2][1], // ending end point points[3][0], points[3][1] ); } } return WindowParams; }32:T76f,class LinearRoundtripInterpolator { // Note that timestampEnd is the end time of the forward interpolation only. // So total time is twice that of taken by forward interpolation. constructor(timestampForwardStart, timestampForwardEnd, timestampBackwardStart, timestampBackwardEnd, oscillate = false, maxT = 1) { this.timestampForwardStart = timestampForwardStart; this.timestampForwardEnd = timestampForwardEnd; this.timestampBackwardStart = timestampBackwardStart; this.timestampBackwardEnd = timestampBackwardEnd; this.maxT = maxT; this.oscillate = oscillate; this.totalPeriod = timestampBackwardEnd - timestampForwardStart; } forwardDuration() { return this.timestampForwardEnd - this.timestampForwardStart; } backwardDuration() { return this.timestampBackwardEnd - this.timestampBackwardStart; } t(currentTime) { // Find the period number // TODO: If you want an oscillating interpolator, the constructor api should be relative also, better to think that way. if (this.oscillate) { const durationSinceStart = currentTime - this.timestampForwardStart; const numPeriods = durationSinceStart / this.totalPeriod; currentTime = currentTime - (Math.floor(numPeriods) * this.totalPeriod + this.timestampForwardStart); } if (currentTime < this.timestampForwardStart) { return 0; } if (currentTime <= this.timestampForwardEnd) { const factor = (currentTime - this.timestampForwardStart) / this.forwardDuration(); return Math.min(this.maxT, Math.max(0, factor)); } if (currentTime < this.timestampBackwardStart) { return this.maxT; } if (currentTime <= this.timestampBackwardEnd) { const factor = (currentTime - this.timestampBackwardStart) / this.backwardDuration(); return Math.min(this.maxT, Math.max(0, 1 - factor)); } return 0; } }33:Te9e,class InterpolatedBezierCurve { originalPoints; // const curTruncatedPoints; arrowHeadLeft; arrowHeadRight; // points is an array of vec2 of length 4 constructor(points) { if (!Array.isArray(points)) { throw `expected points to be an array but received: ${points}` } if (points.length !== 4) { throw `expected points to have length 4 but received length: %{points.length}` } this.originalPoints = [...points]; this.curTruncatedPoints = [...points]; this.arrowHeadLeft = glm.vec2.create(); this.arrowHeadRight = glm.vec2.create(); this.cacheArrowHeads(); } update(currentTimestamp, interpolator) { const t = interpolator.t(currentTimestamp); // console.log('t =', t); // if (t <= 0.0001) { // return; // } if (t > 1) { return; } this.curTruncatedPoints = this._truncate(0, t); } static evaluate(cp, t) { // (1 - t) ^ 3 P_0 + 3t.(1 - t) ^ 2 P_1 + 3t ^ 2.(1 - t) P_2 + t ^ 3 P_3 const oneMinusT = (1 - t) const c0 = oneMinusT * oneMinusT * oneMinusT; const c1 = 3 * t * oneMinusT * oneMinusT; const c2 = 3 * t * t * oneMinusT; const c3 = t * t * t; // CONSIDER: can be optimized to use just one out parameter const a = glm.vec2.scale(glm.vec2.create(), cp[0], c0); const b = glm.vec2.scale(glm.vec2.create(), cp[1], c1); const c = glm.vec2.scale(glm.vec2.create(), cp[2], c2); const d = glm.vec2.scale(glm.vec2.create(), cp[3], c3); let r = glm.vec2.create(); r = glm.vec2.add(r, a, b); r = glm.vec2.add(r, r, c); r = glm.vec2.add(r, r, d); return r; } static evaluateTangent(cp, t) { // (-3 + 6t + -3t ^ 2) P_0 + (3 - 12t + 9t ^ 2) P_1 + (6t - 9t ^ 2) P_2 + 3t ^ 2.P_3 const c0 = -3 + (6 * t) - 3 * (t * t); const c1 = 3 - (12 * t) + 9 * (t * t); const c2 = (6 * t) - 9 * (t * t); const c3 = 3 * (t * t); // CONSIDER: can be optimized to use just one out parameter const a = glm.vec2.scale(glm.vec2.create(), cp[0], c0); const b = glm.vec2.scale(glm.vec2.create(), cp[1], c1); const c = glm.vec2.scale(glm.vec2.create(), cp[2], c2); const d = glm.vec2.scale(glm.vec2.create(), cp[3], c3); let r = glm.vec2.create(); r = glm.vec2.add(r, a, b); r = glm.vec2.add(r, r, c); r = glm.vec2.add(r, r, d); return r; } cacheArrowHeads(length, angleOffsetFromCurve) { let headTangent = glm.vec2.sub(glm.vec2.create(), this.curTruncatedPoints[3], this.curTruncatedPoints[2]); headTangent = glm.vec2.normalize(headTangent, headTangent); headTangent = glm.vec2.scale(headTangent, headTangent, length); let pointAtHeadTangent = glm.vec2.add(headTangent, this.curTruncatedPoints[3], headTangent); this.arrowHeadLeft = glm.vec2.rotate(this.arrowHeadLeft, pointAtHeadTangent, this.curTruncatedPoints[3], Math.PI - angleOffsetFromCurve); this.arrowHeadRight = glm.vec2.rotate(this.arrowHeadRight, this.arrowHeadLeft, this.curTruncatedPoints[3], 2 * angleOffsetFromCurve); } _truncate(tStart, tEnd) { // Yeah I know my usecase will always make tStart = 0, but keeping it general. const q0 = InterpolatedBezierCurve.evaluate(this.originalPoints, tStart); const q3 = InterpolatedBezierCurve.evaluate(this.originalPoints, tEnd); let tan0 = InterpolatedBezierCurve.evaluateTangent(this.originalPoints, tStart); tan0 = glm.vec2.scale(tan0, tan0, (tEnd - tStart) / 3); let tan3 = InterpolatedBezierCurve.evaluateTangent(this.originalPoints, tEnd); tan3 = glm.vec2.scale(tan3, tan3, (tEnd - tStart) / 3); const q1 = glm.vec2.add(glm.vec2.create(), q0, tan0); const q2 = glm.vec2.sub(glm.vec2.create(), q3, tan3); return [q0, q1, q2, q3]; } }34:T48a,function parabolicBezierCurve(startPoint, endPoint, peakLength) { let midPoint = glm.vec2.add(glm.vec2.create(), startPoint, endPoint); midPoint = glm.vec2.scale(midPoint, midPoint, 0.5); const startToEnd = glm.vec2.sub(glm.vec2.create(), endPoint, startPoint); const distance = glm.vec2.length(startToEnd); const lineDir = glm.vec2.normalize(glm.vec2.create(), startToEnd); const normal = glm.vec2.fromValues(-lineDir[1], lineDir[0]); const halfPeakLengthNormal = glm.vec2.scale(glm.vec2.create(), normal, peakLength / 2); const q0 = glm.vec2.clone(startPoint); const q3 = glm.vec2.clone(endPoint); // q1 = (q0 + (distance/4) * lineDir) + ((peakLength / 2) * normal) let q1 = glm.vec2.add(glm.vec2.create(), q0, glm.vec2.scale(glm.vec2.create(), lineDir, distance / 4)); q1 = glm.vec2.add(q1, q1, halfPeakLengthNormal); // q2 = (q3 - (distance/4) * lineDir) + ((peakLength / 2) * normal) let q2 = glm.vec2.add(glm.vec2.create(), q3, glm.vec2.scale(glm.vec2.create(), lineDir, -distance / 4)); q2 = glm.vec2.add(q2, q2, halfPeakLengthNormal); // console.log("points =", q0, q1, q2, q3); return [q0, q1, q2, q3]; }35:Td29,function runVisRandom() { // Initialize the entities const worldStartTimestamp = fromMillisecond(performance.now()); const curve = new InterpolatedBezierCurve( parabolicBezierCurve( glm.vec2.fromValues(millimeter(-20), millimeter(20)), glm.vec2.fromValues(millimeter(20), millimeter(0)), millimeter(20), ) ); const curves = []; const randomCurveCount = numCurves; const createParabolicCurves = false; let step = null; if (createParabolicCurves) { for (let i = 0; i < randomCurveCount; i++) { const startPoint = glm.vec2.fromValues( random(-millimeter(40), millimeter(40)), random(-millimeter(40), millimeter(40))); const endPoint = glm.vec2.fromValues( random(-millimeter(40), millimeter(40)), random(-millimeter(40), millimeter(40))); const peakLength = random(millimeter(40)); const curve = new InterpolatedBezierCurve(parabolicBezierCurve(startPoint, endPoint, peakLength)); curves.push(curve); } } else { for (let i = 0; i < randomCurveCount; i++) { const startPoint = glm.vec2.fromValues( random(-millimeter(40), millimeter(40)), random(-millimeter(40), millimeter(40))); const controlPoint1 = glm.vec2.fromValues( random(-millimeter(40), millimeter(40)), random(-millimeter(40), millimeter(40))); const controlPoint2 = glm.vec2.fromValues( random(-millimeter(40), millimeter(40)), random(-millimeter(40), millimeter(40))); const endPoint = glm.vec2.fromValues( random(-millimeter(40), millimeter(40)), random(-millimeter(40), millimeter(40))); const peakLength = random(millimeter(40)); const curve = new InterpolatedBezierCurve([startPoint, controlPoint1, controlPoint2, endPoint]); curves.push(curve); } } const interpolatorQuick = new LinearInterpolator(0.2, 90); const interpolatorSlow = new LinearInterpolator(0.2, maxInterpolationPeriodInSeconds); const interpolatorToUse = curves.map((_) => { // if (Math.random() < 0.5) { // return interpolatorQuick; // } // return interpolatorSlow; return interpolatorSlow; }) step = (curTimestamp) => { const worldTimestamp = curTimestamp - worldStartTimestamp; // curve.update(worldTimestamp, interpolator); for (let i = 0; i < curves.length; i++) { const curve = curves[i]; const interpolator = interpolatorToUse[i]; curve.update(worldTimestamp, interpolator); } clearCanvas("#fafafa"); // Draw saveCanvasStyle(() => { wp.canvas.lineWidth = 2; for (let curve of curves) { wp.canvas.beginPath(); wp.canvas.strokeStyle = "#020202"; wp.moveTo(curve.curTruncatedPoints[0]); wp.bezierCurveTo(curve.curTruncatedPoints); wp.canvas.stroke(); wp.canvas.closePath(); } for (let curve of curves) { wp.canvas.beginPath(); wp.canvas.strokeStyle = "#a002020f"; wp.moveTo(curve.curTruncatedPoints[0]); wp.lineTo(curve.curTruncatedPoints[1]); wp.lineTo(curve.curTruncatedPoints[2]); wp.lineTo(curve.curTruncatedPoints[3]); wp.canvas.stroke(); wp.canvas.closePath(); } }) requestAnimationFrameInSeconds(step); } requestAnimationFrameInSeconds(step); } 36:Ta75,function runVisCircles() { // Initialize the entities const worldStartTimestamp = fromMillisecond(performance.now()); const curve = new InterpolatedBezierCurve( parabolicBezierCurve( glm.vec2.fromValues(millimeter(-20), millimeter(20)), glm.vec2.fromValues(millimeter(20), millimeter(0)), millimeter(20), ) ); const randomCurveCount = numCurves; let interpolatorToUse = []; let step = null; const angleDelta = 2 * Math.PI / randomCurveCount; const radiuses = [2, 10, 30, 40].map(millimeter); const angleOffsets = [angleDelta / 4, 2 * angleDelta / 4, 3 * angleDelta / 4, angleDelta]; const origin = glm.vec2.zero(glm.vec2.create()); const curves = [...Array(randomCurveCount)].map((_, curveIndex) => { const angleWithoutOffset = angleDelta * curveIndex; const curvePoints = [...Array(4)].map((_, cpIndex) => { const radius = radiuses[cpIndex]; const angle = angleWithoutOffset + angleOffsets[cpIndex] + random(0, Math.PI / 4); return glm.vec2.rotate(glm.vec2.create(), glm.vec2.fromValues(radius, 0), origin, angle); }); console.log("curvePoints =", curvePoints); return new InterpolatedBezierCurve(curvePoints); }); interpolatorToUse = curves.map((_) => { const forwardStart = 0.2 const forwardEnd = forwardStart + random(1, maxInterpolationPeriodInSeconds); const backwardStart = forwardEnd + random(0, 10) / 10; const backwardEnd = backwardStart + random(1, maxInterpolationPeriodInSeconds); return new LinearRoundtripInterpolator(forwardStart, forwardEnd, backwardStart, backwardEnd, true); }) step = (curTimestamp) => { const worldTimestamp = curTimestamp - worldStartTimestamp; for (let i = 0; i < curves.length; i++) { const curve = curves[i]; const interpolator = interpolatorToUse[i]; curve.update(worldTimestamp, interpolator); } clearCanvas("#fafafa"); // Draw saveCanvasStyle(() => { wp.canvas.lineWidth = 2; for (let curve of curves) { wp.canvas.beginPath(); wp.canvas.strokeStyle = curveColor; wp.moveTo(curve.curTruncatedPoints[0]); wp.bezierCurveTo(curve.curTruncatedPoints); wp.canvas.stroke(); } for (let curve of curves) { wp.canvas.beginPath(); wp.canvas.strokeStyle = "#a002024f"; wp.moveTo(curve.curTruncatedPoints[0]); wp.lineTo(curve.curTruncatedPoints[1]); wp.lineTo(curve.curTruncatedPoints[2]); wp.lineTo(curve.curTruncatedPoints[3]); wp.canvas.stroke(); } }) requestAnimationFrameInSeconds(step); }; requestAnimationFrameInSeconds(step); }37:[] 2f:{"id":"dfc3f8670e35691e","slug":null,"title":"Bezier curve interpolation","thumbnail":"d11a5a69f29d3926674de48e82cd5b5d62a87930b8502104c386bfc86f48f993","access_level":"public","create_time":"$D2022-12-26T02:40:33.478Z","update_time":"$D2022-12-28T18:00:45.427Z","view_time":null,"first_public_time":"$D2022-12-26T02:40:33.478Z","has_unpublished_edits":null,"fork":{"id":"7a0980291ec2d753","slug":"interactive-html-canvas","title":"Interactive HTML Canvas","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":3,"starred":false,"owner":{"type":"team","id":"719dc809ddd4992d","login":"slnsoumik","name":"Soumik Rakshit","avatar_url":"https://avatars-next.observableusercontent.com/20d2f278e59d64c6694fc36b3855e5ca83fbefd1adac5a3a1dde8860b883d11a","tier":"starter_2024"},"version":307,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"342b200de4b393a4","login":"slnsoumik","name":"Soumik Rakshit","avatar_url":"https://avatars-next.observableusercontent.com/20d2f278e59d64c6694fc36b3855e5ca83fbefd1adac5a3a1dde8860b883d11a","tier":null}],"members":[{"type":"individual","id":"342b200de4b393a4","login":"slnsoumik","name":"Soumik Rakshit","avatar_url":"https://avatars-next.observableusercontent.com/20d2f278e59d64c6694fc36b3855e5ca83fbefd1adac5a3a1dde8860b883d11a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Bezier curve interpolation","cells":[{"id":0,"value":"# Bezier curve interpolation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"I have wanted to draw \"growing arrows\" that follow a curved path. This made me take a look at how to interpolate curves, in particular, Bezier curves. While we can approximate any class of curve using lots of straight lines, canvas's bezierCurveTo API automatically does the anti-aliasing, so an easier and better approach is to call it with intermediate control points. This process of calculating the control points of the truncated curve is called _Bezier curve truncation_. For a detailed derivation, please see Eric Lengyel's book.\n\nGiven a cubic Bezier curve `B ≡ B(t)`, with the standard parameter range `t ∈ [0, 1]`, we can obtain a new cubic bezier curve that matches `B` on the interval `[t_0, t_1]`. For purposes of this vis, we always have `t_0 = 0`, and `t_1` gradually ranges from `[0, 1]`. The truncated matching curve has the following control points:\n\n```\nQ_0 = B(0)\nQ_1 = Q_0 + B'(0) . t_1/3 (here B' denotes the derivate of B wrt t)\nQ_2 = Q_3 - B'(t_1) . t_1/3\nQ_3 = B(t_1)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":275,"value":"canvas = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"viewof numCurves = Inputs.range([1, 70], {label: \"Number of curves\", step: 1, default: 10 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof pixelsPerMillimeter = Inputs.range([0, 20], {label: \"Pixels per millimeter\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"viewof maxInterpolationPeriodInSeconds = Inputs.range([2, 50], {label: \"Max interpolation period in seconds\", step: 0.5 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"viewof exampleType = Inputs.radio([\"random\", \"concentric_circles\"], {label: \"Example type\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"curveColor = \"#CBD5E1\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"millimeter = {\n return function(x) {\n return x * 0.001;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"function fromMillisecond(x) {\n return x * 0.001;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"glm = require('https://bundle.run/gl-matrix@3.4.3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"mathjs = require('mathjs@11.5.0/lib/browser/math.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"random = mathjs.random","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"wp = {WindowParams;\n return new WindowParams();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"clearCanvas = {\n return function(color) {\n const c = wp.canvas;\n c.fillStyle = color;\n c.clearRect(0, 0, wp.canvasWidth, wp.canvasHeight);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"class LinearInterpolator {\n timestampStart;\n timestampEnd;\n maxT;\n\n // Create a new Interpolator given the start and end timestamps. The unit of\n // the timestamps does not matter.\n constructor(timestampStart, timestampEnd, maxT = 1) {\n this.timestampStart = timestampStart;\n this.timestampEnd = timestampEnd;\n this.maxT = maxT;\n }\n\n // Return the interpolated parameter which we call \"t\" at the current time\n t(currentTime) {\n if (currentTime < this.timestampStart) {\n return 0;\n }\n if (currentTime > this.timestampEnd) {\n return this.maxT;\n }\n\n const factor = (currentTime - this.timestampStart) / (this.timestampEnd - this.timestampStart);\n return Math.min(this.maxT, Math.max(0, factor));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"class InterpolatedLine {\n startPoint; // const\n endPoint; // const\n\n curEndPoint;\n\n // startPoint: vec2, endPoint: vec2\n constructor(startPoint, endPoint) {\n this.startPoint = glm.vec2.clone(startPoint);\n this.endPoint = glm.vec2.clone(endPoint);\n this.curEndPoint = glm.vec2.clone(endPoint);\n }\n\n // currentTimestamp: number\n // interpolator: LinearInterpolator\n update(currentTimestamp, interpolator) {\n const t = interpolator.t(currentTimestamp);\n this.curEndPoint = glm.vec2.lerp(this.curEndPoint, this.startPoint, this.endPoint, t);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"function saveCanvasStyle(callback) {\n const strokeStyle = wp.canvas.strokeStyle;\n const fillStyle = wp.canvas.fillStyle;\n const lineWidth = wp.canvas.lineWidth;\n callback();\n wp.canvas.lineWidth = lineWidth;\n wp.canvas.strokeStyle = strokeStyle;\n wp.canvas.fillStyle = fillStyle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"function requestAnimationFrameInSeconds(callback) {\n return window.requestAnimationFrame((ts) => {\n callback(fromMillisecond(ts));\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"vis = {\n console.log(\"example type =\", exampleType);\n if (exampleType === \"random\") {\n runVisRandom()\n } else {\n runVisCircles()\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"