24:null 25:["$","title",null,{"children":"Voronoi Stippling Webcam | Job van der Zwan | Observable"}] 2a:T1591,webcam_script = { const blob = new Blob([` importScripts("${await require.resolve("d3-delaunay@3")}"); let totalPoints = 0; let n = 0; let k = 0; let iterations = 0; let width = 0; let height = 0; let sobelRatio = 0.5; let data, sobelData, summedWeights, points, sobelPoints, velocities, weights, sobelWeights, c, sc; let rendering = false; function init(event){ // const {data: {data, sobelData, width, height, n, iterations, sobelRatio}} = event.data; k = 0; n = event.data.n; if (!(n > 0)){ iterations = 0; return; } iterations; iterations = event.data.iterations; width = event.data.width; height = event.data.height; data = event.data.data; sobelData = event.data.sobelData; sobelRatio = event.data.sobelRatio; // re-use TypedArrays for reduced GC pressure. if (n !== totalPoints) { totalPoints = n; // x and y positions for each Voronoi cell. points = new Float32Array(n * 2); sobelPoints = new Float32Array(n * 2); velocities = new Float32Array(n * 2); // summing the weights of each voronoi cell weights = new Float32Array(n); sobelWeights = new Float32Array(n); // sum of weighted x and y positions for each voronoi cell c = new Float32Array(n * 2); sc = new Float32Array(n * 2); } else { // Avoid re-allocating the buffers all the time points.fill(0); sobelPoints.fill(0); velocities.fill(0); weights.fill(0); sobelWeights.fill(0); c.fill(0); sc.fill(0); } if (!summedWeights || summedWeights.length < width * height){ summedWeights = new Float32Array(width * height); } // calculate summed weight with sobelRatio once and reuse for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { const j = y * width + x; const lightnessWeight = data[j]; const sobelWeight = sobelData[j]; summedWeights[j] = (1-sobelRatio) * lightnessWeight + sobelWeight * sobelRatio; } } // Initialize the points using rejection sampling. for (let i = 0; i < n; ++i) { let x = 0, y = 0; // try up to thirty times for(let j = 0, rejected = true; j < 100 && rejected; j++) { x = Math.floor(Math.random() * width); y = Math.floor(Math.random() * height); const summedWeight = summedWeights[y * width + x]; rejected = Math.random() > summedWeight; } sobelPoints[i * 2] = x; sobelPoints[i * 2 + 1] = y; } if (!rendering) { rendering = true; setTimeout(render, 0); } } function render(){ if(++k > iterations){ rendering = false; return; } const delaunay = new d3.Delaunay(sobelPoints); const voronoi = delaunay.voronoi([0, 0, width, height]); // Compute the Sobel-weighted centroid for each Voronoi cell. sc.fill(0); sobelWeights.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { i = voronoi.find(x + 0.5, y + 0.5, i); const summedWeight = summedWeights[y * width + x]; sobelWeights[i] += summedWeight; sc[i * 2] += summedWeight * (x + 0.5); sc[i * 2 + 1] += summedWeight * (y + 0.5); } } // Relax the diagram by moving points to the weighted centroid. // Wiggle the points a little bit so they don’t get stuck. const wiggle = Math.pow(k + 1, -0.8)*2; for (let i = 0; i < n; ++i) { let x0 = sobelPoints[i * 2]; let y0 = sobelPoints[i * 2 + 1]; let x1 = x0; let y1 = y0; let weight = sobelWeights[i]; if (weight) { x1 = sc[i * 2] / weight; y1 = sc[i * 2 + 1] / weight; } let vx = velocities[i * 2] * Math.SQRT1_2 + (x1-x0); let vy = velocities[i * 2 + 1] * Math.SQRT1_2 + (y1-y0); velocities[i * 2] = vx; velocities[i * 2 + 1] = vy; x0 += vx; y0 += vy; sobelPoints[i * 2] = x0 > 0 ? (x0 < width-1 ? x0 : width-2) : 1; sobelPoints[i * 2 + 1] = y0 > 0 ? (y0 < height-1 ? y0 : height-2) : 1; } // For performance purposes we don't render each iteration. // The weights and centroids for lightness coverage are // calculated only when a frame is rendered, since that is // the only time we actually need them. if(true || k%4 == 0 || k+1 == iterations) { c.fill(0); weights.fill(0); // reuse sc + sobelWeights as unweighted centroid sc.fill(0); sobelWeights.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { i = voronoi.find(x + 0.5, y + 0.5, i); const weight = data[y * width + x]; weights[i] += weight; c[i * 2] += weight * (x + 0.5); c[i * 2 + 1] += weight * (y + 0.5); sobelWeights[i] += 1; sc[i * 2] += (x + 0.5); sc[i * 2 + 1] += (y + 0.5); } } for (let i = 0; i < n; ++i) { let x0 = 0; let y0 = 0; let weight = weights[i]; if (weight) { x0 = c[i * 2] / weight; y0 = c[i * 2 + 1] / weight; } else { weight = sobelWeights[i]; if (!weight) weight = 1; x0 = sobelPoints[i * 2] / weight; y0 = sobelPoints[i * 2 + 1] / weight; } points[i * 2] = x0; points[i * 2 + 1] = y0; } postMessage({points, weights}); } setTimeout(render, 0); } onmessage = event => { switch(event.data.msg){ case 'render': init(event); break; case 'newFrame': data = event.data.data; break; } }; `], {type: "text/javascript"}); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }2b:Tc6a,image = { rerender; const context = DOM.context2d(width, height); const sobel = new Float32Array(width * height); const light = new Float32Array(width * height); context.drawImage(stream, 0, 0, width, height); const {data: rgba} = context.getImageData(0, 0, width, height); for (let i = 0; i < rgba.length;) { let R = rgba[i++]; let G = rgba[i++]; let B = rgba[i++]; // The red, green and blue channels are not in a linear color space by default. // This means that adding them up leads to incorrect outputs. One crude but fast // approximate conversion to linear color spaces is to take the square number. R *= R; G *= G; B *= B; // We normalize the result to a value between 0 and 1: // 255 * 255 * 3 = 65025 * 3 = 195075 // We *skip* taking the square root, because later we would // need to square it again anyway to add it to the camSobelData. light[(i++)>>2] = (R + G + B)/195075; } // 255² * four pixel comparisons * three color channels const maxVal = (255*255) * 4 * 3; const rgbaLine = width*4; for (let y = 1; y < height-1; y++){ const sobelLineIdx = y * width; const lineIdx = sobelLineIdx*4; // We're going to re-use these variables to reduce array look ups let R = rgba[lineIdx] let G = rgba[lineIdx + 1] let B = rgba[lineIdx + 2]; let Rpx = rgba[lineIdx + 4]; let Gpx = rgba[lineIdx + 5]; let Bpx = rgba[lineIdx + 6]; // square the values to approximate linear color spaces R *= R; G *= G; B *= B; Rpx *= Rpx; Gpx *= Gpx; Bpx *= Bpx; for (let x = 1; x < width-1; x++){ const sobelIdx = x + sobelLineIdx; const rgbaIdx = sobelIdx * 4; // Get red green and blue channels, including for the pixels next to the current one // Doing it in this order is a bit more cache friendly. let Rmy = rgba[rgbaIdx - rgbaLine]; let Gmy = rgba[rgbaIdx - rgbaLine + 1]; let Bmy = rgba[rgbaIdx - rgbaLine + 2]; Rmy *= Rmy; Gmy *= Gmy; Bmy *= Bmy; // We are scanning left to right, so we can re-use the x-values like this // Since we are re-using the previous values, we don't need to square them again. let Rmx = R; let Gmx = G; let Bmx = B; R = Rpx; G = Gpx; B = Bpx; Rpx = rgba[rgbaIdx + 4]; Gpx = rgba[rgbaIdx + 5]; Bpx = rgba[rgbaIdx + 6]; Rpx *= Rpx; Gpx *= Gpx; Bpx *= Bpx; let Rpy = rgba[rgbaIdx + rgbaLine]; let Gpy = rgba[rgbaIdx + rgbaLine + 1]; let Bpy = rgba[rgbaIdx + rgbaLine + 2]; Rpy *= Rpy; Gpy *= Gpy; Bpy *= Bpy; // As before, we normalize to 1, but we don't convert back from // linear color space (yet) sobel[sobelIdx] = Math.max(0, ( Math.abs(R - Rmy) + Math.abs(R - Rmx) + Math.abs(R - Rpx) + Math.abs(R - Rpy) + Math.abs(G - Gmy) + Math.abs(G - Gmx) + Math.abs(G - Gpx) + Math.abs(G - Gpy) + Math.abs(B - Bmy) + Math.abs(B - Bmx) + Math.abs(B - Bpx) + Math.abs(B - Bpy) ) / maxVal); } } return { raw: rgba, data: light, sobel }; }2c:[] 28:{"id":"a243572fb3cec443","slug":"voronoi-stippling-webcam","title":"Voronoi Stippling Webcam","thumbnail":"90616889b3f497ddd80ca6342258a4a7330097c5cdb0860d82ae575a681bb3da","access_level":"public","create_time":"$D2018-10-14T11:21:53.394Z","update_time":"$D2019-12-20T21:18:17.860Z","view_time":null,"first_public_time":"$D2018-10-14T11:32:58.899Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024"},"version":851,"publish_version":851,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"d73e58afa99b2d9f","slug":"voronoi-stippling-notebooks","title":"Voronoi Stippling Notebooks","owner":{"id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan"}},"type":"notebook","body":{"title":"Voronoi Stippling Webcam","cells":[{"id":0,"value":"md`# Voronoi Stippling Webcam\n\n***WIP!***\n\nSplit out from [Voronoi Stippling Experiments](https://beta.observablehq.com/@jobleonard/untitled), more explanations of what is going on over there. **It is a a pretty heavy notebook, so here is a [\"safe\" link](https://beta.observablehq.com/@jobleonard/untitled/safe) for those who only want to see the code.**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"stream = {\n const constraints = {\n video: {\n width: streamWidth,\n height: streamHeight,\n }\n };\n const video = document.createElement('video');\n video.setAttribute('autoplay', true);\n video.setAttribute('class', 'stream');\n\n await navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {\n /* use the stream */\n video.srcObject = stream;\n }).catch(function(err) {\n /* handle the error */\n console.error('Couldn’t get media', err);\n });\n \n video.style = \"width:100%;height:100%;\";\n \n return video;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"viewof rerender = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"webcamdots = {\n const context = webcamdotsContext;\n const opacity = \"0123456789ABCDEF\".split(\"\");\n function messaged({data: {points, weights}}) {\n context.fillStyle = \"#000\";\n context.fillRect(0, 0, width, height);\n context.fillStyle = \"#FFF\" + opacity[dotOpacity];\n for (let i = 0, n = points.length; i < n;) {\n const w = Math.sqrt(weights[i>>1])*dotSize;\n const x = points[i++];\n const y = points[i++];\n context.beginPath();\n context.moveTo(x, y);\n context.arc(x, y, w, 0, 2 * Math.PI);\n //context.rect(x, y, w, w);\n context.fill();\n }\n }\n mutable webcamWorker.onmessage = messaged;\n mutable webcamWorker.postMessage({msg: \"render\", data: image.data, sobelData: image.sobel, width, height, n: totalDots, sobelRatio, iterations});\n context.canvas.style = \"width:100%;height:100%;\";\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof iterations = slider({\n title: \"Iterations\",\n min: 1,\n max: 200,\n step: 1,\n value: 80,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"viewof dotOpacity = slider({\n title: \"Opacity of the dots: 0 (transparant) to 15 (opaque)\",\n min: 0,\n max: 15,\n step: 1,\n value: 15,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof dotSize = slider({\n title: \"Relative dotsize: 0x - 4x\",\n min: 0.01,\n max: 4,\n value: 0.8,\n precision: 2,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"viewof totalDots = slider({\n title: \"Total dots\",\n min: 1,\n max: Math.round(1024 * streamWidth * streamHeight/(1024*16)),\n step: 1,\n value: Math.round(512 * streamWidth * streamHeight/(1024*16)),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"viewof sobelRatio = slider({\n title: \"Sobel : Lightness ratio (for determining local resolution)\",\n min: 0,\n max: 1,\n value: 0.5,\n precision: 4,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"webcamdotsContext = DOM.context2d(width, height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"mutable webcamWorker = {\n const worker = new Worker(webcam_script);\n invalidation.then(() => worker.terminate());\n yield worker;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"streamWidth = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"streamHeight = 480","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"height = (streamHeight * width / streamWidth) | 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1","titling":"auto"}} 29:"$28:body"