28:null 29:["$","title",null,{"children":"SVG procedural generation pipeline | Philippe Deschaseaux | Observable"}] 2e:T1014,model2geom = (model) => { const { min, max } = Math; const subzones = []; const P = pt; const L = ln; const A = (...values) => values.filter((value) => value); for (const [i, j, h, hw, he, hs, hn, hsw, hse, hnw, hne] of model) { if (h > 0) { const D = 0.5; const origin = [i + D, j + D, 0]; const elements = []; const SW = [-D, -D]; const SE = [D, -D]; const NE = [D, D]; const NW = [-D, D]; const [pSW, pSE, pNE, pNW] = [SW, SE, NE, NW].map((dir) => pt(...dir, h)); const sS = ln(pSW, pSE); const sE = ln(pSE, pNE); const sN = ln(pNE, pNW); const sW = ln(pNW, pSW); // top of building /*const topElements = [] if (h <= hn) { topElements.push() }*/ //if (h > hn && h > he && h > hs && h > hw) { const roofNodes = []; const roofSide = (dx, dy, h1, h2, h3) => { const [p1, p2] = [P(dy, -dx, 0), P(-dy, dx, 0)]; const [t1, t2] = [P(0, 0, 0.4), P(-dx, -dy, 0.4)]; const elements = []; if (h2 >= h) { elements.push( facet( [p1, t1, t2], A(h2 > h && [p1, t1], [t1, t2], h1 >= h && [t2, p1]) ), facet( [p2, t2, t1], A(h3 >= h && [p2, t2], [t2, t1], h2 > h && [t1, p2]) ) ); } else elements.push( facet( [p1, p2, t2], A([p1, p2], h > h3 && [p2, t2], h > h1 && [t2, p1]) ) ); return { origin: P(dx, dy, 0), elements }; }; roofNodes.push(roofSide(-D, 0, hn, hw, hs)); roofNodes.push(roofSide(0, -D, hw, hs, he)); roofNodes.push(roofSide(D, 0, hs, he, hn)); roofNodes.push(roofSide(0, D, he, hn, hw)); /*} else { const topSegments = []; if (h != hs) topSegments.push(sS); if (h != he) topSegments.push(sE); if (h != hn) topSegments.push(sN); if (h != hw) topSegments.push(sW); elements.push(facet([pSW, pSE, pNE, pNW], topSegments)); }*/ // side walls const corner = (ci, cj, h1, h2, hd) => { const vert = (h1, h2) => ln(pt(ci, cj, h1), pt(ci, cj, h2)); const segments = []; if (h > h1 && h > h2) { const [hmin, hmax] = [min(h1, h2), max(h1, h2)]; segments.push(vert(h, hmax)); if (hd > hmin && hmin != hmax) segments.push(vert(min(hd, hmax), hmin)); return segments; } else if (h < h1 && h < h2) { if (h > hd) segments.push(vert(h, hd)); } else { const hmin = min(h1, h2); if (hd > hmin) segments.push(vert(min(hd, h), hmin)); } return segments; }; const ssw = corner(...SW, hw, hs, hsw); const sse = corner(...SE, hs, he, hse); const sne = corner(...NE, he, hn, hne); const snw = corner(...NW, hn, hw, hnw); if (h > hw) { const quad = [pSW, pNW, pt(...NW, hw), pt(...SW, hw)]; const base = hw == 0 ? floor(SW, NW, 0, R(0.25)) : []; elements.push(facet(quad, [sW, ...snw, ...ssw, ...base])); } if (h > he) { const quad = [pNE, pSE, pt(...SE, he), pt(...NE, he)]; const base = he == 0 ? floor(NE, SE, 0, R(0.25)) : []; elements.push(facet(quad, [sE, ...sne, ...sse, ...base])); } if (h > hs) { const quad = [pSE, pSW, pt(...SW, hs), pt(...SE, hs)]; const base = hs == 0 ? floor(SE, SW, 0, R(0.25)) : []; elements.push(facet(quad, [sS, ...ssw, ...sse, ...base])); } if (h > hn) { const quad = [pNW, pNE, pt(...NE, hn), pt(...NW, hn)]; const base = hn == 0 ? floor(NW, NE, 0, R(0.25)) : []; elements.push(facet(quad, [sN, ...snw, ...sne, ...base])); } subzones.push({ origin, subzones: [ { origin: [0, 0, 0], elements }, { origin: [0, 0, h], subzones: roofNodes } ] }); //subzones.push({ origin, elements }); } } return { origin: [0, 0, 0], subzones }; }2f:T59b,geom2cmds = function* (geom, observer) { const clippedSegments = SegmentsClipper(1e-7); const rec = function* (zone, [dx, dy, dz]) { const [ox, oy, oz] = zone.origin || [0, 0, 0]; const [ndx, ndy, ndz] = [dx + ox, dy + oy, dz + oz]; if (zone.subzones) for (const subzone of geomIterator(zone.subzones, observer)) yield* rec(subzone, [ndx, ndy, ndz]); else { const zoneSegments = []; const abs = ([x, y, z]) => [ndx + x, ndy + y, ndz + z]; // for each element in the zone for (const { vertices, segments = [] } of zone.elements) { // get a 2D projection of the element const proj = observer.projectPts(vertices.map(abs)); // if element is visible from the observer if (proj) { // clip the set of segments with the projected shape clippedSegments.clipWithPolygon(proj); // for each associated segment for (const segment of segments) { // get a 2D projection of the segment const sproj = observer.projectPts(segment.map(abs)); // add 2D segment to the local list if (sproj) zoneSegments.push(sproj); } } } // add all local segments to global list for (const segment of zoneSegments) clippedSegments.add(segment); // yield current set of segments yield clippedSegments; } }; yield* rec(geom, [0, 0, 0]); }30:T581,OrbitalObserver = (radius, theta, phi, aov) => { const [cy, sy] = [Math.cos(theta), Math.sin(theta)]; const [cp, sp] = [Math.cos(phi), Math.sin(phi)]; const [x, y, z] = [radius * cp * cy, radius * cp * sy, radius * sp]; const project = ([x, y, z]) => { const [xy, yy, zy] = [x * cy + y * sy, -x * sy + y * cy, z]; const [xp, yp, zp] = [xy * cp + zy * sp, yy, -xy * sp + zy * cp]; if (radius <= xp) return; // point not visible const f = (radius - xp) * aov; // aov = tangent of half-angle of vision return [yp / f, zp / f]; }; const distance = ([i, j, k]) => Math.hypot(i - x, j - y, k - z); const visible = ([x1, y1, z1], [x2, y2, z2], [x3, y3, z3]) => { const [ux, uy, uz] = [x2 - x1, y2 - y1, z2 - z1]; const [vx, vy, vz] = [x3 - x1, y3 - y1, z3 - z1]; const [cx, cy, cz] = [ uy * vz - uz * vy, uz * vx - ux * vz, ux * vy - uy * vx ]; return (x1 - x) * cx + (y1 - y) * cy + (z1 - z) * cz < 0; }; return { position: [x, y, z], distance, project, projectPts: (pts) => { const proj = []; if (pts.length > 2) { if (!visible(pts[0], pts[1], pts[2])) return; } for (const pt of pts) { const ppt = project(pt); if (!ppt) return; proj.push(ppt); } return proj; }, orderPts: (pts) => pts.sort((p1, p2) => distance(x, p1) - distance(x, p2)) }; }31:T82a,SegmentsClipper = (EPSILON) => { const segments = new Set(); const intersectLineAndSegment = ([ax, bx], [ay, by], [x1, y1], [x2, y2]) => { const err = (t) => Math.abs(t) < EPSILON ? 0 : Math.abs(1 - t) < EPSILON ? 1 : t; const dx = x2 - x1; const dy = y2 - y1; const det = ay * dx - ax * dy; if (det == 0) return; // segment and line are parallel const ts = err((ax * (y1 - by) - ay * (x1 - bx)) / det); if (ts < 0 || ts > 1) return; // intersection outside of segment boundaries return err(ax ? (x1 - bx + ts * dx) / ax : (y1 - by + ts * dy) / ay); }; const intersectLineAndConvexQuad = ([ax, bx], [ay, by], vertices) => { const [pt1, pt2, pt3, pt4] = vertices; const result = new Set(); for (const [pt1, pt2] of succPairs(vertices.values())) { const t = intersectLineAndSegment([ax, bx], [ay, by], pt1, pt2); if (t != undefined) result.add(t); if (result.size == 2) break; } return [...result]; }; return { add: ([p1, p2]) => { // segment could be a point: prevent or add specific logic segments.add([p1, p2]); }, clipWithPolygon: (polygon) => { const newSegments = new Set(); for (const segment of segments) { const [x1, y1] = segment[0]; const dx = segment[1][0] - x1; const dy = segment[1][1] - y1; const result = intersectLineAndConvexQuad([dx, x1], [dy, y1], polygon); const pt = (t) => [x1 + t * dx, y1 + t * dy]; const seg = (t1, t2) => [pt(t1), pt(t2)]; if (result.length < 2) continue; const [t1, t2] = [Math.min(...result), Math.max(...result)]; if (t2 <= 0 || t1 >= 1) continue; segments.delete(segment); if (t1 > 0 && t2 >= 1) newSegments.add(seg(0, t1)); else if (t1 <= 0 && t2 < 1) newSegments.add(seg(t2, 1)); else if (t1 > 0 && t2 < 1) { newSegments.add(seg(0, t1)); newSegments.add(seg(t2, 1)); } } for (const segment of newSegments) segments.add(segment); }, toArray: () => [...segments] }; }32:[] 2c:{"id":"7ceb13b1c3e58a37","slug":null,"title":"SVG procedural generation pipeline","thumbnail":"25490f86932916bea3d39015809abb911684941c0a6aed43914ccb7b5d04edf2","access_level":"public","create_time":"$D2023-04-01T13:47:16.998Z","update_time":"$D2026-07-09T20:58:19.668Z","view_time":null,"first_public_time":"$D2023-04-01T13:47:16.998Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cf2a83be2759e071","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":"starter_2024"},"version":1574,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null}],"members":[{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"43e6ecff4165448a","slug":"pen-plotter","title":"Pen plotter","owner":{"id":"cf2a83be2759e071","login":"ehouais","name":"Philippe Deschaseaux"}},"type":"notebook","body":{"title":"SVG procedural generation pipeline","cells":[{"id":0,"value":"# SVG procedural generation pipeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1311,"value":"svgDoc = dot`digraph pipeline { rankdir = \"LR\"\nnode [ fontname = \"Arial\" fontsize = 10 shape = \"record\" ]\nedge [ fontname = \"Arial\" fontsize = 10 ]\n\n \"procedural\\ngeneration\" -> \"world model\" -> model2geom -> \"BSP tree\"\n \"procedural\\ngeneration\" [shape = \"oval\"]\n model2geom [shape = \"oval\"]\n \"BSP tree\" -> geom2draw2D -> \"2D\\nprimitives\"\n geom2draw2D [shape = \"oval\"]\n \"2D\\nprimitives\" -> draw2D2SVG -> \"SVG source\"\n draw2D2SVG [shape = \"oval\"]\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1338,"value":"classDiagram`\n[BSPNode|center: point3D]^-[Partition]\n[Partition]++-*>[BSPNode]\n[BSPNode|center: point3D]^-[Leaf]\n[Leaf]-*>[ClippingPolygon]\n[Leaf]-*>[Path3D]\n[Leaf]-*>[BillboardShape]\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":312,"value":"{\n const { dist, yaw, pitch, aov } = params;\n const observer = OrbitalObserver(dist * size, yaw, pitch, aov);\n const plotter = Plotter([600, 400], [-100, -100, 200, 200]);\n\n for (const segments of oneEvery(geom2cmds(geom, observer), 40)) {\n yield plotter.plot(segments.toArray());\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":120,"value":"viewof params = Inputs.form({\n dist: Inputs.range([0.001, 10], {\n step: 0.001,\n label: \"Distance\",\n value: 1\n }),\n yaw: Inputs.range([-3.2, 3.2], {\n step: 0.01,\n label: \"Yaw\",\n value: 1.36\n }),\n pitch: Inputs.range([0, 1.2], {\n step: 0.01,\n label: \"Pitch\",\n value: 0.58\n }),\n aov: Inputs.range([0.1, 2], {\n step: 0.01,\n label: \"Angle of view\",\n value: 0.5\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"size = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1034,"value":"heightmapModel = function* (N, fn) {\n const N2 = N / 2;\n const H = [];\n const h = (i, j) => (i < 0 || i >= N || j < 0 || j >= N ? 0 : H[i][j]);\n const cell = (i, j) => [\n i - N2,\n j - N2,\n h(i, j),\n h(i - 1, j),\n h(i + 1, j),\n h(i, j - 1),\n h(i, j + 1),\n h(i - 1, j - 1),\n h(i + 1, j - 1),\n h(i - 1, j + 1),\n h(i + 1, j + 1)\n ];\n for (let i = 0; i < N; i++) {\n H[i] = [];\n for (let j = 0; j < N; j++) H[i][j] = fn(i, j, N);\n }\n for (let i = 0; i < N; i++) {\n for (let j = 0; j < N; j++) yield cell(i, j);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"model = {\n const randHeight = () => [1, 1.75, 1.75, 2.5][Math.floor(4 * Math.random())];\n return [\n ...heightmapModel(size, (i, j, N) => {\n //const dist = Math.hypot(i - N / 2, j - N / 2);\n //const exp = Math.exp((-dist * dist) / (2 * N));\n const [si, sj] = [(i + 1) % 4, (j + 1) % 4];\n const [ci, cj] = [(i - 1) % 4, (j - 1) % 4];\n const street = si == 0 || sj == 0 || (ci == 0 && cj == 0);\n const h = street ? 0 : randHeight();\n //return Math.floor((10 * exp + 1.5 * Math.random()) * 4) / 4;\n return h;\n })\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1234,"value":"pt = (x, y, z) => [x, y, z]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1239,"value":"ln = (p1, p2) => [p1, p2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1265,"value":"facet = (vertices, segments) => ({ vertices, segments })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1362,"value":"floor = ([x1, y1], [x2, y2], h, door) => {\n if (!door) return [ln(pt(x1, y1, h), pt(x2, y2, h))];\n const [dx, dy] = [(x2 - x1) / 7, (y2 - y1) / 7];\n return [\n ln(pt(x1, y1, h), pt(x1 + 3 * dx, y1 + 3 * dy, h)),\n ln(pt(x1 + 3 * dx, y1 + 3 * dy, h), pt(x1 + 3 * dx, y1 + 3 * dy, h + 0.4)),\n ln(\n pt(x1 + 3 * dx, y1 + 3 * dy, h + 0.4),\n pt(x1 + 4 * dx, y1 + 4 * dy, h + 0.4)\n ),\n ln(pt(x1 + 4 * dx, y1 + 4 * dy, h + 0.4), pt(x1 + 4 * dx, y1 + 4 * dy, h)),\n ln(pt(x1 + 4 * dx, y1 + 4 * dy, h), pt(x2, y2, h))\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1563,"value":"```\nroot : zone\nzone : { origin: pt3D, subzones: [zone, ...] }\n | { origin: pt3D, elements: [facet, ...] }\nfacet : { vertices: [vertice...], segments: [segment, ...], normal } // opaque if \"normal\" present\nvertice: pt3D\nsegment: [vertice, vertice]\npt3D : [float, float, float]\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1030,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1065,"value":"geom = model2geom(model)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1053,"value":"geomIterator = function* (zones, observer) {\n const dist = observer.distance;\n const sortList = [];\n for (const zone of zones) {\n sortList.push({ center: zone.origin, zone });\n }\n sortList.sort((z1, z2) => dist(z2.center) - dist(z1.center));\n for (const { zone } of sortList) yield zone;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1274,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1293,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1295,"value":"# Backlog\n* hatching\n* shadows\n* billboard-type paths (always facing the observer) for people, trees, ...\n* post-generation optimizations: small segments, segments ordering, ...\n* level of detail depending on distance to observer\n* mouse/touch orbital control\n* retrofit to turtletoy\n* use iterator utilities library\n* fix remaining occlusion glitch\n* model ideas:\n * labyrinth\n * citadel\n * Hilbert Street\n * hanging gardens of Babylon\n * Moria","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":101,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1408,"value":"R = (proba) => Math.random() < proba","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1283,"value":"oneEvery = function* (iter, nb) {\n let counter = 0;\n let last;\n while (true) {\n const { value, done } = iter.next();\n if (!done && counter++ % nb == 0) yield value;\n if (done) break;\n last = value;\n }\n yield last;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":939,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":952,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1016,"value":"Plotter = (size, vb) => {\n return {\n plot: (segments) => {\n const plot = Plot();\n let pos = [0, 0];\n const vec = ([x1, y1], [x2, y2]) => [x2 - x1, y1 - y2];\n segments.forEach(([p1, p2]) => {\n plot.move(...vec(pos, p1));\n plot.draw(...vec(p1, (pos = p2)));\n });\n return viewer([width, 500], true).view(plot, { \"stroke-width\": 0.01 });\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1194,"value":"succPairs = function* (arr) {\n let first = arr.next().value;\n let prev = first;\n for (const value of arr) yield [prev, (prev = value)];\n yield [prev, first];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1332,"value":"import { classDiagram } from \"@ehouais/uml-class-diagrams-generation\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1549,"value":"import { Plot, viewer } from \"@ehouais/pivot-format-for-plotter-experiments\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2d:"$2c:body"