Pipe on blog https://jpcharalambosh.co/tags/pipe/ Recent content in Pipe on blog blog https://jpcharalambosh.co/papermod-cover.png https://jpcharalambosh.co/papermod-cover.png Hugo en Thu, 09 Apr 2026 15:52:34 -0500 Post-effects pipeline https://jpcharalambosh.co/posts/post_effects/ Thu, 09 Apr 2026 15:52:34 -0500 https://jpcharalambosh.co/posts/post_effects/ <blockquote> <p>Multi-pass post-processing with <a href="https://beta.p5js.org/tutorials/intro-to-p5-strands/">p5.strands</a> and <a href="https://github.com/VisualComputing/p5.tree"><code>pipe()</code></a>. Three filter passes — depth-of-field blur, value-noise warp, and pixelation — are chained over a scene framebuffer. Each pass is a <code>baseFilterShader().modify()</code> callback; <a href="https://github.com/VisualComputing/p5.tree"><code>createPanel</code></a> wires their uniforms automatically. Press <code>1</code>, <code>2</code>, or <code>3</code> to rotate the pass ordering at runtime.</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; const _dir = new Float32Array(3) const _loc = new Float32Array(3) let layer, models let dofFilter, noiseFilter, pixelFilter let uiDof, uiNoise, uiPixel let focusVal = 0 let order = 0 // 0=dof→noise→pixel 1=noise→pixel→dof 2=pixel→dof→noise // ── Strands callbacks ───────────────────────────────────────────────────────── function dofCallback() { const depthTex = uniformTexture(() =&gt; layer.depth) const focus = uniformFloat(() =&gt; focusVal) const blurIntensity = uniformFloat(&#39;blurIntensity&#39;) const getBlurriness = (d) =&gt; abs(d - focus) * 40 * blurIntensity const maxBlurDist = (b) =&gt; b * 0.01 getColor((inputs, canvasContent) =&gt; { let colour = getTexture(canvasContent, inputs.texCoord) let samples = 1 const centerDepth = getTexture(depthTex, inputs.texCoord).r const blur = getBlurriness(centerDepth) for (let i = 0; i &lt; 20; i&#43;&#43;) { const angle = float(i) * TWO_PI / 20 const dist = float(i) / 20 * maxBlurDist(blur) const offset = [cos(angle), sin(angle)] * dist const sd = getTexture(depthTex, inputs.texCoord &#43; offset).r if (sd &gt;= centerDepth || maxBlurDist(getBlurriness(sd)) &gt;= dist) { colour &#43;= getTexture(canvasContent, inputs.texCoord &#43; offset) samples&#43;&#43; } } colour /= float(samples) return [colour.rgb, 1] }) } function noiseCallback() { const frequency = uniformFloat(&#39;frequency&#39;) const amplitude = uniformFloat(&#39;amplitude&#39;) const speed = uniformFloat(&#39;speed&#39;) const t = uniformFloat(() =&gt; millis() / 1000) const hash = (p) =&gt; fract(sin(dot(p, [127.1, 311.7, 74.7])) * 43758.5453123) const fade = (t) =&gt; t * t * (3 - 2 * t) const valueNoise = (p) =&gt; { const i = floor(p), f = fract(p), u = fade(f) const n000=hash(i&#43;[0,0,0]), n100=hash(i&#43;[1,0,0]) const n010=hash(i&#43;[0,1,0]), n110=hash(i&#43;[1,1,0]) const n001=hash(i&#43;[0,0,1]), n101=hash(i&#43;[1,0,1]) const n011=hash(i&#43;[0,1,1]), n111=hash(i&#43;[1,1,1]) const nx00=mix(n000,n100,u.x), nx10=mix(n010,n110,u.x) const nx01=mix(n001,n101,u.x), nx11=mix(n011,n111,u.x) return mix(mix(nx00,nx10,u.y), mix(nx01,nx11,u.y), u.z) * 2 - 1 } getColor((inputs, canvasContent) =&gt; { const s = frequency * inputs.texCoord.x const v = frequency * inputs.texCoord.y const n1 = valueNoise([s, v, speed * t]) const n2 = valueNoise([s &#43; 17, v, speed * t]) return [getTexture(canvasContent, inputs.texCoord &#43; [amplitude*n1, amplitude*n2]).rgb, 1] }) } function pixelCallback() { const level = uniformFloat(&#39;level&#39;) getColor((inputs, canvasContent) =&gt; { const snapped = floor(inputs.texCoord * level) / level return [getTexture(canvasContent, snapped).rgb, 1] }) } // ── Setup ───────────────────────────────────────────────────────────────────── function setup() { createCanvas(600, 400, WEBGL) layer = createFramebuffer() dofFilter = baseFilterShader().modify(dofCallback) noiseFilter = baseFilterShader().modify(noiseCallback) pixelFilter = baseFilterShader().modify(pixelCallback) uiDof = createPanel({ blurIntensity: { min: 0, max: 4, value: 1.5, step: 0.1, label: &#39;blur&#39; } }, { target: dofFilter, x: 10, y: 10, width: 130, labels: true, title: &#39;DOF&#39;, color: &#39;white&#39; }) uiNoise = createPanel({ frequency: { min: 0, max: 10, value: 3, step: 0.1, label: &#39;frequency&#39; }, amplitude: { min: 0, max: 1, value: 0.3, step: 0.01, label: &#39;amplitude&#39; }, speed: { min: 0, max: 1, value: 0.3, step: 0.01, label: &#39;speed&#39; } }, { target: noiseFilter, x: 155, y: 10, width: 130, labels: true, title: &#39;Noise&#39;, color: &#39;white&#39; }) uiPixel = createPanel({ level: { min: 2, max: 600, value: 300, step: 1, label: &#39;level&#39; } }, { target: pixelFilter, x: 300, y: 10, width: 130, labels: true, title: &#39;Pixel&#39;, color: &#39;white&#39; }) const trange = 200 models = [] for (let i = 0; i &lt; 50; i&#43;&#43;) { models.push({ position: createVector( (random() * 2 - 1) * trange, (random() * 2 - 1) * trange, (random() * 2 - 1) * trange ), size: random() * 25 &#43; 8, color: i === 0 ? color(255, 0, 220) : color(int(random(256)), int(random(256)), int(random(256))), type: i === 0 ? &#39;ball&#39; : i &lt; 25 ? &#39;torus&#39; : &#39;box&#39; }) } } // ── Draw ────────────────────────────────────────────────────────────────────── function draw() { layer.begin() background(0) axes() orbitControl() noStroke() ambientLight(100) mapDirection(p5.Tree._k, { out: _dir, from: p5.Tree.EYE, to: p5.Tree.WORLD }) directionalLight(255, 255, 255, _dir[0], _dir[1], _dir[2]) specularMaterial(255) shininess(150) models.forEach(m =&gt; { push() fill(m.color) translate(m.position) m.type === &#39;box&#39; ? box(m.size) : m.type === &#39;torus&#39; ? torus(m.size) : sphere(m.size) pop() }) mapLocation(models[0].position, { out: _loc, from: p5.Tree.WORLD, to: p5.Tree.SCREEN }) focusVal = _loc[2] layer.end() const passes = [[dofFilter, noiseFilter, pixelFilter], [noiseFilter, pixelFilter, dofFilter], [pixelFilter, dofFilter, noiseFilter]][order] pipe(layer, passes) beginHUD() fill(255) noStroke() textSize(12) text([&#39;dof → noise → pixel&#39;, &#39;noise → pixel → dof&#39;, &#39;pixel → dof → noise&#39;][order] &#43; &#39; (1/2/3 to rotate)&#39;, 10, height - 10) endHUD() } function keyPressed() { if (key === &#39;1&#39; || key === &#39;2&#39; || key === &#39;3&#39;) order = (order &#43; 1) % 3 } 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="shader-passes-as-strands-callbacks">Shader passes as strands callbacks</h1> <p>Each post-processing pass is a <code>baseFilterShader().modify()</code> callback — a plain JavaScript function using the <a href="https://beta.p5js.org/tutorials/intro-to-p5-strands/">p5.strands</a> DSL. The framework compiles each callback to WebGL2 at startup; no raw GLSL strings are needed.</p>