model = {
const { line, group } = SVG;
const attrs = (sw, sc) => ({
fill: "none",
stroke: sc,
"stroke-width": sw,
"stroke-linecap": "round"
});
const lines = ({ positions, edges }, sw, sc) => {
const lines = edges.map(([id1, id2]) =>
line(positions.get(id1), positions.get(id2))
);
return group([0, 0], lines, attrs(sw, sc));
};
const streets = network(10, 1, 0.9, [0, 0, 0, 1, 2, 3, 4]);
const canals = network(10, 1, 0.5, [0, 0, 2, 3, 4]);
yield { streets, canals };
const elems = [lines(streets, 0.2, "#aaa"), lines(canals, 0.1, "#55f")];
root.firstChild.replaceWith(group([0, 0], elems));
}
model3d = {
const { primitives: P, extrusions: E, transforms: T, booleans: B } = jscad;
const { streets, canals } = model;
const { min, max } = Math;
const block = ([x, y], [dx, dy], [h1, h2]) =>
P.cuboid({ size: [dx, dy, h2 - h1], center: [x, y, (h1 + h2) / 2] });
const wall = ([x1, y1], [x2, y2], width, [h1, h2]) => {
const [dx, dy] = [max(x1, x2) - min(x1, x2), max(y1, y2) - min(y1, y2)];
const center = [(x1 + x2) / 2, (y1 + y2) / 2, (h1 + h2) / 2];
return P.cuboid({ size: [dx + width, dy + width, h2 - h1], center });
};
const streets_ = B.union(
streets.edges.map(([id1, id2]) =>
wall(
streets.positions.get(id1),
streets.positions.get(id2),
0.3,
[0, 0.6]
)
)
);
const canals_ = B.union(
canals.edges.map(([id1, id2]) =>
wall(
canals.positions.get(id1),
canals.positions.get(id2),
0.2,
[-0.2, 0.1]
)
)
);
return B.subtract(block([0, 0], [20, 20], [-0.2, 0.1]), streets_, canals_);
/*let [xmin, xmax] = [+Infinity, -Infinity];
let [ymin, ymax] = [+Infinity, -Infinity];
return B.union(
model.cells.flatMap((cell) => {
const [x, y] = cell.coords;
const shapes = [...cell.exits].map((path) => {
const { cell1, cell2 } = path;
return wall(cell1.coords, cell2.coords, 0.2, [0, 0.5]);
});
const { type, level } = deco.cells.get(cell);
if (type == "room") {
shapes.push(
B.subtract(
block([x, y], [1.1, 1.1], [0, 1]),
B.union(
block([x, y], [0.9, 0.9], [0.5, 1]),
...[...cell.exits].map((path) => {
const { cell1, cell2 } = path;
const open = deco.paths.get(path) == "open";
return wall(cell1.coords, cell2.coords, open ? 0.9 : 0.2, [
0.5,
open ? 1 : 0.75
]);
})
)
)
);
}
return shapes;
})
);*/
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
