2d:null 2e:["$","title",null,{"children":"Coding With Fire: 3D Paths | Coding with Fire | Observable"}] 33:T313f,logoSVG = html` `34:T107d,meshToSTL = function(object) { /** * Based on https://github.com/mrdoob/three.js/blob/a72347515fa34e892f7a9bfa66a34fdc0df55954/examples/js/exporters/STLExporter.js * Tested on r68 and r70 * @author kjlubick / https://github.com/kjlubick * @author kovacsv / http://kovacsv.hu/ * @author mrdoob / http://mrdoob.com/ */ // THREE.STLExporter = function() {}; // THREE.STLExporter.prototype = { // constructor: THREE.STLExporter, // parse: (function() { var vector = new THREE.Vector3(); var normalMatrixWorld = new THREE.Matrix3(); // return function(scene) { var output = ""; output += "solid exported\n"; // scene.traverse(function(object) { // if (object instanceof THREE.Mesh) { var geometry = object.geometry; var matrixWorld = object.matrixWorld; var mesh = object; if (geometry instanceof THREE.Geometry) { var vertices = geometry.vertices; var faces = geometry.faces; normalMatrixWorld.getNormalMatrix(matrixWorld); for (var i = 0, l = faces.length; i < l; i++) { var face = faces[i]; vector .copy(face.normal) .applyMatrix3(normalMatrixWorld) .normalize(); output += "\tfacet normal " + vector.x + " " + vector.y + " " + vector.z + "\n"; output += "\t\touter loop\n"; var indices = [face.a, face.b, face.c]; for (var j = 0; j < 3; j++) { var vertexIndex = indices[j]; if (mesh.geometry.skinIndices.length == 0) { vector.copy(vertices[vertexIndex]).applyMatrix4(matrixWorld); output += "\t\t\tvertex " + (+mesh.position.x + +vector.x) + " " + (+mesh.position.y + +vector.y) + " " + (+mesh.position.z + +vector.z) + "\n"; } else { vector.copy(vertices[vertexIndex]); //.applyMatrix4( matrixWorld ); // see https://github.com/mrdoob/three.js/issues/3187 const boneIndices = []; boneIndices[0] = mesh.geometry.skinIndices[vertexIndex].x; boneIndices[1] = mesh.geometry.skinIndices[vertexIndex].y; boneIndices[2] = mesh.geometry.skinIndices[vertexIndex].z; boneIndices[3] = mesh.geometry.skinIndices[vertexIndex].w; const weights = []; weights[0] = mesh.geometry.skinWeights[vertexIndex].x; weights[1] = mesh.geometry.skinWeights[vertexIndex].y; weights[2] = mesh.geometry.skinWeights[vertexIndex].z; weights[3] = mesh.geometry.skinWeights[vertexIndex].w; const inverses = []; inverses[0] = mesh.skeleton.boneInverses[boneIndices[0]]; inverses[1] = mesh.skeleton.boneInverses[boneIndices[1]]; inverses[2] = mesh.skeleton.boneInverses[boneIndices[2]]; inverses[3] = mesh.skeleton.boneInverses[boneIndices[3]]; const skinMatrices = []; skinMatrices[0] = mesh.skeleton.bones[boneIndices[0]].matrixWorld; skinMatrices[1] = mesh.skeleton.bones[boneIndices[1]].matrixWorld; skinMatrices[2] = mesh.skeleton.bones[boneIndices[2]].matrixWorld; skinMatrices[3] = mesh.skeleton.bones[boneIndices[3]].matrixWorld; var finalVector = new THREE.Vector4(); for (var k = 0; k < 4; k++) { var tempVector = new THREE.Vector4(vector.x, vector.y, vector.z); tempVector.multiplyScalar(weights[k]); //the inverse takes the vector into local bone space tempVector .applyMatrix4(inverses[k]) //which is then transformed to the appropriate world space .applyMatrix4(skinMatrices[k]); finalVector.add(tempVector); } output += "\t\t\tvertex " + finalVector.x + " " + finalVector.y + " " + finalVector.z + "\n"; } } output += "\t\tendloop\n"; output += "\tendfacet\n"; } } // } // }); output += "endsolid exported\n"; return output; // }; // })() // }; // return "THE CODE - slightly adapted from https://gist.github.com/kjlubick/fb6ba9c51df63ba0951f"; }35:[{"id":"13a2059271eb3c76dfe9c25f549e738bc65fa786700095ebc856096cd52ab0658743c17f0fa694788e34fb38607a13431de726ff039e2a13aa6f79cdb4bb8ad9","href":"https://static.observableusercontent.com/files/13a2059271eb3c76dfe9c25f549e738bc65fa786700095ebc856096cd52ab0658743c17f0fa694788e34fb38607a13431de726ff039e2a13aa6f79cdb4bb8ad9","name":"Screenshot 2020-07-27 23.55.55.png","type":"image/png","lastModified":1595908569908.324,"size":2093113}] 31:{"id":"d276580d01f54525","slug":"coding-with-fire-3d-paths","title":"Coding With Fire: 3D Paths","thumbnail":"7a92056819caa49a433980894655ebf88b6dcbf6043c4a65b87abf869efe9d20","access_level":"public","create_time":"$D2020-07-28T02:56:02.744Z","update_time":"$D2020-11-12T03:19:25.724Z","view_time":null,"first_public_time":"$D2020-07-28T02:56:26.473Z","has_unpublished_edits":null,"fork":{"id":"e2c135f07230e282","slug":"coding-with-fire-path-extrusion","title":"Coding With Fire: Paths as Points","owner":{"id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire"}},"stars":1,"starred":false,"owner":{"type":"team","id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire","avatar_url":"https://avatars-next.observableusercontent.com/0efd3ecc6a639fdb4fe7962b37ca4a79746ef2d2f29888495c28572970019a78","tier":"starter_2024"},"version":397,"publish_version":397,"role":null,"authored":false,"authors":[{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}],"members":[{"type":"team","id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire","avatar_url":"https://avatars-next.observableusercontent.com/0efd3ecc6a639fdb4fe7962b37ca4a79746ef2d2f29888495c28572970019a78","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"f04fe829cdd37f61","slug":"coding-with-fire","title":"Season 1","owner":{"id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire"}},"type":"notebook","body":{"title":"Coding With Fire: 3D Paths","cells":[{"id":0,"value":"md`# Coding With Fire: 3D Paths\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"letterToShow = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"animatedLetterToShow = Generators.observe(notify => {\n let i = 0;\n\n notify(i);\n let interval = setInterval(() => {\n i = i + 1;\n if (i === 13) i = 0;\n notify(i);\n }, 2500);\n return () => clearInterval(interval);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"ltr = d3\n .select(logoSVG)\n .selectAll(\"path\")\n .nodes()[letterToShow]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"ltrpoints = getPoints(ltr)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof numPoints = slider({\n min: 5,\n max: 300,\n step: 1,\n description: \"Choose the number of points\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"canvas = {\n let ctx = DOM.context2d(width, height);\n let scale = 300;\n let tx = 100;\n let ty = 30;\n let radius = 5;\n\n ctx.lineWidth = 1;\n\n ctx.fillStyle = \"seagreen\";\n ctx.globalAlpha = 0.75;\n\n ctx.beginPath();\n ctx.moveTo(tx + ltrpoints[0].nx * scale, ty + ltrpoints[1].ny * scale);\n ltrpoints.forEach(d => {\n let x = tx + d.nx * scale;\n let y = ty + d.ny * scale;\n ctx.lineTo(x, y);\n });\n // ctx.lineTo(tx + ltrpoints[0].nx * scale, ty + ltrpoints[1].ny * scale);\n ctx.closePath();\n ctx.stroke();\n\n // ctx.fillRect(100, 100, 200, 200);\n ltrpoints.forEach(d => {\n let x = tx + d.nx * scale;\n let y = ty + d.ny * scale;\n ctx.beginPath();\n ctx.arc(x, y, radius, 0, 2 * Math.PI);\n // ctx.stroke();\n ctx.fill();\n });\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"threeScene({\n width,\n height: 500,\n visibility,\n cam: { x: 10, y: 10, z: 15 },\n addMeshes: pointsToMeshScene(ltrpoints),\n update: ({ meches }) => {\n // meches.mesh.rotation.y += 0.01;\n // meches.cubes.forEach(cube => {\n // cube.rotation.y += 0.01;\n // });\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"DOM.download(\n () => new Blob([meshToSTL(pointsToMesh(ltrpoints))], { type: \"text/stl\" }),\n `${letterToShow}.stl`,\n `Download ${letterToShow} STL`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"function pointsToMeshScene(points) {\n return function(scene) {\n let mesh = pointsToMesh(points)\n scene.add(mesh);\n\n return { mesh };\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"pointsToMesh = function(points) {\n let tx = -1;\n let ty = -1;\n let scale = 7;\n\n const material = new THREE.MeshStandardMaterial({\n color: 0xff3333\n });\n // just as with textures, we need to put colors into linear color space\n material.color.convertSRGBToLinear();\n\n var shape = new THREE.Shape();\n shape.moveTo(tx + points[0].nx * scale, ty + points[0].ny * scale);\n points.forEach(d => {\n let x = tx + d.nx * scale;\n let y = ty + d.ny * scale;\n shape.lineTo(x, y);\n });\n shape.lineTo(tx + points[0].nx * scale, ty + points[0].ny * scale);\n\n var extrudeSettings = {\n steps: 4,\n depth: 1.5,\n bevelEnabled: false\n // bevelThickness: 1,\n // bevelSize: .1,\n // bevelOffset: 0,\n // bevelSegments: 1\n };\n\n var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);\n var mesh = new THREE.Mesh(geometry, material);\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"function pointsToCubes(scene) {\n const material = new THREE.MeshStandardMaterial({\n color: 0xff3333\n });\n // just as with textures, we need to put colors into linear color space\n material.color.convertSRGBToLinear();\n\n // const geometry = new THREE.BoxBufferGeometry(2, 2, 5);\n // const cube = new THREE.Mesh(geometry, material);\n // scene.add(cube);\n let cubes = ltrpoints.map(p => {\n let mesh = new THREE.Mesh(\n new THREE.BoxBufferGeometry(.1, .1, .4),\n material\n );\n mesh.position.x = p.nx * 2;\n mesh.position.y = p.ny * 2;\n scene.add(mesh);\n return mesh;\n });\n\n return { cubes };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"ejcanvas = {\n return;\n let ctx = DOM.context2d(width, height);\n\n ctx.fillStyle = \"seagreen\";\n ctx.globalAlpha = 0.2;\n let lscale = 300;\n let m = 50;\n\n // ctx.fillRect(100, 100, 200, 200);\n ltrpoints.forEach((d, i) => {\n ctx.beginPath();\n ctx.arc(\n m + d.nx * lscale,\n m + d.ny * lscale,\n ltrpoints.length - i * 0.91,\n 0,\n 2 * Math.PI\n );\n ctx.stroke();\n ctx.fill();\n });\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"function getPoints(pathElement) {\n let len = pathElement.getTotalLength();\n let points = [];\n let p;\n // TODO: replace this with a better example\n let min = { x: Infinity, y: Infinity };\n let max = { x: -Infinity, y: -Infinity };\n for (var i = 0; i < numPoints; i++) {\n p = pathElement.getPointAtLength((len * i) / numPoints);\n points.push({ x: p.x, y: p.y });\n if (p.x < min.x) min.x = p.x;\n if (p.y < min.y) min.y = p.y;\n if (p.x > max.x) max.x = p.x;\n if (p.y > max.y) max.y = p.y;\n }\n console.log(min, max);\n points.forEach(p => {\n p.nx = (p.x - min.x) / max.x;\n p.ny = (p.y - min.y) / max.y;\n });\n\n return points;\n}\n//.pathSegList()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"california = stateShapes.features[25]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"californiaSvg = d3\n .create(\"svg\")\n .append(\"path\")\n .attr(\"d\", path(california))\n .node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"californiaPoints = getPoints(californiaSvg)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`## Geo stuff`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"simpleSVGMap = {\n // we create an SVG with the width and height specified\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data([stateShapes.features[25]])\n .join(\"path\")\n // This line renders our population data\n // .attr(\"fill\", d => populationColor(populationByCounty.get(d.id)))\n .attr(\"fill\", \"seagreen\")\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `${d.properties.name}`);\n\n // we need to return a DOM element.\n // the .node() function returns the DOM element corresponding to the d3 selection.\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"californiaScene = threeScene({\n width,\n height: 500,\n visibility,\n cam: { x: 10, y: 10, z: 15 },\n addMeshes: pointsToMeshScene(californiaPoints),\n update: ({ meches }) => {\n // meches.mesh.rotation.y += 0.01;\n // meches.cubes.forEach(cube => {\n // cube.rotation.y += 0.01;\n // });\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"DOM.download(\n () =>\n new Blob([meshToSTL(pointsToMesh(californiaPoints))], { type: \"text/stl\" }),\n \"california.stl\",\n \"Download California STL\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"md`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"FileAttachment(\"Screenshot 2020-07-27 23.55.55.png\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"projection = d3.geoAlbersUsa().fitSize([width, height], stateShapes)\n// The default projection parameters used by most other county map examples instead of fitSize:\n// .scale(1300)\n// .translate([975/2, 610/2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"stateShapes = topojson.feature(us, us.objects.states) //.features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"stateShapes.features.map(d => d.properties.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"us = d3.json(\"https://unpkg.com/us-atlas@3/states-10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`# References\n\n* https://observablehq.com/@ajur/threejs\n* https://observablehq.com/@fil/export-a-three-js-scene-to-stl\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"import { threeScene, THREE } with {\n pointsToMesh as defaultMesh\n} from \"@ajur/threejs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"