MapDirection on blog https://jpcharalambosh.co/tags/mapdirection/ Recent content in MapDirection on blog blog https://jpcharalambosh.co/papermod-cover.png https://jpcharalambosh.co/papermod-cover.png Hugo en Thu, 09 Apr 2026 12:00:00 -0500 3D Brush Painting in VR https://jpcharalambosh.co/posts/brush/ Thu, 09 Apr 2026 12:00:00 -0500 https://jpcharalambosh.co/posts/brush/ <blockquote> <p>A 3D brush painting sketch that uses depth control for VR-style experiences. <a href="https://github.com/VisualComputing/p5.tree"><code>mapLocation()</code></a> converts screen-space mouse coordinates and a depth slider value directly into world-space positions, so each brush stroke is placed precisely in 3D. Press <code>r</code> to toggle recording, <code>c</code> to clear, <code>f</code> to re-focus the camera on the world origin.</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 brushColor, depthSlider, points = [] let recording = false function setup() { createCanvas(600, 400, WEBGL) colorMode(RGB, 1) document.oncontextmenu = () =&gt; false // initialise depth slider at the screen-space z of the world origin const o = mapLocation(p5.Tree.ORIGIN, { from: p5.Tree.WORLD, to: p5.Tree.SCREEN }) depthSlider = createSlider(0, 1, o.z, 0.001) depthSlider.position(10, 10) depthSlider.style(&#39;width&#39;, &#39;580px&#39;) brushColor = createColorPicker(&#39;#C7C08D&#39;) brushColor.position(width - 70, 40) } function draw() { mouseY &gt;= 30 &amp;&amp; orbitControl() recording &amp;&amp; addPoint() background(&#39;#222226&#39;) axes({ size: 50, bits: p5.Tree.X | p5.Tree.Y | p5.Tree.Z }) for (const pt of points) { push() noStroke() fill(pt.color) translate(pt.pos) sphere(1) pop() } } function addPoint() { points.push({ pos: mapLocation([mouseX, mouseY, depthSlider.value()], { from: p5.Tree.SCREEN, to: p5.Tree.WORLD }), color: brushColor.color() }) } function focusOrigin() { const eye = mapLocation() // camera world position const up = mapDirection(p5.Tree.j) // camera up in world space const origin = [0, 0, 0] camera(eye.x, eye.y, eye.z, ...origin, up.x, up.y, up.z) const o = mapLocation(p5.Tree.ORIGIN, { from: p5.Tree.WORLD, to: p5.Tree.SCREEN }) depthSlider.value(o.z) } function keyPressed() { key === &#39;c&#39; &amp;&amp; (points = []) key === &#39;f&#39; &amp;&amp; focusOrigin() key === &#39;r&#39; &amp;&amp; (recording = !recording) } </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> <h2 id="screen-to-world-mapping-with-maplocation">Screen-to-world mapping with <code>mapLocation</code></h2> <p>The core of the brush is a single <code>mapLocation</code> call that lifts the 2D mouse position — together with a depth value from the slider — into 3D world space each frame:</p>