2f:T1afc,chart = { const height = 500; let origin = [width / 2, height / 2]; let beta = 0, alpha = 0; let key = function(d){ return d.id; }, startAngle = Math.PI/4; let svgNode = d3.select(DOM.svg(width, height)); let svg = svgNode.call( d3.drag().on('drag', dragged) .on('start', dragStart) .on('end', dragEnd) ).append('g'); let mx, my, mouseX, mouseY; var grid3d = d33d._3d() .shape('PLANE') .origin(origin) .rotateY( startAngle) .rotateX(-startAngle) .scale(scale); let point3d = d33d._3d() .x(function(d){ return d.x; }) .y(function(d){ return d.y; }) .z(function(d){ return d.z; }) .origin(origin) .rotateY( startAngle) .rotateX(-startAngle) .scale(scale); function processData(data, tt) { /* ----------- GRID ----------- */ if (data.cut) { let cut = svg.selectAll('path.grid').data(data.cut, key); cut .enter() .append('path') .attr('class', '_3d grid') .merge(cut) .attr('stroke', 'black') .attr('stroke-width', function(_){ return grid.hideCut ? 0.0 : 0.3; }) .attr('fill', function(d){ return d.ccw ? 'lightgrey' : '#717171'; }) .attr('fill-opacity', function(_){ return grid.hideCut ? 0.0 : 0.7; }) .attr('d', grid3d.draw); cut.exit().remove(); } /* ----------- POINTS ----------- */ if (data.points) { var points = svg.selectAll('circle').data(data.points, key); points .enter() .append('circle') .attr('class', '_3d') .attr('opacity', 0) .attr('cx', posPointX) .attr('cy', posPointY) .merge(points) .transition().duration(tt) .attr('r', gridRadius) .attr('stroke', function(d){ return 'grey'; }) .attr('fill', gridColor) .attr('opacity', 1) .attr('cx', posPointX) .attr('cy', posPointY); points.on('click', function(d, i) { console.log("You clicked", d), i; }) points.exit().remove(); } d3.selectAll('._3d').sort(d33d._3d().sort); } function posPointX(d){ return d.projected.x; } function posPointY(d){ return d.projected.y; } function gridColor(d) { let color = "lightgreen"; switch(d.color) { case 0: color = "steelblue"; break; case 1: color = "white"; break; case 2: color = "red"; break; case 3: color = "orange"; break; default: break; } return color; } function gridRadius(d) { let radius = 7; switch(d.color) { case 0: case 1: radius = 2; break; case 2: case 3: radius = 5; break; default: break; } return radius; } function dragStart() { mx = d3.event.x; my = d3.event.y; } function dragged() { mouseX = mouseX || 0; mouseY = mouseY || 0; beta = (d3.event.x - mx + mouseX) * Math.PI / 230 ; alpha = (d3.event.y - my + mouseY) * Math.PI / 230 * (-1); let points = null if (centroids) points = point3d.rotateY(beta + startAngle).rotateX(alpha - startAngle)(centroids); let cut = null; if (grid.cut) cut = grid3d.rotateY(beta + startAngle).rotateX(alpha - startAngle)(grid.cut); processData({points: points, cut: cut}, 0); } function dragEnd() { mouseX = d3.event.x - mx + mouseX; mouseY = d3.event.y - my + mouseY; } function addPoint(x, y, z) { let c = getColor(x, y, z); let newP = { x: x, y: y, z: z, color: c, id: "point_" + mutable count++ }; centroids.push(newP); grid.dict.set([x, y, z].toString(), centroids.length); if (x > grid.maxX) grid.maxX = x; if (y > grid.maxY) grid.maxY = y; if (z > grid.maxZ) grid.maxZ = z; if (x < grid.minX) grid.minX = x; if (y < grid.minY) grid.minY = y; if (z < grid.minZ) grid.minZ = z; } function addPointO(obj) { let x = obj.x, y = obj.y, z = obj.z; addPoint(x, y, z); } function setGrid() { let gridBuilder = null; switch(gridType) { case "NestedCube": gridBuilder = nestedCube; break; case "RhombusWide": gridBuilder = rhombusWide; break; case "RhombusDeep": gridBuilder = rhombusDeep; break; case "3Hex" : gridBuilder = threeHex; break; case "Granatum" : gridBuilder = granatum; break; case "GrandMecon" : gridBuilder = grandMecon; break; default: console.log("Unsupported builder: " + gridType); debugger; return; } ids.clear(); let points = gridBuilder(nPointsShort, nPointsLong); //console.log(points); resetGrid(); for (let p of points) { addPointO(p); } // console.log(grid.dict); // console.log(centroids); } function resetGrid() { mutable count = 0; centroids.length = 0 grid.cut = [[]]; grid.dict.clear(); grid.maxX = grid.maxY = grid.maxZ = 0; grid.minX = grid.minY = grid.minZ = 0; } function colorPoints(points) { for (let p of points) { // set main orthogonal (f) to red if (p.x == p.y && p.y == p.z) p.color = 2; // set main diag (Z) to orange else if (p.x == 0 && p.y == 0 && p.z != 0) p.color = 3; } } function reCenterPoints(points, x, y, z) { colorPoints(points) for (let p of points) { p.x -= Math.floor(x/2); p.y -= Math.floor(y/2); p.z -= Math.floor(z/2); } } function reCenterCut(cut, x, y, z) { if (cut) { let c = cut[0] for (let i = 0; i < c.length; i++) { c[i][0] -= Math.floor(x/2) c[i][1] -= Math.floor(y/2) c[i][2] -= Math.floor(z/2) } } } function reCenterGrid() { reCenterCut(grid.cut, grid.maxX, grid.maxY, grid.maxZ); reCenterPoints(centroids, grid.maxX, grid.maxY, grid.maxZ); } function init() { setGrid() setCut() //reCenterGrid() let data = { points: point3d(centroids), cut: grid3d(grid.cut) } const transitionTime = 1000 processData(data, transitionTime) } d3.selectAll('button').on('click', init); init(); return svgNode.node(); }30:T460,function setCut() { let c = grid.cut[0] c.length = 0; switch(cutPos) { case "XYZ": c.push([grid.minX, grid.minY, grid.minZ]) c.push([grid.minX, grid.minY, grid.maxZ]) c.push([grid.maxX, grid.maxY, grid.maxZ]) c.push([grid.maxX, grid.maxY, grid.minZ]) break; case "XY": const midZ = (grid.maxZ - grid.minZ) / 2 c.push([grid.minX, grid.minY, midZ]) c.push([grid.minX, grid.maxY, midZ]) c.push([grid.maxX, grid.maxY, midZ]) c.push([grid.maxX, grid.minY, midZ]) break; case "YZ": const midX = (grid.maxX - grid.minX) / 2 c.push([midX, grid.maxY, grid.minZ]) c.push([midX, grid.maxY, grid.maxZ]) c.push([midX, grid.minY, grid.maxZ]) c.push([midX, grid.minY, grid.minZ]) break; case "None": case "ZX": const midY = (grid.maxY - grid.minY) / 2 c.push([grid.minX, midY, grid.minZ]) c.push([grid.minX, midY, grid.maxZ]) c.push([grid.maxX, midY, grid.maxZ]) c.push([grid.maxX, midY, grid.minZ]) break; } grid.hideCut = cutPos == "None" } 31:T6f5, // draws a rhombic dodecahedron, aligned with the x,y,z axis, centered on 0,0,0 function granatum(np, _) { let acc = []; // calculate seed: maximum z-value, x = y = 0 // Top of the granatum let seed = applyVecN({x:0, y:0, z:0}, vecs.z, np - 1); // Open top rhombi // draw descending edge // open vector: +x,-y,-z => J for (let i = 0; i < np; i++) { addToGrid(acc, seed); seed = applyVec(seed, vecs.J); } // 2nd leg of top rhombi // go "down" np cells // extend cell to fill rhombus face (increasing) // change vector // vector: +x, +y,-z => H // draw descending edge seed = acc[np - 1]; for (let i = 0; i < np; i++) { addToGrid(acc, seed); seed = applyVec(seed, vecs.H); } // 3rd leg of top rhombi // go up, parallel to first // vector: -x, +y, +z => j seed = acc[2 * np - 1]; for (let i = 0; i < np - 1; i++) { addToGrid(acc, seed); seed = applyVec(seed, vecs.j); } // rotate generated cells thrice to create first half of top rhombi // skip top cell (rotation returns same point) for (let i = 1; i < 3 * np; i++) { let cell = rotate90aroundZ(acc[i]); addToGrid(acc, cell); cell = rotate90aroundZ(cell); addToGrid(acc, cell); cell = rotate90aroundZ(cell); addToGrid(acc, cell); } // go "down" np cells // extend cell to fill rhombus face (decreasing) // rotate generated cells thrice to create second half of top rhombi // Project down z // for each cell, // add cells from (x,y,z) to (x, y, -z) let totalAdded = acc.length; for (let i = 0; i < totalAdded; i++) { acc = acc.concat(fillToOppositeZ(acc[i])); } // ID: // map x, y, z to a, b, c (A, B, C if negative) // return acc; }32:T51f,function grandMecon(np, npl) { let center = { x: 0, y: 0, z: 0 }; // SEU let first_seed = [applyVecN(center, dvecs.U, np - 1)]; let first_edge = applyVecRange(first_seed, dvecs.NED, 0, np - 1); let first_face = applyVecRange(first_edge, dvecs.SED, 0, np - 1); let first_cube = applyVecRange(first_face, dvecs.SWD, 0, np - 1); // NWU let second_seed = [applyVecN(center, dvecs.U, np - 1)]; let second_edge = applyVecRange(second_seed, dvecs.NED, 0, np - 1); let second_face = applyVecRange(second_edge, dvecs.NWD, 0, np - 1); let second_cube = applyVecRange(second_face, dvecs.SWD, 0, np - 1); // NED let third_seed = [applyVecN(center, dvecs.D, np - 1)]; let third_edge = applyVecRange(third_seed, dvecs.SEU, 0, np - 1); let third_face = applyVecRange(third_edge, dvecs.NEU, 0, np - 1); let third_cube = applyVecRange(third_face, dvecs.NWU, 0, np - 1); // SWD let fourth_seed = [applyVecN(center, dvecs.D, np - 1)]; let fourth_edge = applyVecRange(fourth_seed, dvecs.SEU, 0, np - 1); let fourth_face = applyVecRange(fourth_edge, dvecs.NWU, 0, np - 1); let fourth_cube = applyVecRange(fourth_face, dvecs.SWU, 0, np - 1); let acc1 = mergeArrays(first_cube, second_cube); let acc2 = mergeArrays(third_cube, fourth_cube); return mergeArrays(acc1, acc2); } 33:[] 2d:{"title":"Lattice Builder","cells":[{"id":0,"value":"md`# Lattice Builder`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`## Body-Centered Cubic (BCC) Lattices`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof gridType = radio({\n title: 'Grid Layout',\n options: [\n { label: 'Nested Cube', value: 'NestedCube' }, \n { label: 'Wide Rhombus', value: 'RhombusWide' },\n { label: 'Deep Rhombus', value: 'RhombusDeep' },\n { label: 'Rhombic Cube', value: '3Hex' },\n // { label: 'Rhombic Icosahedron', value: 'Granatum' },\n { label: 'Grand Mecon', value: 'GrandMecon' },\n ],\n value: 'GrandMecon'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"viewof cutPos = radio({\n title: 'Cut Position',\n options: [\n { label: 'XYZ', value: 'XYZ' }, \n { label: 'XY', value: 'XY' }, \n { label: 'YZ', value: 'YZ' },\n { label: 'ZX', value: 'ZX' },\n { label: 'None', value: 'None' }\n ],\n value: 'None'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"viewof scale = slider({\n min: 10, \n max: 30, \n step: 1, \n value: 20, \n title: \"Scale\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"viewof nPointsShort = slider({\n min: 2, \n max: 8, \n step: 1, \n value: 4, \n title: \"#Points (short side)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"viewof nPointsLong = slider({\n min: nPointsShort, \n max: nPointsShort * 4, \n step: 2, \n value: 4, \n title: \"#Points (long side)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`Count is ${centroids.length}, X [${grid.minX} | ${grid.maxX}], Y [${grid.minY} | ${grid.maxY}], Z [${grid.minZ} | ${grid.maxZ}]`","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"Count is ${count}, X [${grid.minX} | ${grid.maxX}], Y [${grid.minY} | ${grid.maxY}], Z [${grid.minZ} | ${grid.maxZ}]","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"// TODO: start with dict\n// remove shift that turned all coords into positive numbers (maybe)\n// capture and save algebraic coordinates\n// { \n// let data = serialize(centroids);\n// DOM.download(data, \"bcc.csv\", \"Download CSV\")\n// }\n// DOM.download(dataToDownload, gridType + \".csv\", \"Download CSV\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"// dataToDownload = serialize(centroids)","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"// How many Connectagons we need to build this grid?\nfunction getFaces(axes) {\n \n // all axes = copy vecs, then copy, negate and merge\n // classify face based on vector - use x parity\n // add face name appropriate parity set\n \n let keys = grid.dict.keys()\n let faces = new Set();\n for (let k of keys) { // each cell\n for (let v of axes) { // each vector\n let root = k, suffix = v.name\n let neighbor = grid.getNeighborKey(k, v)\n if (neighbor) {\n if (neighbor < k) {\n root = neighbor\n suffix = vecs.antipode(v).name\n }\n }\n faces.add(root + suffix)\n }\n }\n return faces\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"vecs = ({\n // diagonals\n x: [2, 0, 0],\n y: [0, 2, 0],\n z: [0, 0, 2],\n X: [-2, 0, 0],\n Y: [ 0, -2, 0],\n Z: [ 0, 0, -2],\n // orthogonals\n f: [ 1, 1, 1],\n g: [ 1, -1, 1],\n h: [-1, -1, 1],\n j: [-1, 1, 1],\n F: [-1, -1, -1],\n G: [-1, 1, -1],\n H: [ 1, 1, -1],\n J: [ 1, -1, -1] \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"dvecs = ({\n // diagonals\n N: [2, 0, 0],\n E: [0, 2, 0],\n U: [0, 0, 2],\n S: [-2, 0, 0],\n W: [ 0, -2, 0],\n D: [ 0, 0, -2],\n // orthogonals\n NEU: [ 1, 1, 1],\n NWU: [ 1, -1, 1],\n SWU: [-1, -1, 1],\n SEU: [-1, 1, 1],\n SWD: [-1, -1, -1],\n SED: [-1, 1, -1],\n NED: [ 1, 1, -1],\n NWD: [ 1, -1, -1] \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"centroids = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"mutable count = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"grid = ({\n cnt: 0,\n maxX: 0,\n maxY: 0,\n maxZ: 0,\n minX: 0,\n minY: 0,\n minZ: 0,\n cut: [[]],\n dict: new Map()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"ids = new Set()","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"function rotate90aroundZ(o) {\n return { \n x: -o.y,\n y: o.x,\n z: o.z\n } \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"function fillToOppositeZ(o) {\n let temp = [];\n if (o.z) {\n addToGrid(temp,{ \n x: o.x,\n y: o.y,\n z: -o.z\n });\n }\n \n // for (let i = 0; i < 2 * o.z - 1; i += 2) {\n // temp.push({ \n // x: o.x,\n // y: o.y,\n // z: o.z - i\n // });\n // temp.push({ \n // x: o.x,\n // y: o.y,\n // z: -(o.z - i)\n // });\n // } \n return temp\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"function mergeArrays(array1, array2) {\n //let merged = [...new Set([...array1,...array2])];\n const merged = [\n ...new Set( [...array1,...array2].map((o) => JSON.stringify(o))),\n].map((string) => JSON.parse(string))\n \n console.log(\"mergeArrays\", array1.length, array2.length, merged.length); \n return merged;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"function threeHex(np, npl) { \n let acc = [];\n // seed has to account for vec having negative components \n for (let i = 0, seed = {x:np, y:np, z:0}; i < np; i++) { \n acc.push(seed);\n seed = applyVec(seed, vecs.j);\n }\n for (let i = 0, sz = acc.length; i < sz; i++) {\n let seed = acc[i];\n for (let j = 0; j < np - 1; j++) { \n let newP = applyVec(seed, vecs.g);\n acc.push(newP);\n seed = newP;\n }\n }\n for (let i = 0, sz = acc.length; i < sz; i++) {\n let seed = acc[i];\n for (let j = 0; j < (npl - 1); j++) { \n let newP = applyVec(seed, vecs.f);\n acc.push(newP);\n seed = newP;\n }\n } \n return acc;\n } ","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":" function pushPoint(acc, x, y, z) {\n acc.push({x: x, y: y, z: z});\n }\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"\n function rhombusDeep(np) {\n let acc = [];\n let x, y, z, cx, cy, cz;\n for (z = 0, cz = 0; cz < np; cz++, z += 2) {\n for (x = z, cx = 0; cx < np; cx++, x += 2) { \n for (y = x, cy = 0; cy < np; cy++, y += 2) { \n pushPoint(acc, x, y, z);\n pushPoint(acc, x + 1, y + 1, z + 1);\n }\n }\n } \n return acc;\n } \n \n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":" function rhombusWide(np) {\n let x, y, z, cx, cy, cz;\n let acc = [];\n for (z = 0, cz = 0; cz < np; cz++, z += 2) {\n for (x = z, cx = 0; cx < np; cx++, x += 2) { \n for (y = z, cy = 0; cy < np; cy++, y += 2) { \n pushPoint(acc, x, y, z);\n pushPoint(acc, x + 1, y + 1, z + 1);\n }\n }\n } \n return acc;\n } \n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":" \n function nestedCube(np) {\n let acc = [];\n for (let z = 0, cz = 0; cz < np; cz++, z += 2) {\n for (let x = 0, cx = 0; cx < np; cx++, x += 2) { \n for (let y = 0, cy = 0; cy < np; cy++, y += 2) { \n pushPoint(acc, x, y, z);\n pushPoint(acc, x + 1, y + 1, z + 1);\n }\n }\n } \n return acc;\n } \n \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":" function applyVec(o, vec) {\n return { \n x:o.x + vec[0],\n y:o.y + vec[1],\n z:o.z + vec[2]\n }\n }\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"function applyVecN(o, vec, n) {\n return { \n x:o.x + n * vec[0],\n y:o.y + n * vec[1],\n z:o.z + n * vec[2]\n }\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"function applyVecRange(ar, vec, begin, end) {\n let acc = [];\n ar.forEach((el) => {\n for (let i = begin; i <= end; i++) {\n acc.push(applyVecN(el, vec, i))\n } \n });\n return acc;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"function addToGrid(acc, cell) {\n function charFromIndex(idx) {\n let c = \"*\";\n if (idx > 0) {\n c = String.fromCharCode(\"a\".charCodeAt(0) + idx)\n } else if (idx < 0) {\n c = String.fromCharCode(\"A\".charCodeAt(0) - idx)\n }\n return c\n }\n \n cell.id = charFromIndex(cell.x) + charFromIndex(cell.y) + charFromIndex(cell.z)\n if (ids.has(cell.id))\n console.log(\"Repeated!!! \" + cell.id)\n else { \n ids.add(cell.id);\n //console.log(cell.id);\n }\n acc.push(cell);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"function getColor(x, y, z) {\n let c = -1;\n /* if (x % 2) {\n if (y % 2 && z % 2) {\n c = 0\n }\n } else {\n if (!(y % 2) && !(z % 2)) {\n c = 1\n }\n } */\n c = (Math.abs(x) + Math.abs(y) + Math.abs(z)) % 2;\n //console.log(x, y, z, c);\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d33d = require(\"https://unpkg.com/d3-3d@1.0.0/build/d3-3d.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"md`## Imports`","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"import {radio, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"// copied from @palewire/saving-csv to solve json2csv import issue\nfunction serialize (data) {\n let parser = new json2csv.Parser();\n let csv = parser.parse(data);\n return new Blob([csv], {type: \"text/csv\"}) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"// fixes import issue with json2csv, used by serialize (above)\njson2csv = require(\"json2csv@5.0.7/dist/json2csv.umd.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require('d3@5.0.0')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}