30:T995,md`Here are some functions that create interactive SVG grids that can serve as input cells for arrays whose elements may be chosen from 0 to some integer \`numStates-1\`: \`\`\`js import {grid, hexGrid} from '@bryangingechen/grid-inputs' \`\`\` Each of the two functions takes a config object with the following (optional) keys: - \`numStates:2\`, the number of possible states that each element of the array can be in - \`init\`, if present, the initial 2D array. The entries must be between 0 and \`numStates\`. - \`nx\`, the number of boxes in the x-direction; must be equal to the number of columns of \`init\` if both are present. If \`init\` is present and \`nx\` is not, then \`nx\` is set to the number of columns of \`init\`. Otherwise, \`nx\` is set to \`ny\` if present, and 5 otherwise. - \`ny\`, the number of boxes in the y-direction; must be equal to the number of rows of \`init\` if both are present. If \`init\` is present and \`ny\` is not, then \`ny\` is set to the number of rows of \`init\`. Otherwise \`ny\` is set to \`nx\` if present, and 5 otherwise. - \`size:15\`, the size of each box in pixels - \`margin:2\`, half the space between boxes in pixels - \`colorArray\`, an array of colors to fill each state with. By default, the array of colors are white for 0, black for 1 and then the 12 entries of [\`d3.schemeSet3\`](https://github.com/d3/d3-scale-chromatic#schemeSet3) repeat. - \`outline:'#000'\`, color of the outline The config object for \`hexGrid\` also takes a string \`shape\` which can be equal to \`'parallelogram'\` (default), \`'rectangle'\`, or \`'hexagon'\`. The first two choices behave similarly, except that the array is displayed differently (see the examples below). However, if \`shape\` is \`'hexagon'\`, there are more restrictions: - First, \`nx\` and \`ny\` become the diameter of the resulting hexagon. - If \`init\` is present, it must be a square array. - Then, if \`nx\` and/or \`ny\` are not defined, they are read off from the dimensions of \`init\`. - If they are defined, they are checked against the dimensions of \`init\` for consistency. - Otherwise, if \`init\` is not present: - If both \`nx\` and \`ny\` are present they must be equal to each other. - \`nx\` and \`ny\` are set equal if one is present but not both. - If neither \`nx\` nor \`ny\` are present, they are both set to 5. - In any case, the resulting \`nx\` and \`ny\` must be odd and greater than 3. `31:T44f,{ const div = html` `; const resetButton = div.querySelector('#resetButton'); resetButton.onclick = () => viewof testHex.dispatchEvent( new CustomEvent('inputArray')); const onesButton = div.querySelector('#onesButton'); onesButton.onclick = () => viewof testHex.dispatchEvent( new CustomEvent('inputArray', {detail:[ [1,1,1,1,1], [1,1,1,1,1], [1,1,1,1,1], [1,1,1,1,1], [1,1,1,1,1] ]})); const invalidButton = div.querySelector('#invalidButton'); invalidButton.onclick = () => viewof testHex.dispatchEvent( new CustomEvent('inputArray', {detail:[ [1,1,1,1,1], [1,1,1,1,1], [1,1,1,1,1], [1,1,1,1,1], [1,1,1,1] ]})); return div; }32:Tbd3,function grid (config) { // defaults config = Object.assign({size:15, numStates:2, margin:2, outline:'#000'}, config); let {nx, ny, size, numStates, init, margin, colorArray, outline} = config; // validate init: this is horrible... if (init !== undefined) { if (init.some(d => d.length !== init[0].length) || init.some(d => d.some(v => v<0 || v >= numStates || v != Math.round(v)))) throw new Error(`init should be undefined or a rectangular matrix with integer entries between 0 and ${numStates-1}`); if (nx === undefined && ny !== undefined) { if (ny === init.length) nx = init[0].length; else throw new Error(`init length:${init.length} not equal to ny:${ny}`); } else if (ny === undefined && nx !== undefined) { if (nx === init[0].length) ny = init.length; else throw new Error(`init inner length:${init[0].length} not equal to nx:${nx}`); } else if (nx === undefined && ny === undefined) { ny = init.length; nx = init[0].length; } } else { if (nx === undefined && ny !== undefined) nx = ny; else if (ny === undefined && nx !== undefined) ny = nx; else if (nx === undefined && ny === undefined) ny = nx = 5; } if (colorArray === undefined) colorArray = Array.from({length:numStates}, (d,i) => i === 0 ? '#FFF' : (i === 1 ? '#000' : d3.schemeSet3[(i-2) % 12])); // Array of values, start out all 0 if init not defined const state = init ? init.map(d => d.slice()) : Array.from({length:ny}, d => Array(nx).fill(0)); const svg = d3.select(DOM.svg(nx*(size+2*margin), ny*(size+2*margin))); const el = svg.node(); const rectData = []; for (let y=0; y d.x*(size + 2*margin) + margin) .attr("y", d => d.y*(size + 2*margin) + margin) .attr("fill", d => colorArray[state[d.y][d.x]]) .attr("stroke", outline) .attr("width", size) .attr("height", size); function gridClick({x,y}) { state[y][x] = (state[y][x] + 1) % numStates; this.style.fill = colorArray[state[y][x]]; el.dispatchEvent(new CustomEvent('input')); } el.addEventListener('inputArray', ({detail}) => { if (detail !== null && detail !== undefined) { if (detail.length === ny && detail.every(d => d.length === nx && d.every(v => v < numStates && v >= 0 && v === Math.round(v)))) { state = detail; } else return console.log(`failed inputArray event: ${detail}`); } else { state = init ? init.map(d => d.slice()) : Array.from({length:ny}, d => Array(nx).fill(0)); } el.value = state; grid.attr("fill", d => colorArray[state[d.y][d.x]]); el.dispatchEvent(new CustomEvent('input')); }); el.value = state; return el; }33:T15d7,function hexGrid (config) { const SQRT3_2 = Math.sqrt(3)/2; // defaults config = Object.assign({size:15, numStates:2, margin:2, outline:'#000', shape:'parallelogram'}, config); let {nx, ny, size, numStates, init, margin, colorArray, outline, shape} = config; // validate shape if (shape !== 'hexagon' && shape !== 'parallelogram' && shape !== 'rectangle') throw new Error(`shape must be 'hexagon', 'parallelogram', or 'rectangle'`); // passing in option hexagon was deprecated and is now removed const hexagon = shape === 'hexagon'; // validate init: this is horrible... if (init !== undefined) { if (init.some(d => d.length !== init[0].length) || init.some(d => d.some(v => v<0 || v >= numStates || v != Math.round(v))) || (hexagon && init.length !== init[0].length)) throw new Error(`init should be undefined or a ${hexagon ? 'square' : 'rectangular'} matrix with integer entries between 0 and ${numStates-1}`); if (nx === undefined && ny !== undefined) { if (ny === init.length) nx = init[0].length; else throw new Error(`init length:${init.length} not equal to ny:${ny}`); } else if (ny === undefined && nx !== undefined) { if (nx === init[0].length) ny = init.length; else throw new Error(`init inner length:${init[0].length} not equal to nx:${nx}`); } else if (nx === undefined && ny === undefined) { ny = init.length; nx = init[0].length; } if (hexagon && nx !== ny) throw new Error(`init should be undefined or a square matrix and ny and nx should be equal to its size`); } else { if (hexagon) { if (nx === undefined && ny !== undefined) nx = ny; else if (ny === undefined && nx !== undefined) ny = nx; else if (nx === undefined && ny === undefined) ny = nx = 5; if (ny !== nx || ny < 3 || (ny % 2 === 0)) throw Error(`when 'hexagon' is 'true', ny and nx should be odd and equal to each other`); } else { if (nx === undefined && ny !== undefined) nx = ny; else if (ny === undefined && nx !== undefined) ny = nx; else if (nx === undefined && ny === undefined) ny = nx = 5; } } if (init !== undefined) if (init.length !== ny || init.some(d => d.length !== nx || d.some(v => v<0 || v >= numStates))) throw Error(`init should be undefined or an ${ny} by ${nx} with entries from 0 to ${numStates-1}`); if (colorArray === undefined) colorArray = Array.from({length:numStates}, (d,i) => i === 0 ? '#FFF' : (i === 1 ? '#000' : d3.schemeSet3[(i-2) % 12])); const unitHex = [0,1,2,3,4,5].map(d => { const ang = Math.PI * (d + (shape === 'rectangle' ? 0 : 0.5)) / 3; return [Math.cos(ang), Math.sin(ang)]; }); const scale = size*SQRT3_2; const r = size / Math.sqrt(3); // Array of values, start out all 0 if init not defined let state = init ? init.map(d => d.slice()) : Array.from({length:ny}, d => Array(nx).fill(0)); const svg = hexagon ? d3.select(DOM.svg(nx*(size+2*margin), nx*(scale+Math.sqrt(3)*margin)+scale/2+Math.sqrt(3)*margin)) : (shape === 'rectangle' ? d3.select(DOM.svg(nx*(scale+2*margin) + scale, ny*(size+2*margin)+size)) : // parallelogram (default) d3.select(DOM.svg(nx*(size+2*margin) + ny*(size/2+margin), ny*(scale+Math.sqrt(3)*margin)+scale/2+Math.sqrt(3)*margin))); const el = svg.node(); const hexData = []; if (hexagon) { for (let y=0; y<(ny+1)/2; y++) for (let x=(nx-1)/2 - y; x colorArray[state[d.y][d.x]]) .attr("stroke", outline); function hexPoints({x,y}) { if (shape === 'rectangle') { const cx = (scale+margin*Math.sqrt(3))*x + scale/2+Math.sqrt(3)*margin; const cy = (size+2*margin)*y + size + (x % 2)*(size/2 + SQRT3_2*margin); return unitHex.map(([x,y]) => `${cx+r*x},${cy+r*y}`).join(' '); } const cx = hexagon ? (size/2+margin)*y + (size+2*margin)*(x-(nx-1)/4) + size/2+margin : (size/2+margin)*y + (size+2*margin)*x + size/2+2*margin; const cy = (scale+margin*Math.sqrt(3))*y + scale; return unitHex.map(([x,y]) => `${cx+r*x},${cy+r*y}`).join(' '); } function gridClick({x,y}) { state[y][x] = (state[y][x] + 1) % numStates; this.style.fill = colorArray[state[y][x]]; el.dispatchEvent(new CustomEvent('input')); } el.addEventListener('inputArray', ({detail}) => { if (detail !== null && detail !== undefined) { if (detail.length === ny && detail.every(d => d.length === nx && d.every(v => v < numStates && v >= 0 && v === Math.round(v)))) { state = detail; } else return console.log(`failed inputArray event: ${detail}`); } else { state = init ? init.map(d => d.slice()) : Array.from({length:ny}, d => Array(nx).fill(0)); } el.value = state; grid.attr("fill", d => colorArray[state[d.y][d.x]]); el.dispatchEvent(new CustomEvent('input')); }); el.value = state; return el; }34:[] 2e:{"title":"Grid inputs","cells":[{"id":417,"value":"md`# Grid inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"viewof first = {\n const makeRandom = (n,s) => Array.from({length:n}).map(() => Array.from({length:n}).map(() => Math.floor(s*Math.random())));\n const s = 10;\n const n = Math.floor(width/100);\n const rect = grid({init:makeRandom(2*n-1,s), numStates:s});\n const hex = hexGrid({shape:'hexagon', \n init:makeRandom(2*n+1,s).map(\n (row,y) => row.map(\n (d,x) => x+y > n-1 && x+y < 3*n+1 ? d : 0)), \n numStates:s});\n \n const div = md`## Rectangles, parallelograms and hexagons\n\n${rect} ${hex}`;\n div.value = ({rect,hex});\n rect.addEventListener('input', () => div.dispatchEvent(new CustomEvent('input')));\n hex.addEventListener('input', () => div.dispatchEvent(new CustomEvent('input')));\n return div;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"{\n const rectMat = await pt(first.rect.value, {maxrows:19});\n const hexMat = await pt(first.hex.value, {maxrows:21});\n return html`${rectMat} ${hexMat}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"md`## Examples\n\nTry clicking on the squares of this grid:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof test = grid()","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`Here's a [nicely-formatted view](/@fil/pt) of the array \\`test\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"pt(test)","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`This grid starts out with an \\`init\\` array:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"viewof test2 = grid(\n {numStates:4, \n init:[\n [0,0,0,1,0],\n [0,0,3,2,0],\n [0,3,0,0,0],\n [1,1,1,1,1]]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"pt(test2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"md`By default, \\`hexGrid\\` draws a hexagonal grid as a parallelogram:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"viewof testHex = hexGrid()","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"pt(testHex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"md`These SVG elements listen for \\`inputArray\\` CustomEvents. When the cell receives such an event, the state is set to \\`detail\\` if it is an array of the correct size, or it is set back to the initial array if \\`detail\\` is null or undefined. Otherwise an error is put in the console.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"md`We can draw a hexagonal grid in a rectangular form by setting \\`shape\\` to be \\`rectangle\\` (thanks to [@fil](/@fil) for the suggestion!):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"viewof testHex2a = hexGrid({shape:'rectangle',\n numStates:6,\n init:Array.from({length:6}, (d,i) => Array(10).fill(5-i))\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":514,"value":"pt(testHex2a)","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"viewof testHex2b = hexGrid({shape:'rectangle',\n numStates:7,\n init:[\n [6,5,4,3,2,0,6,5,4],\n [5,4,3,2,0,6,5,4,3],\n [4,3,2,0,6,5,4,3,2],\n [3,2,0,6,5,4,3,2,1],\n ]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"pt(testHex2b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`To create a hexagon, use \\`hexGrid\\` with the option \\`shape\\` set to \\`'hexagon'\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"viewof testHex3 = hexGrid(\n {shape:'hexagon', nx:7,\n init:[\n [1,1,0,1,0,0,1], // Note that stuff in the upper left corners ...\n [0,0,1,0,0,1,0],\n [0,1,0,0,1,0,0],\n [1,0,0,1,0,0,1],\n [0,0,1,0,0,1,0],\n [0,1,0,0,1,0,0],\n [1,0,0,1,0,0,1] // and lower right corners is ignored.\n // However, it is still checked to make sure it is in bounds!\n ]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"pt(testHex3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`For the nice matrix print function, see @fil's notebook [pt](/@fil/pt). I only import a fork here because it says to...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"import {pt} from \"43b57dd558b3d1ee\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}