30:[] 2e:{"title":"4D Hypercube","cells":[{"id":0,"value":"md`# 4D Hypercube`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"composer.renderer.domElement","pinned":false,"hidden":false,"mode":"ojs"},{"id":1512,"value":"viewof animate = {\n const checkbox = html`\n\n`\n form.oninput = () => {\n form.value = { \n xw: +form.xw.value * Math.PI / 180,\n yw: +form.yw.value * Math.PI / 180,\n zw: +form.zw.value * Math.PI / 180\n };\n }\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"md`The visualization above shows the *projection* of a 4-dimensional [hypercube](https://en.wikipedia.org/wiki/Hypercube) into 3-dimensional space. A hypercube is an ${tex`n`}-dimensional analogue of a square (${tex`n`} = 2) and a cube (${tex`n`} = 3).\n\nThe 4-dimensional hypercube is called [tesseract](https://en.wikipedia.org/wiki/Tesseract). Just as the surface of the cube consists of six square faces, the hypersurface of the tesseract consists of eight cubical cells.\n\nAny hypercube can be constructed using ${tex`n^2`} vertices labeled with ${tex`n`}-bit binary numbers. The tesseract then has 16 vertices labeled from 0000 to 1111.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1183,"value":"vertices = Array.from({ length: 16 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1852,"value":"md`But wait, where are the actual labels? And what about the coordinates of the vertices? As it turns out the *index* of a vertex in the created array alone can represent both, the vertex label and its position (with the first vertex located at the coordinate origin) at the same time.\n\nThe *label* of a vertex is just the ${tex`n`}-bit binary representation of its index:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1876,"value":"labels = vertices.map((_, i) => (\"0000\" + i.toString(2)).slice(-4))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1882,"value":"md`Furthermore we can interpret each digit of these binary representations as a *coordinate* in ${tex`n`}-dimensional space. Here I've added an offset to center the tesseract at the coordinate origin.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1856,"value":"coordinates = labels.map((label => label.split(\"\").map(b => b - 0.5)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1797,"value":"md`To calculate the coordinates of the *rotated* vertices we're using rotation matrices. But keep in mind: this doesn't cover all possible [rotations in 4-dimensional space](https://en.wikipedia.org/wiki/Rotations_in_4-dimensional_Euclidean_space). With this approach we can only talk about rotating in the 𝑥𝑤-plane for example, which leaves the other *two* perpendicular dimensions (𝑦 and 𝑧) fixed.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"rotateXW = {\n const m = new THREE.Matrix4();\n return (angle) => m.set(\n Math.cos(angle), 0, 0, -Math.sin(angle),\n 0, 1, 0, 0,\n 0, 0, 1, 0,\n Math.sin(angle), 0, 0, Math.cos(angle)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"rotateYW = {\n const m = new THREE.Matrix4();\n return (angle) => m.set(\n 1, 0, 0, 0,\n 0, Math.cos(angle), 0, Math.sin(angle),\n 0, 0, 1, 0,\n 0, -Math.sin(angle), 0, Math.cos(angle)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"rotateZW = {\n const m = new THREE.Matrix4();\n return (angle) => m.set(\n 1, 0, 0, 0,\n 0, 1, 0, 0,\n 0, 0, Math.cos(angle), -Math.sin(angle),\n 0, 0, Math.sin(angle), Math.cos(angle)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1803,"value":"md`Finally we need to *project* the vertices into 3-dimensional space: Imagine a light source positioned on the 𝑤-axis at a given *distance* that points towards the center of the tesseract. The projected vertices then represent the *shadow* of a tesseract in 3-dimensional space.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"project = {\n const m = new THREE.Matrix4();\n const distance = 1.5;\n return (w) => m.set(\n 1 / (distance - w), 0, 0, 0,\n 0, 1 / (distance - w), 0, 0,\n 0, 0, 1 / (distance - w), 0,\n 0, 0, 0, 0\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1809,"value":"md`Putting this all together we can compute the rotated and projected coordinates of the tesseract.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"rotateAndProjectVertices = {\n const m = Array.from({length: 16}, () => new THREE.Vector4());\n return ({ xw, yw, zw }) => coordinates.map((v, i) => \n m[i].set(...v)\n .applyMatrix4(rotateZW(zw))\n .applyMatrix4(rotateYW(yw))\n .applyMatrix4(rotateXW(xw))\n .applyMatrix4(project(m[i].w))\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1498,"value":"projected = rotateAndProjectVertices(animate ? autoRotation : rotation);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1791,"value":"md`Now that we've that sorted out, we've to take care about the *edges* of a tesseract: two vertices are connected by an edge whenever the [Hamming distance](https://en.wikipedia.org/wiki/Hamming_distance) of their labels is one.\n\nIn [information theory](https://en.wikipedia.org/wiki/Information_theory), the Hamming distance between two strings of equal length is the number of positions at which the corresponding symbols are different. For example the two strings 0101 and 1011 have a distance of 3.\n\nAs we've seen above, the labels are just binary representation of a vertex's index, so we can operate on the raw numbers:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1292,"value":"hammingDistance = (x, y) => {\n let i = x ^ y;\n let distance = 0;\n while (i > 0) {\n if (i & 1) ++distance;\n i >>= 1;\n }\n return distance;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1995,"value":"md`This gives us the following edges for the tesseract:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1294,"value":"edges = {\n const edges = [];\n for (let i = 0; i < vertices.length; ++i) {\n for (let j = 0; j < vertices.length; ++j) {\n if (j <= i) continue; // use only one half of the matrix\n if (hammingDistance(i, j) === 1) {\n edges.push([i, j]);\n }\n }\n }\n return edges;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1971,"value":"md`And that's all we need to visualize a tesseract in 3-dimensional space with [three.js](https://threejs.org/). What's left to do is to update the rendered scene, whenever the coordinates of the projected vertices are changing. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"update = {\n for (let i = 0; i < edges.length; ++i) {\n const edge = scene.getObjectByName(`edge_${i}`);\n edge.geometry.vertices = [projected[edges[i][0]], projected[edges[i][1]]];\n edge.geometry.verticesNeedUpdate = true;\n }\n composer.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2010,"value":"md`*Inspired by: [The Hypercube: Projections and Slicing](https://www.youtube.com/watch?v=90olwwLdEYg).*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1509,"value":"autoRotation = {\n const rad = Math.PI / 180;\n const rotation = { xw: 0, yw: 0, zw: 0 };\n while(animate) {\n const t = Date.now();\n rotation.xw = t / 100 * rad;\n rotation.yw = t / 50 * rad;\n rotation.zw = t / 25 * rad;\n yield rotation;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"material = (color) => new THREE.LineBasicMaterial({\n color: color,\n linewidth: 3.3,\n opacity: 0.5,\n transparent: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"materials = [material(0x558833), material(0x902000), material(0x6688aa)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1393,"value":"getMaterial = (edge) => edge[1] & 8 ? (edge[0] & 8 ? materials[1] : materials[2]) : materials[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"scene = {\n const scene = new THREE.Scene();\n for (let i = 0; i < edges.length; ++i) {\n const edge = new THREE.Line(new THREE.Geometry(), getMaterial(edges[i]));\n edge.name = `edge_${i}`;\n scene.add(edge);\n }\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(1.2, 1.4, 2);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"composer = {\n const renderer = new THREE.WebGLRenderer();\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n controls.addEventListener(\"change\", () => composer.render());\n\n const composer = new THREE.EffectComposer(renderer);\n const ssaaRenderPass = new THREE.SSAARenderPass(scene, camera);\n const bloomPass = new THREE.UnrealBloomPass(\n new THREE.Vector2(width, height),\n 10,\n 0.5,\n 0\n );\n\n composer.addPass(ssaaRenderPass);\n composer.addPass(bloomPass);\n\n return composer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"THREE = {\n const THREE = (window.THREE =\n await require(\"three@0.105.1/build/three.min.js\"));\n await require(\"three@0.105.1/examples/js/controls/OrbitControls.js\").catch(\n () => {}\n );\n await require(\"three@0.105.1/examples/js/postprocessing/EffectComposer.js\").catch(\n () => {}\n );\n await require(\"three@0.105.1/examples/js/postprocessing/ShaderPass.js\").catch(\n () => {}\n );\n await require(\"three@0.105.1/examples/js/postprocessing/SSAARenderPass.js\").catch(\n () => {}\n );\n await require(\"three@0.105.1/examples/js/postprocessing/UnrealBloomPass.js\").catch(\n () => {}\n );\n await require(\"three@0.105.1/examples/js/shaders/LuminosityHighPassShader.js\").catch(\n () => {}\n );\n await require(\"three@0.105.1/examples/js/shaders/CopyShader.js\").catch(\n () => {}\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}