2e:null 2f:["$","title",null,{"children":"Flow Fields Mug Vinyl Generator | Tony Chu | Observable"}] 34:T7b8,paths = { const board = d3.quadtree() .x(d => d.x) .y(d => d.y) .extent([diameter, heightInMM]) const tooCloseToExistingPoint = (next) => { const proximity = dynamicProximity(next) const nearest = board.find(next.x, next.y, proximity) /* if (nearest) { console.log({ nearest: `${nearest.x} ${nearest.y}`, proximity }) } */ return (!nearest) ? false : true } const pathTracer = (init) => { const result = [] result.push(init) while (result.length < 100) { const l = result[result.length - 1] const fp = fieldQuadTree.find(l.x, l.y) let next = { x: l.x + Math.cos(fp.radian) * stepLength, y: l.y + Math.sin(fp.radian) * stepLength } const isTooClose = (result.length && tooCloseToExistingPoint(next)) result.push(next) if (isTooClose || Math.random() > 0.98 || result.length > maxLength) { break; } if (!isPointInBounds(next)) { // draw last point outside of bounds, but then stop break; } } return result } const minPathLength = 4 const paths = [] let failureCount = 0 let acceptanceThreshold = 75 /* 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(300000).forEach((i) => { const q = { x: Math.random() * diameter, y: Math.random() * heightInMM } if (!isPointInBounds(q)) { return } const path = pathTracer(q) //console.log(path) const keep = path.length > acceptanceThreshold if (keep) { board.addAll(path) // add to points we're tracking paths.push(path) } else { failureCount++ } if (failureCount > 25) { acceptanceThreshold = Math.max(3, acceptanceThreshold * 0.98) failureCount = 0 } }) return paths }35:[{"id":"c6b362a5d1d03e862646b1881979091f0c9b81992aff24f2938d9f5efdf0987c37acf5ef8340d1f43e85c5d16cfa2030d8ec25c54836e064cd0b9994ff01a457","href":"https://static.observableusercontent.com/files/c6b362a5d1d03e862646b1881979091f0c9b81992aff24f2938d9f5efdf0987c37acf5ef8340d1f43e85c5d16cfa2030d8ec25c54836e064cd0b9994ff01a457","name":"7BC32E85-5F74-4C1A-A9B6-B8541B65DAFE.jpeg","type":"image/jpeg","lastModified":1609736563568.481,"size":4342240}] 32:{"id":"e45eb11f77f8a7ec","slug":"flow-fields-mug-vinyl-generator","title":"Flow Fields Mug Vinyl Generator","thumbnail":"539d61e57363b85ef823add7aaccfc1ea4444a3db39eb9f02cc3a1f91f1e44d7","access_level":"public","create_time":"$D2021-01-03T22:08:00.879Z","update_time":"$D2021-01-04T05:17:37.154Z","view_time":null,"first_public_time":"$D2021-01-04T01:27:45.132Z","has_unpublished_edits":null,"fork":true,"stars":7,"starred":false,"owner":{"type":"team","id":"d23b8bbc584a6b18","login":"tonyhschu","name":"Tony Chu","avatar_url":"https://avatars-next.observableusercontent.com/28b9276723f510612a9ffc80e179b2b8ae42addb9ebf8b0b714e8b2c8db98c30","tier":"starter_2024"},"version":368,"publish_version":368,"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":2,"collection":null,"type":"notebook","body":{"title":"Flow Fields Mug Vinyl Generator","cells":[{"id":0,"value":"md`# Flow Fields Mug Vinyl Generator\n\nTODO:\n1. DONE - Establish the width and height of the mug\n2. DONE - Generate a flow field to sample from. Effectively porting code over from the Flow Fields Christmas ornament generator\n3. DONE - Generate lines on the flow field\n4. DONE - Apply the Minkowski and segmenting technique\n5. DONE - Do a test cut\n6. Do a real cut on vinyl\n7. Apply it to a mug`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"html`

\n ${await FileAttachment(\"7BC32E85-5F74-4C1A-A9B6-B8541B65DAFE.jpeg\").image()}\n

First Test Cut

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"viewof widthInMM = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"viewof heightInMM = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"diameter = Math.PI * widthInMM","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`Mouth Width: ${widthInMM}mm, Height: ${heightInMM}mm, Diameter: ${Math.round(diameter)}mm`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"viewof fieldScale = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, diameter, heightInMM])\n .attr(\"width\", width);\n \n paths.forEach(path => { \n const minkowskiPath = minkowski(path, { size: offsetRadius })\n const pathString = \"M \" + minkowskiPath.map(({ x, y }) => `${x} ${y}`).join(' L ') + \" z\"\n\n svg.append(\"path\")\n .attr(\"d\", pathString)\n .attr(\"fill\", \"black\")\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"viewof stepLength = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"viewof maxLength = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"offsetRadius = (minProximity - 1.25) / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"viewof minProximity = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"isPointInBounds = ({ x, y }) => {\n const margin = 2\n return (x < margin || x > diameter - margin || y < margin || y > heightInMM - margin) ? false : true\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, diameter, heightInMM])\n .attr(\"width\", width);\n \n const proximityMax = dynamicProximity({ x: diameter, y: 0 })\n \n flowField.forEach(p => {\n svg.append(\"polygon\")\n .attr(\"transform\", `translate(${p.x}, ${p.y}) rotate(${p.radian / Math.PI * 180})`)\n .attr(\"points\", \"-0.5,0 0.5,0 0,-1.5\")\n .attr(\"fill\", d3.interpolatePuBu(dynamicProximity(p) / proximityMax))\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"dynamicProximity = {\n const ease = d3.easePolyIn.exponent(2.5)\n \n const fn = ({ x, y }) => {\n return ease(1 - y / heightInMM) * 15 + minProximity\n }\n \n return fn\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, diameter, heightInMM])\n .attr(\"width\", width);\n \n flowField.forEach(p => {\n svg.append(\"polygon\")\n .attr(\"transform\", `translate(${p.x}, ${p.y}) rotate(${p.radian / Math.PI * 180})`)\n .attr(\"points\", \"-0.5,0 0.5,0 0,-1.5\")\n .attr(\"fill\", d3.interpolateRainbow((p.radian + Math.PI) / (2 * Math.PI)))\n })\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"fieldDensity = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"fieldQuadTree = {\n \n const q = d3.quadtree()\n .x(d => d.x)\n .y(d => d.y)\n .extent([diameter, heightInMM])\n .addAll(flowField)\n \n return q\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"flowField = {\n const columns = Math.ceil(diameter / fieldDensity)\n const rows = Math.ceil(heightInMM / fieldDensity)\n const longerSideLength = (columns > rows) ? columns : rows\n \n const points = []\n let minNoise = Infinity\n let maxNoise = -Infinity\n \n d3.range(rows).forEach(row => {\n d3.range(columns).forEach(col => {\n const noise = perlin2.gen(col / longerSideLength * fieldScale, row / longerSideLength * fieldScale)\n \n minNoise = (noise < minNoise) ? noise : minNoise\n maxNoise = (noise > maxNoise) ? noise : maxNoise\n \n points.push({\n x: col * fieldDensity,\n y: row * fieldDensity,\n noise\n })\n })\n })\n \n const noiseToRadianScale = d3.scaleLinear()\n .domain([minNoise, maxNoise])\n .range([-Math.PI, Math.PI])\n \n points.forEach(p => {\n p.radian = noiseToRadianScale(p.noise)\n })\n \n return points\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"generateSegments = (pathString, increment = 3) => {\n const pointAtPath = pointAtLengthQueryObj(pathString)\n \n const segments = []\n \n let location = 0\n \n while (location < pointAtPath.pathLength) {\n const count = 3 + ((Math.random() > 0.1) ? Math.pow(Math.ceil(Math.random() * 8), 2) : 0)\n \n const segment = []\n \n d3.range(count).forEach(i => {\n const nextLocation = location + i * increment\n if (nextLocation < pointAtPath.pathLength) {\n segment.push(pointAtPath(location + i * increment))\n }\n })\n \n if (segment.length > 1) {\n segments.push(segment)\n }\n \n location += count * increment + 3 * offsetRadius\n }\n \n return segments\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"pointAtLengthQueryObj = (pathString) => {\n const pathEl = DOM.element(\"svg:path\", {\n d: pathString\n })\n \n const fn = function(length) {\n const svgPoint = pathEl.getPointAtLength(length)\n \n return {\n x: svgPoint.x,\n y: svgPoint.y\n }\n }\n \n fn.pathElement = pathEl\n fn.pathLength = pathEl.getTotalLength()\n \n return fn\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import { minkowski } from \"a4b4f6a0d08dc6f5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"height = width * 0.4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"perlin2 = new tumult.Perlin2(\"tyler_hobbs_45\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"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":9,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"