31:T469,md `### The Diamond Theorem: This is an implementation of the Diamond Therory by **Steven H. Culliane** you can read more details of the theorem [here](http://diamondtheorem.com/) > > Inscribe a white diamond in a black square. Split the resulting figure along its vertical and horizontal midlines into four quadrants so that each quadrant is a square divided by one of its diagonals into a black half and a white half. Call the resulting figure ${tex`D`}. > > Let ${tex`G`} be the group of 24 transformations of ${tex`D`} obtained by randomly permuting (without rotating) the four quadrants of ${tex`D`}. Let ${tex`S_{4}`} denote the symmetric group acting on four elements. Then > > **(1)** Every ${tex`G - image`} of ${tex`D`} has some ordinary or color-interchange symmetry (see below), > > **(2)** ${tex`G`} is an affine group generated by ${tex`S_{4}`} actions on parts of ${tex`D`}, and > > **(3)** Results **(1) and **(2)** generalize, through intermediate stages, to symmetry invariance under a group of approximately 1.3 trillion transformations generated by ${tex`S_{4}`} actions on parts of a 4x4x4 cube.` 32:T96b,function updateCell(size, type, ids) { console.log(size, type, ids); if (size === '2x2') { switch (type) { case 'r': { viewof twoBytwoCaseIntera.value = transpose( viewof twoBytwoCaseIntera.value ) .rows(ids[0], ids[1]) .result(); break; } case 'c': { viewof twoBytwoCaseIntera.value = transpose( viewof twoBytwoCaseIntera.value ) .columns(ids[0], ids[1]) .result(); break; } case 'q': { viewof twoBytwoCaseIntera.value = transpose( viewof twoBytwoCaseIntera.value ) .quadrants(ids[0], ids[1]) .result(); break; } } viewof twoBytwoCaseIntera.dispatchEvent(new CustomEvent('update')); } else if (size === '4x4a') { switch (type) { case 'r': { viewof fourByfourCaseInteractive.value = transpose( viewof fourByfourCaseInteractive.value ) .rows(ids[0], ids[1]) .result(); break; } case 'c': { viewof fourByfourCaseInteractive.value = transpose( viewof fourByfourCaseInteractive.value ) .columns(ids[0], ids[1]) .result(); break; } case 'q': { viewof fourByfourCaseInteractive.value = transpose( viewof fourByfourCaseInteractive.value ) .quadrants(ids[0], ids[1]) .result(); break; } } viewof fourByfourCaseInteractive.dispatchEvent(new CustomEvent('update')); } else if (size === '4x4b') { switch (type) { case 'r': { viewof fourByfourCaseFlipInteractive.value = transpose( viewof fourByfourCaseFlipInteractive.value ) .rows(ids[0], ids[1]) .result(); break; } case 'c': { viewof fourByfourCaseFlipInteractive.value = transpose( viewof fourByfourCaseFlipInteractive.value ) .columns(ids[0], ids[1]) .result(); break; } case 'q': { viewof fourByfourCaseFlipInteractive.value = transpose( viewof fourByfourCaseFlipInteractive.value ) .quadrants(ids[0], ids[1]) .result(); break; } } viewof fourByfourCaseFlipInteractive.dispatchEvent( new CustomEvent('update') ); } }33:T46d,function transposeQuadrants(sequence, quadFrom, quadTo){ // given a q0 - quadrant 0,1,2,3 // |0|1| // |2|3| //returns x,y initial coordinates // |00|10|20|30| // |01|11|21|31| // |02|12|22|32| // |03|13|23|33| [quadFrom, quadTo] = quadTo > quadFrom ? [quadFrom, quadTo]: [quadTo, quadFrom] const copysequence = sequence.slice() // clone sequence avoid mutations const seqBase = Math.sqrt(copysequence.length) const quadBase = ~~(seqBase/2) const tempRow = []; const x0q0 = (quadFrom % 2) * quadBase; // x position quadFrom const y0q0 = Math.floor((quadFrom % 4 ) / 2) * quadBase; //y position quadFrom const x0q1 = (quadTo % 2 ) * quadBase; // x position quadTo const y0q1 = Math.floor((quadTo % 4 ) / 2) * quadBase; //y position quadTo let c=0; for (let i = 0; i < quadBase; i++) { for (let j = 0; j < quadBase; j++) { const i0 = x0q0 + i + (y0q0+j)*2* quadBase; const i2 = x0q1 + i + (y0q1+j)*2* quadBase; tempRow[c] = copysequence[i0]; copysequence[i0] = copysequence[i2]; copysequence[i2] = tempRow[c]; c++; } } return copysequence }34:T795,function generateInputGrid(sequence, type, w, size, updateCall) { const seqLen = sequence.length; const baseSeq = ~~Math.sqrt(seqLen); const sideLen = w * seqLen; const svg = d3 .create("svg") .attr("width", sideLen) .attr("height", sideLen) .attr("viewBox", `0 0 ${sideLen} ${sideLen}`); const typeData = { c: { wh: [`${w}px`, `${sideLen}px`], xy: [(d, i) => i * w, (d, i) => 0] }, r: { wh: [`${sideLen}px`, `${w}px`], xy: [(d, i) => 0, (d, i) => i * w] }, q: { wh: [`${w * baseSeq}px`, `${w * baseSeq}px`], xy: [ (d, i) => ~~(i % baseSeq) * w * baseSeq, (d, i) => ~~((i % seqLen) / baseSeq) * w * baseSeq ] } }; svg .selectAll() .data(sequence) .enter() .append('rect') .attr('fill', 'white') .attr('stroke', 'black') .attr('stroke-width', '2') .attr('x', typeData[type].xy[0]) .attr('y', typeData[type].xy[1]) .attr('width', typeData[type].wh[0]) .attr('height', typeData[type].wh[1]) .on("mouseover", (d, i, nodes) => { const el = d3.select(nodes[i]); !el.classed('selected') ? el.attr('fill', 'lightgray') : null; }) .on("mouseout", (d, i, nodes) => { const el = d3.select(nodes[i]); !el.classed('selected') ? el.attr('fill', 'white') : null; }) .on("click", (d, i, nodes) => { d3.select(nodes[i]) .classed('selected', true) .attr('fill', 'gray') .attr('data-id', i); const selectedNodes = nodes.filter((node, j) => d3.select(node).classed('selected') ); if (selectedNodes.length >= 2) { const ids = selectedNodes.map(node => { d3.select(node) .classed('selected', false) .attr('fill', 'white'); return +d3.select(node).attr('data-id'); }); updateCall(size, type, ids); } }); return svg.node(); }35:T652,function drawQuadrants( sequences, sideLen = 100, type = 1, spacing = 0, _svg = null ) { // type 1 2x2 case // type 2 4x4 case const diamondWidth = sideLen * 2 * type; const diamondNum = sequences.length; const baseWidth = Math.min(diamondNum, ~~(width / (diamondWidth + spacing))); const baseHeight = (1 + ~~((diamondNum - 1) / baseWidth)) * (diamondWidth + spacing); let svg; if (!_svg) svg = d3 .select(DOM.svg(baseWidth * (diamondWidth + spacing), baseHeight)) .attr("style", "background-color:#ddd;"); else { svg = _svg; } const pos = d3.local(); const groups = svg .selectAll("g") .data(sequences) .join("g") .attr("transform", (d, i, nodes) => { const x = spacing / 2 + ~~(i % baseWidth) * (diamondWidth + spacing); const y = spacing / 2 + ~~((i % diamondNum) / baseWidth) * (diamondWidth + spacing); return `translate(${x} ${y})`; }); const polygons = groups .selectAll("polygon") .data(d => d.map(type => quadrantVertices(type, sideLen))) .join("polygon") .each((d, i, nodes) => { const seqLen = nodes.length; const seqBase = Math.sqrt(seqLen); const x = ~~(i % seqBase) * sideLen; const y = ~~((i % seqLen) / seqBase) * sideLen; pos.set(nodes[i], { x: x, y: y }); }) .attr("points", d => d.map(e => e.join(',')).join(' ')) .attr("style", "fill:black;stroke-width:1;stroke:black;") .attr( "transform", (d, i, nodes) => `translate(${pos.get(nodes[i]).x}, ${pos.get(nodes[i]).y})` ); return svg.node(); }36:[] 2f:{"title":"Diamond Theory: Symmetry in Binary Spaces","cells":[{"id":1518,"value":"md`# Diamond Theory: Symmetry in Binary Spaces\n\n##### by [Steven H. Cullinane](http://finitegeometry.org/sc/gen/dth/DiamondTheory.html)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2418,"value":"grid = {\n tick;\n const sideWidth = width / 60;\n const n = 60;\n const sequence = Array(n)\n .fill()\n .map(e =>\n transpose(fourByfourCaseFlip)\n .rows(randomInt(4), randomInt(4))\n .columns(randomInt(4), randomInt(4))\n .quadrants(randomInt(4), randomInt(4))\n .result()\n );\n return drawQuadrants(sequence, sideWidth, 2, sideWidth);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md `# The 2x2 case\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2919,"value":"viewof twoBytwoCaseIntera = {\n let el = html``;\n el.value = twoBytwoCase.slice();\n el.appendChild(html`${drawQuadrants([el.value], 150)}`);\n const update = () => {\n drawQuadrants([el.value], 150, 1, 0, d3.select(el).select('svg'));\n };\n el.addEventListener(\"update\", update);\n return update(), el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3010,"value":"md`#### Swap rows, colums, quadrants or reset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4086,"value":"{\n const resetBt = html``;\n resetBt.addEventListener('click', () => {\n viewof twoBytwoCaseIntera.value = twoBytwoCase.slice();\n viewof twoBytwoCaseIntera.dispatchEvent(new CustomEvent('update'));\n });\n return html`\n\n

\n${generateInputGrid([0, 1], 'r', 45, '2x2', updateCell)}\n${generateInputGrid([0, 1], 'c', 45, '2x2', updateCell)}\n${generateInputGrid([0, 1, 2, 3], 'q', 22.5, '2x2', updateCell)}\n

${resetBt}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"{\n tick;\n const rows = drawQuadrants(\n [\n transpose(twoBytwoCase)\n .rows(randomInt(2), randomInt(2))\n .result()\n ],\n 45\n );\n const cols = drawQuadrants(\n [\n transpose(twoBytwoCase)\n .columns(randomInt(2), randomInt(2))\n .result()\n ],\n 45\n );\n const quads = drawQuadrants(\n [\n transpose(twoBytwoCase)\n .quadrants(randomInt(4), randomInt(4))\n .result()\n ],\n 45\n );\n return html`\n\n

\n ${rows}\n

Rows

\n ${cols}\n

Columns

\n ${quads}\n

Quadrants

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1459,"value":"md`# The 4 x 4 Case \n\n> > In the 4x4 case, ${tex`D`} is a four-diamond figure (left, below) and ${tex`G`} is a group of **322,560** permutations generated by arbitrarily mixing random permutations of rows and of columns with random permutations of the four 2x2 quadrants. Every G-image of D (as at right, below) has some ordinary or color-interchange symmetry.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3342,"value":"viewof fourByfourCaseInteractive = {\n let el = html``;\n el.value = fourByfourCase.slice();\n el.appendChild(html`${drawQuadrants([el.value], 150)}`);\n const update = () => {\n drawQuadrants([el.value], 75, 2, 0, d3.select(el).select('svg'));\n };\n el.addEventListener(\"update\", update);\n return update(), el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3349,"value":"md`#### Swap rows, colums, quadrants or reset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4237,"value":"{\n const resetBt = html``;\n\n resetBt.onclick = () => {\n viewof fourByfourCaseInteractive.value = fourByfourCase.slice();\n viewof fourByfourCaseInteractive.dispatchEvent(new CustomEvent('update'));\n };\n\n return html`\n

\n${generateInputGrid([0, 1, 2, 3], 'r', 22.5, '4x4a', updateCell)}\n${generateInputGrid([0, 1, 2, 3], 'c', 22.5, '4x4a', updateCell)}\n${generateInputGrid([0, 1, 2, 3], 'q', 22.5, '4x4a', updateCell)}\n

${resetBt}

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3365,"value":"{\n const rows = drawQuadrants(\n [\n transpose(fourByfourCase)\n .rows(looper[0], looper[1])\n .result()\n ],\n 22.5,\n 2\n );\n const cols = drawQuadrants(\n [\n transpose(fourByfourCase)\n .columns(looper[0], looper[1])\n .result()\n ],\n 22.5,\n 2\n );\n const quads = drawQuadrants(\n [\n transpose(fourByfourCase)\n .quadrants(looper[0], looper[1])\n .result()\n ],\n 22.5,\n 2\n );\n return html`\n\n

\n ${rows}\n

Rows

\n ${cols}\n

Columns

\n ${quads}\n

Quadrants

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3461,"value":"md`### Start Variation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3382,"value":"viewof fourByfourCaseFlipInteractive = {\n let el = html``;\n el.value = fourByfourCaseFlip.slice();\n el.appendChild(html`${drawQuadrants([el.value], 150)}`);\n const update = () => {\n drawQuadrants([el.value], 75, 2, 0, d3.select(el).select('svg'));\n };\n el.addEventListener(\"update\", update);\n return update(), el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3392,"value":"md`#### Swap rows, colums, quadrants or reset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4381,"value":"{\n const resetBt = html``;\n\n resetBt.onclick = () => {\n viewof fourByfourCaseFlipInteractive.value = fourByfourCaseFlip.slice();\n viewof fourByfourCaseFlipInteractive.dispatchEvent(\n new CustomEvent('update')\n );\n };\n return html`\n

\n${generateInputGrid([0, 1, 2, 3], 'r', 22.5, '4x4b', updateCell)}\n${generateInputGrid([0, 1, 2, 3], 'c', 22.5, '4x4b', updateCell)}\n${generateInputGrid([0, 1, 2, 3], 'q', 22.5, '4x4b', updateCell)}\n

${resetBt}

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3384,"value":"{\n const rows = drawQuadrants(\n [\n transpose(fourByfourCaseFlip)\n .rows(looper[0], looper[1])\n .result()\n ],\n 22.5,\n 2\n );\n const cols = drawQuadrants(\n [\n transpose(fourByfourCaseFlip)\n .columns(looper[0], looper[1])\n .result()\n ],\n 22.5,\n 2\n );\n const quads = drawQuadrants(\n [\n transpose(fourByfourCaseFlip)\n .quadrants(looper[0], looper[1])\n .result()\n ],\n 22.5,\n 2\n );\n return html`\n\n

\n ${rows}\n

Rows

\n ${cols}\n

Columns

\n ${quads}\n

Quadrants

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1424,"value":"md`### Transposing Quadrants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3998,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2365,"value":"async function* sequenceLooper(){\n let i = -1;\n while(true){\n i = (i+1)%4\n await Promises.delay(500);\n yield [i , (i + 1)%4];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4406,"value":"looper = sequenceLooper()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2395,"value":"randomSequence = loopRandomSequence()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2431,"value":"function randomInt(len){\n return ~~(Math.random()*len)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"async function* loopRandomSequence(seqLen=4) {\n while(true){\n await Promises.delay(500)\n const seq = Array(seqLen).fill().map((d,i) => i)\n const r = randomPermuation(seq,[])\n yield r\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"function randomPermuation(sequence, acc){\n if (sequence.length <= 0) return acc;\n const randomStart = ~~(Math.random()*sequence.length);\n const seq = sequence.filter((e,i) => i !== randomStart)\n return randomPermuation(seq, acc.concat(sequence[randomStart]))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"function transposeRows(sequence, rowFrom, rowTo) {\n [rowFrom, rowTo] = rowTo > rowFrom ? [rowFrom, rowTo] : [rowTo, rowFrom];\n const copysequence = sequence.slice(); // clone sequence avoid mutations\n const seqBase = Math.sqrt(copysequence.length);\n const tempRow = [];\n if (rowFrom >= seqBase || rowTo >= seqBase) return copysequence;\n for (let x = 0; x < seqBase; x++) {\n //keep the values from row rowFrom on temp\n const i = x + rowFrom * seqBase;\n tempRow[x] = copysequence[i];\n // put on row rowFrom values from rowrowTor1\n const i2 = x + rowTo * seqBase;\n copysequence[i] = copysequence[i2];\n //put on row r1 values from r0\n copysequence[i2] = tempRow[x];\n }\n return copysequence;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"function transposeColums(sequence, colFrom, colTo){\n [colFrom, colTo] = colTo > colFrom ? [colFrom, colTo]: [colTo, colFrom] \n const copysequence = sequence.slice() // clone sequence avoid mutations\n const seqBase = Math.sqrt(copysequence.length)\n const tempRow = [];\n if(colFrom >= seqBase || colTo >= seqBase) return copysequence\n for (let y=0; y < seqBase; y++) {\n //keep the values from row rowFrom on temp\n const i = colFrom + y * seqBase;\n tempRow[y] = copysequence[i];\n // put on colFrom values from colTo\n const i2 = colTo + y * seqBase;\n copysequence[i] = copysequence[i2];\n //put on colTo values from colFrom to colTO\n copysequence[i2] = tempRow[y];\n }\n return copysequence\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"function transpose(sequence) {\n let _sequence = sequence.slice();\n\n const methods = {\n result() {\n return _sequence;\n },\n rows(rowFrom, rowTo) {\n _sequence = transposeRows(_sequence.slice(), rowFrom, rowTo);\n return this;\n },\n columns(colFrom, colTo) {\n _sequence = transposeColums(_sequence.slice(), colFrom, colTo);\n return this;\n },\n quadrants(quadFrom, quadTo) {\n _sequence = transposeQuadrants(_sequence.slice(), quadFrom, quadTo);\n return this;\n }\n };\n return methods;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3481,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"// 0 bottom right\n// 1 bottom left\n// 2 top right\n// 3 top left\ntwoBytwoCase = [0,1,\n 2,3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2487,"value":"fourByfourCaseFlip = [3, 0, 1, 2, 0, 3, 2, 1, 2, 1, 0, 3, 1, 2, 3, 0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"// 0 bottom right\n// 1 bottom left\n// 2 top right\n// 3 top left\nfourByfourCase = [0, 1, 0, 1, \n 2, 3, 2, 3, \n 0, 1, 0, 1, \n 2, 3, 2, 3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"quadrantVertices = (type, side) => ({\n 0: [[0, side],[side, side], [side,0]],\n 1: [[0,0],[side, side], [0,side]],\n 2: [[0,0],[side, side], [side,0]],\n 3: [[0,0],[0,side], [side,0]]\n})[type]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2624,"value":"tick = {\n while (true) {\n yield Promises.delay(1000);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}