2e:null 2f:["$","title",null,{"children":"Stingrays | Brett Camper | Observable"}] 34:T8a6,// draw the gallery of patterns viewof selectedPattern = { const selector = html`

${patternGallery.map(pattern => { const { name, size, data } = pattern; const thumbSize = width > 320 ? 160 : 80; const gridSize = (Math.max(...size) + 4) | 1; // padded, with odd-numbered pixel size (for centering) const ctx = DOM.context2d(gridSize, gridSize); const canvas = ctx.canvas; canvas.width = gridSize; canvas.height = gridSize; canvas.style.width = `${thumbSize}px`; canvas.style.height = `${thumbSize}px`; canvas.style.imageRendering = 'pixelated'; // turn off canvas smoothing const imgCells32 = new Uint32Array(gridSize * gridSize); // 32-bit packed RGBA pixels const imgCells = new Uint8ClampedArray(imgCells32.buffer); // 8-bit, per-channel view into pixels // draw pattern centered imgCells32.fill(palette32[0]); // fill background color const cx = Math.floor(gridSize/2 - size[0]/2); const cy = Math.floor(gridSize/2 - size[1]/2); for (let y = 0; y < size[1]; y++) { for (let x = 0; x < size[0]; x++) { // convert numeric cell values into colors (via palette look-up) imgCells32[(y + cy) * gridSize + (x + cx)] = palette32[data[y * size[0] + x]]; } } // draw cells into thumbnail canvas const imageData = new ImageData(imgCells, gridSize, gridSize); ctx.putImageData(imageData, 0, 0); // create thumbnail mark-up and connect to viewof value update const thumb = html`

${ctx.canvas}

${name}

`; thumb.onclick = () => { selector.value = pattern; selector.dispatchEvent(new CustomEvent('input')); }; return thumb; })}

`; selector.value = null; return selector; }35:Tbc3,patternGallery = [ { name: 'Stingray', size: [5, 8], data: [ 0, 2, 1, 2, 0, 0, 0, 1, 0, 0, 2, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0 ] }, { name:'Baby Stingray', size: [4, 4], data: [ 1, 2, 0, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 2, 0, 0 ] }, { name: 'Limper', size: [5, 3], data: [ 0, 2, 2, 0, 0, 2, 1, 0, 0, 2, 1, 0, 0, 0, 0 ] }, { name: 'Popper', size: [3, 3], data: [ 0, 2, 0, 2, 1, 2, 0, 2, 0 ] }, // { // name: 'Flower', // size: [3, 3], // data: [ // 1, 1, 1, // 0, 0, 1, // 0, 0, 1 // ] // }, { name: 'Little Train', size: [6, 4], data: [ 0, 0, 0, 0, 0, 2, 0, 0, 1, 0, 0, 1, 0, 2, 0, 2, 2, 2, 1, 0, 0, 1, 1, 0 ] }, { name: 'Big Train', size: [25, 11], data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 0, 0, 2, 0, 0, 0, 0, 0, 2, 0, 0, 1, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 2, 0, 0, 0, 0, 0, 2, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 0, 0, 0, 0, 1, 0, 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 1, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 1, 2, 0, 0, 0 ] }, { name: 'Jellyfish', size: [7, 11], data: [ 2, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 1, 0, 1, 0, 2, 0, 0, 0, 0, 0, 1, 1, 0, 0, 2, 0, 1, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 1, 0, 2, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 2, 0, 0, 2, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 0 ] }, { name: 'Fireworks', size: [11, 11], data: [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ] }, { name: 'Stingray Factory', size: [3, 3], data: [ 0, 2, 0, 2, 0, 2, 0, 1, 0 ] }, { name: 'Random Values', size: [80, 80], data: [...Array(80*80)].map(() => Math.floor(Math.random() * palette.length)) } ]36:T790,// Run Stingrays ruleset, updating `cells` with new values (`lastCells` as scratchpad) function computeNextCells() { lastCells.set(cells); let index = 0; // Cell buffer index let neighborCount = 0; // Neighbor cell count for (let y = 0; y < gridHeight; y++) { let up = y - 1; let down = y + 1; // Clamp to cell boundaries if (up < 0) up = gridHeight - 1; else if (down >= gridHeight) down = 0; // Pre-multiply y values up *= gridWidth; down *= gridWidth; const center = y * gridWidth; for (let x = 0; x < gridWidth; x++) { let left = x - 1; let right = x + 1; // Clamp to cell boundaries if (left < 0) left = gridWidth - 1; else if (right >= gridWidth) right = 0; // Count neighboring cell values (not including center cell) neighborCount = lastCells[up + left] + lastCells[up + x] + lastCells[up + right] + lastCells[center + left] + lastCells[center + right] + lastCells[down + left] + lastCells[down + x] + lastCells[down + right]; // If neighbor count is in mid-range, clear center cell (regardless of its current value) if (neighborCount >= 6 && neighborCount <= 9) { cells[index] = 0; } // If neighbor count too high, give it a value (regardless of its current value) else if (neighborCount >= 10) { cells[index] = 1; } // If center cell is occupied... else if (lastCells[index] > 0) { // Clear it if neighbor count too high or low if (neighborCount <= 3 || neighborCount >= 7) cells[index] = 0; } // If center cell is not occupied... else { // Give it a value if neighbor count is at certain threshold values if (neighborCount == 5) cells[index] = 1; else if (neighborCount == 3) cells[index] = 2; } index++; } } }37:[] 32:{"id":"e18af00609170cb4","slug":"stingrays","title":"Stingrays","thumbnail":"2e67e8d02d5ed4d102fcbc4c6a3badd9f73ccb489a008aefac6f5905361535b7","access_level":"public","create_time":"$D2020-01-19T04:27:38.221Z","update_time":"$D2020-02-15T22:17:54.891Z","view_time":null,"first_public_time":"$D2020-01-21T00:08:13.674Z","has_unpublished_edits":null,"fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"c53130f001c03e79","login":"bcamper","name":"Brett Camper","avatar_url":"https://avatars-next.observableusercontent.com/1f3a3aead4cc1f200d81120af918d78f076732c23133b2a182f81410bd748058","tier":"starter_2024"},"version":764,"publish_version":764,"role":null,"authored":false,"authors":[{"type":"individual","id":"9facf0ed218e9eb6","login":"bcamper","name":"Brett Camper","avatar_url":"https://avatars-next.observableusercontent.com/1f3a3aead4cc1f200d81120af918d78f076732c23133b2a182f81410bd748058","tier":null}],"members":[{"type":"individual","id":"9facf0ed218e9eb6","login":"bcamper","name":"Brett Camper","avatar_url":"https://avatars-next.observableusercontent.com/1f3a3aead4cc1f200d81120af918d78f076732c23133b2a182f81410bd748058","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Stingrays","cells":[{"id":0,"value":"md`\n# Stingrays\nIn 1995 (or 96, not totally sure), I accidentally created/discovered a wonderful cellular automata ruleset I called: Stingrays! You can see why from its most common stable pattern. It features several other locomotive and stationary patterns, including Stingray Factories, the pleasing pulse of the Jellyfish, Big and Little Train, Poppers, and Life-like Limpers. I originally wrote this in C/C++ for DOS VGA, later created a Java applet version (Swing UI!), and finally... Stingrays make their triumphant return to the web.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"{\n const imgCells32 = new Uint32Array(cells.length); // 32-bit packed RGBA pixels\n const imgCells = new Uint8ClampedArray(imgCells32.buffer); // 8-bit, per-channel view into pixels\n \n while (true) {\n // run the cellular automata rules to update the cell values\n computeNextCells();\n \n // convert numeric cell values into colors (via palette look-up)\n for (let i = 0; i < cells.length; i++) {\n imgCells32[i] = palette32[cells[i]];\n }\n \n // draw cells into canvas\n const imageData = new ImageData(imgCells, gridWidth, gridHeight);\n ctx.putImageData(imageData, 0, 0);\n \n // return updated canvas and wait for next frame\n yield ctx.canvas;\n await sleep(frameDelay);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"viewof palette = {\n const colors = [\n color({ value: '#202020' }),\n color({ value: '#0000E0' }),\n color({ value: '#00E000' })\n ];\n\n // combine three observable color pickers into one control\n const h = html`\n ${colors.map(c => html``)}

${c}

\n Defaults to original DOS VGA colors for authenticity 🤘\n

\n `;\n \n // set intial values\n h.value = colors.map(c => [...hexToRGB(c.value), 255]);\n \n // update values whenever color picker changes\n colors.forEach(c => c.addEventListener('input', (e) => {\n h.value = colors.map(c => [...hexToRGB(c.value), 255]);\n h.dispatchEvent(new CustomEvent('input'));\n }));\n \n return h;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"// gridScale = 3\nviewof gridScale = slider({\n title: 'Grid Scale',\n min: 1,\n max: 10,\n step: 1,\n value: 3,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"// frameDelay = 40\nviewof frameDelay = slider({\n title: 'Speed',\n description: 'Higher values are slower',\n min: 0,\n max: 300,\n step: 5,\n value: 40,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"md`\n## Pattern Gallery\nClick or tap a pattern to see it in action.\n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"md`## Stingray Ruleset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"md`## Setup & Computed Values`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"gridWidth = devicePixelRatio * displayWidth / gridScale","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"gridHeight = Math.floor(devicePixelRatio * displayHeight / gridScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"displayWidth = (width - (width % gridScale))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"displayHeight = Math.floor(displayWidth * .75)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"// TODO: setup Observable mutable state here to see these updating live\ncells = {\n let c = new Uint8Array(gridWidth * gridHeight);\n\n // initialize with selected pattern\n if (selectedPattern) {\n const { size, data } = selectedPattern;\n c.fill(0); // fill background value\n const cx = Math.floor(gridWidth/2 - size[0]/2);\n const cy = Math.floor(gridHeight/2 - size[1]/2);\n for (let y = 0; y < size[1]; y++) {\n for (let x = 0; x < size[0]; x++) {\n c[(y + cy) * gridWidth + (x + cx)] = data[y * size[0] + x];\n }\n }\n }\n // or random values if no pattern selected\n else {\n for (let i = 0; i < c.length; i++) {\n c[i] = Math.floor(Math.random() * palette.length);\n }\n }\n \n lastCells.fill(0);\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"lastCells = new Uint8Array(gridWidth * gridHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"// 32-bit packed RGBA representation of each palette color\npalette32 = palette.map(color => color.reduce((c, v, i) => c + (v << (i * 8))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"ctx = {\n const ctx = DOM.canvas(gridWidth, gridHeight).getContext('2d');\n const canvas = ctx.canvas;\n canvas.className = \"pixelated\"; // turn off canvas smoothing \n canvas.style.width = `${displayWidth}px`;\n canvas.style.height = `${displayHeight}px`;\n \n return ctx;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"pixelatedCSS = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"md`## Utility Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"hexToRGB = hexColor => [1, 3, 5].map(i => parseInt(hexColor.substr(i, 2), 16)); // parse hex to RGB","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"function sleep(ms) {\n return new Promise(resolve => setTimeout(resolve, ms));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"import { slider, color } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"