31:T726,shapes = { randomize; const slashWeightage = CSRandom.rangeFloor(100) / 2; return [ { weight: CSRandom.rangeFloor(100), value: { name: "circle", fn: (x, y, w, h, fill) => { const r = Math.min(w, h) / 2; return ``; } } }, { weight: CSRandom.rangeFloor(100), value: { name: "empty", fn: () => "" } }, { weight: CSRandom.rangeFloor(100), value: { name: "square", fn: (x, y, w, h, fill) => `` } }, { weight: slashWeightage, value: { name: "forwardSlash", fn: (x, y, w, h, fill) => { const t = maxSize / 30; return ``; } } }, { weight: slashWeightage, value: { name: "backwardSlash", fn: (x, y, w, h, fill) => { const t = maxSize / 30; return ``; } } } ]; }32:[] 2f:{"title":"037 Shapes on a QuadTree","cells":[{"id":0,"value":"# 037 Shapes on a QuadTree\n\nThe [QuadTree](https://en.wikipedia.org/wiki/Quadtree) is only used to generate the layout, not as a data strucutre.\n\nThe code is based on George's tutorial [Building Generative Grid Layouts With Quadtrees](https://georgefrancis.dev/writing/generative-grid-layouts-with-quadtrees/).","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof randomize = Button(\"🎲 Randomize\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"viewof numOfPoints = Inputs.range([10, 150], {\n value: 100,\n step: 1,\n label: \"Points\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"viewof gapUV = Inputs.range([0, 1], {\n value: 0.25,\n step: 0.01,\n label: \"Gap\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"viewof marginUV = Inputs.range([0, 1], {\n value: 0.333,\n step: 0.01,\n label: \"Margin\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"viewof maxQtObjects = Inputs.range([2, 10], {\n value: 10,\n step: 1,\n label: \"Max Object in QuadTree Quadrant\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"viewof maxQtLevels = Inputs.range([2, 7], {\n value: 4,\n step: 1,\n label: \"Max QuadTree Levels\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"blurp({ invalidation, href: \"https://art.saneef.com/shapes-on-a-quadtree\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":296,"value":"viewof showShapes = Toggle({ label: \"Show shapes\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"viewof showQuads = Toggle({ label: \"Show quads\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof showPoints = Toggle({ label: \"Show points\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"colors = {\n randomize;\n const palette = chromotome.getRandom();\n const bg = palette.background || \"hsl(0, 0%, 95%)\";\n const fg = palette.stroke || \"hsl(0, 0%, 5%)\";\n return {\n palette: palette.name,\n bg,\n fg,\n shapes: palette.colors.filter((c) => c != bg)\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"maxSize = Math.min(height, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"margin = (marginUV * maxSize) / 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"size = maxSize - 2 * margin","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"marginX = (width - size) / 2\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"marginY = (height - size) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"gap = (gapUV * maxSize) / 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"points = {\n randomize;\n const uFocus = CSRandom.value();\n const vFocus = CSRandom.value();\n return CSMath.linspace(numOfPoints, true).map(() => {\n return {\n u: randomBias(0, 1, uFocus, 1),\n v: randomBias(0, 1, vFocus, 1),\n w: 4 / width,\n h: 4 / height\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"uvToXY = (p, width, height) => {\n const { u, v, w, h } = p;\n const x = CSMath.lerp(0, width, u);\n const y = CSMath.lerp(0, height, v);\n const pW = CSMath.lerp(0, width, w);\n const pH = CSMath.lerp(0, height, h);\n\n return {\n ...p,\n x,\n y,\n w: pW,\n h: pH\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"drawPoints = () => {\n const pointEls = points.reduce((acc, p) => {\n const { x, y, w, h } = uvToXY(p, size, size);\n return acc + ``;\n }, \"\");\n\n return `${pointEls}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"drawQuads = () => {\n const quadEls = quads.reduce((acc, q) => {\n const { x: qU, y: qV, width: qW, height: qH } = q.bounds;\n const { x, y, w, h } = uvToXY({ u: qU, v: qV, w: qW, h: qH }, size, size);\n\n return acc + ``;\n }, \"\");\n\n return `${quadEls}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"findShapeByName = (name) => {\n return shapes.find((shape) => shape.value.name === name);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"drawShapes = () => {\n const shapeEls = quads.reduce((acc, q) => {\n const { fill, shape } = q;\n\n const { x: qU, y: qV, width: qW, height: qH } = q.bounds;\n const { x, y, w, h } = uvToXY({ u: qU, v: qV, w: qW, h: qH }, size, size);\n const halfGap = gap / 2;\n const shapeObj = findShapeByName(shape);\n\n if (shapeObj && shapeObj.value.fn) {\n const fn = shapeObj.value.fn;\n return acc + fn(x + halfGap, y + halfGap, w - gap, h - gap, fill);\n }\n\n return acc;\n }, \"\");\n return `${shapeEls}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"// Based on https://github.com/georgedoescode/generative-utils/blob/master/src/randomBias.js\nfunction randomBias(min, max, bias, influence = 0.5) {\n const base = CSRandom.range(min, max);\n const mix = CSRandom.range(0, 1) * influence;\n\n return base * (1 - mix) + bias * mix;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"quads = {\n // const maxQtObjects = 10;\n // const maxQtLevels = 4;\n const quadTree = new QuadTree(\n {\n x: 0,\n y: 0,\n width: 1,\n height: 1\n },\n maxQtObjects,\n maxQtLevels\n );\n\n points.forEach((p) => {\n const { u, v, w, h } = p;\n quadTree.insert({\n x: u,\n y: v,\n width: w,\n height: h\n });\n });\n\n return flattenNodes(quadTree).map((q) => {\n const fill = CSRandom.pick(colors.shapes);\n const shape = CSRandom.weightedSet(shapes);\n\n return { ...q, fill, shape: shape.name };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"function flattenNodes(node) {\n const individualNodes = [];\n\n (function r(node) {\n if (node.nodes.length === 0) {\n individualNodes.push(node);\n } else {\n node.nodes.forEach((n) => r(n));\n }\n })(node);\n\n return individualNodes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"import { CSUtils } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"CSRandom = CSUtils.random","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"CSMath = CSUtils.math","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"import { Button, Toggle, Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"QT = import(\"https://cdn.skypack.dev/@timohausmann/quadtree-js@1.2.4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"QuadTree = QT.default","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"chromotome = require(\"chromotome\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"import { blurp } from \"@saneef/art-saneef-com-blurb\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":557,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}