31:Tba0,renderables = { let grid = [] let cols = Array(numCols).fill().map(() => Array(numRows).fill(0)) let colWidths = Array(numCols).fill(0) const ctx = document.createElement('canvas').getContext('2d') ctx.canvas.width = w ctx.canvas.height = h const image = await FileAttachment("IMG_8196.jpeg").image(); const ocanv = new OffscreenCanvas(w, h) const octx = ocanv.getContext('2d', { willReadFrequently: true }) octx.drawImage(image, 0, 0, w, h) octx.fillStyle = '#fff' octx.font = 'bold 400px sans-serif' octx.textAlign = 'center' octx.textBaseline = 'middle' octx.fillText(text, w / 2, h / 2, w) // read image, init grid for (let i = 0; i < numCols; i++) { const x = i * gridSize + gridSize / 2; for (let j = 0; j < numRows; j++) { const y = j * gridSize + gridSize / 2; if (octx.getImageData(x | 0, y | 0, 1, 1).data[3] > 0) { ctx.fillRect(x - size / 2, y - size / 2, size, size) grid.push(1) } else { grid.push(0) } } } ctx.clearRect(0, 0, w, h) let colWidthSum = 0 const getRenderFn = () => { let elapsed = 0 let prev = 0 return t => { elapsed = t - prev; prev = t; colWidthSum = 0; const now = Date.now(); // const dynamicVar = Date.now() * 0.0005; const dynamicVar = t * 0.0002; let maxCol = 0 let maxCell = 0 for (let i = 0; i < numCols; i++) { const nx = exp ? i * 0.5 : i / numCols const colWidth = util.pos(noise2d(nx, dynamicVar)) // * 0.001 colWidths[i] = colWidth colWidthSum += colWidth if (colWidth > maxCol) maxCol = colWidth // var: # subdivisions let colSum = 0; for (let j = 0; j < numRows; j++) { const ny = exp ? j * 0.5 : j / numRows // vars: min size, max size const value = util.pos(noise3d(nx, ny, dynamicVar)) // * 0.001 cols[i][j] = value; colSum += value } for (let j = 0; j < numRows; j++) { cols[i][j] /= colSum if (cols[i][j] > maxCell) maxCell = cols[i][j]; } } for (let i = 0; i < numCols; i++) { colWidths[i] /= colWidthSum if (colWidths[i] > maxCol) maxCol = colWidths[i] } // draw const sWidth = 1 / numCols * w const sHeight = 1 / numRows * h let colSum = 0 for (let i = 0; i < numCols; i++) { const x = colSum * w const sx = i / numCols * w const dWidth = colWidths[i] * w colSum += colWidths[i] let rowSum = 0 for (let j = 0; j < numRows; j++) { const y = rowSum * h const sy = j / numRows * h const dHeight = cols[i][j] * h ctx.drawImage(ocanv, sx, sy, sWidth, sHeight, x, y, dWidth, dHeight) rowSum += cols[i][j] } } } } return { ctx, render: getRenderFn() } }32:[{"id":"62a51e3681f65eb2b498a9e0afddfacd5f36609acb9f5d67b8e0377234347a9206ea6a613793be3f7c19408667c48f8afbc2ad2a383dcbee3cc064a611eb5fe3","href":"https://static.observableusercontent.com/files/62a51e3681f65eb2b498a9e0afddfacd5f36609acb9f5d67b8e0377234347a9206ea6a613793be3f7c19408667c48f8afbc2ad2a383dcbee3cc064a611eb5fe3","name":"IMG_8196.jpeg","type":"image/jpeg","lastModified":1715282631648.643,"size":646117}] 2f:{"title":"🌲🍄 Flashback Inducer 9000","cells":[{"id":0,"value":"# 🌲🍄 Flashback Inducer 9000","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"renderables.ctx.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"viewof exp = Inputs.button([\n ['toggle', value => value ? 0 : 1],\n], {value: 0, label: 'experience'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"text = 'hello'","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof gridSize = Inputs.range([10, 100], {value: 30, step: 5, label: 'grid cell size'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":761,"value":"{\n let frame;\n requestAnimationFrame(function animate(t) {\n renderables.render(t)\n frame = requestAnimationFrame(animate)\n })\n invalidation.then(() => cancelAnimationFrame(frame))\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"w = Math.min(1024, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"size = gridSize / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"numCols = Math.floor(w / gridSize)","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"numRows = Math.floor(h / gridSize)","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"util = {\n const rand = (max = 1) => Math.random() * max;\n\n const flip = (a, b, threshold = 0.5) => rand() < threshold ? a : b;\n \n const isNil = x => x === undefined || x === null;\n \n const sum = (arr, start = 0, end = arr.length, sum = 0) => {\n for (let i = start; i < end; i++) sum += arr[i];\n return sum;\n }\n\n // index to xy\n const ixy = (idx, width, dst = []) => (\n dst[0] = idx % width,\n dst[1] = Math.floor(idx / width),\n dst\n );\n\n const ixyj = (idx, width, dst = []) => (\n ixy(idx / 4, width, dst), \n dst[3] = idx / 4, \n dst\n );\n\n const clamp = (x, min, max) => Math.min(Math.max(x, min), max);\n\n // -1, 1 to 0, 1:\n const pos = n => (n + 1) / 2;\n \n const mix = (min, max, a) => (max - min) * a + min;\n\n return {\n rand,\n flip,\n clamp,\n mix,\n pos,\n isNil,\n sum,\n ixy,\n ixyj\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":424,"value":"noise3d = SimplexNoise.createNoise3D()","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"noise2d = SimplexNoise.createNoise2D()","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"SimplexNoise = import('https://cdn.jsdelivr.net/npm/simplex-noise@4.0.1/dist/esm/simplex-noise.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}