2e:null 2f:["$","title",null,{"children":"Emulating Tyler Hobbs in Flow Fields | Tony Chu | Observable"}] 34:T482,viewof poles = { let initial = [ { y: 150, x: 250, positive: false, str: 0.1 }, { y: 350, x: 550, positive: true, str: 0.02 }, { y: 550, x: 350, positive: true, str: 0.1 }, { y: 350, x: 50, positive: false, str: 0.01 } ] let svg = d3.create("svg") .attr("viewBox", [0, 0, width * 2, height * 2]) .attr("width", width * 2) .attr("height", height * 2) let fieldG = svg.append('g') let polesG = svg.append('g') let node = svg.node(); node.value = initial let render = (newPoles) => { console.log(newPoles[0].x, newPoles[0].y) let fieldPerGridCell = gridCellFactory({ cellValue: (col, row) => { let x = col * resolution let y = row * resolution return fieldDirectionSampler(x, y, node.value) } }) gridLayer(fieldG, fieldPerGridCell) polesLayer(polesG, newPoles) } node.onmousedown = (event) => { event.preventDefault(); node.value[0].x = event.layerX node.value[0].y = event.layerY render(node.value) node.dispatchEvent(new CustomEvent("input")); } render(node.value) return node }35:T426,fieldDirectionSampler = (x, y, poles) => { // Setting up the noise let noise = perlin.gen(x / width * perlinScale, y / height * perlinScale) * 2 * Math.PI let noiseStr = 0.000002 // Noise at given point let perlinBackground = { sumx: Math.cos(noise) * noiseStr, sumy: Math.sin(noise) * noiseStr } // Stack the influence of the poles on top let sumfield = poles.reduce((memo, pole) => { let dx = (x - pole.x) let dy = (y - pole.y) let r = Math.hypot(dx, dy) let magnitude = pole.str / Math.pow(r, 1.7) let theta = vectorForGivenPositionAndPole(x, y, pole.x, pole.y, pole.positive) // Influence of each pole at the given point let fieldx = magnitude * Math.cos(theta) let fieldy = magnitude * Math.sin(theta) return { sumx: memo.sumx + fieldx, sumy: memo.sumy + fieldy } }, perlinBackground) // { sumx: 0, sumy: 0 }) // the Math.PI / 2 at the end "turns" the field 90 degrees so we get the whirlpool directions return Math.atan2(sumfield.sumy, sumfield.sumx) + Math.PI / 2 }36:T451,lineTracer = (startLocation, fieldFn, quadtree, incomingParams) => { let params = { discontinuationRate: 0.009, maxLineLength: 200, ...incomingParams } let keepGoing = true let l = [{ theta: fieldFn(startLocation.x, startLocation.y), ...startLocation }] const stepSize = resolution * 0.211 while (keepGoing) { let prev = l[l.length - 1] if (prev.x < 0 || prev.x > width * 2 || prev.y < 0 || prev.y > height * 2) { keepGoing = false; } let theta = fieldFn(prev.x, prev.y) let next = { x: prev.x + stepSize * Math.cos(theta), y: prev.y + stepSize * Math.sin(theta), theta } // Use quadtree to track where previous lines had been, // so to not have them run into each other const hasCloseNeighbour = quadtree.find(next.x, next.y, 3) if (hasCloseNeighbour) { keepGoing = false; } l.push(next) keepGoing = Math.random() > params.discontinuationRate && keepGoing && l.length < params.maxLineLength } if (l.length > 1) { quadtree.addAll(l) } return l }37:T40b,linesRendererTwo = (g, lines) => { g.selectAll("polyline") .data(lines) .join("polygon") .attr("stroke", "none") .attr("fill", (l, i) => { //return d3.interpolateWarm((Math.sin(l[0].theta) + 1) / 2) return d3.interpolateWarm(l[0].y / (height * 2)) }) .attr("points", d => { let left = d.map((p, i) => { let strokeWidth = strokeWidthFn(i, d.length) * maxStrokeWidth let x = p.x + strokeWidth * Math.cos(p.theta + Math.PI / 2) let y = p.y + strokeWidth * Math.sin(p.theta + Math.PI / 2) return`${x},${y}` }).join(" ") let right = d.reverse().map((p, i) => { let strokeWidth = strokeWidthFn(i, d.length) * maxStrokeWidth let x = p.x + strokeWidth * Math.cos(p.theta - Math.PI / 2) let y = p.y + strokeWidth * Math.sin(p.theta - Math.PI / 2) return`${x},${y}` }).join(" ") return left + " " + right }) }38:T82b,// straight lifted from https://bl.ocks.org/mbostock/22fd67be72552774736d function poissonDiscSampler(width, height, radius) { var k = 30, // maximum number of samples before rejection radius2 = radius * radius, R = 3 * radius2, cellSize = radius * Math.SQRT1_2, gridWidth = Math.ceil(width / cellSize), gridHeight = Math.ceil(height / cellSize), grid = new Array(gridWidth * gridHeight), queue = [], queueSize = 0, sampleSize = 0; return function() { if (!sampleSize) return sample(Math.random() * width, Math.random() * height); // Pick a random existing sample and remove it from the queue. while (queueSize) { var i = Math.random() * queueSize | 0, s = queue[i]; // Make a new candidate between [radius, 2 * radius] from the existing sample. for (var j = 0; j < k; ++j) { var a = 2 * Math.PI * Math.random(), r = Math.sqrt(Math.random() * R + radius2), x = s[0] + r * Math.cos(a), y = s[1] + r * Math.sin(a); // Reject candidates that are outside the allowed extent, // or closer than 2 * radius to any existing sample. if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) return sample(x, y); } queue[i] = queue[--queueSize]; queue.length = queueSize; } }; function far(x, y) { var i = x / cellSize | 0, j = y / cellSize | 0, i0 = Math.max(i - 2, 0), j0 = Math.max(j - 2, 0), i1 = Math.min(i + 3, gridWidth), j1 = Math.min(j + 3, gridHeight); for (j = j0; j < j1; ++j) { var o = j * gridWidth; for (i = i0; i < i1; ++i) { if (s = grid[o + i]) { var s, dx = s[0] - x, dy = s[1] - y; if (dx * dx + dy * dy < radius2) return false; } } } return true; } function sample(x, y) { var s = [x, y]; queue.push(s); grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = s; ++sampleSize; ++queueSize; return s; } }39:[{"id":"0dae4391aaa1e633f73cbf2dc180acec8d4bb6d72ade589ae8b161178a6572fae43c0e5aad6a1b3e53ac9a885ba2701c48f6c2b5c13a26fa0f52509cf65497e1","href":"https://static.observableusercontent.com/files/0dae4391aaa1e633f73cbf2dc180acec8d4bb6d72ade589ae8b161178a6572fae43c0e5aad6a1b3e53ac9a885ba2701c48f6c2b5c13a26fa0f52509cf65497e1","name":"Screen Shot 2020-02-09 at 9.26.24 AM.png","type":"image/png","lastModified":1581269236011.02,"size":182607}] 32:{"id":"92a5ad80fffca49a","slug":"emulating-tyler-hobbs-in-flow-fields","title":"Emulating Tyler Hobbs in Flow Fields","thumbnail":"4610176fa36614091bc7a0620012500bd5cc1a1cc3c3989c6f6eb9c7754ae533","access_level":"public","create_time":"$D2020-02-09T16:50:33.890Z","update_time":"$D2020-02-18T02:10:14.555Z","view_time":null,"first_public_time":"$D2020-02-17T18:20:20.159Z","has_unpublished_edits":null,"fork":false,"stars":66,"starred":false,"owner":{"type":"team","id":"d23b8bbc584a6b18","login":"tonyhschu","name":"Tony Chu","avatar_url":"https://avatars-next.observableusercontent.com/28b9276723f510612a9ffc80e179b2b8ae42addb9ebf8b0b714e8b2c8db98c30","tier":"starter_2024"},"version":1013,"publish_version":1013,"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":20,"collection":null,"type":"notebook","body":{"title":"Emulating Tyler Hobbs in Flow Fields","cells":[{"id":0,"value":"md`# Emulating Tyler Hobbs in Flow Fields\n\nI love the algorithmic art that Tyler Hobbs makes, especially these [flow fields](https://tylerxhobbs.com/essays/2020/flow-fields) ones. So much so that they were the reference images I sent to my jeweller when I had my wedding ring made.\n\n![Wedding Ring](${await FileAttachment(\"Screen Shot 2020-02-09 at 9.26.24 AM.png\").url()})\n\nSo I was extra excited when he posted his guide to implementing Flow Fields! To understand it better, here is my attempt to re-implement his pseudo code. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"renderLayers([\n { renderer: (g) => { \n g.append(\"rect\")\n .attr(\"width\", width * 2)\n .attr(\"height\", height * 2)\n .attr(\"fill\", \"#333\") \n }\n },\n { renderer: linesRendererTwo, data: magneticLines }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"renderLayers([\n { renderer: linesRendererOne, data: lines }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"md`To quote Tyler, \"For what it's worth, I actually recommend that you try to come up with your own distortion techniques instead of relying on Perlin noise, simply because it's so overdone. But, it can still be a good tool to know about or start out with.\"\n\nSo I tried to do something new, at least for me. I dropped in a but of \"magnetic poles\" on top of a perlin noise field, which created a field like this.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"md`Given a bunch of poles, and some perline noise...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"md`The bit about having good starting points for your lines to trace was super import. I didn't know what Tyler meant by circle packing though, so I stole Bostock's poisson disc sampler to pick starting ponits instead.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"renderLayers([\n { renderer: circlesLayer, data: startingPoints }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"startingPoints = {\n var sample = poissonDiscSampler(width * 2, height * 2, 5),\n samples = [],\n s;\n\n while (s = sample()) samples.push({ x: s[0], y: s[1] });\n \n return d3.shuffle(samples)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"md`Given a bunch of potential starting points, and a field to run through, the next bit is to trace the lines.\n\nI used a quadtree to store points where the lines have gone, so to avoid lines running into each other. Without this the lines would look much messier.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"linesGenerator = (fieldFn, incomingParams) => {\n let params = {\n minStartSpace: 4,\n ...incomingParams \n }\n \n let quadtree = d3.quadtree()\n .x(d => d.x)\n .y(d => d.y)\n \n let lines = []\n \n let subset = startingPoints.slice(10)\n \n subset.forEach((point) => { \n if (!quadtree.find(point.x, point.y, params.minStartSpace)) { \n let l = lineTracer(point, fieldFn, quadtree, params)\n\n if (l.length > 1) { lines.push(l) }\n }\n })\n \n return lines\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"md`With this machinery I generated two sets of lines. One where the lines are based on the combination of Perlin noise plus the magnetic fields. The other set of lines is traced with those forces are turn 90 degrees.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"magneticLines = {\n let fieldFn = (x, y) => {\n return magneticSampler(x, y, poles)\n }\n \n return linesGenerator(fieldFn, { minStartSpace: 1.5, maxLineLength: 27, discontinuationRate: 0.013 })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"lines = {\n let fieldFn = (x, y) => {\n return fieldDirectionSampler(x, y, poles)\n }\n \n return linesGenerator(fieldFn, {})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"md`After that, it's basic D3 territory of turning line data into SVG graphics!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"linesRendererOne = (g, lines) => {\n g.selectAll(\"polyline\")\n .data(lines)\n .join(\"polyline\")\n .attr(\"stroke\", (l, i) => { \n //return d3.interpolateWarm((Math.sin(l[0].theta) + 1) / 2)\n return d3.interpolateWarm(l[0].y / (height * 2)) \n })\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", 4)\n .attr(\"fill\", \"none\")\n .attr(\"points\", d => {\n return d.map((p) => `${p.x},${p.y}`).join(\" \")\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"md`# Fin\n\nThe rest of this is helper functions of various sorts`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"magneticSampler = (x, y, poles) => {\n return fieldDirectionSampler(x, y, poles) - Math.PI / 2\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"vectorForGivenPositionAndPole = (x, y, px, py, positive) => {\n let dx = x - px\n let dy = y - py\n \n if (positive) {\n return Math.atan2(dy, dx)\n } else {\n return (Math.atan2(dy, dx) + Math.PI) % (2 * Math.PI)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"perlinScale = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"perlinGrid = gridCellFactory({\n cellValue: (col, row) => {\n return perlin.gen(col / 67, row / 67) * 2 * Math.PI\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"cellRenderer = [\n (enter) => {\n let g = enter.append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${d.x}, ${d.y}) rotate(${d.theta / Math.PI * 180})`)\n \n g.append(\"line\")\n .attr(\"x0\", 0)\n .attr(\"y0\", 0)\n .attr(\"x1\", 3)\n .attr(\"y0\", 0)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 1)\n \n g.append(\"polygon\")\n .attr(\"fill\", \"black\")\n .attr(\"points\", \"6,0 3,2 3,-2\")\n \n g.append(\"circle\")\n .attr(\"fill\", \"black\")\n .attr(\"r\", \"1\")\n \n return g\n },\n (update) => {\n return update\n .attr(\"transform\", (d, i) => `translate(${d.x}, ${d.y}) rotate(${d.theta / Math.PI * 180})`)\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"maxStrokeWidth = 1.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"strokeWidthFn = (i, l) => {\n if (i === 0 || i === l - 1) { return 0 }\n if (i === 1 || i === l - 2) { return 0.4 }\n if (i === 2 || i === l - 3) { return 0.7 }\n if (i === 3 || i === l - 4) { return 0.9 }\n return 1\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"gridLayer = (g, grid) => {\n g.selectAll(\"g\")\n .data(grid)\n .join(...cellRenderer)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"polesLayer = (g, poles) => {\n g.selectAll(\"g\")\n .data(poles)\n .join(\n (enter) => { \n enter\n .append(\"g\").attr(\"transform\", (d, i) => `translate(${d.x}, ${d.y})`)\n .append(\"circle\")\n .attr(\"fill\", d => { return (d.positive ? \"red\" : \"blue\") })\n .attr(\"r\", d => Math.log(d.str * 100000))\n },\n (update) => {\n update.attr(\"transform\", (d, i) => `translate(${d.x}, ${d.y})`)\n }\n )\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"circlesLayer = (g, circles) => {\n g.selectAll(\"circle\")\n .data(circles)\n .join(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", \"0.75\")\n .attr(\"fill\", \"black\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"dipoleRenderer = [\n (enter) => {\n console.log(\"enter\", enter)\n \n enter.attr(\"transform\", (d, i) => `translate(${d.x}, ${d.y})`)\n \n enter.append(\"circle\")\n .attr(\"fill\", d => { return (d.positive ? \"red\" : \"blue\") })\n .attr(\"r\", d => d.str * 100)\n },\n (update) => {\n update.attr(\"transform\", (d, i) => `translate(${d.x}, ${d.y})`)\n \n update\n .select(\"circle\")\n .attr(\"fill\", d => { return (d.positive ? \"red\" : \"blue\") })\n .attr(\"r\", d => d.str * 100)\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"gridCellFactory = function(params = {}) {\n let x0 = width * -0.5\n let x1 = width * 1.5\n let y0 = height * -0.5\n let y1 = height * 1.5\n \n let numOfColumns = Math.ceil((y1 - y0) / resolution)\n let numOfRows = Math.ceil((x1 - x0) / resolution)\n \n let cells = []\n \n d3.range(numOfRows).forEach((col) => { \n d3.range(numOfColumns).forEach((row) => {\n cells.push({\n x: col * resolution,\n y: row * resolution,\n theta: (params.cellValue) ? params.cellValue(col, row) : 0\n })\n }) \n })\n \n return cells\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"getNearestFieldPoint = (x, y, grid) => {\n let col = Math.max(0, Math.min(Math.round(x / resolution), grid[0].length - 1))\n let row = Math.max(0, Math.min(Math.round(y / resolution), grid.length - 1))\n\n return grid[row][col]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"renderLayers = function(layers, svg) {\n if (!svg) {\n svg = d3.create(\"svg\")\n .attr(\"width\", width * 2)\n .attr(\"height\", height * 2)\n .attr(\"viewBox\", [0, 0, width * 2, height * 2]);\n }\n\n \n svg.selectAll(\"g\")\n .data(layers)\n .join(\n (enter) => {\n let temp1 = enter.append(\"g\")\n return temp1\n }\n )\n .each((layer, i, group) => {\n layer.renderer(d3.select(group[i]), layer.data)\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"resolution = width * resolutionRatio","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"resolutionRatio = 0.03","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"width = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"perlin = new tumult.Perlin2(\"tyler_hobbs\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"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":15,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"