2b:null 2c:["$","title",null,{"children":"Projection Mapping Demos | Zach Pino | Observable"}] 31:T1227,particleScene = { const width = 800; const height = 600; const PARTICLE_COUNT = 8000; const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000018); // slightly lighter so we can confirm it's rendering scene.fog = new THREE.FogExp2(0x000018, 0.015); const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000); camera.position.set(0, 0, 35); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); renderer.setSize(width, height); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.domElement.style.display = "block"; renderer.domElement.style.border = "1px solid #333"; // so you can see the canvas bounds even if rendering fails const positions = new Float32Array(PARTICLE_COUNT * 3); const velocities = new Float32Array(PARTICLE_COUNT * 3); const homePositions = new Float32Array(PARTICLE_COUNT * 3); const colors = new Float32Array(PARTICLE_COUNT * 3); const sizes = new Float32Array(PARTICLE_COUNT); const FIELD_W = 50, FIELD_H = 35, FIELD_D = 20; for (let i = 0; i < PARTICLE_COUNT; i++) { const x = (Math.random() - 0.5) * FIELD_W; const y = (Math.random() - 0.5) * FIELD_H; const z = (Math.random() - 0.5) * FIELD_D; homePositions[i * 3] = x; homePositions[i * 3 + 1] = y; homePositions[i * 3 + 2] = z; positions[i * 3] = x; positions[i * 3 + 1] = y; positions[i * 3 + 2] = z; const t = (y + FIELD_H / 2) / FIELD_H; colors[i * 3] = 0.3 + t * 0.7; colors[i * 3 + 1] = 0.5 + (1 - t) * 0.4; colors[i * 3 + 2] = 0.9; sizes[i] = 0.15 + Math.random() * 0.2; } const geometry = new THREE.BufferGeometry(); geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3)); geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3)); geometry.setAttribute("size", new THREE.BufferAttribute(sizes, 1)); const material = new THREE.PointsMaterial({ size: 0.3, vertexColors: true, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending, depthWrite: false, sizeAttenuation: true }); const points = new THREE.Points(geometry, material); scene.add(points); renderer.render(scene, camera); const posAttr = geometry.getAttribute("position"); const tmpKeypoints3D = []; let frame = 0; let raf; const animate = () => { frame++; tmpKeypoints3D.length = 0; const live = keypointsLive.current; for (let k = 0; k < live.length; k++) { const kp = live[k]; const wx = -(kp.x / 640 - 0.5) * FIELD_W; const wy = -(kp.y / 480 - 0.5) * FIELD_H; tmpKeypoints3D.push({ x: wx, y: wy, z: 0, w: kp.confidence }); } const pos = posAttr.array; const REPULSE_RADIUS = 6.0; const REPULSE_STRENGTH = 0.8; const SPRING = 0.02; const DAMPING = 0.88; for (let i = 0; i < PARTICLE_COUNT; i++) { const i3 = i * 3; let px = pos[i3], py = pos[i3 + 1], pz = pos[i3 + 2]; let vx = velocities[i3], vy = velocities[i3 + 1], vz = velocities[i3 + 2]; for (let k = 0; k < tmpKeypoints3D.length; k++) { const kp = tmpKeypoints3D[k]; const dx = px - kp.x, dy = py - kp.y, dz = pz - kp.z; const distSq = dx * dx + dy * dy + dz * dz; if (distSq < REPULSE_RADIUS * REPULSE_RADIUS && distSq > 0.001) { const dist = Math.sqrt(distSq); const falloff = 1.0 - dist / REPULSE_RADIUS; const force = (REPULSE_STRENGTH * falloff * falloff * kp.w) / dist; vx += dx * force; vy += dy * force; vz += dz * force; } } vx += (homePositions[i3] - px) * SPRING; vy += (homePositions[i3 + 1] - py) * SPRING; vz += (homePositions[i3 + 2] - pz) * SPRING; vx += Math.sin(frame * 0.01 + py * 0.1) * 0.003; vy += Math.cos(frame * 0.01 + px * 0.1) * 0.003; vx *= DAMPING; vy *= DAMPING; vz *= DAMPING; pos[i3] = px + vx; pos[i3 + 1] = py + vy; pos[i3 + 2] = pz + vz; velocities[i3] = vx; velocities[i3 + 1] = vy; velocities[i3 + 2] = vz; } posAttr.needsUpdate = true; camera.position.x = Math.sin(frame * 0.002) * 3; camera.position.y = Math.cos(frame * 0.0015) * 2; camera.lookAt(0, 0, 0); renderer.render(scene, camera); raf = requestAnimationFrame(animate); }; animate(); invalidation.then(() => { cancelAnimationFrame(raf); geometry.dispose(); material.dispose(); renderer.dispose(); }); return renderer.domElement; }32:T14c8,projectionScene = { const W = 800; const H = 600; const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); const camera = new THREE.PerspectiveCamera(30, W / H, 0.1, 1000); camera.position.set(0, 0, 50); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(W, H); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.domElement.style.display = "block"; const PLANE_H = 26.8; const PLANE_W = PLANE_H * (W / H); const videoTexture = new THREE.VideoTexture(video); videoTexture.minFilter = THREE.LinearFilter; videoTexture.magFilter = THREE.LinearFilter; videoTexture.colorSpace = THREE.SRGBColorSpace; const SEG_X = 100; const SEG_Y = 50; const planeGeom = new THREE.PlaneGeometry(PLANE_W, PLANE_H, SEG_X, SEG_Y); const MAX_KP = 17; const planeMat = new THREE.ShaderMaterial({ uniforms: { uVideo: { value: videoTexture }, uKeypoints: { value: Array.from({ length: MAX_KP }, () => new THREE.Vector3(0, 0, 0)) }, uKeypointCount: { value: 0 }, uTime: { value: 0 }, uPlaneSize: { value: new THREE.Vector2(PLANE_W, PLANE_H) }, uPushStrength: { value: 7.0 }, // doubled — stronger bulges uPushRadius: { value: 5.5 } // slightly wider influence }, vertexShader: ` uniform vec3 uKeypoints[${MAX_KP}]; uniform int uKeypointCount; uniform float uTime; uniform float uPushStrength; uniform float uPushRadius; varying vec2 vUv; varying float vDisplacement; varying vec3 vWorldPos; void main() { vUv = uv; vec3 pos = position; float totalPush = 0.0; for (int i = 0; i < ${MAX_KP}; i++) { if (i >= uKeypointCount) break; vec3 kp = uKeypoints[i]; float dx = pos.x - kp.x; float dy = pos.y - kp.y; float dist = sqrt(dx*dx + dy*dy); if (dist < uPushRadius) { float t = dist / uPushRadius; float falloff = (1.0 - t) * (1.0 - t) * (1.0 - t); totalPush += falloff * kp.z * uPushStrength; } } float ambient = sin(pos.x * 0.5 + uTime) * cos(pos.y * 0.5 + uTime * 0.7) * 0.05; pos.z += totalPush + ambient; vDisplacement = totalPush; vWorldPos = pos; gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); } `, fragmentShader: ` uniform sampler2D uVideo; varying vec2 vUv; varying float vDisplacement; varying vec3 vWorldPos; void main() { vec2 uv = vec2(1.0 - vUv.x, vUv.y); float aberration = vDisplacement * 0.008; float r = texture2D(uVideo, uv + vec2(aberration, 0.0)).r; float g = texture2D(uVideo, uv).g; float b = texture2D(uVideo, uv - vec2(aberration, 0.0)).b; vec3 color = vec3(r, g, b); float glow = clamp(vDisplacement / 4.0, 0.0, 1.0); vec3 glowColor = vec3(0.2, 0.9, 1.0); color = mix(color, color + glowColor * glow, glow * 0.6); vec2 centered = vUv - 0.5; float vignette = 1.0 - dot(centered, centered) * 0.8; color *= vignette; // Darken video so wireframe has contrast to sit on color *= 0.55; gl_FragColor = vec4(color, 1.0); } `, side: THREE.DoubleSide }); const plane = new THREE.Mesh(planeGeom, planeMat); scene.add(plane); const wireGeom = new THREE.PlaneGeometry(PLANE_W, PLANE_H, SEG_X, SEG_Y); const wireMat = new THREE.ShaderMaterial({ uniforms: planeMat.uniforms, vertexShader: planeMat.vertexShader, fragmentShader: ` varying float vDisplacement; void main() { float intensity = clamp(abs(vDisplacement) / 3.0, 0.0, 1.0); // Brighter base color; pure white at peak deformation vec3 color = mix(vec3(0.3, 0.7, 1.0), vec3(1.0, 1.0, 1.0), intensity); // Much higher baseline opacity — grid is now clearly visible at rest gl_FragColor = vec4(color, 0.6 + intensity * 0.4); } `, wireframe: true, transparent: true, depthWrite: false }); const wireMesh = new THREE.Mesh(wireGeom, wireMat); wireMesh.position.z = 0.01; scene.add(wireMesh); const clock = new THREE.Clock(); let raf; const animate = () => { const t = clock.getElapsedTime(); planeMat.uniforms.uTime.value = t; const live = keypointsLive.current; const kpUniform = planeMat.uniforms.uKeypoints.value; const count = Math.min(live.length, MAX_KP); for (let i = 0; i < count; i++) { const kp = live[i]; const px = -(kp.x / 640 - 0.5) * PLANE_W; const py = -(kp.y / 480 - 0.5) * PLANE_H; kpUniform[i].set(px, py, kp.confidence); } planeMat.uniforms.uKeypointCount.value = count; renderer.render(scene, camera); raf = requestAnimationFrame(animate); }; animate(); invalidation.then(() => { cancelAnimationFrame(raf); planeGeom.dispose(); wireGeom.dispose(); planeMat.dispose(); wireMat.dispose(); videoTexture.dispose(); renderer.dispose(); }); return renderer.domElement; } 33:T1980,clothScene = { const W = 800; const H = 600; const container = html`

`; const v = video.cloneNode(); v.srcObject = video.srcObject; v.style.cssText = ` position:absolute; top:0; left:0; width:${W}px; height:${H}px; transform: scaleX(-1); filter: brightness(0.5); object-fit: cover; `; v.play(); container.appendChild(v); const canvas = html`

`; container.appendChild(canvas); const ctx = canvas.getContext("2d"); const { Engine, World, Bodies, Body, Constraint, Composite } = Matter; const engine = Engine.create(); engine.gravity.y = 1.0; engine.gravity.scale = 0.0015; const COLS = 32; const ROWS = 24; const SPACING_X = (W - 100) / (COLS - 1); const SPACING_Y = SPACING_X * 0.9; const ORIGIN_X = 50; const ORIGIN_Y = 60; const particles = []; for (let r = 0; r < ROWS; r++) { particles[r] = []; for (let c = 0; c < COLS; c++) { const x = ORIGIN_X + c * SPACING_X; const y = ORIGIN_Y + r * SPACING_Y; const isPinned = r === 0; const p = Bodies.circle(x, y, 3, { isStatic: isPinned, frictionAir: 0.01, render: { visible: false } }); particles[r][c] = p; Composite.add(engine.world, p); } } const STIFFNESS = 0.4; const DAMPING = 0.02; for (let r = 0; r < ROWS; r++) { for (let c = 0; c < COLS; c++) { if (c < COLS - 1) { Composite.add( engine.world, Constraint.create({ bodyA: particles[r][c], bodyB: particles[r][c + 1], length: SPACING_X, stiffness: STIFFNESS, damping: DAMPING }) ); } if (r < ROWS - 1) { Composite.add( engine.world, Constraint.create({ bodyA: particles[r][c], bodyB: particles[r + 1][c], length: SPACING_Y, stiffness: STIFFNESS, damping: DAMPING }) ); } } } const HAND_NAMES = ["left_wrist", "right_wrist"]; const HAND_RADIUS = 40; const handInteractors = HAND_NAMES.map(() => ({ body: Bodies.circle(-1000, -1000, HAND_RADIUS, { isStatic: true, render: { visible: false } }), lastX: -1000, lastY: -1000, active: false })); handInteractors.forEach((h) => Composite.add(engine.world, h.body)); let raf; const FIXED_DT = 1000 / 60; const animate = () => { Engine.update(engine, FIXED_DT); const live = keypointsLive.current; for (let i = 0; i < HAND_NAMES.length; i++) { const kp = live.find((k) => k.name === HAND_NAMES[i]); const h = handInteractors[i]; if (kp && kp.confidence > 0.4) { const px = W - kp.x * (W / 640); const py = kp.y * (H / 480); if (!h.active) { h.lastX = px; h.lastY = py; } const vx = px - h.lastX; const vy = py - h.lastY; Body.setPosition(h.body, { x: px, y: py }); for (let r = 0; r < ROWS; r++) { for (let c = 0; c < COLS; c++) { const p = particles[r][c]; if (p.isStatic) continue; const dx = p.position.x - px; const dy = p.position.y - py; const distSq = dx * dx + dy * dy; const radiusSq = HAND_RADIUS * HAND_RADIUS; if (distSq < radiusSq) { const falloff = 1 - Math.sqrt(distSq) / HAND_RADIUS; const strength = 0.15 * falloff; Body.setVelocity(p, { x: p.velocity.x + vx * strength, y: p.velocity.y + vy * strength }); } } } h.lastX = px; h.lastY = py; h.active = true; } else { Body.setPosition(h.body, { x: -1000, y: -1000 }); h.active = false; } } ctx.clearRect(0, 0, W, H); ctx.fillStyle = "rgba(20, 30, 60, 0.3)"; for (let r = 0; r < ROWS - 1; r++) { for (let c = 0; c < COLS - 1; c++) { const tl = particles[r][c].position; const tr = particles[r][c + 1].position; const bl = particles[r + 1][c].position; const br = particles[r + 1][c + 1].position; ctx.beginPath(); ctx.moveTo(tl.x, tl.y); ctx.lineTo(tr.x, tr.y); ctx.lineTo(br.x, br.y); ctx.lineTo(bl.x, bl.y); ctx.closePath(); ctx.fill(); } } ctx.lineWidth = 1.2; for (let r = 0; r < ROWS; r++) { for (let c = 0; c < COLS; c++) { const p = particles[r][c].position; if (c < COLS - 1) { const n = particles[r][c + 1].position; const dx = n.x - p.x, dy = n.y - p.y; const d = Math.sqrt(dx * dx + dy * dy); const stretch = Math.min( (Math.abs(d - SPACING_X) / SPACING_X) * 4, 1 ); ctx.strokeStyle = stretchColor(stretch); ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(n.x, n.y); ctx.stroke(); } if (r < ROWS - 1) { const n = particles[r + 1][c].position; const dx = n.x - p.x, dy = n.y - p.y; const d = Math.sqrt(dx * dx + dy * dy); const stretch = Math.min( (Math.abs(d - SPACING_Y) / SPACING_Y) * 4, 1 ); ctx.strokeStyle = stretchColor(stretch); ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(n.x, n.y); ctx.stroke(); } } } for (const h of handInteractors) { if (h.active) { ctx.beginPath(); ctx.arc( h.body.position.x, h.body.position.y, HAND_RADIUS, 0, Math.PI * 2 ); ctx.strokeStyle = "rgba(255, 200, 100, 0.4)"; ctx.lineWidth = 2; ctx.stroke(); } } raf = requestAnimationFrame(animate); }; function stretchColor(t) { const r = Math.round(102 + (255 - 102) * t); const g = Math.round(204 + (77 - 204) * t); const b = Math.round(255 + (204 - 255) * t); return `rgba(${r},${g},${b},${0.7 + t * 0.3})`; } animate(); invalidation.then(() => { cancelAnimationFrame(raf); Engine.clear(engine); World.clear(engine.world); }); return container; }34:[] 2f:{"id":"550e2af2f7a3a73c","slug":"projection-mapping-demos","title":"Projection Mapping Demos","thumbnail":"2e3bb488110a0aa2e25f624622a6a10fe49ea89b36953c081dcf894f3f7a7579","access_level":"public","create_time":"$D2026-05-07T15:52:40.728Z","update_time":"$D2026-05-07T18:18:03.745Z","view_time":null,"first_public_time":"$D2026-05-07T16:48:04.625Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024"},"version":99,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null}],"members":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null,"role":"editor"},{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Projection Mapping Demos","cells":[{"id":0,"value":"# Projection Mapping Demos\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"ml5 = require(\"ml5@1.3.1/dist/ml5.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"THREE = require(\"three@0.160.0/build/three.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"Matter = require(\"matter-js@0.19.0/build/matter.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"video = {\n const video = document.createElement(\"video\");\n video.width = 640;\n video.height = 480;\n video.autoplay = true;\n video.muted = true;\n video.playsInline = true;\n video.style.transform = \"scaleX(-1)\";\n\n const stream = await navigator.mediaDevices.getUserMedia({\n video: { width: 640, height: 480 },\n audio: false\n });\n video.srcObject = stream;\n\n await new Promise((resolve) => {\n const check = () => {\n if (video.readyState >= 2 && video.videoWidth > 0) {\n resolve();\n } else {\n video.addEventListener(\"loadeddata\", check, { once: true });\n }\n };\n video.play().then(check);\n });\n\n invalidation.then(() => {\n stream.getTracks().forEach((t) => t.stop());\n });\n\n return video;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"bodyPose = {\n const model = await ml5.bodyPose(\"MoveNet\");\n return model;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"keypointsLive = {\n const container = { current: [] };\n\n bodyPose.detectStart(video, (results) => {\n if (results && results.length > 0) {\n container.current = results[0].keypoints\n .filter((kp) => kp.confidence > 0.3)\n .map((kp) => ({\n x: kp.x,\n y: kp.y,\n confidence: kp.confidence,\n name: kp.name\n }));\n } else {\n container.current = [];\n }\n });\n\n invalidation.then(() => {\n bodyPose.detectStop();\n });\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"