{ 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); }