30: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 }31: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 }32: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; } }33:[] 2e:{"title":"Genuary 2022 / 4","cells":[{"id":0,"value":"# Genuary 2022 / 4\n\nThe next next Fidenza.\n\n\nfound some background learning and examples:\n\n- https://observablehq.com/@esperanc/flow-fields\n- https://tylerxhobbs.com/fidenza\n- https://observablehq.com/@tonyhschu/emulating-tyler-hobbs-in-flow-fields\n- https://observablehq.com/@esperanc/flow-field-variations\n- https://www.youtube.com/watch?v=BjoM9oKOAKY&ab_channel=TheCodingTrain\n\nThis notebook is a fork from Tony Chu notebook: [Emulating Tyler Hobbs in Flow Fields](https://observablehq.com/@tonyhschu/emulating-tyler-hobbs-in-flow-fields) It was the clearlest example for me to work through and start exploring flow fields.","pinned":false,"hidden":false,"mode":"md"},{"id":151,"value":"renderLayers([\n { renderer: linesRenderer, data: lines }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":751,"value":"viewof poles = {\n const initial = d3.range(108).map(d => {\n return {\n x: randomNumber(0, width * 2),\n y: randomNumber(10, height),\n positive: (d % 10 == 3) ? false : true,\n str: (d % 10 == 3) ? 0.1 : 0.02\n }\n })\n \n let svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width * 2, height * 2])\n .attr(\"width\", width * 2)\n .attr(\"height\", height * 2)\n \n let fieldG = svg.append('g')\n let polesG = svg.append('g')\n \n let node = svg.node();\n \n node.value = initial\n \n let render = (newPoles) => {\n console.log(newPoles[0].x, newPoles[0].y)\n \n let fieldPerGridCell = gridCellFactory({ \n cellValue: (col, row) => {\n let x = col * resolution\n let y = row * resolution\n\n return fieldDirectionSampler(x, y, node.value)\n }\n })\n \n gridLayer(fieldG, fieldPerGridCell)\n polesLayer(polesG, newPoles)\n }\n \n render(node.value)\n \n return node\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":981,"value":"md`Given a bunch of poles, and some perline noise...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":460,"value":"renderLayers([\n { renderer: circlesLayer, data: startingPoints }\n])","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":402,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":1008,"value":"md`After that, it's basic D3 territory of turning line data into SVG graphics!`","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"linesRenderer = (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.interpolatePuRd(l[0].y / (height * 2)) \n return '#87c540'\n })\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", 2)\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"},{"id":1012,"value":"--------------\n\n```\n __ __ _______ ___ _______ _______ ______ _______ ___ \n| | | || || | | || || _ | | || | \n| |_| || ___|| | | _ || ___|| | || | _____||___| \n| || |___ | | | |_| || |___ | |_|| | |_____ ___ \n| || ___|| |___ | ___|| ___|| __ ||_____ || | \n| _ || |___ | || | | |___ | | || _____| ||___| \n|__| |__||_______||_______||___| |_______||___| |||_______| \n\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":629,"value":"magneticSampler = (x, y, poles) => {\n return fieldDirectionSampler(x, y, poles) - Math.PI / 2\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":605,"value":"perlinScale = 3","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":456,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":651,"value":"maxStrokeWidth = 1.5","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":146,"value":"gridLayer = (g, grid) => {\n g.selectAll(\"g\")\n .data(grid)\n .join(...cellRenderer)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":100,"value":"resolution = width * resolutionRatio","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"resolutionRatio = 0.05","pinned":true,"hidden":false,"mode":"ojs"},{"id":1063,"value":"width = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"perlin = new tumult.Perlin2(\"tyler_hobbs\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"tumult = require('https://unpkg.com/tumult/dist/tumult.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1033,"value":"randomNumber = (min, max) => {\n return Math.floor((max - min + 1) * Math.random() + min) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}