3e:null 3f:["$","title",null,{"children":"1D Cellular Automaton with scaling and animation controls | Ruzgar Imski | Observable"}] 45:T430,viewof rule = { let value = 30; const form = html``; form.value = value; form.querySelectorAll("button").forEach((button, i) => { i = 7 - i; button.onclick = event => { let v = (value ^= (1 << i)) & (1 << i); button.querySelector("rect:last-child").setAttribute("fill", v ? "black" : "white"); event.preventDefault(); form.value = value; form.dispatchEvent(new CustomEvent("input")); }; }); return form; }46:Tc16,viewof ca = { system.restart let context, row1, row2, startGen; const ca = {width: (view.fullWidth ? width : view.width), height: view.height, pxd: view.pxd, fullWidth: view.fullWidth, speed: anim.speed, paused: anim.paused, restart: mutable restartCA, }; // pxd -> "pixel per dot" const resWidth = ca.fullWidth ? Math.floor(ca.width/ca.pxd) : ca.width; const container = html`

`; container.style.overflow = 'hidden'; //container.style.overflow = ca.fullWidth ? 'hidden' : 'scroll'; container.style.height = Math.ceil(ca.height * ca.pxd)+'px'; if (!ca.restart && mutable CA_DATA) { // if there is already something on the canvas, get it const savedContext = mutable CA_DATA; context = context2d_pxd(resWidth, ca.height, ca.pxd); context.canvas.style.imageRendering = "pixelated"; context.globalCompositeOperation = "copy"; startGen = Math.floor((savedContext.data.length/resWidth)/4)-1; context.putImageData(savedContext, 0,0); row1 = context.getImageData(0, startGen, resWidth, 1); row2 = context.createImageData(resWidth, 1); } else { // if this is the first call, initialize the canvas context = context2d_pxd(resWidth, ca.height, ca.pxd); context.canvas.style.imageRendering = "pixelated"; context.globalCompositeOperation = "copy"; startGen = 0; // Initialize the first row. row1 = context.getImageData(0, 0, resWidth, 1); for (let i = 0; i < resWidth; ++i) { const p = (i << 2) + 3; //row1.data[p] = i%2===0 ? 255 : 0; row1.data[p] = Math.random() < density ? 255 : 0; } row2 = context.createImageData(resWidth, 1); mutable restartCA = false; } context.canvas.style.transformOrigin = '0 0'; //scale from top left container.appendChild(context.canvas); for (let j = startGen; true; ++j) { // Read from the first row to write to the second. for (let i = 0; i < resWidth; ++i) { const v0 = row1.data[((i > 0 ? i - 1 : resWidth - 1) << 2) + 3] && 0b100; const v1 = row1.data[(i << 2) + 3] && 0b010; const v2 = row1.data[((i < resWidth - 1 ? i + 1 : 0) << 2) + 3] && 0b001; row2.data[(i << 2) + 3] = rule & (1 << (v0 | v1 | v2)) ? 255 : 0; } // Swap the rows. [row1, row2] = [row2, row1]; if (j < ca.height) { // Append until the canvas is full. context.putImageData(row2, 0, j); } else { // Otherwise, shift the canvas up before appending the new row. context.drawImage(context.canvas, 0, -1); context.putImageData(row2, 0, ca.height - 1); } mutable CA_DATA = context.getImageData(0, 0, resWidth, j+1 < ca.height ? j+1 : ca.height); // canvas zoom and scrollbars if ((resWidth*ca.pxd) * zoom.value > width) container.style.overflow = 'scroll'; context.canvas.style.transform = `scale(${ zoom.value })`; if (ca.paused) return yield container; yield Promises.delay(ca.speed, container); } }47:[] 43:{"id":"17f4d377709ed1de","slug":null,"title":"1D Cellular Automaton with scaling and animation controls","thumbnail":"f90bc1b727faa9983c49c64bdf060d28768c0c11374f615bd816ea52bbbb3c87","access_level":"public","create_time":"$D2024-01-13T07:21:40.123Z","update_time":"$D2024-01-13T07:21:40.123Z","view_time":null,"first_public_time":"$D2024-01-13T07:21:40.123Z","has_unpublished_edits":null,"fork":{"id":"9c40e6bdf8c5f50d","slug":"1d-cellular-automaton-with-scaling-and-animation-controls","title":"1D Cellular Automaton with scaling and animation controls","owner":{"id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann"}},"stars":0,"starred":false,"owner":{"type":"team","id":"62eaf79b101c4021","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":"starter_2024","bio":"","following":false},"version":898,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"1D Cellular Automaton with scaling and animation controls","cells":[{"id":0,"value":"md`# 1D Cellular Automaton with scaling and animation controls\n\nCurrently showing rule ${rule}; click the squares below to change it. [Rule 30](https://en.wikipedia.org/wiki/Rule_30)’s complex output resembles the pattern of the [textile cone](https://en.wikipedia.org/wiki/Conus_textile), a venomous sea snail.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"viewof density = {\n const form = html``;\n form.i.oninput = () => {\n form.o.value = `${form.i.valueAsNumber}% fill`;\n form.value = form.i.valueAsNumber / 100;\n };\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"viewof ctr_width = slider({\n min: 3, \n max: 1000, \n step: 1,\n value: 101,\n title: 'State resolution',\n format: v => `${v} cells/line`,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"viewof ctr_pxd = slider({\n min: 1, \n max: 10, \n step: 1,\n value: 3,\n title: 'Scale cells',\n format: v => `${v} px/cell`,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"viewof ctr_fullWidth = checkbox({\n options: [{ value: false, label: \"Full resolution\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"viewof ctr_height = slider({\n min: 1, \n max: 1000, \n step: 1,\n value: 300,\n title: 'Frame height',\n format: v => `${v} lines (cell states)`,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"viewof ctr_zoom = slider({\n min: 0.5, \n max: 5.0, \n step: .1,\n value: 1,\n title: 'Zoom',\n format: v => `×${v}`,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"viewof ctr_speed = slider({\n min: 0, \n max: 1000, \n step: 1,\n value: 0,\n title: 'Animation delay',\n format: v => `${v} milliseconds`,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"viewof ctr_paused = checkbox({\n options: [{ value: false, label: \"Pause\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"viewof ctr_restart = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"md` \n#### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"view = ({ width: ctr_width, height: ctr_height, pxd: ctr_pxd, fullWidth: ctr_fullWidth, })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"zoom = ({value: ctr_zoom, fit: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"anim = ({ speed: ctr_speed, paused: ctr_paused, })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"system = ({restart: ctr_restart})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"mutable CA_DATA = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"md` \n#### Wires`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"{\n view\n mutable restartCA = true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"{\n system\n mutable restartCA = true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"mutable restartCA = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"context2d_pxd = (width, height, dpi) => {\n /* Adapted from DOM.context2d of the Observable Standard Library to work with pixel-scaling in the CA */\n if (dpi == null) dpi = devicePixelRatio;\n const canvas = document.createElement(\"canvas\");\n canvas.width = width;// * dpi;\n canvas.height = height;// * dpi;\n canvas.style.width = (width*dpi) + \"px\";\n //canvas.style.height = (height*dpi) + \"px\";\n const context = canvas.getContext(\"2d\");\n //context.scale(dpi, dpi);\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"md` \n#### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"import {text, slider, radio, select, checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"