https://jpcharalambosh.co/tags/p5.treegl/ Recent content in P5.treegl on blog https://jpcharalambosh.co/papermod-cover.png https://jpcharalambosh.co/papermod-cover.png Hugo en Sat, 02 Sep 2023 15:07:24 -0500 https://jpcharalambosh.co/posts/photomosaic/ Sat, 02 Sep 2023 15:07:24 -0500 https://jpcharalambosh.co/posts/photomosaic/ <blockquote> <p>This demo visualization shows a <a href="https://en.wikipedia.org/wiki/Photographic_mosaic">photomosaic (&amp; videomosaic)</a> implemented in hardware:</p> </blockquote> <p>(press <code>r</code> to randomly pick another painting)<br> <iframe id="" style="width:675px; height:675px" srcdoc=" <!DOCTYPE html> <html> <head> <script src='https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.min.js'></script> <script src='https://cdn.jsdelivr.net/gh/VisualComputing/p5.treegl/p5.treegl.min.js'></script> <script src=https://cdn.jsdelivr.net/gh/objetos/p5.quadrille.js/p5.quadrille.min.js></script> <script> &#39;use strict&#39; let palette let fbo let mosaic let src let paintings let video_src // ui let resolution let video_on let uv let mode // MAX_TEXTURE_SIZE seem to be 4096 in my firefox (others don&#39;t complain) // see: https://t.ly/k7E_ // palette.width -&gt; n * SAMPLE_RES // 120 wasn&#39;t disliked before const SAMPLE_RES = navigator.userAgent.includes(&#39;Firefox&#39;) ? 65 : 150 function preload() { video_src = createVideo([&#39;wagon.webm&#39;]) video_src.hide() mosaic = readShader(&#39;mosaic.frag&#39;) paintings = [] for (let i = 1; i &lt;= 30; i&#43;&#43;) { paintings.push(loadImage(`p${i}.jpg`)) } } function setup() { createCanvas(650, 650, WEBGL) textureMode(NORMAL) noStroke() resolution = createSlider(1, 200, 40, 1) resolution.position(10, 35) resolution.style(&#39;width&#39;, &#39;80px&#39;) video_on = createCheckbox(&#39;video&#39;, false) video_on.style(&#39;color&#39;, &#39;magenta&#39;) video_on.changed(() =&gt; { src = video_on.checked() ? video_src : random(paintings) video_on.checked() ? video_src.loop() : video_src.pause() }) video_on.position(10, 55) src = random(paintings) uv = createCheckbox(&#39;uv visualization&#39;, false) uv.style(&#39;color&#39;, &#39;magenta&#39;) uv.position(10, 70) mode = createSelect() mode.position(10, 90) mode.option(&#39;original&#39;) mode.option(&#39;keys&#39;) mode.option(&#39;symbols&#39;) mode.selected(&#39;symbols&#39;) mode.changed(() =&gt; mode.value() === &#39;original&#39; ? resolution.hide() : resolution.show()) palette = createQuadrille(paintings) fbo = createFramebuffer({ width: SAMPLE_RES * palette.width, height: SAMPLE_RES, format: FLOAT }) sample() } function sample() { palette.sort({ ascending: true, cellLength: SAMPLE_RES }) fbo.begin() //resetShader() drawQuadrille(palette, { cellLength: SAMPLE_RES, outlineWeight: 0, x: -SAMPLE_RES * palette.width / 2, y: -SAMPLE_RES * palette.height / 2 }) fbo.end() } function draw() { applyShader(mosaic, { uniforms: { source: src, palette: fbo.color, n: palette.width, resolution: resolution.value(), uv: uv.checked(), keys: mode.value() === &#39;keys&#39;, original: mode.value() === &#39;original&#39; } }) } function keyPressed() { if (key === &#39;r&#39; &amp;&amp; !video_on.checked()) { src = random(paintings) } } </script> </head> <body> </body> </html> " ></iframe> </p>