30:Tb00,class PixelData { static unpack(array, {height=8, width=8, stacked=false}={}) { let bit = 0n, idx = 0; const values = new Uint8Array(height * width); const unpacked = [ ]; array.forEach((packed, k) => { idx = 0; for(let row=0; row d3.range(this.width).reduce((sum,col) => sum + this.at(row,col), 0); const colSum = col => d3.range(this.height).reduce((sum,row) => sum + this.at(row,col), 0); let left,right,top,bottom; for(top=0; top < this.height; ++top) if(rowSum(top)) break; for(bottom=this.height-1; bottom >= 0; --bottom) if(rowSum(bottom)) break; for(left=0; left < this.width; ++left) if(colSum(left)) break; for(right=this.width-1; right >= 0; --right) if(colSum(right)) break; const height = bottom - top + 1, width = right - left + 1; //console.log([left,right,width], [top,bottom,height]); if(height == this.height && width == this.width) return this; const values = new Uint8Array(height * width); for(let row = top; row <= bottom; ++row) { for(let col = left; col <= right; ++col) { values[(row - top) * width + (col - left)] = this.at(row, col); } } return new PixelData(height, width, values); } isEqualTo(other) { if(other.width != this.width || other.height != this.height) return false; for(let row = 0; row < this.height; ++row) { for(let col = 0; col < this.width; ++col) { if(other.at(row,col) != this.at(row,col)) return false; } } return true; } pack(array, {idx=0, dx=0, dy=0}) { if(this.width > 8 || this.height > 8) throw new Error(`Cannot pack ${this.height} x ${this.width} pixels`); array[idx] = 0n; let bit = 0n; for(let row=0; row < this.height; ++row) { for(let col=0; col < this.width; ++col) { if(this.at(row, col)) array[idx] |= 1n << BigInt(8 * (row+dy) + col + dx); } } return array; } }31:T8fb,function PixelView({ height=7, width=5, values=[], data, size=20, spacing=1, fill = "currentColor", stroke = "#ccc", editable = false, fillScheme } = {}) { data = data || new PixelData(height, width, values); const canvas = document.createElement("canvas"); canvas.width = data.width * size + (data.width + 1) * spacing; canvas.height = data.height * size + (data.height + 1) * spacing; canvas.style.imageRendering = "-moz-crisp-edges"; canvas.style.imageRendering = "pixelated"; const context = canvas.getContext("2d"); Object.defineProperties(canvas, { value: { get() { return data; }, set(d) { data.set(d.values); context.clearRect(0, 0, canvas.width, canvas.height); if (spacing) { context.fillStyle = stroke; for (let row = 0, y = 0; row <= data.height; ++row, y += spacing + size) { context.fillRect(0, y, canvas.width, spacing); } for (let col = 0, x = 0; col <= data.width; ++col, x += spacing + size) { context.fillRect(x, 0, spacing, canvas.height); } } for (let row = 0, y = spacing; row < data.height; ++row, y += spacing + size) { for (let col = 0, x = spacing; col < data.width; ++col, x += spacing + size) { const val = data.at(row, col); if (val) { context.fillStyle = fillScheme ? fillScheme[(val-1)%fillScheme.length] : fill; context.fillRect(x, y, size, size); } } } } } }); if(editable) { canvas.addEventListener("click", event => { const col = Math.floor((event.offsetX - spacing) / (size + spacing)); const row = Math.floor((event.offsetY - spacing) / (size + spacing)); if (col < 0 || col >= data.width || row < 0 || row >= data.height) return; const v = 1 - data.at(row, col); const x = spacing + col * (size + spacing); const y = spacing + row * (size + spacing); if (v) context.fillStyle = fill, context.fillRect(x, y, size, size); else context.clearRect(x, y, size, size); data.values[row * data.width + col] = v; canvas.dispatchEvent(new CustomEvent("input")); }); } canvas.value = data; return canvas; }32:[] 2e:{"title":"Pixel Input","cells":[{"id":0,"value":"# Pixel Input\n\nBuilding on https://observablehq.com/@mbostock/pixel-input with the following changes:\n - separate state object from view function\n - default to display-only view\n - implement packing and unpacking to 64-bit unsigned int when width <= 8 and height <= 8","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"viewof demo = PixelView({\n height:5, width:4,\n values: [1, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1],\n editable: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"demo.values","pinned":true,"hidden":false,"mode":"ojs"},{"id":317,"value":"squeezed = PixelView({data:demo.squeezed()})","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"packed = demo.pack(new BigUint64Array(1), {dx:2, dy:1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"PixelView({data:PixelData.unpack(packed)[0]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}