2e:null 2f:["$","title",null,{"children":"Papercraft Ornament - Flow Fields Edition | Tony Chu | Observable"}] 34:T437,md`## Ok, now for implementation notes. (To preserve the sense of meandering that's required to build this, I'll document roughly the google searching and dead-end bumping in the narrative.) Quoting from Tyler's essay on the basic of flow fields: >> Flow fields are based around a grid. Roughly speaking, this grid covers the whole image/canvas. At each point in the grid, you store an angle. Your grid should be stored as a 2D array of floating point numbers. Each item in the array holds an angle and represents a point in the grid. >> -- Tyler X Hobbs, [Flow Fields](https://tylerxhobbs.com/essays/2020/flow-fields) Except now I don't have a flat surface, I have the surface of a sphere. What do? I still want points in which I store angles, but now I have to distribute them on the surface of a sphere. How do I do that? I googled "evenly distribute points on a sphere" Google-diving through a bunch of links, I found this: https://stackoverflow.com/questions/9600801/evenly-distributing-n-points-on-a-sphere/26127012#26127012 Which had this very promising image:`35:T434,md`It was at this point when I realized that I actually have to figure out how to project from "sphere coordinates" to "ornament coordinates" - and I had no clue how to do that. So went down a Wikipedia rabbit hole to try to learn about map projections, which had a lot of math I didn't understand. It did occur to me though that the notion of latitude and longtitude should be helpful. Longtitude is effectively how far down a point is on the "spine" of one of the petals. And latitude can tell us which petal the point is on, and approximated by how far it is from the spine of that petal. Not super rigorous, but close enough? In order to do that though, I need to know: 1. How long the "spine" actually is. Not too hard, just compute the distance between the top and bottom points of a petal is. 2. How wide the petal is at any given point along the petal, which is more complicated, because now I have to interpolate between the widths at each segment. And of course that involves knowing the segment widths and height pairs. The next few cells are those calculations`36:T4f7,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]); const cutLayer = svg.append("g") const scoreLayer = svg.append("g") linesToDraw.forEach((p) => { switch (p.type) { case "hanger": hangerLine(cutLayer, p) break; case "fold": foldCreaseLine(scoreLayer, p) break; default: if (p.tabs) { latchAttachmentLine(cutLayer, p) } else { regularLine(cutLayer, p) } } }) const xCount = 200 const yCount = 200 let testPoints = [] d3.range(xCount).forEach((i) => { d3.range(yCount).forEach((j) => { /* const x = Math.random() * drawingExtent.x[1] const y = Math.random() * drawingExtent.y[1] */ const lat = i / (xCount) * Math.PI * 2 const lng = j / (yCount) * Math.PI * 2 testPoints.push({ lat, lng }) }) }) //return testPoints.map(g => sphereToFlat(g.lat, g.lng)) testPoints.forEach(g => { const p = sphereToFlat(g.lat, g.lng); svg.append("circle") .attr("cx", p.x) .attr("cy", p.y) .attr("r", 1) .attr("fill", d3.interpolateSpectral(g.lng / (Math.PI * 2))) }) return svg.node() }37:T610,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]); const cutLayer = svg.append("g").attr("id", "cut") const drawLayer = svg.append("g").attr("id", "draw") const scoreLayer = svg.append("g").attr("id", "score") linesToDraw.forEach((p) => { if (p.isExterior) { regularLine(cutLayer, p) } }) const xCount = 100 const yCount = 100 d3.range(xCount).forEach((i) => { d3.range(yCount).forEach((j) => { /* const x = Math.random() * drawingExtent.x[1] const y = Math.random() * drawingExtent.y[1] */ const x = i / xCount * drawingExtent.x[1] const y = j / yCount * drawingExtent.y[1] const isInside = isPointInsideOrnament({ x, y }, ornamentBoundaryLines) if (isInside) { const side = getSideIDGivenPoint({ x, y }) svg.append("text") .text(side) .attr("x", x) .attr("y", y) .attr("font-size", 7) } else { svg.append("circle") .attr("cx", x) .attr("cy", y) .attr("r", 1) .attr("fill", "red") } }) }) propertiesPerSide.forEach(side => { svg.append("circle") .attr("cx", side.poles.top.x) .attr("cy", side.poles.top.y) .attr("r", 5) .attr("fill", "red") svg.append("circle") .attr("cx", side.poles.bottom.x) .attr("cy", side.poles.bottom.y) .attr("r", 5) .attr("fill", "blue") }) return svg.node() }38:T7ce,paths = { const board = d3.quadtree() .x(d => d.x) .y(d => d.y) .extent([drawingExtent.x, drawingExtent.y]) const tooCloseToExistingPoint = (next, last) => { const nearest = board.find(next.x, next.y, stepLength * minPointsProximity) if (!nearest) { return false } const isJustPrevious = nearest.x === last.x && nearest.y === last.y return !isJustPrevious } const pathTracer = (init) => { const result = [] result.push(init) while (result.length < 100) { const l = result[result.length - 1] const p = fieldQuadTree.find(l.x, l.y) let next = { x: l.x + Math.cos(p.theta) * stepLength, y: l.y + Math.sin(p.theta) * stepLength } const isTooClose = (result.length && tooCloseToExistingPoint(next, result[result.length - 1])) result.push(next) if (isTooClose || Math.random() > 0.98 || result.length > 35) { break; } if (!isPointInsideOrnament(next, ornamentBoundaryLines)) { // draw last point outside of ornament, but then stop break; } } return result } const minPathLength = 4 const paths = [] let failureCount = 0 let acceptanceThreshold = 25 /* getFibonacciSpherePoints(2000, radius, false).map((p, i) => { const l = convert3DPointToSphereCoordinate(p.x, p.y, p.z) const q = sphereToFlat(l.lat, l.lng) */ d3.range(30000).forEach((i) => { const q = { x: Math.random() * drawingExtent.x[1], y: Math.random() * drawingExtent.y[1] } if (!isPointInsideOrnament(q, exteriorLines) || getSideIDGivenPoint(q) === null) { return } const path = pathTracer(q) const keep = path.length > acceptanceThreshold if (keep) { board.addAll(path) paths.push(path) } else { failureCount++ } if (failureCount > 15) { acceptanceThreshold = Math.max(3, acceptanceThreshold * 0.98) failureCount = 0 } }) return paths }39:[{"id":"fa3a974b4f37d3f537e254ef97bd47ca3b6d4634d175bdbce7c478fac18790392804d1aefcc94a21e4007a588dd7576c732f7a9a31f44e4894ce1c9928bc7341","href":"https://static.observableusercontent.com/files/fa3a974b4f37d3f537e254ef97bd47ca3b6d4634d175bdbce7c478fac18790392804d1aefcc94a21e4007a588dd7576c732f7a9a31f44e4894ce1c9928bc7341","name":"fibonacci_sphere.png","type":"image/png","lastModified":1608344016309.242,"size":49711},{"id":"d914be7c3aeedec0b28f80fc85c72e58ad5eca4e1f82e20f164e4f1bebc11d106d1b90b1851dd23a558963afe6860d92f3ea0950d7677b4838fe3956ea817629","href":"https://static.observableusercontent.com/files/d914be7c3aeedec0b28f80fc85c72e58ad5eca4e1f82e20f164e4f1bebc11d106d1b90b1851dd23a558963afe6860d92f3ea0950d7677b4838fe3956ea817629","name":"flow-fields-ornament.png","type":"image/png","lastModified":1608343277925.104,"size":2636642}] 32:{"id":"49595e30b3ff31b3","slug":"papercraft-ornament-flow-fields-edition","title":"Papercraft Ornament - Flow Fields Edition","thumbnail":"2182a98ed20fa583c5e800e9d752046fe7da27412bc0ebdc1ce86d1b3c747e6f","access_level":"public","create_time":"$D2020-12-12T04:09:48.940Z","update_time":"$D2021-12-05T03:03:18.106Z","view_time":null,"first_public_time":"$D2020-12-19T06:08:05.360Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"d23b8bbc584a6b18","login":"tonyhschu","name":"Tony Chu","avatar_url":"https://avatars-next.observableusercontent.com/28b9276723f510612a9ffc80e179b2b8ae42addb9ebf8b0b714e8b2c8db98c30","tier":"starter_2024"},"version":669,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a469f43f1f5e7f92","login":"tonyhschu","name":"Tony Chu","avatar_url":"https://avatars-next.observableusercontent.com/28b9276723f510612a9ffc80e179b2b8ae42addb9ebf8b0b714e8b2c8db98c30","tier":null}],"members":[{"type":"individual","id":"a469f43f1f5e7f92","login":"tonyhschu","name":"Tony Chu","avatar_url":"https://avatars-next.observableusercontent.com/28b9276723f510612a9ffc80e179b2b8ae42addb9ebf8b0b714e8b2c8db98c30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Papercraft Ornament - Flow Fields Edition","cells":[{"id":0,"value":"md`# Papercraft Ornament - Flow Fields Edition\n\nSo with the Cricut machines, you can draw with a pen in addition to cutting paper. Naturally, [I tried to emulate Tyler Hobbs again](https://observablehq.com/@tonyhschu/emulating-tyler-hobbs-in-flow-fields) and made Flow Field ornaments! Warning - janky attempts at projections ahead. Would love suggestions!\n\n(The base cutout generator is here: https://observablehq.com/@tonyhschu/papercraft-christmas-ornaments-generator)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]);\n \n const cutLayer = svg.append(\"g\")\n const drawLayer = svg.append(\"g\")\n \n linesToDraw.forEach((p) => {\n switch (p.type) {\n case \"skip\":\n break;\n case \"hanger\":\n hangerLine(cutLayer, p)\n break;\n case \"fold\":\n foldCutLine(cutLayer, p)\n break;\n default:\n if (p.tabs) {\n latchAttachmentLine(cutLayer, p)\n } else {\n regularLine(cutLayer, p)\n }\n }\n })\n \n const strokeColor = d3.scaleLinear().domain([0, paths.length])\n \n paths.forEach((path, i) => {\n drawLayer.append(\"path\")\n .attr(\"d\", lineDrawer(path))\n .attr(\"stroke-width\", 3)\n //.attr(\"stroke\", d3.interpolateWarm(strokeColor(i)))\n .attr(\"stroke\", \"red\")\n .attr(\"fill\", \"none\")\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"html`

\n ${await FileAttachment(\"flow-fields-ornament.png\").image()}\n

This is roughly how it looks.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md`This effectively controls how twisty the lines are`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"viewof radius = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"md`This controls how close lines can be to each other`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"viewof minPointsProximity = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"md`This controls the number of sides`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"viewof sides = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"md`This controls the number of vertical segments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof segmentCount = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"md`This controls which segment the sides are joined together`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof jointSegment = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"noTabSegments = [0, 2, 5]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"md`Edit this array to control which segments do not have the connecting tabs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"html`

\n ${await FileAttachment(\"fibonacci_sphere.png\").image()}\n

Fibonacci sphere

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"function getFibonacciSpherePoints(samples, radius, randomize) {\n // Via: https://gist.github.com/stephanbogner/a5f50548a06bec723dcb0991dcbb0856\n // Translated from Python from https://stackoverflow.com/a/26127012\n samples = samples || 1;\n radius = radius || 1;\n randomize = randomize || true;\n var random = 1;\n if (randomize === true) {\n random = Math.random() * samples;\n }\n\n var points = []\n var offset = 2 / samples\n var increment = Math.PI * (3 - Math.sqrt(5));\n\n for (var i = 0; i < samples; i++) {\n var y = ((i * offset) - 1) + (offset / 2);\n var distance = Math.sqrt(1 - Math.pow(y, 2));\n var phi = ((i + random) % samples) * increment;\n var x = Math.cos(phi) * distance;\n var z = Math.sin(phi) * distance;\n x = x * radius;\n y = y * radius;\n z = z * radius;\n var point = {\n 'x': x,\n 'y': y,\n 'z': z\n }\n points.push(point);\n }\n return points;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"md`Thanks to the Stephan Bogner gist, I have this getFibonacciSpherePoints function. Except that it produces points in 3D, and I want them in 2D... I think?\n\nSo more Googling: \"3D points to points on a sphere\" which led to:\n\nhttps://stackoverflow.com/questions/969798/plotting-a-point-on-the-edge-of-a-sphere`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"convert3DPointToSphereCoordinate = (x, y, z) => {\n return { \n lng: Math.atan2(y, x) + Math.PI,\n lat: Math.acos((z / radius)) * 2\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"sideWidthAtLatitude = d3.scaleLinear()\n .domain(sideWidthDomainAndRange.domain)\n .range(sideWidthDomainAndRange.range)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"sideWidthDomainAndRange = {\n const segments = d3.groups(sampleExteriorLines, l => l.segment).map((g, i) => {\n const pair = g[1]\n \n return {\n lines: pair,\n verticalLength: facets[i].height,\n horizontalLength: facets[i].bottom\n }\n })\n \n const totalVerticalLength = segments.reduce((memo, current) => { return memo + current.verticalLength }, 0)\n \n let culmulativeVerticalLength = 0\n const domain = segments.map(s => {\n culmulativeVerticalLength += s.verticalLength\n return culmulativeVerticalLength / totalVerticalLength * 2 * Math.PI\n })\n \n const range = segments.map(s => s.horizontalLength)\n \n return {\n domain: [0].concat(domain),\n range: [0].concat(range)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"md`And this is how I proved to myself that it even worked.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 200]);\n \n const count = 800\n d3.range(count).map(i => {\n const lat = i / count * Math.PI * 2\n \n svg.append(\"rect\")\n .attr(\"width\", 1)\n .attr(\"height\", sideWidthAtLatitude(lat))\n .attr(\"x\", i)\n .attr(\"fill\", d3.interpolateSpectral(i / 800))\n })\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`But that doesn't get me all the way there. sideWidthAtLatitude only gives me how far to offset from the spine. That offset (plus the vertical offset along the spine) needs to be added to the position and the rotation of a particular petal.\n\nsphereToFlat(lat, lng) thus has to do the following:\n\n1. Figure out which petal we're on by dividing the lng by the arc for a side.\n2. Figure out the top of that petal's position, as well as its rotation (via a lookup)\n3. Then apply both the spine-wise and width-wise offsets.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"sphereToFlat = (lat, lng) => {\n const side = Math.min(sides - 1, Math.floor(lng / arcOfSide))\n \n const s = propertiesPerSide[side]\n \n const widthAtLat = sideWidthAtLatitude(lat)\n \n //const remainder = lng - (side + 0.5) * 2 * Math.PI / sides\n const proportionOfSide = (lng % arcOfSide) / (arcOfSide) - 0.5\n \n const offsetFromTop = (lat / (2 * Math.PI)) * poleToPoleLength\n const offsetFromMidline = proportionOfSide * widthAtLat\n \n const ortho = -s.theta - Math.PI * 0.5\n \n return {\n proportionOfSide,\n x: s.poles.top.x + Math.cos(-s.theta) * offsetFromTop + Math.cos(ortho) * offsetFromMidline,\n y: s.poles.top.y + Math.sin(-s.theta) * offsetFromTop + Math.sin(ortho) * offsetFromMidline,\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"md`And this is how I proved to myself that it worked. It initially didn't. I made a bunch of mistakes:\n\n1. Didn't subtract 0.5 from proportionOfSide\n2. Didn't normalize lng % arcOfSide (i.e. didn't divide by arcOfSide)\n3. Had the signs in front of both offsets wrong. (+ where it should be -, etc.) The use of d3.interpolateSpectral was what allowed me to catch that through the continuousness of the gradient (or lack there of.)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"md`Ok, now I have a function that allows me to go from (lat, lng) to (x, y), and a function that maps from (x, y, z) in 3D space to (lat, lng). Which means that at long last I can apply the Fibonacci sphere function. Why are we doing this again?\n\n>> Flow fields are based around a grid. Roughly speaking, this grid covers the whole image/canvas. At each point in the grid, you store an angle. Your grid should be stored as a 2D array of floating point numbers. Each item in the array holds an angle and represents a point in the grid.\n\n>> -- Tyler X Hobbs, [Flow Fields](https://tylerxhobbs.com/essays/2020/flow-fields)\n\nOh right, this is our version of the grid concept, and we want to hold an angle on each point. Instead of gridPoints, I named the variable fieldPoints.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"fieldPoints = getFibonacciSpherePoints(10000, radius).map(p => { \n return {\n ...p,\n ...convert3DPointToSphereCoordinate(p.x, p.y, p.z),\n noise: perlin3.gen(p.x + radius, p.y + radius, p.z + radius)\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"md`This set up turned out to be massively convienent. I did a whole bunch of research about how to map 2D perlin noise onto the surface of the sphere, and most everyone on the internet is like, \"just sample from 3D perlin noise instead. That's what maps to the colors here.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]);\n \n const cutLayer = svg.append(\"g\")\n const scoreLayer = svg.append(\"g\")\n \n linesToDraw.forEach((p) => {\n switch (p.type) {\n case \"hanger\":\n hangerLine(cutLayer, p)\n break;\n case \"fold\":\n foldCreaseLine(scoreLayer, p)\n break;\n default:\n if (p.tabs) {\n latchAttachmentLine(cutLayer, p)\n } else {\n regularLine(cutLayer, p)\n }\n }\n })\n \n fieldPoints.forEach(g => {\n const p = sphereToFlat(g.lat, g.lng);\n svg.append(\"circle\")\n .attr(\"cx\", p.x)\n .attr(\"cy\", p.y)\n .attr(\"r\", 1)\n .attr(\"fill\", d3.interpolateSinebow(noiseScale(g.noise)))\n \n })\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"md`So I can just use the noise value to map to an angle right? Not quite:\n\n1. The noise values don't map directly to a nice 0-2pi range. I needed to use a scaleLinear to normalize and map them.\n2. The angles needed to be rotated per petal to account for the petal's rotation, or else the flow fields won't look continuous across petals.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"noiseToTheta = (fp) => {\n const point = sphereToFlat(fp.lat, fp.lng)\n \n const side = getSideIDGivenPoint(point)\n \n const properties = propertiesPerSide[side]\n \n return noiseScale(fp.noise) * Math.PI * 2 - properties.theta\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"noiseScale = d3.scaleLinear().domain(fieldExtents.noise)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"md`Again, here's the diagnostic visual to prove that things are working as expected.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]);\n \n const cutLayer = svg.append(\"g\")\n const scoreLayer = svg.append(\"g\")\n \n linesToDraw.forEach((p) => {\n switch (p.type) {\n case \"hanger\":\n hangerLine(cutLayer, p)\n break;\n case \"fold\":\n foldCreaseLine(scoreLayer, p)\n break;\n default:\n if (p.tabs) {\n latchAttachmentLine(cutLayer, p)\n } else {\n regularLine(cutLayer, p)\n }\n }\n })\n \n fieldPoints.forEach(fp => {\n const p = sphereToFlat(fp.lat, fp.lng);\n \n svg.append(\"polygon\")\n .attr(\"transform\", `translate(${p.x}, ${p.y}) rotate(${noiseToTheta(fp) / Math.PI * 180})`)\n .attr(\"points\", \"-1,0 1,0 0,-3\")\n .attr(\"fill\", d3.interpolateSinebow(noiseScale(fp.noise)))\n })\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"md`With the field finally properly set up, now I can finally start drawing flow lines through them. Here though a new set of complications arise.\n\nFirst -- looking up the field points repeatedly is slooow. Had to throw in a quadtree to make the look ups faster.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"fieldQuadTree = {\n const field = fieldPoints.map(fp => {\n const { x, y } = sphereToFlat(fp.lat, fp.lng)\n \n return {\n x,\n y,\n theta: noiseToTheta(fp)\n }\n })\n \n const q = d3.quadtree()\n .x(d => d.x)\n .y(d => d.y)\n .extent([drawingExtent.x, drawingExtent.y])\n .addAll(field)\n \n return q\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"md`So then I can drop a point, and then move according to the direction on the field.\n\nExcept I want to stop if I go outside of the bounds of the ornament. So now I need a function to test whether I am inside or outside of the ornament. How do I test if a point is inside an arbitary polygon or not?\n\nGoogle: check if point is inside polygon\n\n... and thus I learned about the ray casting method: https://www.geeksforgeeks.org/how-to-check-if-a-given-point-lies-inside-a-polygon/\n\nI can't even remember where I copied that code from now. I'm so sorry.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"isPointInsideOrnament = (point, linesToDraw) => {\n let intersectionCount = 0\n const p = point.x\n const q = point.y\n const r = point.x + 100000\n const s = point.y\n \n const checkIntersection = (a, b, c, d) => {\n let det, gamma, lambda;\n det = (c - a) * (s - q) - (r - p) * (d - b);\n if (det === 0) {\n return false;\n } else {\n lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / det;\n gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / det;\n return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1);\n }\n }\n \n linesToDraw.forEach(l => {\n let a = l.x1\n let b = l.y1\n let c = l.x2\n let d = l.y2 \n \n if (checkIntersection(a, b, c, d)) {\n intersectionCount++;\n }\n })\n \n return (intersectionCount % 2 === 1)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"isPointInsideOrnament({ x : 0, y: 0 }, ornamentBoundaryLines)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"md`Again, diagnostic graphic. This helped me catch a bunch of bugs around how I defined what are considered the \"exterior\" edges. I had initially just used all of the cut lines, and it didn't work. The visual showed me that immediately.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"md`With isPointInsideOrnament, I can stop flow lines from running outside of the boundaries. I also still needed to stop them from running into each other. This means that I have to:\n\n1. Remember each point were previous flow lines have been.\n2. Compare each new candidate point on a flow line to previous points.\n\nThis, of course, called for yet another quadtree.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"md`Finally, I am generating paths, which finally leads us to the result.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]);\n \n const cutLayer = svg.append(\"g\")\n const drawLayer = svg.append(\"g\")\n \n linesToDraw.forEach((p) => {\n switch (p.type) {\n case \"skip\":\n break;\n case \"hanger\":\n hangerLine(cutLayer, p)\n break;\n case \"fold\":\n foldCutLine(cutLayer, p)\n break;\n default:\n if (p.tabs) {\n latchAttachmentLine(cutLayer, p)\n } else {\n regularLine(cutLayer, p)\n }\n }\n })\n \n const strokeColor = d3.scaleLinear().domain([0, paths.length])\n \n paths.forEach((path, i) => {\n drawLayer.append(\"path\")\n .attr(\"d\", lineDrawer(path))\n .attr(\"stroke-width\", 3)\n //.attr(\"stroke\", d3.interpolateWarm(strokeColor(i)))\n .attr(\"stroke\", \"red\")\n .attr(\"fill\", \"none\")\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"md`Oooof that's a lot of work, and then there's still all this secondary functions that are required to support all of this. Here ends the narration though.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"exteriorLinesPerSide = d3.group(linesToDraw.filter(l => l.side === \"left\" || l.side === \"right\"), l => l.face)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"sampleExteriorLines = exteriorLinesPerSide.get(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"getSideIDGivenPoint = ({ x, y }) => {\n let result = null\n \n exteriorLinesPerSide.forEach((lineSet, key) => {\n if (isPointInsideOrnament({ x, y }, lineSet)) {\n result = key\n }\n })\n \n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"getPolesGivenLinesOnSide = (lineSet) => {\n let topLines = lineSet.filter(l => l.segment === 0)\n let topX1Y1matches = (topLines[0].x1 === topLines[1].x1 && topLines[0].y1 === topLines[1].y1)\n let topPoint = (topX1Y1matches) ? { x: topLines[0].x1, y: topLines[0].y1 } : { x: topLines[0].x2, y: topLines[0].y2 }\n \n let bottomLines = lineSet.filter(l => l.segment === segmentCount + 1)\n let bottomX1Y1matches = (bottomLines[0].x1 === bottomLines[1].x1 && bottomLines[0].y1 === bottomLines[1].y1)\n let bottomPoint = (bottomX1Y1matches) ? { x: bottomLines[0].x1, y: bottomLines[0].y1 } : { x: bottomLines[0].x2, y: bottomLines[0].y2 }\n \n return {\n top: topPoint,\n bottom: bottomPoint\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"poles = getPolesGivenLinesOnSide(exteriorLinesPerSide.get(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"poleToPoleLength = Math.hypot(poles.top.x - poles.bottom.x, poles.top.y - poles.bottom.y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"propertiesPerSide = {\n let properties = []\n \n exteriorLinesPerSide.forEach(lineSet => {\n const poles = getPolesGivenLinesOnSide(lineSet)\n const theta = Math.atan2(poles.top.y - poles.bottom.y, poles.bottom.x - poles.top.x)\n \n let property = {\n theta,\n poles\n }\n \n properties.push(property)\n })\n \n return properties\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"arcOfSide = (2 * Math.PI) / sides","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"ornamentBoundaryLines = linesToDraw.filter(l => {\n if (l.segment > 0) {\n return l.isExterior === true\n } else {\n return l.isExterior && (l.side !== \"left\" && l.side !== \"right\")\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"fieldExtents = {\n return {\n lng: d3.extent(fieldPoints, d => d.lat),\n lat: d3.extent(fieldPoints, d => d.lng),\n noise: d3.extent(fieldPoints, d => d.noise)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"stepLength = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"radius","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"lineDrawer = d3.line().x(d => d.x).y(d => d.y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"exteriorLines = linesToDraw.filter(l => l.isExterior)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import { linesToDraw, facets, drawingExtent, hangerLine, foldCreaseLine, foldCutLine, latchAttachmentLine, regularLine }\nwith { segmentCount, sides, noTabSegments, jointSegment }\nfrom \"282278e4ff9adb85\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"perlin3 = new tumult.Perlin3(\"tyler_hobbs_2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"tumult = require('https://unpkg.com/tumult/dist/tumult.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"