2f:T5e4,sixteencell = { const vertices = [] // coordinates are (+-1,0,0,0), (0,+-1,0,0), (0,0,+-1,0), (0,0,0,+-1) for (let x = 0; x <= 1; x++) { // I scalled the verticies so one can see the inside more clearly. vertices .push( [ 2*(-1+2*x), 0, 0, 0] ) vertices .push( [ 0, 2*(-1+2*x), 0, 0] ) vertices .push( [ 0, 0, 2*(-1+2*x), 0] ) vertices .push( [ 0, 0, 0, 2*(-1+2*x)] ) } const edges = [] // In this case, use dot product to choose the edges you want. So [1,0,0,0] * [0,1,0,0] = 0+0+0+0 = 0, and [1,0,0,0] * [-1,0,0,0] = -1+0+0+0 = -1. for (let i = 0; i < vertices.length; i++) { for (let j = 0; j < vertices.length; j++) { //The following conditions help ensure that all edges are properly oriented and connected to the verticies through both the intitial phase and the transformation phase. if (i == 0 && j == 5) { if (i < j) { const dot = dotproduct( vertices[i], vertices[j] ) if (dot == 0 ) edges .push( [i,j] ) } } else if (i == 0 || i == 2 || i == 3 || i == 5) { if (i < j) { const dot = dotproduct( vertices[i], vertices[j] ) if (dot == 0 ) edges .push( [j,i] ) } } else if (i == 1 || i == 4 || i == 6 || i == 7) { if (i < j) { const dot = dotproduct( vertices[i], vertices[j] ) if (dot == 0 ) edges .push( [i,j] ) } } } } return { vertices, edges } }30:T45a,function renderPolytope( { vertices, edges } ) // using object destructuring for the parameter { const group = new Three.Group(); const ball = new Three.Mesh( geometryball, ballMaterial ) vertices .map( vertex => { const corner = ball.clone() corner .position.set( ...vertex ); // using spread operator to get x, y, z group .add( corner ) } ) edges .map( edge => { const [i,j] = edge const v1 = vertices[ i ] const v2 = vertices[ j ] const measure = distance( v1, v2 ) const midpoint = v1 .map( (c,ind) => ( v1[ind] + v2[ind] ) / 2 ) // TODO: search up "javascript array.map" function (done) if (measure !== 0) { const geometryEdge = new Three.CylinderBufferGeometry( 0.2, 0.2, measure, 50 ) const cylinder = new Three.Mesh( geometryEdge, strutMaterial ) cylinder .position .set( ...midpoint ) // using spread operator to get x, y, z const array = vectorDifference( v1, v2 ) const [ax,az] = eulerangle(array) cylinder.rotateZ(az); cylinder.rotateX(ax); group .add( cylinder ) } } ) return group }31:[] 2d:{"title":"Rotating 4D Polytopes with Quaternions","cells":[{"id":0,"value":"md`# Rotating 4D Polytopes with Quaternions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1984,"value":"viewof dd2 = select({\n title: \"Polytope selection\",\n description: \"pick which polytope you'll like to work with\",\n options: [\"hypercube\", \"sixteencell\"],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1909,"value":"viewof dd1 = select({\n title: \"Quaternion 1\",\n description: \"Select which quaternion you would like to rotate from\",\n options: [\"[1,0,0,0]\", \"[1,1,0,0]\", \"[0,0,1,1]\", \"[1,1,1,0]\", \"[1,1,1,1]\"],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2092,"value":"viewof dd3 = select({\n title: \"Quaternion 2\",\n description: \"Select which quaternion you would like to rotate to\",\n options: [\"[1,0,0,0]\", \"[1,1,0,0]\", \"[0,0,1,1]\", \"[1,1,1,0]\", \"[1,1,1,1]\"],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof interpolationParam = slider( { min: 0, max: 1, value: 0,\n title: '4D Rotation',\n description: 'Slide to interpolate between two quaternions'\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"view = reusable3dCanvas( this, renderPolytope( projectedPolytope ),\n { background,\n camera: {\n aspect: 2,\n position: [ -5, -8, 6],\n rotateSpeed: 10\n } } )","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"viewof ballColor = color( { value: '#fd5d5d', title: 'Ball color' } )","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"viewof strutColor = color( { value: '#c1a0fd', title: 'Strut color' } )","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"md`## Summary and purpose:\n4d polytopes are an interesting subject. They don't exist in our world, but their 3d shadows do. So when we rotate a 4d poytope around a certain axis, we can see what happens by analyzing their 3d shadow. However, trying to visualize what happens to the 3d shadow can be very hard, and the mathematics that explain can be difficult to understand.\n\nSeeing that people are missing out on a cool concept, I decided to use observable to help visually represent what's going on. Specifically, what's happening to the 3d shadow of a 4d polytope when we rotate that very polytope around a certain axis in 4d space.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2065,"value":"md`# Appendix (Code)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"rotQuaternion = JSON.parse(dd1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1988,"value":"function confirmpolytope(value) {\nif (value == \"hypercube\")\n return hypercube\nelse if (value == \"sixteencell\")\n return sixteencell\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"polytope = confirmpolytope(dd2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"md`### Constant Objects\n\nThese cells define objects whose value is fixed over time.\nIn other words, the cell value changes only when you change the code itself.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"idQuaternion = [1,0,0,0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":919,"value":"hypercube = {\n const vertices = []\n for (let x = 0; x <= 1; x++) {\n for (let y = 0; y <= 1; y++) {\n for (let z = 0; z <= 1; z++) {\n for (let w = 0; w <= 1; w++) {\n vertices .push( [(-1+2*x), (-1+2*y), (-1+2*z), (-1+2*w)] )\n }\n }\n }\n }\n const edges = []\n for (let i = 0; i < vertices.length; i++) {\n for (let j = 0; j < vertices.length; j++) {\n const diff = vectorDifference( vertices[i], vertices[j] )\n if ( arraysEqual( diff, [2,0,0,0] )\n || arraysEqual( diff, [0,2,0,0] )\n || arraysEqual( diff, [0,0,2,0] )\n || arraysEqual( diff, [0,0,0,2] ) )\n edges .push( [i,j] )\n }\n }\n return { vertices, edges }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"md`### Pure Functions\n\nIn these cells, the only links to other cells are links to other pure functions. Also, these functions are more mathematical, for computational reasons.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"function project (arg) {\n return [arg[0], arg[1], arg[2]] // there is a specific way to return a \"slice\" of an array (not crucial)\n //[x,z,y] \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"function quaternionRotate (q1,q2) {\n const xn = (q1[3]*q2[0])-(q1[2]*q2[1])+(q1[1]*q2[2])+(q1[0]*q2[3])\n const yn = (q1[2]*q2[0])+(q1[3]*q2[1])-(q1[0]*q2[2])+(q1[1]*q2[3])\n const zn = (-q1[1]*q2[0])+(q1[0]*q2[1])+(q1[3]*q2[2])+(q1[2]*q2[3])\n const wn = (-q1[0]*q2[0])-(q1[1]*q2[1])-(q1[2]*q2[2])+(q1[3]*q2[3])\n return [xn,yn,zn,wn] \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"function interpolate (a,b,t) {\n return (a*(1-t) + b*t)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"function interpolateQuaternion(q1,q2,t) {\n return [ interpolate(q1[0], q2[0], t),\n interpolate(q1[1], q2[1], t),\n interpolate(q1[2], q2[2], t),\n interpolate(q1[3], q2[3], t) ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"rotatePolytope = function( polytope, rotation ) {\n const { vertices, edges } = polytope\n const rotatedVertices = vertices .map( v => quaternionRotate( v, rotation ) )\n return { vertices: rotatedVertices, edges }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"function projectPolytope( { vertices, edges } ) {\n const projectedVertices = vertices .map( v => project( v ) )\n return { vertices: projectedVertices, edges }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"function distance(v1,v2) {\n return Math.sqrt(\n (v1[0]-v2[0])*(v1[0]-v2[0]) +\n (v1[1]-v2[1])*(v1[1]-v2[1]) +\n (v1[2]-v2[2])*(v1[2]-v2[2]) )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"function vectorDifference (v1,v2) {\n return [v1[0]-v2[0], v1[1]-v2[1], v1[2]-v2[2], v1[3]-v2[3]]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"function arraysEqual(arr1, arr2) {\n for(var i = arr1.length; i--;) {\n if(arr1[i] !== arr2[i])\n return false;\n }\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"function dotproduct(arr1, arr2) {\n return (arr1[0]*arr2[0] + arr1[1]*arr2[1] + arr1[2]*arr2[2] + arr1[3]*arr2[3])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"md`### Reactive Objects (State)\n\nEach of these cells defines a reactive value -- the cell values change as upstream\ncells they depend on change. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"interpolatedRotation = interpolateQuaternion( rotQuaternion, JSON.parse( dd3 ), interpolationParam )","pinned":true,"hidden":false,"mode":"ojs"},{"id":907,"value":"rotatedPolytope = rotatePolytope( polytope, interpolatedRotation )","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"projectedPolytope = projectPolytope( rotatedPolytope )","pinned":true,"hidden":false,"mode":"ojs"},{"id":905,"value":"md`### Rendering\n\nIn this section, we put everything together to generate the simulation above.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"function eulerangle (ar) {\n const DistanceLength = Math.sqrt(ar[0]*ar[0]+ar[1]*ar[1]+ar[2]*ar[2])\n \n var SINangle = ar[2] \n if (ar[2] > 0 && ar[1] < 0) {\n SINangle = -SINangle\n }\n const ax = Math.asin(SINangle/DistanceLength)\n \n var TANangle = -ar[0]/ar[1]\n //the program doesn't accept the fraction when it's 0/0, hence the if statement\n if (ar[0] == 0 && ar[1] == 0) {\n TANangle = ar[0]\n }\n const az = Math.atan(TANangle)\n \n return [ax,az]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"geometryball = new Three.SphereBufferGeometry(0.4, 15, 20)","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"ballMaterial = new Three.MeshLambertMaterial( { color: ballColor } )","pinned":true,"hidden":false,"mode":"ojs"},{"id":901,"value":"strutMaterial = new Three.MeshLambertMaterial( { color: strutColor } )","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"background = new Three.Color( 'skyblue' ); \n// consider a black background for the future, just like in glowscript (not crucial)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`### External Code Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {reusable3dCanvas, THREE as Three} from '@vorth/reusable-three-js-canvas'","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"import {slider, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1581,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}