2c:null 2d:["$","title",null,{"children":"1D CA for 4-valued FORM logic (“SelFis”) | Peter Hofmann | Observable"}] 32:T66e,viewof formulaInput = { const id = DOM.uid(); yield html``; // const htmlform = document.getElementById(id.id); const input = htmlform.querySelector('input[type=text]'); htmlform.value = input.value; mutable formula_pre = input.value; input.oninput = e => { e && e.stopPropagation() && e.preventDefault(); try { if (formform.form.parseLinear(input.value)) { mutable formula_pre = input.value; } } catch (e) { mutable formula_pre = ''; } } const submit = htmlform.querySelector('button'); // input[type=submit] htmlform.onsubmit = e => { e && e.preventDefault(); htmlform.value = input.value; htmlform.dispatchEvent(new CustomEvent('input', { bubbles: true })); } }33:T8d1,viewof ctr_varOrder = { if (errors) return radio({options: [{label: 'error', value: null}], value: null}); const vars = formform.form.getVariables(formulaInput.substr()); if (vars.length < 1) return radio({title: 'Variable:', options: [{label: vars[0], value: null}], value: null}); const diagram_neighborhood = (vars) => { const tri = Array.from({length:vars.length},(_,i) => i).map(i => mapToTrichotomy(i, vars.length)); const size = {w: 10, h: 10}; const margin = 2; const len = vars.length%2===0 ? (vars.length+1) : vars.length; return html``; } const varPermutations = permuteArray(vars).map( (perm,i) => ({ label: perm.reduce( (acc,curr,idx) => acc.concat(` ${curr}`),'' ), value: perm.join('¶'), })); const permDef = vars.join('') === 'ELR' ? varPermutations[2] : vars.join('') === '+-LR' ? varPermutations[9] : vars.join('') === '+-ELR' ? varPermutations[39] : varPermutations[0]; return formInput(html` `); }34:T184e,viewof ctr_perm = { const vnum = formTotalVars(formulaInput.slice()); const perms = genVarPermutations(varOrder); // const vnum = perms[0].length; const permStates = perms.map((p,i) => ({order: p, checked: i===0})); const compose = permStates => permStates.filter(perm => perm.checked) .map(perm => permuteFormula(formulaInput,perm.order,varOrder)).join(''); const binaryDecode = binary => binary.split('').forEach((d,i) => permStates[i].checked = !!+d); const binaryEncode = permStates => permStates.map(d => d.checked ? '1' : '0').join(''); const fill = {on: '#000', off: '#fff'}; const stroke = '#000'; const size = {w: 12, h: 12}; const margin = 2; const isRow = fact => { if (fact > 2) { if (fact === 3 && vnum === 3) return true; else return fact%2 === 0; } else return vnum < 3; } const getMargin_h = fact => { const row = isRow(fact); return row ? 4 : 6; } const getMargin_v = fact => { const row = isRow(fact); return row ? 6 : 4; } const constructPermTable = function(fact, fnum='', table='') { if (fact > 1) { table += `

`; } for (let i=0; i 1) table = constructPermTable(fact-1, fnum+i, table); else { const idx = factoradicToDec(fnum+'0'); table += `

`; } } if (fact > 1) table += `

`; return table; } const permTable = html`

${ constructPermTable( vnum ) }

`; const permInput = html``; const btnSetAll = html``; const btnReset = html``; const toggleDisplay = html``; const ghostSubmit = html``) }`; return grid; } const switchPanel = html``; switchPanel.value = value; yield switchPanel; const toggleDisplay = switchPanel.querySelector('#toggleDisplay'); const switchContainer = switchPanel.querySelector('#switchContainer'); const switchGroup = switchPanel.querySelector('#switchContainer > div'); switchGroup.style.visibility = 'hidden'; switchGroup.style.height = '1px'; toggleDisplay.setAttribute('value', 'show'); toggleDisplay.onclick = e => { e && e.preventDefault(); const visible = switchGroup.style.visibility != 'hidden'; switchGroup.style.visibility = visible ? 'hidden' : 'visible'; switchGroup.style.height = visible ? '1px' : 'auto'; toggleDisplay.setAttribute('value', visible ? 'show' : 'hide'); } switchGroup.querySelectorAll('button').forEach((button, i) => { button.onclick = e => { e && e.preventDefault(); let value_bin = BigInt(quatToBin(value)); const rule = BigInt( matchRule(value_bin, BigInt(i)) ); const bitmask = (rule%2n ? 0b11n : 0b01n) << BigInt(i)*2n; let v = (value_bin ^= bitmask) & (0b11n << BigInt(i)*2n); button.querySelector('rect:last-child').setAttribute('fill', vColor( parseInt(v >> BigInt(i)*2n) )); //mutable formDNA = intToFormDNA(value_bin, vnum); value = intToFormDNA(value_bin, vnum); switchPanel.value = value; switchPanel.dispatchEvent(new CustomEvent('input')); }; }); }37:T92e,viewof ini = { const ctrIniMode = {id: DOM.uid().id, name: 'mode', title: 'Initialization mode', options: [{label: 'pattern (centered)', checked: true, value: 'ptn_cnt'}, {label: 'random', value: 'rnd_all', style:'margin-left: 1.0rem;'}], style: 'display: flex;'}; const ctrIniPattern = {id: DOM.uid().id, name: 'pattern', title: 'Initialization pattern', options: [{label: '32123 (“ball”)', value:'32123', checked: true}, {label: '12321 (“ball” inverted)', value:'12321'}, {label: '1 (single marked)', value:'1'}, {label: '2 (single undetermined)', value:'2'}, {label: '3 (single imaginary)', value:'3'}, {label: '101010101 (rhythmic marked)', value:'101010101'}, {label: '202020202 (rhythmic undetermined)', value:'202020202'}, {label: '303030303 (rhythmic imaginary)', value:'303030303'}], }; const ctrDensity = {id: DOM.uid().id, name: 'density', title: 'Density of random val. > 0', min: 0.0, max: 1.0, step: 0.05, value: 0.5, format: (value => Math.round(value*100)), suffix: '%', style: 'width: 120px;'}; const form = formInput(html``); yield form; form.querySelector(`#${ctrDensity.id}`).classList.add('disabled'); const elem_iniMode = form.querySelectorAll(`#${ctrIniMode.id} input`); elem_iniMode.forEach(input => input.onchange = e => { // e && e.preventDefault(); if (input.value === 'ptn_cnt') { form.querySelector(`#${ctrIniPattern.id}`).classList.remove('disabled'); form.querySelector(`#${ctrDensity.id}`).classList.add('disabled'); } else if (input.value === 'rnd_all') { form.querySelector(`#${ctrIniPattern.id}`).classList.add('disabled'); form.querySelector(`#${ctrDensity.id}`).classList.remove('disabled'); } input.dispatchEvent(new CustomEvent('input', { bubbles: true })); }); }38:T9e3,viewof view = { const ctrWidth = {id: DOM.uid().id, name: 'width', title: 'State resolution (frame width)', min: 5, max: 1000, step: 1, value: 100, suffix: ' cells/line'}; const ctrHeight = {id: DOM.uid().id, name: 'height', title: 'Visible history (frame height)', min: 1, max: 1000, step: 1, value: 160, suffix: ' lines'}; const ctrPxd = {name: 'pxd', title: 'Cell size', min: 1, max: 20, step: 1, value: 4, suffix: ' px/cell', style: 'width: 120px;'}; const ctrFullWidth = {id: DOM.uid().id, name: 'fullWidth', description: 'Full resolution width', checked: true}; const ctrFullHeight = {id: DOM.uid().id, name: 'fullHeight', description: 'Full resolution height (fullscreen mode)', checked: true}; const form = formInput(html``); yield form; form.querySelector(`#${ctrWidth.id}`).classList.add('disabled') form.querySelector(`#${ctrHeight.id}`).classList.add('disabled') //form.querySelectorAll(`#${ctrWidth.id} output`).forEach(label => label.classList.add('disabled') ); //form.querySelectorAll(`#${ctrHeight.id} output`).forEach(label => label.classList.add('disabled') ); const elem_fullWidth = form.querySelector(`#${ctrFullWidth.id} input`); const elem_fullHeight = form.querySelector(`#${ctrFullHeight.id} input`); elem_fullWidth.onchange = e => { form.querySelector(`#${ctrWidth.id}`).classList.toggle('disabled'); //form.querySelector(`#${ctrWidth.id} input`).disabled = elem_fullWidth.checked ? true : ''; //form.querySelectorAll(`#${ctrWidth.id} output`).forEach(label => label.classList.toggle('disabled') ); elem_fullWidth.dispatchEvent(new CustomEvent('input', { bubbles: true })); } elem_fullHeight.onchange = e => { form.querySelector(`#${ctrHeight.id}`).classList.toggle('disabled'); //form.querySelector(`#${ctrHeight.id} input`).disabled = elem_fullHeight.checked ? true : ''; //form.querySelectorAll(`#${ctrHeight.id} output`).forEach(label => label.classList.toggle('disabled') ); elem_fullHeight.dispatchEvent(new CustomEvent('input', { bubbles: true })); } }39:T822,viewof ctr_statistics = { const statsVisible = ''; const ctrTotalDistrFrom = {id: DOM.uid().id, name: 'totalDistrFrom', label: 'Total distribution:', options: [{label: 'full hist.', value:'complete', checked: true}, {label: 'visible hist.', value:'visible', style: 'margin-left: 0.6rem;'}], style: 'display: flex;'}; const seriesLimit = {id: DOM.uid().id, name: 'seriesLimit', label: 'Distribution samples:', min: 100, max: 1000, step: 1, value: 165, suffix: ' generations', style: 'width: 100px;'}; const form = formInput(html` `); yield form; const elem_toggleStats = form.querySelector('#toggleStats'); form.querySelectorAll('.hideable').forEach(elem => elem.classList.add('disabled') ); elem_toggleStats.onclick = e => { e && e.preventDefault(); form.querySelectorAll('.hideable').forEach(elem => elem.classList.toggle('disabled') ); const checkbox = form.querySelector('#statsVisible'); checkbox.checked = !checkbox.checked; elem_toggleStats.setAttribute('value', checkbox.checked ? 'hide' : 'show'); checkbox.dispatchEvent(new CustomEvent('input', { bubbles: true })); }; }3a:T785,{ const id = DOM.uid(); const group = {w: width, h: 80, gap: 10} const c1 = {w: 104, h: group.h}; const c2 = {w: group.w - c1.w, h: group.h}; const wrapper = html`

`; const container = html`

`; wrapper.append(container); yield wrapper; if (ctr_statistics.visible) { const chartDistributionTotal = chartHistoryDistrTotal((ctr_statistics.totalDistrFrom === 'complete' ? historyDistributionTotal : historyDistributionVisible), c1.w - group.gap/2, c1.h); const chartDistributionSeries = chartHistoryDistrPerGen(historySummaries, c2.w - group.gap/2, c2.h, ctr_statistics.seriesLimit); const chartGroup = html`

${chartDistributionTotal.node()}

${ctr_statistics.totalDistrFrom === 'complete' ? 'Total value distr.
(full history)' : 'Total value distr.
(visible history)'}

${chartDistributionSeries.node()}

Value distribution per generation (last generation: ${ Object.entries(historySummaries[historySummaries.length-1]).reduce((acc,curr,i,arr) => { const f = n => Math.round( (n / arr.reduce((sum,x) => sum + x[1],0)) * 100 ); return acc + curr[0]+':'+f(curr[1])+'%'+(i === arr.length-1 ? '' : ', '); },'') } )
(last ${Math.min(ctr_statistics.seriesLimit, historySummaries.length)} samples)

`; container.append(chartGroup); } else { if (container.children.length > 0) container.querySelectorAll('*').forEach(child => child.remove()); } }3b:T170a,ca_canvas = { /* Initializes and runs the cellular automaton */ const vnum = totalVarsFromDNA(formDNA); const formDNA_bin = BigInt(quatToBin(formDNA)); // control parameters const ca = { ini: ini, ...view, ...guiSave, restart: mutable restartCA } ca.width = document.fullscreenElement && ca.fullWidth ? screen.width : ca.fullWidth ? width : ca.width; ca.height = document.fullscreenElement && ca.fullHeight ? screen.height : ca.fullHeight ? width // window.outerHeight : ca.height; ca.resW = ca.fullWidth ? Math.floor(ca.width/ca.pxd) : ca.width; ca.resH = ca.fullHeight ? Math.floor(ca.height/ca.pxd) : ca.height; // prepare wrapper (for gui + CA container) and generate gui const wrapper = html`

`; const gui = genGui(wrapper, ca); wrapper.prepend(gui); // with full height in fullscreen mode, the gui height must be subtracted from the CA height yield wrapper; if (document.fullscreenElement && ca.fullHeight) { ca.height -= gui.clientHeight; ca.resH = Math.floor(ca.height/ca.pxd); } // prepare container for canvas const container = html`

`; container.style.overflow = 'hidden'; container.style.position = 'relative'; container.style.background = 'white'; // overwrite default black on fullscreen container.style.cursor = 'all-scroll'; container.style.height = Math.ceil( (ca.fullHeight ? ca.height : ca.height*ca.pxd) + 1)+'px'; wrapper.append(container); // initialize the canvas const context = context2d_pxd(ca.resW, ca.resH, ca.pxd); context.canvas.style.imageRendering = 'pixelated'; context.globalCompositeOperation = 'copy'; context.canvas.style.transformOrigin = '0 0'; context.canvas.style.position = 'absolute'; context.canvas.style['z-index'] = '1'; container.append(context.canvas); const gridSVG = genGrid(ca.resW, ca.resH, ca.pxd); gridSVG.node().style.display = ca.grid ? 'block' : 'none'; container.append(gridSVG.node()); // zoom & pan on canvas let zk,zx,zy; function zoomed(transform, onlyCanvas=false) { [zk,zx,zy] = [transform.k, transform.x, transform.y]; context.canvas.style.transform = `matrix(${zk}, 0, 0, ${zk}, ${zx}, ${zy})`; if (!onlyCanvas) { gridSVG.select('g#hz').selectAll('line') .attr('transform', d => `translate(${transform.apply([0,d.y])}) scale(${zk},1)`); gridSVG.select('g#vt').selectAll('line') .attr('transform', d => `translate(${transform.apply([d.x,0])}) scale(1,${zk})`); } mutable zoomSave = [zk,zx,zy].slice(); } const zoom = d3.zoom() .scaleExtent([0.25, 4]) .translateExtent([[0, 0], [ca.resW*ca.pxd+1, ca.resH*ca.pxd+1]]) .on('zoom', () => zoomed(d3.event.transform) ); d3.select(container).call(zoom); // -------- // CA SETUP let startGen = 0; if (!ca.restart && mutable CA_DATA.length > 0) { // if there is something in the data store, get the part of it that fits the total height of the CA const savedContext = generationsToImageData(mutable CA_DATA, (mutable CA_DATA.length > ca.resH ? mutable CA_DATA.length - ca.resH : 0), mutable CA_DATA.length); context.putImageData(savedContext, 0,0); [zk,zx,zy] = mutable zoomSave.slice(); zoomed(d3.zoomTransform(context.canvas).translate(zx, zy).scale(zk)); startGen = Math.floor((savedContext.data.length/ca.resW)/4)-1; } else { // if this is the first call, initialize the first row const iniRow = context.createImageData(ca.resW, 1); switch (ca.ini.mode) { case 'ptn_cnt': // pattern (centered) fillCArow(iniRow, fillAlg.pattern,{pattern: ca.ini.pattern}); break; case 'rnd_all': // random (full) fillCArow(iniRow, fillAlg.random,{density: ca.ini.density}); break; } context.putImageData(iniRow, 0,0); zoomed(d3.zoomIdentity); zoomed(d3.zoomTransform(context.canvas).translate( ( (document.fullscreenElement ? screen.width : width)/2 - (ca.resW*ca.pxd)/2 ) , 0)); mutable restartCA = false; mutable CA_DATA = [ RGBAtoGeneration(context.getImageData(0, 0, ca.resW, 1), ca.resW) ]; } let row1 = context.getImageData(0, startGen, ca.resW, 1); let row2 = context.createImageData(ca.resW, 1); for (let j = startGen; true; ++j) { if (ca.paused) return yield wrapper; else { // Read from the first row to write to the second. for (let i = 0; i < ca.resW; ++i) { const rgba = imgDataIndices(i); row2.data[rgba[0]] = row2.data[rgba[1]] = row2.data[rgba[2]] = 0; // resets all pixels to black row2.data[rgba[3]] = 255; // makes sure pixels are opaque // For each cell, check its r, g and b values and get the corresponding 6 bit integers. const input = getCAInput(row1, i, vnum); // Match the combined input values with the form DNA (the unique rule combination identifying a form) const v = matchRule(formDNA_bin, input); // leave 0 as is and apply matched color value if (v >= 0) row2.data[rgba[valToRGBindex(v)]] = 255; } // Swap the rows. [row1, row2] = [row2, row1]; if (j < ca.resH) { // append rows until the canvas is full context.putImageData(row2, 0, j); } else { // if canvas is full, shift it up one row before appending the new row context.drawImage(context.canvas, 0, -1); context.putImageData(row2, 0, ca.resH - 1); } // save image data to restore when needed if (j > startGen) mutable CA_DATA = [...mutable CA_DATA, RGBAtoGeneration(context.getImageData(0, j < ca.resH-1 ? j : ca.resH-1, ca.resW, 1), ca.resW) ]; // if (j > 0) yield Promises.delay(ca.speed, wrapper); } } }3c:T869,md`From the book [uFORM iFORM](https://uformiform.info): \`\`\` - {L,E,R}{L,R,E} > "Mark1" [Sys_ini: pattern -> "ball"] - {L,E,R} > "StripesD100000" [Sys_ini: random] - {L,R,E} > "StripesL000100" [Sys_ini: random] - {L,R,E}{E,L,R} > "Mono000101" [Sys_ini: random] - {L,E,R}{E,R,L}{L,R,E}{E,L,R} > "Rhythm101101" [Sys_ini: random] - {L,E,R}{R,E,L}{L,R,E} > "NewSense" [Sys_ini: random] - ((L)R)((R)L) > "Slit" [Sys_ini: pattern -> "ball"]${ false ? ` > "5SlitRnd" [Sys_ini: pattern×5 (rnd. distr.) -> "ball"] > "10SlitRnd" [Sys_ini: pattern×10 (rnd. distr.) -> "ball"]` : ''} > "xor4vRnd" [Sys_ini: random] - LR > "or4v" [Sys_ini: pattern -> "ball"] - {alt|L,R}{alt|R,L} > "xorReId" [Sys_ini: pattern -> "ball"] > "xorReIdRnd" [Sys_ini: random] - ((L)ER)((E)L)((R)L) > "Rule4v30" [Sys_ini: pattern -> "ball"] - (((L)E)R)(((L)R)E)(((E)R)L) > "Rule4v111" [Sys_ini: pattern -> "ball"] - {L,E,R}{E,R,L}{L,R,E} > "Structure111Re" [Sys_ini: pattern -> "ball"] > "Co(mprehend)OneAnother" [Sys_ini: random] - ((E)R)((R)E)((R)L) > "Rule4v110" [Sys_ini: pattern -> "ball"] - (({L,E,R}{E,R,L}{L,R,E})(LER)) > "uniTuringReRnd" [Sys_ini: random] \`\`\` My little exhibition of SelFis with interesting patterns/evolutions: \`\`\` - (({b,a}{b,a}{c,b}{b,c})(abc)) "multiple personalities" - {a,b,a,d}(ab(c)) "pyramids on fertile land" - ({a,b,c,d}(abc)) [Sys_ini: random] "the painter" (try different densities) - ::0110011112333131 "i/m orthogonal meshwork" - ::2012330100131321 "sand and the ocean" - ::1013020302233303 "imaginary rosebush" - ::2230031010213010 [Sys_ini: pattern -> "ball inverted"] "Sierpiński's night life" - ::2310302310012021221111113232332212132133023103213021320233011023 "bushfire with cracks" - ::3320100002022221332233201302123231233213133211112020032032002222 "u/i threads on blue jeans" \`\`\` `3d:T54e,md`To work with *FORM logic* I used my [formform library](https://github.com/formsandlines/formform) to generate the value table of a given FORM, which is then converted to a quaternary number string (which I call [*formDNA*](https://observablehq.com/@formsandlines/the-dna-of-4-valued-forms)) that can be used with [bitwise operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) to extract the rules for the CA. As a decimal number, this is essentially a [Wolfram code](https://en.wikipedia.org/wiki/Wolfram_code) for *k=4* and *r = (v−1)/2* (where *k* is the number of possible states of a cell, *r* is the radius of the neighborhood for the rule application and *v* is the variable number of the FORM, although this may not include even numbers where the middle cell is excluded). For accuracy with bitwise operations on the formDNA codes (which can get incredibly large) I have used [*BigInt’s*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt), which may be a performance issue. In future releases, I intend to try something like [GPU.js](https://gpu.rocks/) or WebGL shaders to use parallel processing for optimization. I have yet to try this, so if you have any suggestions or do know how to implement a GPU-driven CA, I'd very much appreciate your help.`3e:T55c,guiCSS = html``3f:T52e,chartHistoryDistrTotal = (distribution, w, h) => { const data = d3.entries(distribution); const chart = {w: w, h: h}; const margin = {top: 5, right: 0, bottom: 14, left: 30}; const svg = d3.select(DOM.svg(chart.w,chart.h)).style('background','none'); const x = d3.scaleBand() .domain(['n','m','u','i']) .range([margin.left, chart.w - margin.right]) .padding(0.1) .round(true); const y = d3.scaleLinear() .domain([0, 1]) .range([chart.h - margin.bottom, margin.top]); const xAxis = g => g .attr('transform', `translate(0,${chart.h - margin.bottom})`) .call(d3.axisBottom(x).tickSizeInner(4).tickSizeOuter(0)); const yAxis = g => g .attr('transform', `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(3, '%').tickSizeInner(-chart.w).tickPadding(3)) .call(g => g.select('.domain').remove()); svg.append('g') .selectAll('g') .data(data) .join('rect') .attr('fill', d => fValData.filter(v => v.state === d.key)[0].hex) .attr('x', d => x(d.key)) .attr('y', d => y(d.value)) .attr('width', x.bandwidth()) .attr('height', d => y(0) - y(d.value)); svg.append('g') .call(xAxis); svg.append('g').lower() .call(yAxis).selectAll('.tick').select('line').attr('stroke','#ccc'); return svg; }40:T445,chartHistoryDistrPerGen = (historySums, w, h, seriesLimit) => { const series = d3.stack().keys(['m','u','i','n'])( historySums.length <= seriesLimit ? historySums : historySums.slice(historySums.length - seriesLimit, historySums.length) ); const chart = {w: w, h: h, maxdata: seriesLimit, res: CA_DATA[0].length}; const svg = d3.select(DOM.svg(chart.w,chart.h)).style('background','#eee'); const x = d3.scaleBand() .domain(d3.range(chart.maxdata)) .range([0,chart.w]) .paddingInner(chart.maxdata <= 300 ? 0.2 : 0); //.round( chart.maxdata <= 200 ? true : false ); const y = d3.scaleLinear() .domain([0, chart.res]) .range([chart.h, 0]); svg.append('g') .selectAll('g') .data(series) .join('g') .attr('fill', d => fValData.filter(v => v.state === d.key)[0].hex) .selectAll('rect') .data(d => d) .join('rect') //.attr('shape-rendering', 'crispEdges') .attr('x', (d,i) => x(i)) .attr('y', d => y(d[1])) .attr('width', x.bandwidth()) .attr('height',d => y(d[0]) - y(d[1])); return svg; }41:T1306,genGui = (wrapper, ca) => { // gui icons const icons = { paused: ca.paused ? `` : ``, restart: ``, grid: ca.grid ? `` : ``, fullscreen: !document.fullscreenElement ? `` : ``, } // gui HTML const gui = html`

${icons.paused} ${icons.restart}

Speed: ${toDec(ca.speed/1000,1)}s delay

${icons.grid} ${icons.fullscreen}

`; const ctr = { speed: ({ input: gui.querySelector('#ctr-speed input'), label: gui.querySelector('#ctr-speed span') }), fullscreen: gui.querySelector('#ctr-fullscreen'), paused: gui.querySelector('#ctr-paused'), restart: gui.querySelector('#ctr-restart'), grid: gui.querySelector('#ctr-grid'), }; // function to store values and reevaluate guiSave cell (that leads to an update on the CA cell) const saveVals = ( vals ) => { mutable guiSave = {...guiSave, ...vals}; }; // event listeners ctr.restart.addEventListener('click', e => { // restart CA e.preventDefault(); mutable restartCA = true; saveVals({}); }); ctr.paused.addEventListener('click', e => { // pause CA e.preventDefault(); saveVals({paused: !(mutable guiSave.paused) }); }); ctr.speed.input.oninput = () => { // update speed slider label ctr.speed.label.innerHTML = toDec(ctr.speed.input.value/1000,1); } ctr.speed.input.addEventListener('change', e => { // CA generation speed (actually delay) e.preventDefault(); saveVals({speed: parseInt(ctr.speed.input.value)}); }); ctr.grid.addEventListener('click', e => { // show/hide grid e.preventDefault(); saveVals({grid: !(mutable guiSave.grid) }); }); ctr.fullscreen.addEventListener('click', e => { // enter/exit fullscreen mode e.preventDefault(); const elem = wrapper.parentElement; if (!document.fullscreenElement) { elem.requestFullscreen().catch(err => { alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`); }).then(() => { mutable restartCA = true; // restart CA to refit to the new container size }); } else { document.exitFullscreen().then(() => { // wait for reflow from resize events so we always get the correct container size Promises.delay(1000, null).then(() => { saveVals({paused: !(mutable guiSave.paused) }); // pause to be sure nothing silly happens mutable restartCA = true; // restart CA to refit to the new container size }); }); } }); return gui; }42:Td8e,inputFactory = { const labelMargin = '0.2rem'; const buildWrapper = (id, title) => { return html`

${title ? html`

${title}

` : ''}

`; } const funcRange = ({id=DOM.uid().id, name, title, label, min, max, step, value, suffix='', format=(function(value) { return value; }), style}) => { try { if (!value) throw 'No input value specified!'; if (!name) throw 'No input name specified!'; const input = html``; const elem = html`

${label ? `

${label}

` : ''}

${input}

${format(value)}${suffix}

`; const wrapper = buildWrapper(id, title); wrapper.append(elem); input.oninput = e => elem.querySelector('.val').innerHTML = format(input.value); return wrapper; } catch (e) { throw new Error(e); }; }; const funcCheckbox = ({id=DOM.uid().id, title, name, description, checked=false}) => { try { if (!name) throw 'No input name specified!'; const input = html``; const elem = html`${input}${description ? ' '+description : ''}`; const wrapper = buildWrapper(id, title); wrapper.append(elem); return wrapper; } catch (e) { throw new Error(e); }; } const funcRadio = ({id=DOM.uid().id, title, label, name, options, description, style}) => { try { if (!name) throw 'No input name specified!'; if (!options) throw 'No input options specified!'; const inputs = options.map(radio => html`

${radio.label ? `${radio.label}` : ''}

`); const elem = html`

${label ? `

${label}

` : ''}

${inputs}

`; const wrapper = buildWrapper(id, title); wrapper.append(elem); return wrapper; } catch (e) { throw new Error(e); }; } const funcSelect = ({id=DOM.uid().id, title, name, options, description, style}) => { try { if (!name) throw 'No input name specified!'; if (!options) throw 'No input options specified!'; const inputs = options.map(option => html``); const elem = html``; const wrapper = buildWrapper(id, title); wrapper.append(elem); return wrapper; } catch (e) { throw new Error(e); }; } return { range: funcRange, checkbox: funcCheckbox, radio: funcRadio, select: funcSelect } }43:[] 30:{"id":"8a724842a2419975","slug":"1d-ca-for-4-valued-form-logic-selfis","title":"1D CA for 4-valued FORM logic (“SelFis”)","thumbnail":"ea7168358c2897a01ed8808331d32fe8820bd156fba7e7d3dde9084eb9fa7572","access_level":"public","create_time":"$D2019-09-05T08:33:29.804Z","update_time":"$D2021-10-17T09:35:20.547Z","view_time":null,"first_public_time":"$D2019-09-06T21:46:22.140Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":"starter_2024","bio":"I like to create and experiment with tools for thought and visualization with a special focus on the language system FORMWELT and its underlying 4-valued logic uFORM iFORM."},"version":7821,"publish_version":7821,"role":null,"authored":false,"authors":[{"type":"individual","id":"b20948974f4dc365","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":null,"bio":"I like to create and experiment with tools for thought and visualization with a special focus on the language system FORMWELT and its underlying 4-valued logic uFORM iFORM."}],"members":[{"type":"individual","id":"b20948974f4dc365","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"41a7dc676993b9ac","slug":"experiments","title":"Experiments","owner":{"id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann"}},"type":"notebook","body":{"titling":"auto","title":"1D CA for 4-valued FORM logic (“SelFis”)","cells":[{"id":0,"value":"md`# 1D CA for 4-valued FORM logic (“SelFis”)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2825,"value":"md`*last update: 17.10.2021*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1468,"value":"md`Made with the *[formform](https://github.com/formsandlines/formform)* library by Peter Hofmann. Based on the [1D Cellular Automaton](https://observablehq.com/@mbostock/1d-cellular-automaton) by [@mbostock](https://observablehq.com/@mbostock) to work with the 4-valued logical calculus introduced 2017 by Ralf Peyn in [uFORM iFORM](https://uformiform.info).*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2473,"value":"md`It is highly recommended that you use the browser *Chrome,* since some features (like *BigInt*) may not work in other browsers.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4452,"value":"md`---\n### How does it work?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"md`Enter a FORM below and click “render” to plot its SelFi. For reference of the notation syntax, visit my [FORM tricorder](https://formform.formsandlines.eu/tricorder/) (which is a helpful tool for FORM logic calculation and visualization) and click “Show explanations”.\n\nPlease note that your formula must have *single-letter variables* and can only consist of *up to 5 unique variables*.\n\nIf you want to manipulate the [*formDNA*](https://observablehq.com/@formsandlines/the-dna-of-4-valued-forms) of the FORM (you can also think of it as the *ruleset* of the CA), click on the button next to “Ruleset”. This will show you all possible input configurations for the FORM and you can change its output directly by clicking on the squares multiple times. You can also directly enter or randomly generate a *formDNA*/ruleset under *Input*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4457,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2383,"value":"formula_display = { \n const PADDING = {top: 5, bottom: 5, left: 5, right: 5};\n const TYPE = 'gsbhooks';\n const id = DOM.uid();\n \n const errorMsg = errors ? html`

${errors.map(e => `ERROR ${e.code}: ${e.expl}`).join('
')}` : html``;\n \n yield html`

${errorMsg}`;\n\n formform.graph.createGraph(TYPE,formula_pre,{parentId: id.id, padding: PADDING });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7591,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3862,"value":"{\n const vnum = totalVarsFromDNA(formDNA);\n const rule = BigInt(quatToBin(formDNA)).toString();\n const range = vnum%2 === 1 ? (vnum-1)/2 : undefined;\n return html`

formDNA (what is this?)

\n\n

3 ? 'overflow: scroll' : ''}\">\n ::${formDNA}
${vnum%2 === 1 ? `/ rule (Wolfram code): ${rule}, type: 1D, rulespace: k=4, r=${range}` : ''}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3859,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6531,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6176,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7208,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4732,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3505,"value":"md`Zoom in/out by using the mouse wheel or by double clicking (hold shift to zoom out). \nPan the view by clicking and dragging. It might help to hide the grid (right hand side of the control panel) when you're zooming out far.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"{\n if (errors) return md``;\n const vnum = totalVarsFromDNA(formDNA);\n const selectivity = 4n**4n**BigInt(vnum);\n const suffix = selectivity < 1000000n ? '' : '👀'\n return md`Possible rulesets/*formDNAs* for ${vnum} variables: ${ selectivity < 1000000n ? selectivity : bigIntToSciNotation(selectivity,2) } ${suffix}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2334,"value":"md`---\n### SelFi Collection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2339,"value":"md`If you find any bugs, have any suggestions or interesting SelFis/FORMs that I should add to the list, feel free to comment on this notebook or e-mail me: *peter.hofmann@formsandlines.eu*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2119,"value":"md`---\n### Technical notes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2111,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"md`---\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2693,"value":"md` \n#### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2617,"value":"mutable CA_DATA = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5220,"value":"historySummaries = CA_DATA.map(gen => summaryFromValArray(gen))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5224,"value":"historyDistributionTotal = distributionFromValSums(historySummaries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5289,"value":"historyDistributionVisible = distributionFromValSums( (historySummaries.length < view.height ? \n historySummaries : \n historySummaries.slice(historySummaries.length - view.height, historySummaries.length)) );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2559,"value":"mutable formula_pre = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3055,"value":"varOrder = ctr_varOrder.value.split('¶')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"form = {\n if (errors) return null;\n if (formTotalVars(ctr_perm.slice()) > 1) {\n //const order = varOrder.split(',');\n return reOrderVars(ctr_perm,varOrder);\n }\n return ctr_perm;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4081,"value":"mutable formDNA_pre = '3121121221211213311313311331311301231032230132101111111111111113' // hot-fixed, should be \"\" but cannot be generated on start-up anymore for some reason (17.10.2021)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3888,"value":"formDNA = ruleset","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3386,"value":"mutable zoomSave = [1,0,0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3524,"value":"mutable guiSave = ({speed: 0, paused: false, grid: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4640,"value":"fValData = [{val: 0, state: 'n', form: '', cname: 'black', rgba: [0,0,0,255], hex: '#000000'},\n {val: 1, state: 'm', form: '()', cname: 'blue', rgba: [0,0,255,255], hex: '#0000ff'},\n {val: 2, state: 'u', form: '{,}', cname: 'red', rgba: [255,0,0,255], hex: '#ff0000'},\n {val: 3, state: 'i', form: '({,})', cname: 'green', rgba: [0,255,0,255], hex: '#00ff00'},]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5827,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3540,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2697,"value":"md` \n#### Wires`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4085,"value":"{\n if (inputFormDNA) {\n mutable formDNA_pre = inputFormDNA;\n mutable restartCA = true;\n mutable guiSave.paused = false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3912,"value":"{\n if (!errors) {\n mutable formDNA_pre = Object.values(formform.form.calcAll(form)).reverse().join('');\n mutable restartCA = true;\n mutable guiSave.paused = false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2628,"value":"mutable restartCA = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3593,"value":"{\n ctr_varOrder\n mutable restartCA = true;\n mutable guiSave.paused = false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2649,"value":"{\n ini\n mutable restartCA = true;\n mutable guiSave.paused = false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2630,"value":"{\n view\n mutable restartCA = true;\n mutable guiSave.paused = false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2704,"value":"md`
\n#### Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5683,"value":"md`
\n##### . Statistics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5309,"value":"summaryFromValArray = valArr => ({ n: valArr.filter(d => d === 0).length, // maps values to summary (sums by val)\n m: valArr.filter(d => d === 1).length,\n u: valArr.filter(d => d === 2).length,\n i: valArr.filter(d => d === 3).length})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5293,"value":"distributionFromValSums = sums => [sums.reduce((acc,sum,i,arr) => ({ ...acc,\n/* gets distribution from an array of value summaries: [{n: sum_n , m: sum_m, u: sum_u, i: sum_i}, …]\nby dividing each per value accumulated sum by the total amount of all values */\n n: acc.n + sum.n,\n m: acc.m + sum.m,\n u: acc.u + sum.u,\n i: acc.i + sum.i, }) ,{m:0,n:0,u:0,i:0})]\n .map(sum => { const sumTotal = sum.n + sum.m + sum.u + sum.i;\n const f = n => n/sumTotal;\n return {n: f(sum.n), m: f(sum.m), u: f(sum.u), i: f(sum.i),} \n } )[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5331,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5485,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5604,"value":"md`
\n##### . Conversion FORM value <-> imageData/RGBA`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4638,"value":"rgbaToVal = rgba => fValData.filter(v => v.rgba.every((c,i) => c === rgba[i]))[0].val // [r,g,b,a] -> FORM value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4857,"value":"valToRGBA = val => fValData.filter(v => v.val === val)[0].rgba // FORM value -> [r,g,b,a]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"valToRGBindex = function(val) {\n /* translates the 4 values of FORM logic to RGB color indices */\n return val === 3 ? 1\n : val === 2 ? 0\n : val === 1 ? 2 : -1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4549,"value":"RGBAtoGenerations = (rgbaData,res) => {\n /* Maps rgba/imageData from the CA to an array of FORM values for each generation */\n \n const data = (rgbaData.data === undefined) ? rgbaData : rgbaData.data; // ImageData.data or just ImageData?\n const valLen = data.length/4; // r,g,b,a -> v\n const rowCount = valLen/res; // how many rows\n const rowLen = data.length/rowCount; // length of one row\n // slice up data to get all the rows\n const rowData = Array.from({length:rowCount}, (_,i) => data.slice(rowLen*i,rowLen*i + rowLen));\n // map row rgba to FORM values\n return rowData.map(r => imgDataToVals(r));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5070,"value":"RGBAtoGeneration = (rgbaData,res) => { \n /* Maps rgba/imageData of the CA to an array of FORM values for one generation */\n \n const data = (rgbaData.data === undefined) ? rgbaData : rgbaData.data; // ImageData.data or just ImageData?\n // map row rgba to FORM values\n return imgDataToVals(data);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4632,"value":"imgDataToVals = data => data.reduce((vals,pxCol,i) => {\n /* Maps an array of rgba/imgData to an array of FORM values */\n\tconst vIndex = Math.floor(i/4); // index of each value\n // add [r,g,b,a] to value array\n if (vals[vIndex] !== undefined) vals[vIndex] = [...vals[vIndex],pxCol]\n\telse vals = [...vals,[pxCol]];\n\treturn vals;\n},[]).map(rgba => rgbaToVal(rgba)) // map [r,g,b,a] to FORM value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4870,"value":"generationToRGBA = gen => gen.map(d => valToRGBA(d)).flat() // maps FORM value array to rgba/imgData array","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4955,"value":"generationsToImageData = (gens, begin=0, end=undefined) => {\n /* Maps (parts of) an array of FORM generations to an ImageData object to be used by the CA */\n if (end === undefined) end = gens.length; // without parameters, take all generations\n try {\n if (gens.length < 1) throw 'There must be at least one generation.';\n if (end-begin < 1) throw 'Last generation index must be greater than first generation index.';\n return new ImageData(Uint8ClampedArray.from(gens.slice(begin,end).map(gen => generationToRGBA(gen)).flat()), gens[0].length, end-begin);\n } catch(error) {\n throw new Error(error);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5608,"value":"md`
\n##### . CA data manipulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2902,"value":"imgDataIndices = i => [(i << 2) + 0, // bitshifts indices to handle rgba image data\n (i << 2) + 1, \n (i << 2) + 2, \n (i << 2) + 3];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"checkBounds = (res,idx,shift) => {\n /* Checks if a given index + shift would be out of boundaries and calculates a new index with respect to the ring structure of the CA */\n const newIdx = idx+shift\n return (newIdx < 0) ? res+newIdx\n : (newIdx > res-1) ? newIdx-res\n : newIdx;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2915,"value":"getCAInput = (row, centerIdx, inputLen) => { \n /* Gets binary value of each input cell (color) and combines them to a single value */\n let input = 0n;\n for (let i = 0; i < inputLen; i++) {\n const shift = mapToTrichotomy(i, inputLen);\n const cellIdx = checkBounds(row.width, centerIdx, shift);\n\n const quatExp = BigInt( ((inputLen-1)-i) *2);\n\n input |= BigInt(row.data[(cellIdx << 2) + 2]) ? 1n << quatExp\n : BigInt(row.data[(cellIdx << 2) + 0]) ? 2n << quatExp\n : BigInt(row.data[(cellIdx << 2) + 1]) ? 3n << quatExp : 0n;\n }\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"matchRule = function(formDNA, input) { // expects BigInt numbers to give exact results\n /* Matches a given form \"DNA\" in 64 quaternaries (128 bit) to a 3 quaternaries (6 bit) input from the CA.\n We can use the input to bitshift each of the logical results 1-3 to map to every possible rule combination.\n These numbers can then be used as a bitmask to extract the rule-result combination out of the form DNA.\n Note that:\n - The input value has to be doubled to deal with quaternary results (0=00, 1=01, 2=10, 3=11)\n - For results of 3=11 the bitmask will match also when only one of the 1s is found, \n which is why we have to specify that the number is also divisible by 3.\n */\n return (formDNA & (3n << input * 2n)) > 0n && (formDNA & (3n << input * 2n)) % 3n === 0n ? 3\n : (formDNA & (2n << input * 2n)) > 0n ? 2\n : (formDNA & (1n << input * 2n)) > 0n ? 1 : 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2927,"value":"fillCArow = (row, func, args={}) => {\n /* Fills each cell in a row with a color-value based on a function */\n for (let i = 0; i < row.width; ++i) {\n const rgba = imgDataIndices(i);\n row.data[rgba[3]] = 255; // makes sure pixels are opaque\n\n const fill = func(i,row.width,row, args);\n if (fill !== null) row.data[rgba[fill.i]] = fill.v;\n }\n return row;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2930,"value":"fillAlg = ({ \n /* Algorithms to fill a cell of a row (for initialization) */\n random: (cIdx,len,row, { density }) => {\n // fills random cells (by density parameter) with a random color/value\n const col = Math.floor(Math.random()*3);\n const val = (Math.random() < density) ? 255 : 0;\n return {i: col, v: val};\n },\n pattern: (cIdx,len,row, { pattern }) => {\n // fills cells based on a (centered) pattern\n const pWidth = len;\n const pLength = pattern.length;\n const pStart = Math.floor(pWidth/2 - pLength/2);\n const pEnd = pStart + pLength-1;\n\n if (cIdx >= pStart && cIdx <= pEnd) {\n const pIdx = cIdx-pStart;\n const val = (parseInt(pattern,4) & 0b11 << pIdx*2) >> pIdx*2;\n if (val >= 0) return {i: [valToRGBindex(val)], v: 255};\n }\n return null;\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5650,"value":"md`
\n##### . CA setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2620,"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 const context = canvas.getContext('2d');//, { alpha: false });\n //context.scale(dpi, dpi);\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3521,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3424,"value":"genGrid = (w,h,res) => {\n const svg = d3.create('svg')\n .attr('viewBox', [-0.5, -0.5, w*res, h*res])\n .attr('width', w*res).attr('height', h*res)\n .attr('overflow', 'visible')\n .style('stroke', '#333')\n .style('position', 'absolute').style('z-index',3).style('top',0).style('left',0);\n \n const hz = svg.append('g').attr('id','hz');\n hz.selectAll('line')\n .data( Array.from({length:h+1}, (_,i) => ({y: i*res, w: w*res}) ))\n .join('line')\n .attr('x1', 0).attr('y1', 0)\n .attr('x2', d => d.w).attr('y2', 0)\n .attr('transform', d => `translate(0,${d.y}) scale(1,1)`);\n const vt = svg.append('g').attr('id','vt');\n vt.selectAll('line')\n .data( Array.from({length:w+1}, (_,i) => ({x: i*res, h: h*res}) ))\n .join('line')\n .attr('x1', 0).attr('y1', 0)\n .attr('x2', 0).attr('y2', d => d.h)\n .attr('transform', d => `translate(${d.x},0) scale(1,1)`);\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6241,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"md`
\n#### Error handling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"errors = catchFormErrors(formulaInput)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"catchFormErrors = formStr => {\n const result = validateForm(formStr);\n if (result === true) return false;\n \n let errorList = [];\n if (result.errors & 0b0001) errorList = [...errorList, {code: 0b0001, expl: `Sorry, the FORM string can't have quotes for now.`}];\n if (result.errors & 0b0010) errorList = [...errorList, {code: 0b0010, expl: `Please check your bracket/paranthesis number and order.`}];\n if (result.errors & 0b0100) errorList = [...errorList, {code: 0b0100, expl: `The FORM must have variables.`}];\n if (result.errors & 0b1000) errorList = [...errorList, {code: 0b1000, expl: `Sorry, the CA can't handle more than 5 variables yet.`}];\n return errorList;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"validateForm = (formStr, errorCode=0) => {\n const error = !validationStack.every((func,i) => func(formStr) ? true : (errorCode |= 2**i, false));\n return error ? {errors: errorCode} : true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"validationStack = [\n noQuotes,\n checkAllBrackets,\n formHasVars,\n formStr => (formTotalVars(formStr) < 6),\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"noQuotes = formStr => {\n return !formStr.split('').some(char => char === '\"');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"checkAllBrackets = formStr => {\n return checkBracketMatching(formStr, '(', ')') && checkBracketMatching(formStr, '{', '}');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"md` \n#### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3153,"value":"import {form as formInput} from \"@mbostock/form-input@158\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"import {radio} from \"@jashkenas/inputs@2285\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4511,"value":"import {formTric} from '793523caac58b657@148'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4533,"value":"import {vColor, reOrderVars, formTotalVars, formHasVars, totalVarsFromDNA, intToFormDNA, permuteFormula, genVarPermutations} from '@formsandlines/formform-toolbox@298'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4502,"value":"import {bigInt, quatToBin, getRandomBigInt, bigIntToSciNotation} from '@formsandlines/bigint-toolbox@47'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4494,"value":"import {checkBracketMatching, permuteArray, permuteRev, mapToTrichotomy, toDec, pad, factorial, factoradicToDec} from '@formsandlines/js-toolbox@132'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3383,"value":"d3 = require('d3@5.x') // require('d3-zoom','d3-selection')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"formform = require('formform@0.8.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3331,"value":"md` \n\n*This project/notebook is a work in progress, be sure to check regularly for updates.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W43","stdlib":"1"}} 31:"$30:body"

Enter FORM:

Choose variable order (if not alphabetically):

Combine FORM permutations (optional)

Ruleset

Statistics (Note: slows down CA evolution)

${title}

formDNA (what is this?)