2c:null 2d:["$","title",null,{"children":"065 144 Trapeziums | Saneef H. Ansari | Observable"}] 32:T47c,sketch = svg``33:T403,function drawTrapezoids({ dimensions, midPoints, trapezoids, gapUV, stroke, strokeWidth }) { const { marginX, marginY, size, width, height } = dimensions; const cellSize = size / rows; const gap = computeGap(cellSize, gapUV); const s = cellSize - gap; const line = d3.line().curve(d3.curveLinearClosed); return midPoints.map(([u, v], i) => { const cx = math.lerp( marginX + gap / 2 + s / 2, width - marginX - gap / 2 - s / 2, u ); const cy = math.lerp( marginY + gap / 2 + s / 2, height - marginY - gap / 2 - s / 2, v ); const trapezoid = trapezoids[i]; const polygon = trapezoid.map(([u, v]) => [ math.lerp(-s / 2, s / 2, u), math.lerp(-s / 2, s / 2, v) ]); return htl.svg` `; }); }34:[] 30:{"id":"d8c4f156b15faf24","slug":"065-144-trapeziums","title":"065 144 Trapeziums","thumbnail":"6591995d6ec73376bb7919c93f7090a79eda0f29faa239eef1fad8953850e0a4","access_level":"public","create_time":"$D2023-10-22T23:00:26.674Z","update_time":"$D2023-11-08T10:06:49.569Z","view_time":null,"first_public_time":"$D2023-11-08T04:37:36.081Z","fork":{"id":"04de6357c20e543d","slug":"template-svg-sketch","title":"Template / SVG Sketch","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"stars":4,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024"},"version":435,"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}],"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,"subscribed":null,"forks":1,"collection":{"id":"1134e6403a7e016d","slug":"re-plicas-mixes","title":"re(plicas + mixes)","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"type":"notebook","body":{"title":"065 144 Trapeziums","cells":[{"id":0,"value":"# 065 144 Trapeziums\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"viewof deformity = Scrubber(deformityRange, {\n delay: 500,\n format: (d, i) => i + 1,\n alternate: true\n})\n// viewof deformity = Inputs.range([0, 1], {\n// label: \"Deformity\",\n// step: 1 / 16,\n// value: 1 / 4\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof randomize = seedButton(\"🎲 Randomize\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"viewof randomness = Inputs.range([0, 1], {\n label: \"Randomness\",\n step: 1 / 32,\n value: 3 / 4\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"viewof gapUV = Inputs.range([0, 1], { label: \"Gap\", step: 1 / 16 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof marginUV = Inputs.range([0, 1], {\n label: \"Margin\",\n step: 1 / 16,\n value: 3 / 4\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"## Notes\n\n\nI’m trying to recreate a computer graphic series by Vera Molnar titled, [144 Trapèzes](https://digitalartmuseum.org/molnar/computergraphics6070s.html).\n\nThe graphic is using SVG. The grains are added using [SVG Filters](http://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter).\n_The reproduction of SVG filters across browsers is inconsistent._\nYou can use Firefox or Chrome to see them as close as I made them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":362,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"viewof debug = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"squares = 144","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"deformityRange = math.linspace(16, true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`[Link to this variation](${getNotebookUrlWithParams({\n seed: randomize\n})})
You can get back to this particular generated graphic using this link.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"strokeWidth = 1.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"function computeGap(cellSize, gapUV) {\n return math.lerp(0, cellSize / 1.5, gapUV);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"function drawDebug({ dimensions, midPoints, rows, gapUV, debug } = {}) {\n if (!debug) return \"\";\n const { marginX, marginY, size, width, height } = dimensions;\n const cellSize = size / rows;\n const gap = computeGap(cellSize, gapUV);\n const s = cellSize - gap;\n\n return midPoints.map(([u, v]) => {\n const cx = math.lerp(\n marginX + gap / 2 + s / 2,\n width - marginX - gap / 2 - s / 2,\n u\n );\n const cy = math.lerp(\n marginY + gap / 2 + s / 2,\n height - marginY - gap / 2 - s / 2,\n v\n );\n const x = cx - s / 2;\n const y = cy - s / 2;\n return svg``;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"midPoints = math\n .linspace(rows, true)\n .flatMap((u) => math.linspace(rows, true).map((v) => [u, v]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"unitSquare = [\n [0, 0],\n [1, 0],\n [1, 1],\n [0, 1]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"trapezoids = {\n randomize;\n const uAmplitude = math.lerp(0, 3, deformity);\n const uFrequency = math.lerp(1 / 100, 0.5, randomness);\n\n const vDeformity = math.clamp01(math.inverseLerp(0.5, 1, deformity));\n const vAmplitude = math.lerp(0, 0.2, vDeformity);\n const vFrequency = math.lerp(1 / 100, 0.5, randomness);\n\n return math.linspace(rows, true).flatMap((_, j) =>\n math.linspace(rows, true).map((_, i) => {\n return unitSquare.map(([u, v], k) => {\n const nu = rnd.noise3D(i, j, k * 1000, uFrequency, uAmplitude);\n const nv = rnd.noise3D(i, j, k * 20000, vFrequency, vAmplitude);\n return [u + nu, v + nv];\n });\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"rows = Math.sqrt(squares)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"aspectRatio = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"dimensions = {\n const w = Math.max(480, width);\n const h = Math.floor(width / aspectRatio);\n const maxGridSize = Math.min(w, h);\n const margin = math.lerp(0, maxGridSize / 4, marginUV);\n const gridSize = maxGridSize - 2 * margin;\n const marginX = (w - gridSize) / 2;\n const marginY = (h - gridSize) / 2;\n\n return {\n aspectRatio,\n width: w,\n height: h,\n marginX,\n marginY,\n size: gridSize\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"function roundToDecimal(num, decimals = 3) {\n const multiplier = Math.pow(10, decimals);\n return Math.round(num * multiplier) / multiplier;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"palette = ({\n bg: \"hsl(72, 14%, 93%)\",\n fg: \"hsl(7, 9%, 19%)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"rnd = {\n CSRandom.setSeed(randomize);\n return CSRandom;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"svg = htl.svg","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"import { CSRandom, CSMath as math } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import { seedButton } from \"@saneef/seed-button\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"import { getNotebookUrlWithParams, params } from \"@saneef/notebook-url\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"