30:T5a6,cubicMesh = { const material = new THREE.MeshBasicMaterial({ color: '#454545', flatShading: false, wireframe: true, transparent:true, opacity: 0.3 }) const curve = cubes .map(c => new THREE.Vector3(c[0], c[1], c[2]) .applyEuler(new THREE.Euler(magic, tau/8))) .map(c => [1*c.x,1*c.y,1*c.z]) .flat() const geometry = new THREE.BufferGeometry(); // let color = new THREE.Color() // const colors = []; const indices = []; for (var i = 0; i < curve.length/3; i ++ ) { if (i%8===0) { indices.push(i,i+3,i+1); indices.push(i,i+1,i+7); indices.push(i,i+7,i+3); } if (i%8===2) { indices.push(i,i-1,i+1); indices.push(i,i+3,i-1); indices.push(i,i+1,i+3); } if (i%8===4) { indices.push(i,i+1,i-1); indices.push(i,i-1,i+3); indices.push(i,i+3,i+1); } if (i%8===6) { indices.push(i,i-5,i-1); indices.push(i,i+1,i-5); indices.push(i,i-1,i+1); } } geometry.setIndex(indices); geometry.setAttribute('position', new THREE.Float32BufferAttribute(curve, 3)); // for ( var i = 0; i < curve.length / 3; i ++ ) { // color.setRGB((curve[3*i] + 1)/2, (curve[3*i + 1]+ 1)/2, (curve[3*i + 2]+ 1)/2); // colors.push(color.r, color.g, color.b); // } // geometry.setAttribute( 'color', new THREE.Float32BufferAttribute(colors, 3)); var mesh = new THREE.Mesh( geometry, material ); return mesh }31:T9d6,function scenicRoute(coords, depth) { const obj = {} const curves = Array.from({length: depth}, (_, i) => i+1).map(d => getHilbert3D(d)) curves.forEach(curve => { curve.forEach(coord => { const key = `bin${coord[0]}${coord[1]}${coord[2]}` obj[key] = [] }) }) curves.forEach((curve,i) => { const roundedCoords = coords.map(c => [ Math.round((2**(i+1) - 1)*(c[0]+1)/2)/(2**i)-(2**(i+1) - 1)/(2**(i+1)), Math.round((2**(i+1) - 1)*(c[1]+1)/2)/(2**i)-(2**(i+1) - 1)/(2**(i+1)), Math.round((2**(i+1) - 1)*(c[2]+1)/2)/(2**i)-(2**(i+1) - 1)/(2**(i+1)) ]) roundedCoords.forEach((c,index) => { const key = `bin${c[0]}${c[1]}${c[2]}` obj[key].push(index) }) }) // todo: make this recursive to arbitrary precision let finalPath = curves[0] .map((c0,i0) => { const key0 = `bin${c0[0]}${c0[1]}${c0[2]}` if(obj[key0].length && curves[1]) { return curves[1] .filter((c1,i1) => { return i0*(8**1) <= i1 && i1 < i0*(8**1) + 8 }) .map((c1,i1) => { const key1 = `bin${c1[0]}${c1[1]}${c1[2]}` if(obj[key1].length && curves[2]) { return curves[2] .filter((c2,i2) => { return i0*(8**2)+i1*(8**1) <= i2 && i2 < i0*(8**2)+i1*(8**1)+8 }) .map((c2,i2) => { const key2 = `bin${c2[0]}${c2[1]}${c2[2]}` if(obj[key2].length && curves[3]) { return curves[3] .filter((c3,i3) => { return i0*(8**3)+i1*(8**2)+i2*(8**1) <= i3 && i3 < i0*(8**3)+i1*(8**2)+i2*(8**1)+8 }) .map((c3,i3) => { const key3 = `bin${c3[0]}${c3[1]}${c3[2]}` if(obj[key3].length && curves[4]) { return curves[4] .filter((c4,i4) => { return i0*(8**4)+i1*(8**3)+i2*(8**2)+i3*(8**1) <= i4 && i4 < i0*(8**4)+i1*(8**3)+i2*(8**2)+i3*(8**1)+8 }).flat() } return c3 }).flat() } return c2 }).flat() } return c1 }).flat() } return c0 }).flat() .map((c,j,arr) => j%3 === 0 ? [c,arr[j+1],arr[j+2]] : []) .filter(arr => arr.length) return finalPath }32:T55f,// returns centroids of cubes spanning -1...1 function getHilbert3D(iterations) { let coordinates = []; let origin = [0,0,0] let counter = 0; let step = Math.pow(2,(counter - 1)); coordinates.push(origin); while(counter < iterations) { // reorient then shift a copy of the current path to each octant let oc1 = coordinates.map(c => [+c[2] - step, +c[0] - step, +c[1] - step]) let oc2 = coordinates.map(c => [+c[1] + step, +c[2] - step, +c[0] - step]) let oc3 = coordinates.map(c => [+c[1] + step, +c[2] + step, +c[0] - step]) let oc4 = coordinates.map(c => [-c[1] - step, -c[0] + step, -c[2] - step]).reverse() let oc5 = coordinates.map(c => [-c[1] - step, -c[0] + step, -c[2] + step]).reverse() let oc6 = coordinates.map(c => [+c[1] + step, -c[2] + step, -c[0] + step]) let oc7 = coordinates.map(c => [+c[1] + step, -c[2] - step, -c[0] + step]) let oc8 = coordinates.map(c => [-c[2] - step, +c[0] - step, -c[1] + step]) //concatenate coordinates = oc1.concat(oc2, oc3, oc4, oc5, oc6, oc7, oc8); //increment counter += 1; step = Math.pow(2,(counter - 1)); } //rescale coordinates .. coordinates = coordinates.map(c => [c[0]/(step), c[1]/(step), c[2]/(step)]) // subcubes share common bounding box (which is desirable) ifoif path lines are skewed at changes in scale return coordinates; }33:[] 2e:{"title":"The Scenic Route","cells":[{"id":0,"value":"md`# The Scenic Route\n\nImagine you're a magical hummingbird that can fly through leaves, branches, and tree trunks to survey all the flowers in the rain forest canopy. How do you decide on an efficient path? One approach might be to plan your route along a recursive [3D Hilbert curve](https://observablehq.com/@pamacha/sequentializing-rgb-color-space). At each turning point, if your surroundings are particularly lush, you simply subdivide your journey further, with smaller, self-similar Hilbert curves.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true});\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setSize(w, h);\n renderer.setPixelRatio(devicePixelRatio);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n\n while (true) {\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"viewof ch1 = checkbox({\n options: [\n { value: \"bunny\", label: \"bunny\" },\n { value: \"path\", label: \"scenic route\" },\n { value: \"mesh\", label: \"octants\" },\n { value: \"centroids\", label: \"centroids\" }\n ],\n value: [\"bunny\", \"path\", \"mesh\", \"centroids\"],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"viewof iterations = Scrubber(Array.from({length: 4}, (_, i) => i+1), {\n autoplay: false,\n delay: 1000,\n initial: 0,\n format: iterations => `iterations: ${iterations}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1795,"value":"md`The technique exhibited here takes in a normalized point cloud, and maps out a [Hamiltonian path](https://en.wikipedia.org/wiki/Hamiltonian_path) that spans the whole domain while preserving locality and avoiding sparse patches. The route is a multiscale Hilbert curve through the centroids of a sequentialized [octree](https://en.wikipedia.org/wiki/Octree).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1484,"value":"vertices = scenicRoute(normalizedBunnyVertices, iterations)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"cubes = {\n var vs = [] \n vertices.forEach(d => {\n var s = Math.pow(2,2 - Math.abs(d[0]).toString().length)\n let a = [d[0] - s, d[1] - s, d[2] - s]\n let b = [d[0] + s, d[1] - s, d[2] - s]\n let c = [d[0] + s, d[1] + s, d[2] - s]\n let t = [d[0] - s, d[1] + s, d[2] - s]\n let e = [d[0] - s, d[1] + s, d[2] + s]\n let f = [d[0] + s, d[1] + s, d[2] + s]\n let g = [d[0] + s, d[1] - s, d[2] + s]\n let h = [d[0] - s, d[1] - s, d[2] + s]\n var arr = [a,b,c,t,e,f,g,h]\n arr.forEach((coord,i) => {\n vs.push(coord)\n })\n })\n return vs \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"bunny = {\n const material = new THREE.PointsMaterial({\n size: 1, \n color: 'white', \n transparent:true, \n opacity:.8\n });\n const geometry = new THREE.BufferGeometry();\n const flatBunny = normalizedBunnyVertices\n .map(c => new THREE.Vector3(c[0], c[1], c[2])\n .applyEuler(new THREE.Euler(magic, tau/8)))\n .map(c => [c.x,c.y,c.z])\n .flat()\n geometry.setAttribute('position', new THREE.Float32BufferAttribute(flatBunny, 3));\n const points = new THREE.Points(geometry, material);\n return points \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"path = {\n const material = new THREE.LineBasicMaterial({\n color: '#00aaff',\n transparent:true, \n opacity:.8\n });\n const curve = vertices\n .map(c => new THREE.Vector3(c[0], c[1], c[2])\n .applyEuler(new THREE.Euler(magic, tau/8)))\n .map(c => [c.x,c.y,c.z])\n .flat()\n const geometry = new THREE.BufferGeometry();\n geometry.setAttribute('position', new THREE.Float32BufferAttribute(curve, 3));\n var line = new THREE.Line(geometry, material);\n return line \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1394,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"centroids = {\n const material = new THREE.PointsMaterial({\n size: 1.5,\n color: \"red\",\n transparent: true,\n opacity: 0.6\n });\n const geometry = new THREE.BufferGeometry();\n const flat = vertices\n .map(c => new THREE.Vector3(c[0], c[1], c[2])\n .applyEuler(new THREE.Euler(magic, tau/8)))\n .map(c => [c.x,c.y,c.z])\n .flat()\n geometry.setAttribute('position', new THREE.Float32BufferAttribute(flat, 3));\n const points = new THREE.Points(geometry, material);\n return points \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"camera = {\n const fov = 1;\n const aspect = 1;\n const near = .01;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(0,0,250);\n //camera.position.set(0,-25,5);\n camera.lookAt(new THREE.Vector3());\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"scene = {\n const scene = new THREE.Scene();\n scene.add(group);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"{\n while (group.children.length) {\n group.remove(group.children[0]);\n }\n if (ch1.includes('bunny')) group.add(bunny);\n if (ch1.includes('path')) group.add(path);\n if (ch1.includes('mesh')) group.add(cubicMesh);\n if (ch1.includes('centroids')) group.add(centroids);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"group = {\n const group = new THREE.Group();\n return group;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"w = Math.min(640, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"magic = Math.acos(1/Math.sqrt(3))","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"tau = 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"normalizedBunnyVertices = bunnyVertices.map(d => [d[0]/5, d[1]/5 - .95, d[2]/5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"import {bunnyVertices} from \"@rreusser/debugging-normals-without-duplicating-geometry-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1596,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"THREE = {\n const THREE = (window.THREE = await require(\"three@0.110.0/build/three.min.js\"));\n await require(\"three@0.110.0/examples/js/controls/OrbitControls.js\").catch(\n () => {}\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}