31:[] 2f:{"title":"Graphene Moiré Firebase","cells":[{"id":0,"value":"md`# Graphene Moiré Firebase\n\nIt was [recently discovered](https://www.quantamagazine.org/how-twisted-graphene-became-the-big-thing-in-physics-20190430/) that ultrathin sheets of *graphene*—hexagonal lattices of carbon atoms—can be stacked and twisted to form superconductors. With each successive layer in the stack, a small twist of 1.1° around a common axis yields the conditions for superconductivity. \n\nI decided to make a notebook to explore this phenomenon. I wondered in particular about this \"magic angle\" of 1.1°. While this and other twist factors of the form:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1571,"value":"tex.block`\\theta_n = \\frac{11\\cdot2^n}{225}\\cdot360\\degree`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"md `yield periodic alignments of [some coordinates](https://en.wikipedia.org/wiki/Integer_triangle#Integer_triangles_with_a_120%C2%B0_angle) when n is an integer, continuous transformation of *n* is pretty captivating for *every* value of *θ*. Press *Replay* to cycle through twist factors from 0° to 60°, and use the sliders below to control the twist, height, intricacy, stroke-width, scale, and tapering of the honeycomb.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1723,"value":"canvas = {\n let ctx = DOM.context2d(width, height);\n\n ctx.globalAlpha = 1;\n ctx.fillStyle = userColors[5];\n ctx.lineWidth = strokeWidth;\n ctx.fillRect(0, 0, width, height);\n ctx.translate(width / 2, height / 2);\n\n ctx.globalAlpha = 0.75;\n let grid, p;\n for (let j = 0; j < layers; ++j) {\n grid = getHexGridPath(hexGrids[j], scale);\n p = new Path2D(grid);\n\n ctx.strokeStyle = userColors[j % 5];\n ctx.save();\n ctx.rotate((θ * (j + 1) * Math.PI) / 180);\n ctx.beginPath();\n ctx.stroke(p);\n // ctx.fill(p);\n\n ctx.restore();\n\n // grid = getHexGridCircles(hexGrids[j], scale)\n }\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"md`*θ* = ${θ}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1917,"value":"md`### Change these and it changes for everyone`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"// viewof θ = html``\nviewof θ = slider({\n min: 0,\n max: 60,\n step: 0.05,\n value: moire.theta,\n description: \"θ\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1940,"value":"// viewof θ = html``\nviewof spacing = slider({\n min: 0.2,\n max: 1.5,\n step: 0.01,\n value: moire.spacing,\n description: \"spacing\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"viewof layers = slider({\n min: 1,\n max: 12,\n step: 1,\n value: moire.layers,\n description: \"layers in the stack\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"viewof scale = slider({\n min: 0,\n max: 40,\n value: moire.scaleFactor,\n step: 2,\n description: \"scale factor\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1918,"value":"md`### These only change for you`","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"viewof strokeWidth = slider({\n min: 0,\n max: 8,\n step: .1,\n value: moire.strokeWidth,\n description: \"stroke-width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"viewof rings = slider({\n min: 0,\n max: 64,\n step: 2,\n value: 64,\n description: \"concentric rings of hexagons in the base layer\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1673,"value":"viewof taperingIntricacyFactor = slider({\n min: 6 / 12,\n max: 1,\n value: 1,\n step: 1 / 12,\n description: \"tapering intricacy factor\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1677,"value":"md `To see the magic angle at its best, set θ to 1.1, layers to 12, rings to 64, stroke-width to 0.2, scale to 4, and tapering factor to 1. It takes a lot of carbon atoms for these secret electron passageways to open up.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1870,"value":"viewof userColors = {\n let u = html`

User Colors:

Moire:

`;\n function onSnapshot(qs) {\n let docs = qs.docs.map(d => {\n let data = { id: d.id, ...d.data() };\n return data;\n });\n console.log(docs);\n // choice.value = docs[0].hex;\n\n u.value = docs[0];\n d3.select(u)\n .select(\"pre\")\n .text(JSON.stringify(docs[0], null, 2));\n u.dispatchEvent(new CustomEvent(\"input\", { bubbles: true }));\n }\n // whenever the users db is modified this callback should get called\n db.collection(\"moire\")\n // .get(\"background\")\n .onSnapshot(onSnapshot);\n return u;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1894,"value":"moire","pinned":true,"hidden":false,"mode":"ojs"},{"id":1898,"value":"setters = {\n if (moire.theta != θ)\n db.collection('moire')\n .doc(\"stream\")\n .update({ theta: θ });\n\n if (moire.layers != layers)\n db.collection('moire')\n .doc(\"stream\")\n .update({ layers: layers });\n\n if (moire.scaleFactor != scale)\n db.collection('moire')\n .doc(\"stream\")\n .update({ scaleFactor: scale });\n\n if (moire.spacing != spacing)\n db.collection('moire')\n .doc(\"stream\")\n .update({ spacing: spacing });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"// width = 600;","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"height = (width * 1080) / 1920","pinned":false,"hidden":false,"mode":"ojs"},{"id":1934,"value":"1080 / 1920","pinned":true,"hidden":false,"mode":"ojs"},{"id":1173,"value":"tau = 2*Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":1348,"value":"hexGrids = {\n var hexGrids = []\n for(let i = 0;i < layers; i++) {\n hexGrids.push(getUnitHexGrid(Math.floor(rings*Math.pow(taperingIntricacyFactor,i))))\n }\n return hexGrids\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"function getHexGridPath(vertices, scale) {\n var baseString = vertices\n .map(vertex => {\n const x = scale * vertex[0];\n const y = scale * vertex[1];\n const ring = vertex[2];\n const sextant = vertex[3];\n let circle = getPointsAroundACircle(\n getPointObject([x, y]),\n (scale / Math.sqrt(3)) * spacing,\n 6,\n Math.PI / 6\n );\n circle.push(circle[0]);\n // little trick to deduplicate edges in the lattice\n // if (ring % 2 === 1) {\n // circle = circle.filter(\n // (c, i) => i === (sextant + 1) % 6 || i === (sextant + 2) % 6\n // );\n // }\n const stringy = circle\n .map(coord => `L ${coord.x} ${coord.y}`)\n .join('')\n .substring(1);\n\n return 'M' + stringy;\n })\n .join('');\n return baseString;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1719,"value":"getHexGridCircles(hexGrids[0], scale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1715,"value":"function getHexGridCircles(vertices, scale) {\n var baseString = vertices.map(vertex => {\n const x = scale * vertex[0];\n const y = scale * vertex[1];\n const ring = vertex[2];\n const sextant = vertex[3];\n let circle = getPointsAroundACircle(\n getPointObject([x, y]),\n scale / Math.sqrt(3),\n 6,\n Math.PI / 6\n );\n circle.push(circle[0]);\n // little trick to deduplicate edges in the lattice\n if (ring % 2 === 1) {\n circle = circle.filter(\n (c, i) => i === (sextant + 1) % 6 || i === (sextant + 2) % 6\n );\n }\n return circle;\n });\n return baseString;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"function getUnitHexGrid(rings) {\n // const centeredHexNumber = 3 * rings * (rings - 1) + 1;\n var allTheCoords = [[0,0,0,0]];\n for(let i = 0; i < rings; i++) {\n const coords = [];\n const initialPosition = [i+1, 0, i+1,0];\n coords.push(initialPosition);\n for(let j = 0; j < ((i+1) * 6 - 1); j++) {\n var x = coords.slice(-1)[0][0] + 1 * Math.cos(2* Math.PI / 3 + Math.floor(j / (i+1)) * Math.PI / 3)\n var y = coords.slice(-1)[0][1] + 1 * Math.sin(2* Math.PI / 3 + Math.floor(j / (i+1)) * Math.PI / 3)\n var sextant = Math.floor((j+1) / (i+1));\n coords.push([x,y,i+1, sextant]);\n }\n allTheCoords = allTheCoords.concat(coords);\n }\n return allTheCoords;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"function getPointsAroundACircle(circleCenterObject, circleRadius, numOfPoints, phase) {\n var points = [];\n for(let i = 0; i < numOfPoints; i++ ) {\n var pointX = circleCenterObject.x + circleRadius * Math.cos(phase + i * 2 * Math.PI / numOfPoints);\n var pointY = circleCenterObject.y + circleRadius * Math.sin(phase + i * 2 * Math.PI / numOfPoints);\n var point = addPolarCoords(getPointObject([pointX, pointY]));\n points.push(point)\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"function getPointObject(pointArray) {\n var x = pointArray[0];\n var y = pointArray[1];\n var z = pointArray[2];\n return { x, y, z };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"function addPolarCoords(pointObject) {\n var x = pointObject.x;\n var y = pointObject.y;\n var r = Math.hypot(x, y);\n var theta = Math.atan2(y, x);\n return { x, y, r, theta };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1879,"value":"db = app.firestore()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1877,"value":"firebaseConfig = ({\n apiKey: \"AIzaSyCXVpNv-wY1r8LIfvZjFsnB-rxo7wK7Csc\",\n authDomain: \"cwf-ej-enj.firebaseapp.com\",\n databaseURL: \"https://cwf-ej-enj.firebaseio.com\",\n projectId: \"cwf-ej-enj\",\n storageBucket: \"cwf-ej-enj.appspot.com\",\n messagingSenderId: \"824648798292\",\n appId: \"1:824648798292:web:70197a68c08e6f923dddc1\",\n measurementId: \"G-0YF53DB757\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1875,"value":"app = {\n let app = firebase.initializeApp(firebaseConfig);\n firebase.analytics();\n firebase.auth().useDeviceLanguage();\n return app;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1872,"value":"firebase = require.alias({\n \"@firebase/app\": \"https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js\",\n \"@firebase/auth\": \"https://www.gstatic.com/firebasejs/7.2.3/firebase-auth.js\",\n \"@firebase/analytics\":\n \"https://www.gstatic.com/firebasejs/7.2.3/firebase-analytics.js\",\n \"@firebase/firestore\":\n \"https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js\"\n})(\n \"@firebase/app\",\n \"@firebase/auth\",\n \"@firebase/analytics\",\n \"@firebase/firestore\"\n)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}