2b:null 2c:["$","title",null,{"children":"Curve Interpolator | Kjerand Pedersen | Observable"}] 31:Tf62,{ const pauseBetweenFrames = 1000; const p = createPlot(); const points = [[-18, 0], [-8, -4], [-6, 4], [2, -5], [8, 4.5], [19, -5]]; const lerp = new lib.CurveInterpolator(points, { tension: 0, alpha: 0 }); const nPoints = 500; const infoElement = DOM.element('div'); infoElement.style = "text-align:center; height: 50px;font-style:italic;"; const info = html => infoElement.innerHTML = html || ''; yield html`

${p.node} ${infoElement}

`; const skipFrames = []; const frames = [ async () => { info('First we need some control points...'); await addControlPoints(p, points, 1000); }, async () => { await addControlPoints(p, points); info('Each pair of control points form a curve segment calculated from a cubic polynomial...'); await pause(1000); for (let i = 0; i < points.length - 1; i++) { await drawSegment(p, lerp, i, 1000, 'red', 'darkgray'); } info('Together they form a smooth and continious curve.'); await pause(3000); }, async () => { const controlPoints = await addControlPoints(p, points); info('A curve segment is controlled by 4 control points, similar to a cubic Bézier curve...'); const curveSegment = await drawSegment(p, lerp, 2, 0, 'red'); await pause(1000); const line1 = p.segment(points[1][0], points[1][1], points[3][0], points[3][1], { stroke: 'blue', dash: [2,2] }); await pause(500); const line2 = p.segment(points[2][0], points[2][1], points[4][0], points[4][1], { stroke: 'blue', dash: [2,2] }); await pause(1000); info('The relative distance and position between each point determines the velocity and directon of the resulting curve...'); offsetControlPoints(1, [-6, 3], controlPoints); offsetControlPoints(4, [5, -1], controlPoints); line1.x1 = lerp.points[1][0]; line1.y1 = lerp.points[1][1]; line2.x2 = lerp.points[4][0]; line2.y2 = lerp.points[4][1]; curveSegment.vertices = getSegmentVertices(lerp, 2); p.update(); await pause(2000); offsetControlPoints(1, [6, -3], controlPoints); offsetControlPoints(4, [-5, 1], controlPoints); line1.x1 = lerp.points[1][0]; line1.y1 = lerp.points[1][1]; line2.x2 = lerp.points[4][0]; line2.y2 = lerp.points[4][1]; curveSegment.vertices = getSegmentVertices(lerp, 2); p.update(); await pause(2000); p.remove(line1); p.remove(line2); info('The tension and alpha parameters are used to control how these velocity vectors shape the curve.'); await pause(1000); let label = p.text('Tension = 1', -8, 1, { anchor: 'left', color: 'red' }); lerp.tension = 1; curveSegment.vertices = getSegmentVertices(lerp, 2); p.update(); await pause(1000); label.text = 'Tension = 0'; lerp.tension = 0; curveSegment.vertices = getSegmentVertices(lerp, 2); p.update(); await pause(2000); label.text = 'Alpha = 1'; //label.options.color = 'blue'; lerp.alpha = 1; curveSegment.vertices = getSegmentVertices(lerp, 2); p.update(); await pause(1000); label.text = 'Alpha = 0'; lerp.alpha = 0; curveSegment.vertices = getSegmentVertices(lerp, 2); p.update(); await pause(2000); } ]; function offsetControlPoints(index, offset, controlPoints) { lerp.points[index][0] += offset[0]; lerp.points[index][1] += offset[1]; lerp.reset(); controlPoints[index].point.px = lerp.points[index][0]; controlPoints[index].label.px = lerp.points[index][0]; controlPoints[index].point.py = lerp.points[index][1]; controlPoints[index].label.py = lerp.points[index][1]; } animate(p, info, frames, skipFrames); }32:T1968,{ const pauseBetweenFrames = 1000; const p = createPlot({ transitions: false }); const points = [[-5, -4], [-18, 1], [-12, 4], [5, -3], [3, 3], [16, -3]]; const lerp = new lib.CurveInterpolator(points, { tension: 0, alpha: 0.5 }); const infoElement = DOM.element('div'); infoElement.style = "text-align:center; height: 50px;font-style:italic;"; const info = html => infoElement.innerHTML = html || ''; yield html`

${p.node} ${infoElement}

`; const skipFrames = []; const frames = [ async () => { const nSegments = points.length - 1; const steps = 500; await addControlPoints(p, points); for (let i = 0; i < nSegments; i++) { await drawSegment(p, lerp, i, 0, 'gray'); } info('For each curve segment, the position along the curve is given by the time (t) along the curve (0..1).'); await pause(4000); info('The position at time t will vary from segment to segment, but also within the segment itself (it does not move with constant speed).'); const positions = new Array(nSegments); const markers = []; for (let i = 0; i < nSegments; i++) { const t1 = lerp.getTimeAtKnot(i); const t2 = lerp.getTimeAtKnot(i + 1); const dt = t2 - t1; markers[i] = p.circle(points[i][0], points[i][1], 0.15, { fill: 'transparent' }); positions[i] = new Array(steps + 1); for (let j = 0; j <= steps; j++) { const k = j / steps; const w = t1 + (k * dt); const pw = lerp.getPointAtTime(w); positions[i][j] = pw; } } const tLabel = p.text(`t = ${(0).toFixed(3)}`, -19, 4, { color: 'blue', anchor: 'right' }); for (let i=0; i <= steps; i++) { const t = i / steps; tLabel.text = `t = ${(t).toFixed(3)}`; for (let j=0; j < positions.length; j++) { markers[j].cx = positions[j][i][0]; markers[j].cy = positions[j][i][1]; } p.update(); await pause(10); } await pause(2000); }, async () => { const nSegments = points.length - 1; const steps = 500 * nSegments; await addControlPoints(p, points); for (let i = 0; i < nSegments; i++) { await drawSegment(p, lerp, i, 0, 'gray'); } info(`Now let's chain the segments and let t run from 0 to ${nSegments} in order to start at the beginning of the curve and stop at the end. If we want to keep t between 0 and 1 we can normalize t based on the number of segments (tn = t / ${nSegments}).`); await pause(2000); const marker = p.circle(points[0][0], points[0][1], 0.15, { fill: 'transparent' }); const tnLabel = p.text(`tn = ${(0).toFixed(3)}`, -19, 4, { color: 'black', anchor: 'right' }); const tLabel = p.text(`t = ${(0).toFixed(3)}`, -19, 3, { color: '#777', anchor: 'right' }); for (let j = 0; j <= steps; j++) { const tn = j / steps; const t = (j / steps) * nSegments; const pt = lerp.getPointAtTime(tn); marker.cx = pt[0]; marker.cy = pt[1]; tnLabel.text = `tn = ${(tn).toFixed(3)}`; tLabel.text = `t = ${(t).toFixed(3)}`; p.update(); await pause(2); } await pause(2000); }, async () => { p.instance.options.transitions = true; const nSegments = points.length - 1; const steps = 500 * nSegments; for (let i = 0; i < nSegments; i++) { await drawSegment(p, lerp, i, 0, 'gray'); } info('The problem with adressing the spline curve by time (t) is that it will not give us evenly distributed points.'); await pause(4000); const u = lerp.getPointAt(0.5); const markerU = p.circle(u[0], u[1], 0.15, { fill: 'orange', opacity: 1 }); info('We would like to get the point at half of the length of the curve indicated by the little orange dot...'); await pause(4000); const t = lerp.getPointAtTime(0.5); const markerT = p.circle(t[0], t[1], 0.25, { fill: 'blue', opacity: 1 }); info('...but t = 0.5 gives us this position (blue dot).'); await pause(3000); p.remove(markerU); p.remove(markerT); info('And if we would like a set of points evently spread along the curve (i.e. t=0, t=0.1, t=0.2 ...), then using t for this purpose will not give us what we want!'); const markers = []; for (let i=0; i <= 10; i++) { const t = i / 10; const pt = lerp.getPointAtTime(t); markers.push(p.circle(pt[0], pt[1], 0.15, { fill: 'blue', opacity: 1 })); } await pause(6000); info('By re-parameterizing the curve by length we can map a position (u) to the corresponding time (t) along the curve.'); await pause(1000); for (let i=0; i <= 10; i++) { const u = i / 10; const pt = lerp.getPointAt(u); markers[i].cx = pt[0]; markers[i].cy = pt[1]; markers[i].options.fill = 'orange'; } p.update(); await pause(4000); p.instance.options.transitions = false; }, async () => { const nSegments = points.length - 1; const steps = 500 * nSegments; await addControlPoints(p, points); for (let i = 0; i < nSegments; i++) { await drawSegment(p, lerp, i, 0, 'gray'); } info(`Now let's compare the poistion (u) versus time (t)!`); await pause(1000); const markerT = p.circle(points[0][0], points[0][1], 0.15, { fill: 'blue', opacity: 1 }); const markerU = p.circle(points[0][0], points[0][1], 0.25, { fill: 'orange', opacity: 1 }) const uLabel = p.text(`u = ${(0).toFixed(3)}`, -19, 4, { color: 'orange', anchor: 'right' }); const tLabel = p.text(`t = ${(0).toFixed(3)}`, -19, 3, { color: 'blue', anchor: 'right' }); for (let j = 0; j <= steps; j++) { const v = (j / steps); const pt = lerp.getPointAtTime(v); const pu = lerp.getPointAt(v); markerT.cx = pt[0]; markerT.cy = pt[1]; markerU.cx = pu[0]; markerU.cy = pu[1]; uLabel.text = `u = ${(v).toFixed(3)}`; tLabel.text = `t = ${(v).toFixed(3)}`; p.update(); await pause(2); } await pause(2000); }, ]; animate(p, info, frames, skipFrames); }33:T542,intersectExample = { const {p:diagram, lookupCircle, lookupSegment, curve } = intersectExampleDiagram; const solutions = interp.getIntersects(lookup, 0); while (solutionObjects.length > 0) { const obj = solutionObjects.pop(); diagram.remove(obj.arrow); diagram.remove(obj.target); diagram.remove(obj.value); } const add = s => { const [x, y] = s; const arrow = diagram.arrow(0, y, x, y, { stroke: 'rgba(255,0,0,0.25'}) const target = diagram.circle(x, y, 0.15, { fill: 'red', stroke: 'red' }); const value = diagram.circle(0, y, 0.15, { fill: 'white', stroke: 'black' }); const obj = { arrow, target, value }; solutionObjects.push(obj); return obj; }; const update = (obj, s) => { const [x, y] = s; const { arrow, target, value } = obj; arrow.x1 = 0; arrow.y1 = y; arrow.x2 = x; arrow.y2 = y; target.cx = x; target.cy = y; value.cx = 0; value.cy = y; }; lookupCircle.cx = lookup; lookupCircle.cy = 0; lookupSegment.x1 = lookup; lookupSegment.y1 = -5; lookupSegment.x2 = lookup; lookupSegment.y2 = 5; solutions.forEach((solution, i) => { const obj = solutionObjects[i]; if (!obj) { add(solution); } else { update(obj, solution); } }); diagram.update(); return solutions; }34:[] 2f:{"id":"e5375e5af5c3f794","slug":"curve-interpolator-demo","title":"Curve Interpolator","thumbnail":"9f73c75678022d6b6d94d50bebf51abdd7da1423c916443b1dd330b9a38f95fc","access_level":"public","create_time":"$D2023-02-08T10:51:57.490Z","update_time":"$D2025-11-06T11:32:14.148Z","view_time":null,"first_public_time":"$D2023-02-21T10:28:46.165Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"455184b0afc7f1fd","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":"starter_2024"},"version":2627,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"00080969d76f924b","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":null}],"members":[{"type":"individual","id":"00080969d76f924b","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":13,"collection":{"id":"fc9d59b1d3947635","slug":"libs","title":"Libs/reusable","owner":{"id":"455184b0afc7f1fd","login":"kjerandp","name":"Kjerand Pedersen"}},"type":"notebook","body":{"title":"Curve Interpolator","cells":[{"id":0,"value":"# Curve Interpolator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1191,"value":"This notebook allows you to explore some of the key features of the [curve-interpolator](https://github.com/kjerandp/curve-interpolator) library, which is an implementation of the [Cubic Hermite spline](https://en.wikipedia.org/wiki/Cubic_Hermite_spline) - or more specific the Cardinal or Catmull-Rom spline curve.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1278,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1593,"value":"You can use the tension parameter to control the curve \"stiffness\" where tension = 1 is the equivalent of using linear interpolation: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1165,"value":"{\n const p = createPlot({ axises: false })\n const nPoints = 500;\n const points = [[-18, 0], [-8, -4], [-6, 4], [2, -5], [8, 4.5], [19, -5]];\n const lerp = new lib.CurveInterpolator(points, { tension: 0, alpha: 0 });\n const c1 = lerp.getPoints(nPoints, lib.Point);\n\n lerp.tension = 0.5;\n const c2 = lerp.getPoints(nPoints, lib.Point);\n\n lerp.tension = 1.0;\n const c3 = lerp.getPoints(nPoints, lib.Point);\n\n yield p.node;\n\n p.polyline(c1, { stroke: '#900', width: 1 });\n p.polyline(c2, { stroke: '#090', width: 1 });\n p.polyline(c3, { stroke: '#009', width: 1 });\n\n points.forEach(cp => p.point(cp[0], cp[1], { size: 3 }));\n\n p.text('Tension = 0.0 (Catmull-Rom)', -19, 4, { color: '#900', anchor: 'left' });\n p.text('Tension = 0.5', -19, 3, { color: '#090', anchor: 'left' });\n p.text('Tension = 1.0 (Linear)', -19, 2, { color: '#009', anchor: 'left' });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1217,"value":"The alpha parameter allows control over the [parametrization of the knot-sequence](https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline) and a centripetal Catmull-Rom curve (alpha=0.5) guarantees that no cusp/loop is formed as in the example below for the uniform Catmull-Rom curve. This happens when two points are very close to each other relative to its neighboring control points. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1133,"value":"{\n const p = createPlot({ axises: false })\n const nPoints = 500;\n const points = [[-18, 0], [-8, -4], [-6, 4], [2, -5], [7.6, 4], [8, 4.2], [19, -5]];\n const lerp = new lib.CurveInterpolator(points, { tension: 0, alpha: 0 });\n const c1 = lerp.getPoints(nPoints, lib.Point);\n\n lerp.alpha = 0.5;\n const c2 = lerp.getPoints(nPoints, lib.Point);\n\n lerp.alpha = 1.0;\n const c3 = lerp.getPoints(nPoints, lib.Point);\n \n yield p.node;\n\n p.polyline(c1, { stroke: '#900', width: 1 });\n p.polyline(c3, { stroke: '#009', width: 1 });\n p.polyline(c2, { stroke: '#090', width: 1 });\n \n points.forEach(cp => p.point(cp[0], cp[1], { size: 3 }));\n\n p.text('Alpha = 0.0 (uniform)', -19, 4, { color: '#900', anchor: 'left' });\n p.text('Alpha = 0.5 (centripetal)', -19, 3, { color: '#090', anchor: 'left'});\n p.text('Alpha = 1.0 (chordal)', -19, 2, { color: '#009', anchor: 'left'});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1203,"value":"A segment is interpolated as a function of time (t). This runs from t=0 (start of segment) to t=1 (end of segment). However, t is not constant throughout the segment. It will typically slow down when the curve segment has a change in direction. We can also consider the full (spline) curve as a function of time, where t=0 at the start of the first segment and t=1 at the end of the last segment.\n\nThe common way of addressing the curve however is by length. For this we use the position parameter (u). This is the normalized length along the curve, where 0 is at the beginning of the curve and 1 is at the end. 0.5 will be at half the curve length. This allows us to move along the curve at constant speed, or find evenly spaced points along the curve. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1616,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1746,"value":"## Features","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2049,"value":"This section will give you an overview of the main features of the curve interpolator library. You can view the [full docs here](https://kjerandp.github.io/curve-interpolator/) or find the [source code here](https://github.com/kjerandp/curve-interpolator) on github.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1187,"value":"To use the curve-interpolator library in your own notebooks, you can require the full lib:\n```js\nlib = require('curve-interpolator')\n```\n\n...or, if you only need the CurveInterpolator class:\n```js\nCurveInterpolator = (await require('curve-interpolator')).CurveInterpolator\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1763,"value":"Create a new instance of the CurveInterpolator class using the constructor.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1938,"value":"interp = {\n const controlPoints = [[-5, -4], [-18, 1], [-12, 4], [5, -3], [3, 3], [16, -3]];\n const options = {\n tension: 0.0, // default 0.5\n alpha: 0.5, // default 0\n closed: false, // default false\n };\n const lerp = new CurveInterpolator(controlPoints, options);\n\n return lerp;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1908,"value":"### *```.getPointAt(position, target = undefined)```\nInterpolate a point at the given position.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1945,"value":"interp.getPointAt(0.25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2027,"value":"### *```.getPoints(segments, returnType, to = 0, from = 1)```\nInterpolate a set of points that corresponds to the number of segments requested. If you want 10 segments for example, this function will return 11 points, being the endpoints for those segments. You may also specify the range (from/to). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2024,"value":"interp.getPoints(10) // using default values gives a list of points as arrays and along the full curve (position 0 to 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2030,"value":"interp.getPoints(10, lib.Point, 0.25, 0.75) // here we pass in a type for the return type that implements VectorType and also give it a range","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1950,"value":"### *```.getTangentAt(position, target = undefined)```\nGet the tangent at the given position. The tangent is the normalized value of the first derivative at the point it is evaluated for. This gives you the direction of the curve as a unit vector.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1956,"value":"interp.getTangentAt(0.25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2019,"value":"### *```.getNormalAt(position, target = undefined)```\nGet the normal at the given position. The normal returned as a vector perpendicular to the tangent. The normal vector is only defined for 2D and 3D curves. In the 3D case - where the normal is actually a plane - it is still returned as a vector, pointing towards the center of the curvature.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2022,"value":"interp.getNormalAt(0.25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2008,"value":"### *```.getDerivativeAt(position, target = undefined)```\nGet the derivative at the given position. The derivative is returned as a vector. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2012,"value":"interp.getDerivativeAt(0.25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2015,"value":"### *```.getSecondDerivativeAt(position, target = undefined)```\nGet the second derivative at the given position. The value is returned as a vector. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2017,"value":"interp.getSecondDerivativeAt(0.25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2047,"value":"### *```.getCurvatureAt(position)```\nGet the (unsigned) curvature along with the radius and direction (as vector) of the curvature. Note that direction will only be available for 2d and 3d curves. The tangent is also returned, as it is often useful, for example, if you want to get the binormal in 3d.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2052,"value":"interp.getCurvatureAt(0.25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2331,"value":"curvatureExampleDiagram.p.node","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2324,"value":"viewof exCurvature = Inputs.range([0, 1], { step: 0.001, value: 0.25, label: 'U (position)' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2423,"value":"viewof showComb = Inputs.toggle({ label: 'Show comb', value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2059,"value":"interp.getNearestPosition([2, 5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2057,"value":"### *```.getNearestPosition(point, threshold = 0.001)```\nGet the nearest position on the curve from a point. This is an approximation and its accuracy is determined by the threshold value (smaller number requires more passes but is more precise). Returns the position on the curve (u), the distance from the point to the curve and the closest point on the curve.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2354,"value":"nearestPointExampleDiagram.p.node","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2034,"value":"### *```.getBoundingBox(from = 0, to = 1)```\nGet bounding box for the curve. This is by default covering the full curve, but you may specify any range (from and to) and get the bounding box for that section. The bounding box is returned as an object with the box's extrema (min max) in each dimension.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2043,"value":"interp.getBoundingBox()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2263,"value":"boundingBoxExampleDiagram.p.node","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2266,"value":"viewof bboxRange = rangeSlider({\n min: 0,\n max: 1,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0.0, 1.0],\n // Custom slider CSS, replaces all styles.\n title: 'Bounding box range',\n description: 'Bounding box for segmend indicated by start and end positionss (0..1)',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2068,"value":"### *```.getIntersects(v, axis = 0, max = 0)```\nFind points on the curve intersecting a specific value along a given axis. The axis is given as an index from 0 - n, i.e. 0 = x-axis, 1 = y-axis, 2 = z-axis etc. \n\nThe max parameter is used to specify the maximum number of solutions you want returned, where max=0 returns all solutions and a negative number will return the max number of solutions starting from the end of the curve and a positive number starting from the beginning of the curve. Note that If max = 1 or -1, this function returns the point (unwrapped) or null if no intersects exist. In any other case an array will be returned, regardless of there's multiple, a single or no solutions.\n\nThere's also corresponding functions if you rather want the intersects to be returned as positions (u) or time (t). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2066,"value":"interp.getIntersects(-10, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2223,"value":"intersectExampleDiagram.p.node","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2210,"value":"viewof lookup = Inputs.range([-20,20], { step: 0.01, value: -10, label: 'X-axis value' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2575,"value":"### *.getFrenetFrames(segments)\nSplit the curve up in the given number of segments and computes the tangents, normals and binormals (aka TNB-frames) at each position. This is most useful in 3d in order to get more predictable/consistent normals/binormals throughout the curve, which is useful for generating a path for ex. camera movement or generating geometry for shapes such as tubes or ribbons. For 2d curves, the binormal is omitted and the normals are simply a 90 degree counter-clockwise rotation of the tangents.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2573,"value":"frenetFramesDiagram.p.node","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2571,"value":"viewof segments = Inputs.range([1,100], { step: 1, value: 50, label: 'Segments' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2082,"value":"The following functions may be used to map between time and position etc.:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2080,"value":"### *.getTimeFromPosition(position, clampInput = false)\nReturns the time on curve at a position, given as a value between 0 and 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2100,"value":"interp.getTimeFromPosition(0.25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2084,"value":"### *.getPositionFromTime(t, clampInput = false)\nReturns the normalized position u for a normalized time value t","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2102,"value":"interp.getPositionFromTime(0.25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2090,"value":"### *.getPositionFromLength(length, clampInput = false)\nReturns the normalized position (length) u for the specified length","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2104,"value":"interp.getPositionFromLength(50) // the position at 50 units","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2550,"value":"### *```.length```\nGet the calculated length to the full curve.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2552,"value":"interp.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2098,"value":"### *.getLengthAt(position = 1, clampInput = false)\nReturns length from start to position","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2125,"value":"interp.getLengthAt(0.25) // quarter of the total curve length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2094,"value":"### *.getPositionAtKnot(index)\nReturns the normalized position u for the knot/control point at the given index. There is also an equivalent function available if you need the time of the knot instead.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2130,"value":"interp.getPositionAtKnot(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1725,"value":"## Playground","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1733,"value":"In the sections below you can experiment a bit with a few interactive demos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"viewof selectedDataSet2D = Inputs.select(Object.keys(testdata2D), { label: 'Data set (2D)' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1127,"value":"### 2D curve","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1735,"value":"You can drag the control points to new positions in this example. A few test data sets are available to choose from in the dropdown below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":19,"value":"viewof tension = Inputs.range([0,1], { step: 0.01, value: 0, label: 'Tension' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"viewof alpha = Inputs.range([0,1], { step: 0.1, value: 0.5, label: 'Alpha' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"viewof closed = Inputs.toggle({ label: 'Closed curve', value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"p.node","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"viewof u = Inputs.range([0, 1], { step: 0.001, value: 0, label: 'U (position)' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"lerp2D = new lib.CurveInterpolator(input2D, { tension, alpha, closed, arcDivisions: 0, numericalApproximationOrder: 21 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":589,"value":"cur = lerp2D.getCurvatureAt(u)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1125,"value":"### 3D curve","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1744,"value":"Here you can have some fun with 3d curves. Try zooming in a bit on the start of the curve and try sliding the _Trace curve with camera_ control.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":768,"value":"viewof selectedDataSet3D = Inputs.select(Object.keys(testdata3D), { label: 'Data set (3D)' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":913,"value":"viewof tension3d = Inputs.range([0,1], { step: 0.01, value: 0, label: 'Tension' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":917,"value":"viewof alpha3d = Inputs.range([0,1], { step: 0.1, value: 0.5, label: 'Alpha' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":920,"value":"viewof closed3d = Inputs.toggle({ label: 'Closed curve', value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":790,"value":"{ \n renderer.setSize(width3d, height3d);\n renderer.setPixelRatio(devicePixelRatio);\n renderer.domElement.setAttribute(\"style\", `border: 1px solid black; width: ${width3d}px`);\n\n try {\n while (renderer) {\n renderer.render(scene, camera); \n yield renderer.domElement;\n }\n } finally {\n renderer.dispose();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":909,"value":"viewof u3d = Inputs.range([0, 1], { step: 0.001, value: 0, label: 'U (position)' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":936,"value":"viewof CameraPos = { \n const inp = html``;\n inp.style.width = '80%';\n inp.addEventListener(\"input\", () => {\n const p = interp3D.getPointAt(inp.value);\n camera.userData.controls.update();\n\n const target = new THREE.Vector3();\n target.copy(camera.userData.controls.target);\n\n const newTarget = new THREE.Vector3();\n newTarget.set(...p);\n \n const move = new THREE.Vector3();\n move.subVectors(target, newTarget);\n\n camera.position.subVectors(camera.position, move);\n camera.userData.controls.target.copy(newTarget);\n camera.lookAt(newTarget);\n });\n return html`Trace curve with camera: ${inp}

Works best if zoomed in on curve!

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":845,"value":"interp3D = new lib.CurveInterpolator(input3D, { tension: tension3d, alpha: alpha3d, closed: closed3d })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":927,"value":"cur3d = interp3D.getCurvatureAt(u3d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1958,"value":"### Appendix\nCalculated values, setups, imports etc...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":740,"value":"#### THREE setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":796,"value":"width3d = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":799,"value":"height3d = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":804,"value":"camera_offset = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":906,"value":"position3d = {\n const pos = interp3D.getPointAt(u3d);\n uSphere.position.set(...pos);\n\n arrowNormal.position.set(...pos);\n arrowNormal.setDirection(vNormal);\n arrowBinormal.position.set(...pos);\n arrowBinormal.setDirection(vBinormal);\n\n return pos;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":811,"value":"scene = {\n const size = 20;\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xfcfcfc);\n \n // set up lights\n lights.forEach(light => scene.add(light));\n\n // show simple xyz axes\n const axesHelper = new THREE.AxesHelper(20);\n scene.add(axesHelper);\n\n const gridHelperX = new THREE.GridHelper( size * 2, size, 0xc0c0c0, 0xe0e0e0 );\n gridHelperX.rotateX(Math.PI / 2);\n gridHelperX.position.set(0, 0, -size);\n scene.add( gridHelperX );\n\n const gridHelperZ = new THREE.GridHelper( size * 2, size, 0xc0c0c0, 0xe0e0e0 );\n gridHelperZ.rotateZ(Math.PI / 2);\n gridHelperZ.position.set(-size, 0, 0);\n scene.add( gridHelperZ );\n\n const gridHelperY = new THREE.GridHelper( size * 2, size, 0xc0c0c0, 0xe0e0e0 );\n gridHelperY.position.set(0, -size, 0);\n scene.add( gridHelperY );\n\n scene.add(curve3d);\n\n scene.add(inpPointSpheres3D);\n scene.add(uSphere);\n\n scene.add(arrowNormal);\n scene.add(arrowBinormal);\n\n //scene.add(cSphere);\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":971,"value":"vNormal = new THREE.Vector3(...cur3d.direction)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":973,"value":"vBinormal = new THREE.Vector3(...lib.cross(cur3d.tangent, cur3d.direction))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":841,"value":"curveRadius3D = 0.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":979,"value":"arrowNormal = new THREE.ArrowHelper( vNormal, uSphere.position, 1, 0x0000FF )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":981,"value":"arrowBinormal = new THREE.ArrowHelper( vBinormal, uSphere.position, 1, 0xcccccc )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":898,"value":"inpPointSpheres3D = {\n const geometry = new THREE.SphereGeometry( curveRadius3D * 1.1, 32, 16 );\n const material = new THREE.MeshBasicMaterial( { color: 0x000000, transparent: false, opacity: 0.5 } );\n const group = new THREE.Group();\n input3D.forEach(p => {\n const mesh = new THREE.Mesh( geometry, material );\n mesh.position.set(...p);\n group.add(mesh); \n });\n \n return group;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":839,"value":"curve3d = { \n const start = input3D[0];\n\n class CustomCurve {\n getPointAt(u, optionalTarget = new THREE.Vector3()) {\n const p = interp3D.getPointAt(u);\n return optionalTarget.set( p[0] - start[0], p[1] - start[1], p[2] - start[2] );\n }\n \n computeFrenetFrames(segments) {\n const frames = interp3D.getFrenetFrames(segments);\n return {\n tangents: frames.tangents.map(d => new THREE.Vector3(...d)),\n normals: frames.normals.map(d => new THREE.Vector3(...d)),\n binormals: frames.binormals.map(d => new THREE.Vector3(...d)),\n }\n }\n }\n \n const curve = new CustomCurve();\n const geometry = new THREE.TubeGeometry(curve, Math.ceil(interp3D.length * 10), curveRadius3D, 36, false);\n const material = new THREE.MeshPhongMaterial({\n color: 0x607080,\n side: THREE.DoubleSide,\n shininess: 90,\n opacity: 0.5,\n });\n const mesh = new THREE.Mesh(geometry, material);\n mesh.position.set(...start);\n mesh.castShadow = true;\n \n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"uSphere = {\n const geometry = new THREE.SphereGeometry( curveRadius3D * 1.2, 32, 16 );\n const material = new THREE.MeshBasicMaterial( { color: 0xff0000, transparent: true, opacity: 0.5 } );\n const mesh = new THREE.Mesh( geometry, material );\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":802,"value":"initialPosition = {\n const p = input3D[0];\n return new THREE.Vector3(p[0] + camera_offset, p[1], p[2] + camera_offset);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":794,"value":"camera = { \n const fov = 45;\n const aspect = width3d / height3d;\n const near = 1;\n const far = 1000000;\n const p = input3D[0];\n \n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); \n camera.position.copy(initialPosition);\n\n camera.userData.controls = new THREE.OrbitControls(camera, renderer.domElement);\n camera.userData.controls.target.set(...p);\n camera.lookAt(...p);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":807,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n //renderer.shadowMap.enabled = true;\n //renderer.shadowMap.type = THREE.PCFShadowMap\n //renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n //renderer.shadowMap.type = THREE.VSMShadowMap\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":809,"value":"lights = {\n const lights = [];\n lights[0] = new THREE.AmbientLight(0xffffff, 1.0);\n \n lights[1] = new THREE.SpotLight(0xffffff, 0.5, 0);\n lights[2] = new THREE.PointLight(0xffffff, 0.5, 0);\n lights[3] = new THREE.PointLight(0xffffff, 0.5, 0); \n\n lights[1].position.set(0, 20, 0);\n lights[2].position.set(20, 20, 20);\n lights[3].position.set(-20, -20, -20);\n\n return lights;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":779,"value":"#### Plotter setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":119,"value":"p = { \n const xDomain = [-20,20];\n const yDomain = [15,-15];\n \n const p = createPlot({ \n width: width,\n height: width * (15/20),\n xDomain,\n yDomain,\n transitions: false,\n });\n\n mutable tcurve = p.polyline([], { stroke: '#9cf', width: 2 });\n \n const points = [];\n input2D.forEach((pt, i) => {\n const point = p.point(pt[0], pt[1], {\n fill: 'rgba(0,0,0,0.15)',\n stroke: 'black',\n size: 3,\n interactive: true,\n onChange: v => {\n pt[0] = v.x;\n pt[1] = v.y;\n mutable forceUpdate = true;\n },\n });\n points.push(point);\n });\n\n mutable marker = p.circle(0, 0, 0.15, { fill: 'red', stroke: '#500' });\n mutable vector1 = p.arrow(-10, -10, -10, -10, { stroke: 'green '});\n mutable vector2 = p.arrow(-10, -10, -10, -10, { stroke: 'blue '});\n \n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"interpolated2D = {\n forceUpdate;\n \n const nSamples = 500;\n const pu = lerp2D.getPointAt(u);\n const tan = lerp2D.getTangentAt(u);\n const nrm = lerp2D.getNormalAt(u);\n \n marker.cx = pu[0];\n marker.cy = pu[1];\n marker.r = 4 / marker.plot.sizeFactor;\n \n vector1.x1 = marker.cx;\n vector1.y1 = marker.cy;\n vector1.x2 = marker.cx + tan[0] * 2;\n vector1.y2 = marker.cy + tan[1] * 2;\n \n vector2.x1 = marker.cx;\n vector2.y1 = marker.cy;\n vector2.x2 = marker.cx + nrm[0] * 2;\n vector2.y2 = marker.cy + nrm[1] * 2;\n \n lerp2D.points = input2D;\n const verts = lerp2D.getPoints(nSamples, lib.Point);\n tcurve.vertices = verts;\n p.update();\n return verts;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"mutable forceUpdate = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":324,"value":"mutable tcurve = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":435,"value":"mutable marker = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":506,"value":"mutable vector1 = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"mutable vector2 = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1489,"value":"createPlot = (options = {}) => {\n const padding = 20;\n const innerWidth = width - 2 * padding;\n const height = (innerWidth / 4) + 2 * padding;\n options = {\n padding,\n xDomain: [-20, 20],\n yDomain: [5, -5],\n width,\n height: height,\n transitions: true,\n axises: true,\n ...options,\n };\n return plotter(options);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2351,"value":"nearestPointExampleDiagram = {\n const padding = 20;\n const p = createPlot({ transitions: false, grid: false, padding });\n drawCurve(p, interp);\n\n const pPosCurve = p.point(0, 0, { color: 'orange' });\n const pPosPoint = p.point(0, 0, { color: 'red' });\n const vDirection = p.segment(0, 0, 0, 0, { stroke: 'orange'});\n\n p.node.addEventListener('mousemove', event => {\n const { offsetX: mx, offsetY: my } = event;\n mutable mousePosition = [p.instance.x.invert(mx - padding), p.instance.y.invert(my - padding)];\n });\n \n return { p, pPosCurve, pPosPoint, vDirection };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2356,"value":"nearestPointExample = {\n const { p, pPosCurve, pPosPoint, vDirection } = nearestPointExampleDiagram;\n const point = mousePosition;\n const nearest = interp.getNearestPosition(point);\n pPosPoint.px = point[0];\n pPosPoint.py = point[1];\n\n pPosCurve.px = nearest.point[0];\n pPosCurve.py = nearest.point[1];\n\n vDirection.x1 = point[0];\n vDirection.y1 = point[1];\n vDirection.x2 = nearest.point[0];\n vDirection.y2 = nearest.point[1];\n \n p.update();\n\n return nearest;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2359,"value":"mutable mousePosition = [0,0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2315,"value":"curvatureExampleDiagram = {\n const p = createPlot({ transitions: false, grid: false });\n drawCurve(p, interp);\n\n const pPos = p.point(0, 0);\n const cCircle = p.circle(-10, -10, 0, { fill: 'rgba(200,100,0,0.05)', stroke: 'rgba(200,100,0,0.75)' });\n const vDirection = p.arrow(-10, -10, -10, -10, { stroke: 'red'});\n\n if (showComb) {\n const n = 500;\n const colorScale = v => {\n const x = lib.clamp(v, 0, 1);\n return `rgba(${x * 255}, ${x * 127}, 255, 0.6)`;\n };\n \n interp.forEach(({ t }) => {\n const s = 10;\n const cur = interp.getCurvatureAtTime(t);\n const a = interp.getPointAtTime(t);\n const b = [\n a[0] - (cur.direction[0] * cur.curvature * s),\n a[1] - (cur.direction[1] * cur.curvature * s),\n ]; \n p.segment(a[0], a[1], b[0], b[1], { stroke: colorScale(cur.curvature) });\n }, n);\n }\n \n \n return { p, pPos, vDirection, cCircle };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2317,"value":"curvatureExample = {\n const { p, pPos, vDirection, cCircle } = curvatureExampleDiagram;\n const pos = interp.getPointAt(exCurvature);\n const cur = interp.getCurvatureAt(exCurvature);\n \n pPos.px = pos[0];\n pPos.py = pos[1];\n\n cCircle.cx = pos[0] + cur.direction[0] * cur.radius;\n cCircle.cy = pos[1] + cur.direction[1] * cur.radius;\n cCircle.r = cur.radius;\n\n vDirection.x1 = pos[0];\n vDirection.y1 = pos[1];\n vDirection.x2 = pos[0] + cur.direction[0] * cur.radius;\n vDirection.y2 = pos[1] + cur.direction[1] * cur.radius;\n \n p.update();\n return cur;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2260,"value":"boundingBoxExampleDiagram = {\n const p = createPlot({ transitions: false, grid: false });\n drawCurve(p, interp, 'gray');\n const bboxRect = p.rectangle(-1, 1, -1, 1, { fill: 'lightgray', opacity: 0.1, stroke: 'black', dash: [4, 4], width: 1 });\n const range = p.polyline([], { stroke: 'red' });\n \n return { p, bboxRect, range };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2274,"value":"boundingBoxExample = {\n const { p, bboxRect, range } = boundingBoxExampleDiagram;\n const bbox = interp.getBoundingBox(bboxRange[0], bboxRange[1]);\n bboxRect.x1 = bbox.min[0];\n bboxRect.x2 = bbox.max[0];\n bboxRect.y2 = bbox.min[1];\n bboxRect.y1 = bbox.max[1];\n\n const vertices = interp.getPoints(300, lib.Point, bboxRange[0], bboxRange[1]);\n range.vertices = vertices;\n p.update();\n return bboxRect;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2156,"value":"intersectExampleDiagram = {\n const p = createPlot({ transitions: false, grid: false });\n //addControlPoints(p, interp.points);\n const curve = drawCurve(p, interp);\n const lookupSegment = p.segment(-10, -10, -10, -10, {\n stroke: 'rgba(255,0,0,0.5',\n width: 1,\n });\n const lookupCircle = p.circle(-10, -10, 0.15, { fill: 'red', stroke: 'black' })\n return { p, lookupSegment, lookupCircle, curve };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2227,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2230,"value":"solutionObjects = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2568,"value":"frenetFramesDiagram = {\n const p = createPlot({ transitions: false, grid: true });\n drawCurve(p, interp, 'lightgray');\n const frames = interp.getFrenetFrames(segments);\n\n for (let i = 0; i <= segments; i++) {\n const tan = frames.tangents[i];\n const nrm = frames.normals[i];\n const origin = interp.getPointAt(i / segments);\n p.arrow(origin[0], origin[1], origin[0] + tan[0], origin[1] + tan[1], { stroke: 'blue', size: 4});\n p.arrow(origin[0], origin[1], origin[0] + nrm[0], origin[1] + nrm[1], { stroke: 'red', size: 4});\n }\n \n return { p };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2161,"value":"#### Utility functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2163,"value":"function getSegmentVertices(lerp, index) {\n const u1 = lerp.getPositionAtKnot(index);\n const u2 = lerp.getPositionAtKnot(index + 1);\n return lerp.getPoints(100, lib.Point, u1, u2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2166,"value":"async function drawSegment(p, lerp, index, dur = 0, startColor = 'red', endColor = null) {\n const vertices = getSegmentVertices(lerp, index);\n const path = p.polyline(vertices, { stroke: startColor });\n await pause(dur);\n if (endColor && startColor !== endColor) {\n path.options.stroke = endColor;\n p.update();\n }\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2204,"value":"function drawCurve(p, lerp, color = 'black') {\n const vertices = lerp.getPoints(300, lib.Point);\n const path = p.polyline(vertices, { stroke: color });\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2173,"value":"async function addControlPoints(p, points, dur = 0) {\n const controlPoints = [];\n const promises = [];\n points.forEach((cp, i) => {\n promises.push((async () => {\n await pause(i * (dur / points.length));\n const point = p.point(cp[0], cp[1], { size: 6, text: '1', color: 'black' }); \n const label = p.text(i, cp[0], cp[1] - 0.04, { baseline: 'middle', size: 10, color: 'white', weight: 600 });\n controlPoints[i] = { point, label };\n })());\n });\n await Promise.all(promises);\n return controlPoints;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2177,"value":"async function animate(p, info, frames, skipFrames = [], pauseBetweenFrames = 1000) {\n for (let i = 0; i < frames.length; i++) {\n if (skipFrames.includes(i)) continue;\n \n await frames[i]();\n await pause(pauseBetweenFrames);\n p.clear();\n info();\n }\n\n await pause(pauseBetweenFrames);\n animate(p, info, frames, skipFrames, pauseBetweenFrames);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1311,"value":"pause = async dur => Promises.delay(dur)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":744,"value":"#### Test data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":15,"value":"input2D = testdata2D[selectedDataSet2D]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":764,"value":"input3D = testdata3D[selectedDataSet3D]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"testdata2D = ({\n Example1: [[-13, 2], [-10, -5], [-5, -5], [0, 5], [5, -5], [13, -5], [7, 8], [13, 15]],\n Example2: [[-8, 4], [-4, -2], [5, -5], [8, -2], [0, 0], [2, 2], [-2, 8]],\n Example3: [[10, -13], [0, -5], [10, 5], [0, 13]],\n Example4: [[-9,12],[-8,7],[-7.5,4],[-6,1.5],[-5,2.5],[-3,3],[-2,2],[0,2.5],[1,2],[2,1],[4,-1],[8,0],[9,-4],[4,-5.5],[0,-3],[0,4],[4,6],[4.5,5.5],[2,4]],\n Example5: [[-5, 0], [-5, 0.2], [-4, 2], [0, 2], [4, 2], [5, 0.2], [5, 0]],\n Symmetric1: [[-4, 6], [-6, 2], [6, 2], [4, 6], [2, 10], [0, 14], [-2, 10]],\n Symmetric2: [\n [0, 0], [-1, 9], [0, 10], [1, 9], \n [0, 0], [-1, -9], [0, -10], [1, -9], \n [0, 0], [-9, 1], [-10, 0], [-9, -1], \n [0, 0], [9, 1], [10, 0], [9, -1]\n ],\n Cusp: [[-5, -10], [2.8, 6], [3.2, 6.2], [6, -14]],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":759,"value":"testdata3D = ({\n Example1: [[1,0,1],[1,-1,1],[1,-2,2],[1.2,-3,1],[2,-5,5],[10,-5,4.5],[12,-5,7.5],[10,-4.8,10]],\n Example2: [[0, -2, -3], [3, -1, 0], [0, 0, 3], [-3.5, 1, 0], [0, 2, -4], [5, 3, 0], [0, 4, 5], [-5, 5, 0], [0, 6, -5], [5, 7, 0], [0, 8, 5], [-5, 9, 0], [0, 10, -7]],\n Planar: [[-8, 0, 2], [-5, 0, -5], [0, 0, -5], [5, 0, 5], [10, 0, -5], [18, 0, -5], [12, 0, 8], [18, 0, 15]],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":550,"value":"#### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1934,"value":"CurveInterpolator = lib.CurveInterpolator","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"lib = require('curve-interpolator@3.3.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":737,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n await require(\"three.meshline@1.4\").catch(() => {});\n THREE.MeshLine = window.MeshLine;\n THREE.MeshLineMaterial = window.MeshLineMaterial;\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"import { plotter } from '@kjerandp/plotter'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2268,"value":"import { rangeSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"