Interpolation on blog https://jpcharalambosh.co/tags/interpolation/ Recent content in Interpolation on blog blog https://jpcharalambosh.co/papermod-cover.png https://jpcharalambosh.co/papermod-cover.png Hugo en Sun, 19 Apr 2026 12:00:00 -0500 Camera interpolation https://jpcharalambosh.co/posts/camera_interpolation/ Sun, 19 Apr 2026 12:00:00 -0500 https://jpcharalambosh.co/posts/camera_interpolation/ <blockquote> <p>Lookat-camera keyframe animation with <a href="https://github.com/VisualComputing/p5.tree"><code>createCameraTrack</code></a>. A bound <code>animCam</code> plays a four-keyframe track; a separate <code>viewCam</code> orbits around the abstraction — eye polyline, gaze rays, per-keyframe mini-camera markers. A live frustum follows playback, and an FBO inset shows what <code>animCam</code> actually sees. Toggle <code>TEX</code> and that inset slides onto the live frustum&rsquo;s near plane — the frustum becomes a window. Two <a href="https://github.com/VisualComputing/p5.tree"><code>createPanel</code></a> instances drive the whole thing: one binds checkboxes to UI state, one binds transport controls to the track.</p> Pose interpolation https://jpcharalambosh.co/posts/pose_interpolation/ Sun, 19 Apr 2026 10:00:00 -0500 https://jpcharalambosh.co/posts/pose_interpolation/ <blockquote> <p>TRS keyframe animation with <a href="https://github.com/VisualComputing/p5.tree"><code>createPoseTrack</code></a>. Four <code>{ pos, rot }</code> keyframes, cubic Hermite interpolation of position with auto-Catmull-Rom tangents, and slerp on rotations. A transport panel scrubs the track; a second panel toggles the <a href="https://github.com/VisualComputing/p5.tree"><code>trackPath</code></a> overlay bits — PATH, CONTROLS, TANGENTS_IN, TANGENTS_OUT — and switches interpolation modes live. Unlike <a href="https://github.com/VisualComputing/p5.tree"><code>createCameraTrack</code></a>, which applies its result to a camera automatically, <code>PoseTrack</code> produces an interpolated pose you fold into the transform stack yourself with <code>applyPose(track.eval(out))</code>.</p> </blockquote> <iframe id='p5-0' style='border:none; display:block; width:0; height:0;' srcdoc=" <!DOCTYPE html> <html> <head> <style>body{margin:0;padding:0;overflow:hidden}</style> <script src='https://cdn.jsdelivr.net/npm/p5@2.2.3/lib/p5.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/p5.tree/dist/p5.tree.min.js'></script> <script> &#39;use strict&#39; let track let uiTrack, uiViz const out = { pos: [0, 0, 0], rot: [0, 0, 0, 1], scl: [1, 1, 1] } function setup() { createCanvas(600, 400, WEBGL) // ── PoseTrack ──────────────────────────────────────────────────────────── track = createPoseTrack() track.add({ pos: [-220, -40, 0], rot: { axis: [0, 1, 0], angle: 0 } }) track.add({ pos: [ -70, -40, 80], rot: { axis: [0, 1, 0], angle: Math.PI/3 } }) track.add({ pos: [ 70, -40, -80], rot: { axis: [0, 1, 0], angle: -Math.PI/4 } }) track.add({ pos: [ 220, -40, 0], rot: { axis: [0, 1, 0], angle: Math.PI/2 } }) track.play({ loop: true, bounce: true, duration: 90 }) // ── Transport panel ────────────────────────────────────────────────────── uiTrack = createPanel(track, { x: 10, y: 10, width: 130, title: &#39;PoseTrack&#39;, info: true, reset: false, camera: null, color: &#39;white&#39;, }) // ── Path viz &#43; interp modes ───────────────────────────────────────────── uiViz = createPanel({ path: { value: true }, controls: { value: true }, tangentsIn: { value: true }, tangentsOut: { value: true }, posInterp: { type: &#39;select&#39;, value: &#39;hermite&#39;, options: [{ label: &#39;hermite&#39;, value: &#39;hermite&#39; }, { label: &#39;linear&#39;, value: &#39;linear&#39; }, { label: &#39;step&#39;, value: &#39;step&#39; }] }, rotInterp: { type: &#39;select&#39;, value: &#39;slerp&#39;, options: [{ label: &#39;slerp&#39;, value: &#39;slerp&#39; }, { label: &#39;nlerp&#39;, value: &#39;nlerp&#39; }, { label: &#39;step&#39;, value: &#39;step&#39; }] }, }, { x: 460, y: 10, width: 130, labels: true, title: &#39;Path viz&#39;, color: &#39;white&#39;, }) noFill() strokeWeight(1.2) } function draw() { background(&#39;#0a0a0e&#39;) orbitControl() stroke(70, 90, 110) grid({ size: 400, subdivisions: 8 }) // live interp modes — read once per frame track.posInterp = uiViz.posInterp.value() track.rotInterp = uiViz.rotInterp.value() // path overlays — each bit in its own ambient stroke colour const { PATH, CONTROLS, TANGENTS_IN, TANGENTS_OUT } = p5.Tree if (uiViz.path.value()) { stroke(&#39;#e8ecf1&#39;); trackPath(track, { bits: PATH, marker: null }) } if (uiViz.controls.value()) { stroke(&#39;#4a5566&#39;); trackPath(track, { bits: CONTROLS, marker: null }) } if (uiViz.tangentsIn.value()) { stroke(&#39;#5cd0ff&#39;); trackPath(track, { bits: TANGENTS_IN, marker: null }) } if (uiViz.tangentsOut.value()) { stroke(&#39;#ff6ec7&#39;); trackPath(track, { bits: TANGENTS_OUT, marker: null }) } // per-keyframe markers — default six-axis cross oriented by the keyframe&#39;s pose stroke(180) trackPath(track, { bits: 0 }) // interpolated object at the track cursor track.eval(out) push() applyPose(out) stroke(&#39;#ffd166&#39;) noFill() box(42) pop() } const mouseWheel = () =&gt; false </script> <script> (function() { var t = setInterval(function() { var c = document.querySelector('canvas') if (c && c.offsetWidth > 0) { clearInterval(t) window.parent.postMessage({ type: 'p5resize', id: 'p5-0', w: c.offsetWidth, h: c.offsetHeight }, '*') } }, 100) })() </script> </head> <body></body> </html> " ></iframe> <script> window.addEventListener('message', function(e) { if (e.data && e.data.type === 'p5resize' && e.data.id === 'p5-0') { var f = document.getElementById('p5-0') if (f) { f.style.width = e.data.w + 'px'; f.style.height = e.data.h + 'px' } } }) </script> <hr> <h1 id="four-keyframes-one-object">Four keyframes, one object</h1> <p><code>createPoseTrack</code> returns a <code>PoseTrack</code> — a renderer-agnostic state machine for <code>{ pos, rot, scl }</code> keyframes. <code>track.add(spec)</code> appends one; adjacent duplicates are skipped by default:</p>