30:T47c,sketch = svg``31: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` `; }); }32:[] 2e:{"title":"065 144 Trapeziums","cells":[{"id":0,"value":"# 065 144 Trapeziums\n","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":41,"value":"viewof randomize = seedButton(\"🎲 Randomize\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":138,"value":"viewof gapUV = Inputs.range([0, 1], { label: \"Gap\", step: 1 / 16 })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":362,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"viewof debug = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"squares = 144","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"deformityRange = math.linspace(16, true)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":256,"value":"strokeWidth = 1.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"function computeGap(cellSize, gapUV) {\n return math.lerp(0, cellSize / 1.5, gapUV);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":227,"value":"unitSquare = [\n [0, 0],\n [1, 0],\n [1, 1],\n [0, 1]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":100,"value":"rows = Math.sqrt(squares)","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"aspectRatio = 1","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":4,"value":"palette = ({\n bg: \"hsl(72, 14%, 93%)\",\n fg: \"hsl(7, 9%, 19%)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"rnd = {\n CSRandom.setSeed(randomize);\n return CSRandom;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"svg = htl.svg","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"import { CSRandom, CSMath as math } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"import { seedButton } from \"@saneef/seed-button\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"import { getNotebookUrlWithParams, params } from \"@saneef/notebook-url\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}