31:T485,viewof controls = combo( { containerSideLength: number({ title: "Container Length", value: 49 }), squareSL: number({ title: "Inside square length", value: 5 }), numRows: number({ title: "Number of Rows", value: 10 }), numCols: number({ title: "Number of Columns", value: 7 }), numSquares: number({ title: "Number of Squares", value: 12 }), inc: number({ title: "Increment Padding", value: 5 }), x: number({ title: "center x", value: 5 }), y: number({ title: "center y", value: 25 }), lineWidth: number({ title: "Line width", value: 2 }), lineColor: color({ value: "#3d3d3d", title: "Line Color" }), randomMinBottom: number({ title: "Random min bottom", value: 10 }), randomMinTop: number({ title: "Random min top", value: 40 }), randomMaxBottom: number({ title: "Random max bottom", value: 10 }), randomMaxTop: number({ title: "Random max top", value: 40 }), useRandomCenter: checkbox({ title: "Use randon center", options: [{ value: "toggle", label: "" }], value: "toggle" }) }, md`### Controls`, md`*Adjusts different parameters of the algorithm*` )32:T56d,ctx = { const { containerSideLength, numRows, numCols } = controls; const [height, width] = [ containerSideLength * numRows, containerSideLength * numCols ]; const ctx = DOM.context2d(width, height); for (let row = 0; row < width / containerSideLength; row++) { for (let col = 0; col < height / containerSideLength; col++) { ctx.save(); ctx.translate(containerSideLength * row, containerSideLength * col); const container = new Square( Vec(0, 0), Vec(containerSideLength, containerSideLength) ); container.draw({ ctx, strokeStyle: "white", fillStyle: "white" }); const { numSquares, inc, x, y, squareSL, lineWidth, lineColor, useRandomCenter } = controls; const center = useRandomCenter || newVersion ? randomCenter() : Vec(x, y); const halfSize = squareSL / 2; d3.range(numSquares).forEach((i) => { const padHalf = i * inc; const hs = padHalf + halfSize; const v1 = Vec(center.x - hs, center.y - hs); const v2 = Vec(center.x + hs, center.y + hs); const is = new Square(v1, v2); const newSquare = container.insert(is); newSquare.draw({ ctx, lineWidth, strokeStyle: lineColor }); }); ctx.restore(); } } return ctx; }33:T46c,class Square { constructor(start, end) { this.start = start; this.end = end; } center() { const { x, y } = this.start; return Vec(x + this.size() / 2, y + this.size() / 2); } size() { return this.end.x - this.start.x; } draw({ ctx, lineWidth = 1, strokeStyle = "black", fillStyle, drawCenter = false }) { ctx.save(); ctx.lineWidth = lineWidth; ctx.strokeStyle = strokeStyle; ctx.fillStyle = fillStyle; const { x, y } = this.start; ctx.strokeRect(x, y, this.end.x - x, this.end.y - y); if (fillStyle) ctx.fillRect(x, y, this.size(), this.size()); if (drawCenter) { ctx.fillStyle = "red"; ctx.fillRect(this.center().x, this.center().y, 3, 3); } ctx.restore(); } insert(isquare) { const p1 = Vec(isquare.start.x, isquare.start.y); const p2 = Vec(isquare.end.x, isquare.end.y); if (p1.x <= this.start.x) p1.x = this.start.x; if (p1.y <= this.start.y) p1.y = this.start.y; if (p2.x >= this.end.x) p2.x = this.end.x; if (p2.y >= this.end.y) p2.y = this.end.y; return new Square(p1, p2); } }34:[{"id":"b9679321f617637d58ea9617edc4d05635e01ba996bbc1f0b6233aa7fa35e17bb154f0a0e8daf0658463d06b098fa93ec59ba1fabfa0cd8f9b0dacd70ebf315d","href":"https://static.observableusercontent.com/files/b9679321f617637d58ea9617edc4d05635e01ba996bbc1f0b6233aa7fa35e17bb154f0a0e8daf0658463d06b098fa93ec59ba1fabfa0cd8f9b0dacd70ebf315d","name":"IMAGE 2021-09-22 10:52:27.jpg","type":"image/jpeg","lastModified":1632494700155.69,"size":156440}] 2f:{"title":"Square symmetries: 1976 ➡ 2021","cells":[{"id":117,"value":"md`# Square symmetries: 1976 ➡ 2021\n\nI saw this beautiful peace while reading [code as a creative medium](https://mitpress.mit.edu/books/code-creative-medium) and I thought it would be fun to recreate it. I think the 1976 looks better.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2802,"value":"viewof newVersion = Inputs.button(\"new piece 📸\", { label: \"\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2555,"value":"html`

${ctx.canvas}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2430,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2622,"value":"md`## Testing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2642,"value":"viewof debugControls = combo(\n {\n inc: slider({ title: md`Increment`, value: 5, min: 1, max: 50, step: 1 }),\n numSquares: slider({ title: md`Num Squares`, value: 10, min: 1, max: 50, step: 1 }),\n squareSize: slider({\n title: md`Square Size`,\n value: 100,\n min: 10,\n max: 400,\n step: 1\n })\n },\n md`### Debugging controls`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2679,"value":"viewof clear = Inputs.button(\"clear\", { label: \"clear\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2624,"value":"{\n const [height, width] = [300, 300];\n const ctx = DOM.context2d(width, height);\n\n let container;\n function drawContainer() {\n container = new Square(Vec(0, 0), Vec(width, height));\n container.draw({\n ctx,\n strokeStyle: \"white\",\n fillStyle: \"pink\"\n });\n }\n\n if (clear) drawContainer();\n drawContainer();\n\n const { inc, numSquares, squareSize } = debugControls;\n ctx.canvas.onclick = (e) => {\n const { x, y } = Vec(e.offsetX, e.offsetY);\n const halfSize = squareSize / 2;\n d3.range(numSquares).forEach((i) => {\n const padHalf = i * inc;\n const hs = padHalf + halfSize;\n const v1 = Vec(x - hs, y - hs);\n const v2 = Vec(x + hs, y + hs);\n const is = new Square(v1, v2);\n const newSquare = container.insert(is);\n newSquare.draw({ ctx, lineWidth: 2, strokeStyle: 2 });\n });\n };\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2785,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1738,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1153,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2491,"value":"function randomCenter() {\n const {\n randomMinBottom,\n randomMinTop,\n randomMaxTop,\n randomMaxBottom\n } = controls;\n const r = (x, y) => d3.randomUniform(x, y);\n const low = r(randomMinBottom, randomMinTop);\n const up = r(randomMaxBottom, randomMaxTop);\n const rv = () => [+low().toFixed(), +up().toFixed()];\n const ri = () => +d3.randomUniform(0, 1)().toFixed();\n return Vec(rv()[ri()], rv()[ri()]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"import { Vec } from \"@esperanc/2d-geometry-utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1486,"value":"import { debounce } from \"@mbostock/debouncing-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2427,"value":"import { tabbed, paged, combo } from \"@esperanc/aggregated-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2432,"value":"import { slider, checkbox, number, color, coordinates } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}