2b:null 2c:["$","title",null,{"children":"Noise plane partition | Claudio Esperança | Observable"}] 31:Tc8e,{ const { width = 800, height = 600 } = {}; const mainPolygon = subdividePolygon( [ [0, 0], [width, 0], [width, height], [0, height] ], 5 ); const polygonPerimeter = (polygon) => { let q = polygon[polygon.length - 1]; let sum = 0; for (let p of polygon) { sum += vec2.dist(q, p); q = p; } return sum; }; const curvePartition = noiseCurvePartition(simplexParams, { width, height }); const rand = makeRandFunction(randomSeed); const { maxRecursionLevel, minArea, maxPerimeterAreaRatio, framesPerLevel, colorVariation, avgLuminosity, lineWidth, lineColor } = partitionParam; const recursivePartition = ( polygon, baseColor, level, sideways, result = [] ) => { const box = boundingBox(polygon); const boxSides = [box.max[0] - box.min[0], box.max[1] - box.min[1]]; const smallestSide = Math.min(...boxSides); const boxArea = boxSides[0] * boxSides[1]; const polyArea = Math.abs(polygonArea(polygon)); const polyPerimeter = polygonPerimeter(polygon); if ( --level < 0 || smallestSide < 10 || polyArea < minArea || polyPerimeter / Math.sqrt(polyArea) > maxPerimeterAreaRatio ) { result.push([polygon, baseColor]); return result; } let polyA, polyB; try { [polyA, polyB] = curvePartition(polygon, sideways); } catch (error) { console.log({ error, polygon }); result.push([polygon, baseColor]); return result; } recursivePartition( polyA, baseColor, //colorVary(baseColor, rand(-0.2, 0.2), rand(-0.05, 0.05), 0), level, !sideways, result ); recursivePartition( polyB, colorVaryLuv( baseColor, rand(-colorVariation, colorVariation), rand(-colorVariation, colorVariation), rand(-colorVariation * 0.2, colorVariation * 0.2) ), level, !sideways, result ); return result; }; const ctx = DOM.context2d(width, height); ctx.strokeStyle = lineColor; ctx.lineWidth = lineWidth; const dpr = window.devicePixelRatio; const baseColor = `hsl(${rand(0, 360)},${rand(50, 60)}%,${ avgLuminosity * 100 }%)`; ctx.fillStyle = baseColor; ctx.fillRect(0, 0, width, height); let imgData = ctx.getImageData(0, 0, width * dpr, height * dpr); for (let level = 1; level <= maxRecursionLevel; level++) { let pairs = recursivePartition(mainPolygon, baseColor, level); for (let i = 0; i < framesPerLevel; i++) { ctx.putImageData(imgData, 0, 0); let opacity = i / (framesPerLevel - 1); ctx.globalAlpha = opacity; for (let [poly, color] of pairs) { ctx.fillStyle = color; ctx.beginPath(); for (let p of poly) ctx.lineTo(...p); ctx.closePath(); ctx.fill(); if (lineWidth > 0) ctx.stroke(); // let q = findPointInPolygon(poly); // ctx.fillStyle = "black"; // ctx.beginPath(); // ctx.arc(...q, 2, 0, Math.PI * 2); // ctx.fill(); } yield ctx.canvas; } imgData = ctx.getImageData(0, 0, width * dpr, height * dpr); } }32:T4fd,{ const { width = 800, height = 600, sep = 100, curveStep = 4, curveLen = 500, } = {}; // options const rand = makeRandFunction(randomSeed); const noise = createSimplexNoise( Object.assign({ random: rand }, simplexParams) ); const direction = (x, y) => { const ang = noise(x, y) * Math.PI; return [Math.cos(ang) * curveStep, Math.sin(ang) * curveStep]; }; const curveAt = (x, y) => { const curve = [[x, y]]; let [px, py] = [x, y]; for (let i = 0; i < curveLen; i++) { const [dx, dy] = direction(px, py); [px, py] = [px + dx, py + dy]; curve.push([px, py]); } curve.reverse(); [px, py] = [x, y]; for (let i = 0; i < curveLen; i++) { const [dx, dy] = direction(px, py); [px, py] = [px - dx, py - dy]; curve.push([px, py]); } return curve; }; const canvas = DOM.canvas(width, height); const ctx = canvas.getContext("2d"); const pds = new Poisson( { shape: [width, height], minDistance: sep * 0.8, maxDistance: sep / 0.8, tries: 15 }, rand ); for (let [x, y] of pds.fill()) { const curve = curveAt(x, y); ctx.beginPath(); for (let p of curve) ctx.lineTo(...p); ctx.stroke(); } return canvas; }33:T44f,function findPointInPolygon(polygon) { // First heuristics: test middle point between two points on the polygon border const n = polygon.length; function findPoint(a, b, tries = 10) { const p = vec2.lerp([], a, b, 0.5); if (pointInPoly(p, polygon)) return p; if (--tries <= 0) return false; return findPoint(a, p, tries) || findPoint(p, b, tries); } let p = null, d = -Infinity; for (let v of [ [0, 1], [1, 0], [1, 1], [1, -1] ]) { let { min, max } = extremePoints(v, polygon); let middle = vec2.lerp([], min, max, 0.5); for (let [a, b] of [ [min, middle], [middle, max], [min, max] ]) { let q = findPoint(a, b); if (q) { let dist = borderDistance(q, polygon); if (dist > d) [p, d] = [q, dist]; } } } for (let [i, j] of [ [0, ~~(n * 0.5)], [~~(n * 0.25), ~~(n * 0.75)] ]) { let [a, b] = [polygon[i], polygon[j]]; let q = findPoint(a, b); if (q) { let dist = borderDistance(q, polygon); if (dist > d) [p, d] = [q, dist]; } } return p; }34:Ta3b,function noiseCurvePartition(params = simplexParams, options = {}) { const { width = 800, height = 600 } = options; const { sampleForwards, sampleBackwards, sampleLeft, sampleRight } = curveGenFunctions(params, { width, height }); const segmentBall = (a, b, i = -1) => { const r = vec2.dist(a, b) / 2; const c = vec2.lerp([], a, b, 0.5); const ball = new Ball(...c, r); ball.segment = { a, b, i }; return ball; }; const intersectsOther = (a, b, bt) => { const ball = segmentBall(a, b); for (let other of bt.within(ball, ball.r)) { if ( vec2.segmentsIntersect( ball.segment.a, ball.segment.b, other.entry.segment.a, other.entry.segment.b ) ) return other.entry.segment; } return false; }; return (polygon, sideways = false) => { const bt = new OnlineBT(); let a = polygon[polygon.length - 1]; for (let i = 0; i < polygon.length; i++) { const b = polygon[i]; bt.insert(segmentBall(a, b, i)); a = b; } const p = findPointInPolygon(polygon); if (!p) throw "can't find a point inside the polygon"; const pts = [p]; a = p; let count = 1000; let exitSegmentA; const [followA, followB] = sideways ? [sampleBackwards, sampleForwards] : [sampleLeft, sampleRight]; do { let b = followA(...a); let seg = intersectsOther(a, b, bt); if (seg) { exitSegmentA = seg.i; let q = vec2.lineIntersection([], a, b, seg.a, seg.b); pts.push(q); break; } pts.push(b); a = b; } while (count--); console.assert(count > 0); a = p; count = 1000; pts.reverse(); let exitSegmentB; do { let b = followB(...a); let seg = intersectsOther(a, b, bt); if (seg) { exitSegmentB = seg.i; let q = vec2.lineIntersection([], a, b, seg.a, seg.b); pts.push(q); break; } pts.push(b); a = b; } while (count--); console.assert(count > 0); if (exitSegmentA == exitSegmentB) { console.log({ exitSegmentA, first: pts[0], last: pts[pts.length - 1] }); } const polygonA = [...pts, polygon[exitSegmentB]]; for ( let i = (exitSegmentB + 1) % polygon.length; i != exitSegmentA; i = (i + 1) % polygon.length ) polygonA.push(polygon[i]); const polygonB = [...pts.reverse()]; for (let i = exitSegmentA; i != exitSegmentB; i = (i + 1) % polygon.length) polygonB.push(polygon[i]); return [polygonA, polygonB]; }; }35:[] 2f:{"id":"ca997ff4850f8611","slug":"noise-plane-partition","title":"Noise plane partition","thumbnail":"a81ced100399a0be140cdd017aaf450d272a408d010db9a0ff794fca15aee7f1","access_level":"public","create_time":"$D2023-10-08T18:05:47.536Z","update_time":"$D2023-10-14T16:47:46.097Z","view_time":null,"first_public_time":"$D2023-10-14T16:50:56.965Z","fork":false,"stars":32,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":474,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"cfe04ce599907bfc","slug":"generative-art","title":"Generative Art","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"type":"notebook","body":{"title":"Noise plane partition","cells":[{"id":0,"value":"# Noise plane partition\n\nCreates patterns by partitioning the plane with noise flow-field lines.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":60,"value":"viewof simplexParams = Inputs.form({\n xScaleLog: Inputs.range([-12, -5], {\n label: \"x scale (log2)\",\n step: 0.2,\n value: -9\n }),\n yScaleLog: Inputs.range([-12, -5], {\n label: \"y scale (log2)\",\n step: 0.1,\n value: -9\n }),\n octaves: Inputs.range([1, 8], { label: \"octaves\", step: 1, value: 1 })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"viewof randomSeed = Inputs.range([0, 100], { label: \"random seed\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":399,"value":"viewof partitionParam = Inputs.form({\n maxRecursionLevel: Inputs.range([1, 16], {\n label: \"max recursion\",\n step: 1,\n value: 10\n }),\n minArea: Inputs.range([50, 2000], {\n label: \"min area\",\n step: 10,\n value: 500\n }),\n maxPerimeterAreaRatio: Inputs.range([6, 20], {\n label: \"max perimeter / sqrt(area) ratio\",\n step: 1,\n value: 10\n }),\n framesPerLevel: Inputs.range([1, 200], {\n label: \"frames per subdiv level\",\n step: 1,\n value: 100\n }),\n colorVariation: Inputs.range([0.0, 0.2], {\n label: \"color variation\",\n step: 0.01,\n value: 0.1\n }),\n avgLuminosity: Inputs.range([0.1, 0.9], {\n label: \"avg luminosity\",\n step: 0.02,\n value: 0.7\n }),\n lineWidth: Inputs.range([0, 4], {\n label: \"line width\",\n step: 0.25,\n value: 1\n }),\n lineColor: Inputs.color({\n label: \"line color\",\n value: \"#000\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import {\n OnlineBT,\n Ball\n} from \"@esperanc/omohundro-balltree-construction-algorithms\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"import { vec2 } from \"@esperanc/vec2-utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"import { pointInPoly, polygonArea } from \"@esperanc/funcoes-2d-uteis\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"import { createSimplexNoise } from \"@esperanc/simplex-noise-exerciser\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"Poisson = require(\"https://bundle.run/poisson-disk-sampling@2.2.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"function makeRandFunction(randomSeed) {\n const baseRandom = d3.randomLcg(1 / (1 + randomSeed));\n return (a, b) =>\n b === undefined\n ? a === undefined\n ? baseRandom()\n : baseRandom() * a\n : baseRandom() * (b - a) + a;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"//\n// From https://github.com/sanori/queue-js\n//\nclass Queue {\n constructor() {\n this._stack1 = [];\n this._stack2 = [];\n }\n push(item) {\n this._stack1.push(item);\n }\n shift() {\n if (this._stack2.length === 0) {\n const tmp = this._stack2;\n this._stack2 = this._stack1.reverse();\n this._stack1 = tmp;\n }\n return this._stack2.pop();\n }\n get length() {\n return this._stack1.length + this._stack2.length;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"function boundingBox(pts) {\n let min = [Infinity, Infinity];\n let max = [-Infinity, -Infinity];\n for (let [x, y] of pts) {\n min[0] = Math.min(min[0], x);\n min[1] = Math.min(min[1], y);\n max[0] = Math.max(max[0], x);\n max[1] = Math.max(max[1], y);\n }\n return { min, max };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"function extremePoints(v, pts) {\n let minDot = Infinity,\n min = null;\n let maxDot = -Infinity,\n max = null;\n for (let p of pts) {\n let dot = vec2.dot(p, v);\n if (dot < minDot) [minDot, min] = [dot, p];\n if (dot > maxDot) [maxDot, max] = [dot, p];\n }\n return { min, max };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"function subdividePolygon(pts, maxEdgeSize) {\n let result = [];\n const subdivideSegment = (a, b) => {\n if (vec2.dist(a, b) > maxEdgeSize) {\n const p = vec2.lerp([], a, b, 0.5);\n subdivideSegment(a, p);\n result.push(p);\n subdivideSegment(p, b);\n }\n };\n let q = pts[pts.length - 1];\n for (let p of pts) {\n subdivideSegment(q, p);\n result.push(p);\n q = p;\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":190,"value":"function borderDistance(p, pts) {\n let a = pts[pts.length - 1];\n let d = Infinity;\n for (let b of pts) {\n d = Math.min(d, vec2.distSegment(p, a, b));\n a = b;\n }\n return d;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"function curveGenFunctions(params = simplexParams, options = {}) {\n const {\n width = 800,\n height = 600,\n sep = 100,\n curveStep = 5,\n curveLen = 500,\n seed = randomSeed,\n } = options;\n const rand = makeRandFunction(seed);\n const noise = createSimplexNoise(\n Object.assign({ random: rand }, params)\n );\n const direction = (x, y) => {\n const ang = noise(x, y) * Math.PI;\n return [Math.cos(ang) * curveStep, Math.sin(ang) * curveStep];\n };\n const sampleForwards = (x, y) => {\n const [dx, dy] = direction(x, y);\n return [x + dx, y + dy];\n };\n const sampleBackwards = (x, y) => {\n const [dx, dy] = direction(x, y);\n return [x - dx, y - dy];\n };\n const sampleLeft = (x, y) => {\n const [dx, dy] = direction(x, y);\n return [x + dy, y - dx];\n };\n const sampleRight = (x, y) => {\n const [dx, dy] = direction(x, y);\n return [x - dy, y + dx];\n };\n return { sampleForwards, sampleBackwards, sampleLeft, sampleRight };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"function colorVary(color, hvar, svar, lvar) {\n color = d3.hsl(color);\n let { h, s, l } = color;\n h = (h + hvar * 360) % 360;\n s = s + svar;\n l = l + lvar;\n return color.copy({ h, s, l }).formatRgb();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":425,"value":"d3hsluv = (await require(\"d3-hsluv\")).hsluv","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"function colorVaryLuv(color, lvar, uvar, vvar) {\n color = d3hsluv(color);\n let { l, u, v } = color;\n l = (l + lvar * 360) % 360;\n u = Math.max(0, Math.min(100, u + uvar * 100));\n v = Math.max(0, Math.min(100, v + vvar * 100));\n return color.copy({ l, u, v }).formatRgb();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"