31:T4c9,shapeFunc = { return { rect: (ctx, x, y, size) => { ctx.beginPath(); ctx.lineTo(x, y); ctx.lineTo(x + size, y); ctx.lineTo(x + size, y + size); ctx.lineTo(x, y + size); ctx.closePath(); ctx.fill(); }, circle: (ctx, x, y, size) => { ctx.beginPath(); ctx.arc(x + size / 2, y + size / 2, size / 2, 0, Math.PI * 2); ctx.fill(); }, diamond: (ctx, x, y, size) => { ctx.beginPath(); ctx.moveTo(x + size / 2, y); ctx.lineTo(x, y + size / 2); ctx.lineTo(x + size / 2, y + size); ctx.lineTo(x + size, y + size / 2); ctx.closePath(); ctx.fill(); }, x: (ctx, x, y, size) => { const b = size / 2, a = b / 2; ctx.beginPath(); ctx.moveTo(x + a, y); ctx.lineTo(x, y + a); ctx.lineTo(x + a, y + b); ctx.lineTo(x, y + b + a); ctx.lineTo(x + a, y + b + b); ctx.lineTo(x + b, y + b + a); ctx.lineTo(x + a + b, y + b + b); ctx.lineTo(x + b + b, y + a + b); ctx.lineTo(x + a + b, y + b); ctx.lineTo(x + b + b, y + a); ctx.lineTo(x + a + b, y); ctx.lineTo(x + b, y + a); ctx.closePath(); ctx.fill(); } }; }32:T5ba,function fillWithSquares(cols, rows, maxSize = 0) { maxSize = maxSize || Math.min(cols, rows) - 1; const pick = probabilityPick(d3.range(1, maxSize + 1).map((n) => [n, 1])); const cells = []; const occupied = []; for (let row = 0; row < rows; row++) { occupied[row] = []; for (let col = 0; col < cols; col++) { cells.push({ col, row }); occupied[row][col] = false; } } d3.shuffle(cells); const squares = []; const fit = (size) => { for (let icell = 0; icell < cells.length; icell++) { const { row, col } = cells[icell]; if (col + size <= cols && row + size <= rows) { let ok = true; for (let nc = 0; ok && nc < size; nc++) { for (let nr = 0; ok && nr < size; nr++) { if (occupied[row + nr][col + nc]) ok = false; } } if (ok) { for (let nc = 0; ok && nc < size; nc++) { for (let nr = 0; ok && nr < size; nr++) { occupied[row + nr][col + nc] = true; } } squares.push({ row, col, size }); for (let k = cells.length - 1; k >= 0; k--) { const { col, row } = cells[k]; if (occupied[row][col]) cells.splice(k, 1); } return true; } } } return false; }; let tries = (rows * cols) ** 2; while (tries-- > 0) { const size = pick(); if (fit(size) && cells.length == 0) break; } return squares; }33:[] 2f:{"title":"Random shapes in a grid","cells":[{"id":0,"value":"# Random shapes in a grid\n\nThis is a write-down on how to generate \"decorative\" pictures using a simple geometric layout and some shaders. ","pinned":false,"hidden":false,"mode":"md"},{"id":165,"value":"
\n## Start with a regular grid","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"viewof dimensions = Inputs.form({\n rows: Inputs.range([2, 20], { label: \"rows\", value: 8, step: 1 }),\n cols: Inputs.range([2, 20], { label: \"columns\", value: 8, step: 1 })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"regularGrid = {\n const size = 600;\n const frame = 50;\n const netsize = size - frame * 2;\n const { rows, cols } = dimensions;\n const aspect = cols / rows;\n const [width, height, side] =\n aspect > 1\n ? [size, netsize / aspect + frame * 2, netsize / cols]\n : [netsize * aspect + frame * 2, size, netsize / rows];\n const canvas = DOM.canvas(width, height);\n const ctx = canvas.getContext(\"2d\");\n for (let col = 0; col < cols; col++)\n for (let row = 0; row < rows; row++)\n ctx.strokeRect(frame + col * side, frame + row * side, side, side);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"## Subdivide a regular grid into squares of different sizes\n","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"viewof randomFill = Inputs.button(\"randomize\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"squares = {\n randomFill;\n const { cols, rows } = dimensions;\n return fillWithSquares(cols, rows);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"{\n const size = 600;\n const frame = 50;\n const netsize = size - frame * 2;\n const { rows, cols } = dimensions;\n const aspect = cols / rows;\n const [width, height, side] =\n aspect > 1\n ? [size, netsize / aspect + frame * 2, netsize / cols]\n : [netsize * aspect + frame * 2, size, netsize / rows];\n const canvas = DOM.canvas(width, height);\n const ctx = canvas.getContext(\"2d\");\n\n for (let { col, row, size } of squares)\n ctx.strokeRect(\n frame + col * side,\n frame + row * side,\n size * side,\n size * side\n );\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"
\n## Write code for drawing different shapes within each square","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"{\n const canvas = DOM.canvas(600, 200);\n const ctx = canvas.getContext(\"2d\");\n let x = 20,\n y = 40,\n margin = 50,\n size = 100;\n for (let shape of Object.keys(shapeFunc)) {\n shapeFunc[shape](ctx, x, y, size);\n x += margin + size;\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"
\n## Prepare a color palette\n\n(Thanks, [@saneef!](https://observablehq.com/@saneef))","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"viewof paletteLength = Inputs.range([1, 6], {\n label: \"palette size\",\n value: 3,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"viewof randomizePalette = Inputs.button(\"randomize palette\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"{\n randomizePalette;\n const canvas = DOM.canvas(600, 200);\n const ctx = canvas.getContext(\"2d\");\n let frame = 50,\n n = paletteLength,\n margin = 20,\n w = (600 - frame * 2 - margin * (paletteLength - 1)) / paletteLength,\n h = 200 - frame * 2;\n let { background, colors } = palette;\n ctx.fillStyle = background;\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n let x = frame;\n for (let color of colors) {\n ctx.fillStyle = color;\n ctx.fillRect(x, frame, w, h);\n x += margin + w;\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"palette = {\n randomizePalette;\n return getRandomPalette({ length: paletteLength });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"
\n## Select relative probabilities of each shape","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"viewof shapesProb = {\n const form = {};\n const prob = [\n [\"none\", 0],\n [\"few\", 1],\n [\"medium\", 3],\n [\"many\", 10]\n ];\n for (let shape of Object.keys(shapeFunc)) {\n form[shape] = Inputs.radio(prob, {\n label: shape,\n value: prob[2],\n format: (d) => d[0]\n });\n }\n return Inputs.form(form);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"viewof regenerate = Inputs.button(\"regenerate\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"pattern = {\n regenerate;\n const { cols, rows } = dimensions;\n const width = 600,\n frame = 50,\n side = (width - frame * 2) / cols,\n margin = side * 0.08,\n height = side * rows + frame * 2;\n const canvas = DOM.canvas(width, height);\n const ctx = canvas.getContext(\"2d\");\n\n const { background, colors } = palette;\n const pickColor = probabilityPick(colors.map((c) => [c, 1]));\n const pickShape = probabilityPick([\n [\"rect\", shapesProb.rect[1]],\n [\"circle\", shapesProb.circle[1]],\n [\"diamond\", shapesProb.diamond[1]],\n [\"x\", shapesProb.x[1]]\n ]);\n ctx.fillStyle = background;\n ctx.fillRect(0, 0, width, height);\n for (let { row, col, size } of squares) {\n ctx.fillStyle = pickColor();\n const x = frame + col * side + margin,\n y = frame + row * side + margin,\n len = side * size - margin * 2;\n const draw = shapeFunc[pickShape()];\n draw(ctx, x, y, len);\n //ctx.strokeRect(x, y, len, len);\n }\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"
\n## Post processing\n\nThe final result can be changed using shaders. For instance, \n\n### Grain and jitter filter\n","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"viewof grainParam","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"grainResult = grainApp\n .clear()\n .uniform(\"noiseAmount\", grainParam.noiseAmount)\n .uniform(\"jitterAmount\", grainParam.jitterAmount)\n .uniform(\"noiseSeed\", grainParam.noiseSeed)\n .draw().canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"grainApp = gl2helper({\n fragmentShader: grainShader,\n canvas: DOM.canvas(pattern.width, pattern.height),\n textures: {\n tex: pattern\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"
\n### Noise-based grain and jitter filter","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"viewof noiseGrainParam","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"noiseGrainResult = noiseGrainApp\n .clear()\n .uniform(\"grainAmount\", noiseGrainParam.grainAmount)\n .uniform(\"jitterAmount\", noiseGrainParam.jitterAmount)\n .uniform(\"noiseSeed\", noiseGrainParam.noiseSeed)\n .uniform(\"grainScale\", 2 ** noiseGrainParam.grainScale)\n .uniform(\"jitterScale\", 2 ** noiseGrainParam.jitterScale)\n .draw().canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"noiseGrainApp = gl2helper({\n fragmentShader: noiseGrainShader,\n canvas: DOM.canvas(pattern.width, pattern.height),\n textures: {\n tex: pattern\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"
\n### Edge detection","pinned":false,"hidden":false,"mode":"md"},{"id":284,"value":"viewof freiChenParam = Inputs.form({\n threshold1: Inputs.range([0, 1], {\n value: 0,\n step: 0.01,\n label: \"edge threshold1\"\n }),\n threshold2: Inputs.range([0, 1], {\n value: 0.3,\n step: 0.01,\n label: \"edge threshold2\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"freiChenResult = DOM.canvas(pattern.width, pattern.height)","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"drawEdges = {\n freichenApp\n .uniform(\"threshold1\", freiChenParam.threshold1)\n .uniform(\"threshold2\", freiChenParam.threshold2)\n .draw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"freichenApp = gl2helper({\n canvas: freiChenResult,\n fragmentShader: freiChenShader,\n textures: {\n image: noiseGrainResult\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"
\n### Gaussian blur","pinned":false,"hidden":false,"mode":"md"},{"id":379,"value":"viewof blurPasses","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"blurResult = DOM.canvas(pattern.width, pattern.height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"drawBlur = {\n drawEdges;\n const { vApp, hApp } = blurApps;\n const blurInput = vApp.textureObjects[\"tex\"];\n blurInput.data(freiChenResult);\n for (let i = 0; i < blurPasses; i++) {\n if (i == 0) {\n vApp.useFbo(0).texture(\"tex\", blurInput).draw();\n } else {\n vApp\n .useFbo(0)\n .texture(\"tex\", hApp.fboObjects[0].colorAttachments[0])\n .draw();\n }\n if (i == blurPasses - 1) {\n hApp\n .useFbo(null)\n .texture(\"tex\", vApp.fboObjects[0].colorAttachments[0])\n .draw();\n } else {\n hApp\n .useFbo(0)\n .texture(\"tex\", vApp.fboObjects[0].colorAttachments[0])\n .draw();\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"blurApps = {\n let vApp = gl2helper({\n fragmentShader: verticalBlurShader,\n canvas: blurResult,\n textures: {\n tex: freiChenResult\n },\n fbos: [1]\n });\n let hApp = gl2helper({\n app: vApp.app,\n fragmentShader: horizontalBlurShader,\n fbos: [1]\n });\n return { hApp, vApp };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"
\n### Emboss","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"viewof embossParam = Inputs.form({\n ambientCoef: Inputs.range([0, 1], {\n label: \"ambient coef.\",\n step: 0.01,\n value: 0.5\n }),\n diffuseCoef: Inputs.range([0, 1], {\n label: \"diffuse coef.\",\n step: 0.01,\n value: 1\n }),\n specularCoef: Inputs.range([0, 1], {\n label: \"specular coef.\",\n step: 0.01,\n value: 1\n }),\n specularShininess: Inputs.range([1, 50], {\n label: \"spec. shininess\",\n step: 1,\n value: 10\n }),\n bumpFactor: Inputs.range([0, 1], {\n label: \"bump factor.\",\n step: 0.01,\n value: 0.5\n }),\n lightDir: vectorInput({\n label: \"light xy direction\",\n max: 1,\n step: 0.01,\n size: 80,\n value: [1, 1]\n }),\n lightHeight: Inputs.range([0, 1], {\n label: \"light altitude (z)\",\n step: 0.01,\n value: 0.5\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"embossResult = DOM.canvas(pattern.width, pattern.height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"embossDraw = {\n drawBlur;\n let lightVec = [...embossParam.lightDir, embossParam.lightHeight];\n let norm = Math.hypot(...lightVec);\n lightVec = lightVec.map((x) => x / norm);\n let embossTex = embossApp.textureObjects[\"tex\"];\n embossTex.data(noiseGrainResult);\n let embossBump = embossApp.textureObjects[\"bumpmap\"];\n embossBump.data(blurResult);\n embossApp\n .uniform(\"lightVec\", lightVec)\n .uniform(\"ambientCoef\", embossParam.ambientCoef)\n .uniform(\"diffuseCoef\", embossParam.diffuseCoef)\n .uniform(\"specularCoef\", embossParam.specularCoef)\n .uniform(\"specularShininess\", embossParam.specularShininess)\n .uniform(\"bumpFactor\", embossParam.bumpFactor)\n .draw();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"embossApp = gl2helper({\n canvas: embossResult,\n fragmentShader: illumShader,\n textures: {\n tex: noiseGrainResult,\n bumpmap: blurResult\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"
\n## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"// Given an array of pairs [value,prob], where prob is a natural number,\n// returns a function that returns a random value respecting\n// the relative probability\n//\nfunction probabilityPick(pairs, rand = Math.random) {\n const table = [];\n for (let [v, p] of pairs) {\n for (let i = 0; i < p; i++) table.push(v);\n }\n return () => {\n const i = ~~(rand() * table.length);\n return table[i];\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"import { getRandomPalette } from \"@saneef/generate-palette\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"import {\n gl2helper,\n grainShader,\n noiseGrainShader,\n illumShader,\n horizontalBlurShader,\n verticalBlurShader,\n freiChenShader,\n vectorInput,\n shaderShow,\n viewof grainParam,\n viewof noiseGrainParam,\n viewof blurPasses,\n viewof illumParam\n} from \"@esperanc/webgl2-image-processing\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}