3f:null 40:["$","title",null,{"children":"037 Shapes on a QuadTree | Saneef H. Ansari | Observable"}] 46: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 ``; } } } ]; }47:[] 44:{"id":"4b1837746f6a57db","slug":"037-shapes-on-a-quadtree","title":"037 Shapes on a QuadTree","thumbnail":"635fdcf24771e5b680752fc12ac7ff261c8346a04fd0432babfc708f83b6232e","access_level":"public","create_time":"$D2021-06-25T16:51:20.268Z","update_time":"$D2023-10-22T10:30:15.205Z","view_time":null,"first_public_time":"$D2021-06-26T13:14:39.140Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024","bio":"Consultant Designer & Developer","following":false},"version":568,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"bio":"Consultant Designer & Developer","following":false}],"members":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"1134e6403a7e016d","slug":"re-plicas-mixes","title":"re(plicas + mixes)","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"viewof randomize = Button(\"🎲 Randomize\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"blurp({ invalidation, href: \"https://art.saneef.com/shapes-on-a-quadtree\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"viewof showShapes = Toggle({ label: \"Show shapes\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"viewof showQuads = Toggle({ label: \"Show quads\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"viewof showPoints = Toggle({ label: \"Show points\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"maxSize = Math.min(height, width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"margin = (marginUV * maxSize) / 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"size = maxSize - 2 * margin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"marginX = (width - size) / 2\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"marginY = (height - size) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"gap = (gapUV * maxSize) / 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"findShapeByName = (name) => {\n return shapes.find((shape) => shape.value.name === name);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import { CSUtils } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"CSRandom = CSUtils.random","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"CSMath = CSUtils.math","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"import { Button, Toggle, Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"QT = import(\"https://cdn.skypack.dev/@timohausmann/quadtree-js@1.2.4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"QuadTree = QT.default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"chromotome = require(\"chromotome\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"import { blurp } from \"@saneef/art-saneef-com-blurb\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":557,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"