2c:null 2d:["$","title",null,{"children":"Dihedral Order 8 cross Cyclic 2 UI | Lao | Observable"}] 32:T6989,D8xC2 ={ // SET UP ------------------------------------ // scene const width = 700 //sets to max width Math.min(window.innerWidth,2000) const height = width * 9.3/16 //sets height based on aspect ratio const scene = new THREE.Scene() // camera const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000) // field of view, aspect ratio, near, far plane camera.position.set( 0, 0, 34.25 ) // camera is +40 in z direction camera.lookAt( 0, 0, 0 ) // camera is looking at origin // renderer const renderer = new THREE.WebGLRenderer({antialias: true}) // most powerful all purpose renderer, with smooth edges renderer.setClearColor("#ffffff") // background color, alternate light grey hex is "#f6f6f6" renderer.setSize(width, height) // set window size yield renderer.domElement // camera controls const controls = new THREE.OrbitControls(camera, renderer.domElement); // allows mouse to move camera controls.enableZoom = false // disables zoom controls.enablePan = false // disables pan controls.enableRotate = false // determines if camera can rotate controls.rotateSpeed = .15 // makes camera orbit less sensitive to mouse drag if it can rotate //controls.minAzimuthAngle = -Math.PI*1/4 // limits drag right ccw rotation //controls.maxAzimuthAngle = Math.PI*1/4 // limits drag left cw rotation controls.minPolarAngle = Math.PI*3/8 // limits birds eye angle controls.maxPolarAngle = Math.PI*5/8 // limits ground angle /*/ resizes window for fullscreen window.addEventListener('resize', () =>{ renderer.setSize(Math.min(window.innerWidth,2000), Math.min(window.innerWidth,2000)/16*9 ) //resets window size camera.aspect = 16/9 camera.updateProjectionMatrix() })*/ /// MATERIALs --------------------------------- const matWhite = new THREE.MeshLambertMaterial({color: 0xFFFFFF, side: THREE.DoubleSide, transparent: true}) const matGrey = new THREE.MeshLambertMaterial({color: 0xBBBBBB, side: THREE.DoubleSide, transparent: true}) const matSelection = new THREE.MeshLambertMaterial({color: 0xFBD03B, side: THREE.DoubleSide, transparent: true,}) const matBlack = new THREE.MeshLambertMaterial({color: 0x000000, side: THREE.DoubleSide, transparent: true}) const matTrans = new THREE.MeshLambertMaterial({color: 0x000000, side: THREE.DoubleSide, transparent: true, opacity:0, depthWrite: false}) const colorJungian = [0xA3C647, 0x57BA8F, 0x60A7BD, 0x877BD4, 0xB06CCF, 0xD5798C, 0xE09351, 0xCEC438, 0xA3C647, 0x57BA8F, 0x60A7BD, 0x877BD4, 0xB06CCF, 0xD5798C, 0xE09351, 0xCEC438] const colorSymClass = [0xDDDDDD, 0x87E500, 0xEE2A7B, 0x87E500, 0x888888, 0x87E500, 0xEE2A7B, 0x87E500, 0x29ABE2, 0x87E500, 0xEE2A7B, 0x87E500, 0x29ABE2, 0x87E500, 0xEE2A7B, 0x87E500] const matDashedLine = new THREE.LineDashedMaterial( {color: 0x000000, dashSize: 1, gapSize: .5, transparent: true, opacity:0} ); const loader = new THREE.TextureLoader(); const matIntuitive = new THREE.MeshBasicMaterial({map: new THREE.CanvasTexture(label[0]), transparent: true, depthWrite: false}); const matLogical = new THREE.MeshBasicMaterial({map: new THREE.CanvasTexture(label[1]), transparent: true, depthWrite: false}); const matSensation = new THREE.MeshBasicMaterial({map: new THREE.CanvasTexture(label[2]), transparent: true, depthWrite: false}); const matEthical = new THREE.MeshBasicMaterial({map: new THREE.CanvasTexture(label[3]), transparent: true, depthWrite: false}); const matExtravert = new THREE.MeshBasicMaterial({map: new THREE.CanvasTexture(label[4]), transparent: true, depthWrite: false}) const matIntrovert = new THREE.MeshBasicMaterial({map: new THREE.CanvasTexture(label[5]), transparent: true, depthWrite: false}); const matLabels = [matIntuitive, matLogical, matSensation, matEthical, matExtravert, matIntrovert] // GEOMETRY ------------------------------------ const b = 1 // border size const r = 9 // wedge radius const e = 1.5 // extension radius outside border for action that rotate both the square and domino // helper objects const helperOpacity = 0.0 // visibility of helpers const helper4 = new THREE.Mesh( new THREE.BoxGeometry( 2,2,2 ) , new THREE.MeshLambertMaterial( { color: 0x000000, wireframe: true, opacity: helperOpacity,transparent: true, depthWrite: false })) const helper3 = new THREE.Mesh( new THREE.BoxGeometry( 4, 4, 4 ) , new THREE.MeshLambertMaterial( { color: 0xff0000, wireframe: true, opacity: helperOpacity,transparent: true, depthWrite: false })) helper3.rotation.set(0,0,-Math.PI/4) const helper2 = new THREE.Mesh( new THREE.BoxGeometry( 6, 6, 6 ) , new THREE.MeshLambertMaterial( { color: 0x00ff00, wireframe: true, opacity: helperOpacity,transparent: true, depthWrite: false })) const helper1 = new THREE.Mesh( new THREE.BoxGeometry( 8, 8, 8 ) , new THREE.MeshLambertMaterial( { color: 0x0000ff, wireframe: true, opacity: helperOpacity,transparent: true, depthWrite: false })) helper1.rotation.set(0,0,Math.PI/4) const helperRoot = new THREE.Mesh( new THREE.BoxGeometry( 2*(r+b), 2*(r+b), 4 ) , new THREE.MeshLambertMaterial( { color: 0x0000ff, wireframe: true, opacity: helperOpacity,transparent: true, depthWrite: false })) const helperDomino = new THREE.Mesh( new THREE.BoxGeometry( 2,2,2 ) , new THREE.MeshLambertMaterial( { color: 0x000000, wireframe: true, opacity: helperOpacity,transparent: true, depthWrite: false })) const helperDominoRoot = new THREE.Mesh( new THREE.BoxGeometry( 2,2,2 ) , new THREE.MeshLambertMaterial( { color: 0x000000, wireframe: true, opacity: helperOpacity,transparent: true, depthWrite: false })) const helperSelect = new THREE.Mesh( new THREE.BoxGeometry( 10,10,10 ) , new THREE.MeshLambertMaterial( { color: 0x000000, wireframe: true, opacity: helperOpacity,transparent: true, depthWrite: false })) // lines const geoDiagLine = new THREE.BufferGeometry().setFromPoints( [new THREE.Vector3(r+2*b,r+2*b,0), new THREE.Vector3(-r-2*b,-r-2*b,0 )] ); const lineDiag1 = new THREE.Line(geoDiagLine, matDashedLine.clone() ) lineDiag1.computeLineDistances() lineDiag1.position.set(0,0,.1) const lineDiag2 = new THREE.Line(geoDiagLine, matDashedLine.clone() ) lineDiag2.computeLineDistances() lineDiag2.position.set(0,0,.1) lineDiag2.rotation.set(0,0,Math.PI/2) const geoOrthoLine = new THREE.BufferGeometry().setFromPoints( [new THREE.Vector3(r+2*b,0,0), new THREE.Vector3(-r-2*b,0,0 )] ); const lineOrtho1 = new THREE.Line(geoOrthoLine, matDashedLine.clone() ) lineOrtho1.computeLineDistances() lineOrtho1.position.set(0,0,.1) lineOrtho1.rotation.set(0,0,Math.PI/2) const lineOrtho2 = new THREE.Line(geoOrthoLine, matDashedLine.clone() ) lineOrtho2.computeLineDistances() lineOrtho2.position.set(0,0,.1) const geoDominoLine = new THREE.BufferGeometry().setFromPoints( [new THREE.Vector3(r/2+2*b,0,0), new THREE.Vector3(-r/2-2*b,0,0 )] ); const lineDomino = new THREE.Line(geoDominoLine, matDashedLine.clone() ) lineDomino.computeLineDistances() lineDomino.position.set(0,0,.1) const reflectionLines = [lineOrtho1, lineDiag1, lineOrtho2, lineDiag2, lineDomino] // square const geoBorder = new THREE.Geometry() geoBorder.vertices.push( new THREE.Vector3( -(r+b), r+b, 0 ), // 0 new THREE.Vector3( -r, r, 0 ), // 1 new THREE.Vector3( r, r, 0 ), // 2 new THREE.Vector3( r+b, r+b, 0 ), // 3 new THREE.Vector3( r, -r, 0 ), // 4 new THREE.Vector3( r+b, -(r+b), 0 ), // 5 new THREE.Vector3( -r, -r, 0 ), // 6 new THREE.Vector3( -(r+b), -(r+b), 0 ), // 7 ); geoBorder.faces.push( new THREE.Face3( 0, 1, 2 ), new THREE.Face3( 2, 3, 0 ), new THREE.Face3( 3, 2, 4 ), new THREE.Face3( 4, 5, 3 ), new THREE.Face3( 5, 4, 6 ), new THREE.Face3( 6, 7, 5 ), new THREE.Face3( 7, 6, 1 ), new THREE.Face3( 1, 0, 7 ) ) geoBorder.computeFaceNormals() // required to know how to light faces const meshSquare = new THREE.Mesh( geoBorder, matBlack ) const wedgeVertices = [ new THREE.Vector3( 0,0,0 ), // center of square new THREE.Vector3( -r,r,0 ), // wedge vertices new THREE.Vector3( 0,r,0 ), new THREE.Vector3( r,r,0 ), new THREE.Vector3( r,0,0 ), new THREE.Vector3( r,-r,0 ), new THREE.Vector3( 0,-r,0 ), new THREE.Vector3( -r,-r,0 ), new THREE.Vector3( -r,0,0 ), new THREE.Vector3( -r,r,0 ), new THREE.Vector3( -r*e,r*e,0 ), // extension vertices new THREE.Vector3( 0,r*e,0 ), new THREE.Vector3( r*e,r*e,0 ), new THREE.Vector3( r*e,0,0 ), new THREE.Vector3( r*e,-r*e,0 ), new THREE.Vector3( 0,-r*e,0 ), new THREE.Vector3( -r*e,-r*e,0 ), new THREE.Vector3( -r*e,-0,0 ), new THREE.Vector3( -r*e,r*e,0 ) ] const wedges = [] for ( var i = 0; i < 8; i ++ ) { const geoWedge = new THREE.Geometry() geoWedge.vertices.push(wedgeVertices[1+i], wedgeVertices[0], wedgeVertices[2+i]) // vertex of triangle geoWedge.faces.push( new THREE.Face3( 0, 1, 2 ) ) // make triangle face from vertices geoWedge.computeFaceNormals() // required to know how to light faces const object = new THREE.Mesh( geoWedge, matSelection.clone() ) // assigns a unique material to each wedge object.material.color.setHex(colorSymClass[i]) // sets color of wedges meshSquare.add( object ) // makes wedge a child of the square border wedges.push(object) // adds wedge object to array } const selectWedges = [] for ( var i = 0; i < 8; i ++ ) { const geoWedge = new THREE.Geometry() geoWedge.vertices.push(wedgeVertices[1+i], wedgeVertices[0], wedgeVertices[2+i]) // vertex of triangle geoWedge.faces.push( new THREE.Face3( 0, 1, 2 ) ) // make triangle face from vertices geoWedge.computeFaceNormals() // required to know how to light faces const object = new THREE.Mesh( geoWedge, matTrans.clone() ) // assigns a unique material to each wedge helperSelect.add( object ) // makes wedge a child of the square border selectWedges.push(object) // adds wedge object to array } const selectExtensions = [] //boundary outside the square to preform 2 actions at once for ( var i = 0; i < 8; i ++ ) { const geoExtension = new THREE.Geometry() geoExtension.vertices.push(wedgeVertices[1+i], wedgeVertices[2+i], wedgeVertices[10+i], wedgeVertices[11+i]) //vertex geoExtension.faces.push( new THREE.Face3( 0, 1, 2 ), new THREE.Face3( 1, 3, 2 ) ) // trapazoid faces of extension geoExtension.computeFaceNormals() // required to know how to light faces const object = new THREE.Mesh( geoExtension, matTrans.clone() ) // assigns a unique material to each extension helperSelect.add( object ) // makes each extension a child of the square border selectExtensions.push(object) // adds each extension objects to array } // domino const geoDominoBorder = new THREE.Geometry() geoDominoBorder.vertices.push( new THREE.Vector3( -r/2-b, b+r, 0 ), // 0 new THREE.Vector3( -r/2, r, 0 ), // 1 new THREE.Vector3( r/2, r, 0 ), // 2 new THREE.Vector3( r/2+b, r+b, 0 ), // 3 new THREE.Vector3( r/2, -r, 0 ), // 4 new THREE.Vector3( r/2+b, -r-b, 0 ), // 5 new THREE.Vector3( -r/2, -r, 0 ), // 6 new THREE.Vector3( -r/2-b, -r-b, 0 ) // 7 ); geoDominoBorder.faces.push( new THREE.Face3( 0, 1, 2 ), new THREE.Face3( 2, 3, 0 ), new THREE.Face3( 3, 2, 4 ), new THREE.Face3( 4, 5, 3 ), new THREE.Face3( 5, 4, 6 ), new THREE.Face3( 6, 7, 5 ), new THREE.Face3( 7, 6, 1 ), new THREE.Face3( 1, 0, 7 ) ) geoDominoBorder.computeFaceNormals() // required to know how to light faces const meshDomino = new THREE.Mesh( geoDominoBorder, matBlack ) const geoDominoDichotomy = new THREE.Geometry() const dichotomyVertices = [ new THREE.Vector3( -r/2, 0, 0 ), new THREE.Vector3( r/2, 0, 0 ), new THREE.Vector3( -r/2, r, 0 ), new THREE.Vector3( r/2, r, 0 ), new THREE.Vector3( -r/2, -r, 0 ), new THREE.Vector3( r/2, -r, 0 ), ] const domino = [] for ( var i = 0; i < 2; i ++ ) { const traitSquare = new THREE.Geometry() traitSquare.vertices.push( dichotomyVertices[0], dichotomyVertices[1], dichotomyVertices[2+2*i], dichotomyVertices[3+2*i] ) traitSquare.faces.push( new THREE.Face3( 0, 1, 2 ), new THREE.Face3( 2, 1, 3 ) ) traitSquare.computeFaceNormals() // required to know how to light faces const object = new THREE.Mesh( traitSquare, matSelection.clone() ) meshDomino.add( object ); // makes trait square a child of the domino border domino.push(object) // adds trait square to domino array } // labels const geoLabel = new THREE.PlaneGeometry(r, r, 1) const offset = .2 const meshIntuitiveFront = new THREE.Mesh(geoLabel, matIntuitive) meshIntuitiveFront.position.set(-r/2,r/2,offset) const meshIntuitiveBack = new THREE.Mesh(geoLabel, matIntuitive) meshIntuitiveBack.position.set(-r/2,r/2,-offset) meshIntuitiveBack.rotation.set(0,Math.PI,0) const meshLogicalFront = new THREE.Mesh(geoLabel, matLogical) meshLogicalFront.position.set(r/2,r/2,offset) const meshLogicalBack = new THREE.Mesh(geoLabel, matLogical) meshLogicalBack.position.set(r/2,r/2,-offset) meshLogicalBack.rotation.set(0,Math.PI,0) const meshSensationFront = new THREE.Mesh(geoLabel, matSensation) meshSensationFront.position.set(r/2,-r/2,offset) const meshSensationBack = new THREE.Mesh(geoLabel, matSensation) meshSensationBack.position.set(r/2,-r/2,-offset) meshSensationBack.rotation.set(0,Math.PI,0) const meshEthicalFront = new THREE.Mesh(geoLabel, matEthical) meshEthicalFront.position.set(-r/2,-r/2,offset) const meshEthicalBack = new THREE.Mesh(geoLabel, matEthical) meshEthicalBack.position.set(-r/2,-r/2,-offset) meshEthicalBack.rotation.set(0,Math.PI,0) const squareLabels = [meshIntuitiveFront, meshIntuitiveBack, meshLogicalFront, meshLogicalBack, meshSensationFront, meshSensationBack, meshEthicalFront, meshEthicalBack] const meshExtravertFront = new THREE.Mesh(geoLabel, matExtravert) meshExtravertFront.position.set(0,r/2,offset) const meshExtravertBack = new THREE.Mesh(geoLabel, matExtravert) meshExtravertBack.position.set(0,r/2,-offset) meshExtravertBack.rotation.set(Math.PI,0,0) const meshIntrovertFront = new THREE.Mesh(geoLabel, matIntrovert) meshIntrovertFront.position.set(0,-r/2,offset) const meshIntrovertBack = new THREE.Mesh(geoLabel, matIntrovert) meshIntrovertBack.position.set(0,-r/2,-offset) meshIntrovertBack.rotation.set(Math.PI,0,0) // rigging hierarchy helper4.add(meshSquare) helper4.add(meshIntuitiveFront, meshIntuitiveBack, meshLogicalFront, meshLogicalBack, meshSensationFront, meshSensationBack, meshEthicalFront, meshEthicalBack) helper3.add(helper4) helper2.add(helper3) helper1.add(helper2) helperRoot.add(helper1) helperRoot.add(helperSelect) helperRoot.add(lineDiag1, lineDiag2, lineOrtho1, lineOrtho2) scene.add(helperRoot) helperRoot.position.set(-7.25,0,0) helperDomino.add(meshDomino) helperDomino.add(meshExtravertFront, meshExtravertBack, meshIntrovertFront, meshIntrovertBack) helperDominoRoot.add(helperDomino, lineDomino) scene.add(helperDominoRoot) helperDominoRoot.position.set(11.75,0,0) // LIGHTS------------------------------------- const light1 = new THREE.AmbientLight(0xFFFFFF, .8, 500) //light color, intensity, distance light1.position.set(0,0,0) // x,y,z position of light scene.add(light1) const light2 = new THREE.HemisphereLight( 0xFFFFFF, 0x000000, .3 ) //sky color, ground color, intensity light2.position.set(0,40,0) // x,y,z position of light scene.add(light2) // RAYCASTER----------------------------------- const mouse = new THREE.Vector2(-.5,.25) // starts mouse position off screen so no objects are highlighted at start let intersected const raycaster = new THREE.Raycaster() let x let y renderer.domElement.onmousemove = event => { event.preventDefault(); console.log(event) x=event.layerX y=event.layerY mouse.x = ( x / width ) * 2 - 1, mouse.y = -( y / height ) * 2 + 1 }; // ANIMATION ASSESETS ----------------------- const easeTo = function(current, target, maxSpeed){ const step = Math.min(Math.max((target-current)/2,-maxSpeed),maxSpeed) return step } // 0 null, 1 horizontal flip, 2 diagonal flip, 3 vertical flip, 4 <\> diagonal flip, 5 rotation, 6 domino flip let rNow = [0,0,0,0,Math.PI,0,Math.PI] // current rotations of square as it moves toward target let rTarget = [0,0,0,0,Math.PI,0,Math.PI] // end state as determined by input let inertia = 0 const rLabelNow = [0,-Math.PI/2] // Font labels, Back labels const rLabelTarget = [0,-Math.PI/2] // Font labels, Back labels const opacityTarget = [0,0,0,0,0,0,0,0, 0,0] // wedges const opacityNow = [0,0,0,0,0,0,0,0, 0,0] // wedges const o = .1 const opacityLabelNow = [1,o,o,1, o,1] // Intuitive, Logical, Sensory, Ethical, Extravert, Introvert const opacityLabelTarget = // dState*8+wState [1,1,o,o, 1,o, // ILE 1,1,o,o, 1,o, // LIE o,1,1,o, 1,o, // LSE o,1,1,o, 1,o, // SLE o,o,1,1, 1,o, // SEE o,o,1,1, 1,o, // ESE 1,o,o,1, 1,o, // EIE 1,o,o,1, 1,o, // IEE 1,1,o,o, o,1, // ILI 1,1,o,o, o,1, // LII o,1,1,o, o,1, // LSI o,1,1,o, o,1, // SLI o,o,1,1, o,1, // SEI o,o,1,1, o,1, // ESI 1,o,o,1, o,1, // EII 1,o,o,1, o,1] // IEI // VARIABLES AND MATRICES ----------------------- let w = 0 // wedge number that is moused over let wState = 7 // rotation state of the square as define by which wedge is in the leading position let action let d = 0 // domino half that is moused over let dState = 1 let dAction = 0 // rotation state of the domino as define by which trait is superior let nextState = // current wState *8 + action [0,1,2,3,4,5,6,7, 1,0,7,6,5,4,3,2, 2,3,4,5,6,7,0,1, 3,2,1,0,7,6,5,4, 4,5,6,7,0,1,2,3, 5,4,3,2,1,0,7,6, 6,7,0,1,2,3,4,5, 7,6,5,4,3,2,1,0] let colorIndex = 0 // decides what color the transformations should be let highlightOpacity = .6 // how dark the leading position colors are let intersects let labelRotation = [0, 0, Math.PI*3/2, Math.PI/2, Math.PI, Math.PI, Math.PI/2, Math.PI*3/2] ////////////////////////////////////////////////////////////////////////////////////////////// // RENDER LOOP /////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////// const render = function(){ requestAnimationFrame(render) // adjust scale on resize and stops animation when window is closed to save memory // mouse actions raycaster.setFromCamera( mouse, camera ); //raycaster runs each animation frame intersects = raycaster.intersectObjects( helperSelect.children.concat(meshDomino.children) ); // checks intersection intersected = intersects[0] // sets intersected to first object on top that raycaster intersects for ( var i = 0; i < 10; i ++ ){ opacityTarget[i] = 0} // makes all opacity targets 0 opacityTarget[wState] = highlightOpacity // makes leading wedge target colored opacityTarget[8+dState] = highlightOpacity // makes superior trait target colored opacityNow[wState] = highlightOpacity w = 0 // sets default selection to identity action d = dState // sets default selection to identity action for ( let j = 0; j < intersects.length; j ++ ) { //won't recognize intersected.object unless in a for loop :/ for ( var i = 0; i < 8; i ++ ){ if(intersected.object == selectWedges[i]){w=i} if(intersected.object == selectExtensions[i]){w=i; d=(1+d)%2} } for ( var i = 0; i < 2; i ++ ){ if(intersected.object == domino[i]){d=i} } } // animate objects inertia = 0 // each movement adds to inertia. Used to display IU elements only when movements have stopped for ( var i = 0; i < 5; i ++ ) { rNow[i] += easeTo(rNow[i], rTarget[i], .15) // square flip speed inertia += Math.abs(rNow[i]- rTarget[i]) } rNow[5] += easeTo(rNow[5], rTarget[5], .08) // square rotation speed inertia += Math.abs(rNow[5]- rTarget[5]) rNow[6] += easeTo(rNow[6], rTarget[6], .15) // domino rotation speed inertia += Math.abs(rNow[6]- rTarget[6]) helper4.rotation.set(rNow[3],rNow[1],rNow[5]); // cardinal flips and rotation helper2.rotation.set(rNow[2],rNow[4],0) // diagonal flips helperDomino.rotation.set(rNow[6],0,0) // domino flip // label rotation for ( var i = 0; i < 2; i ++ ){rLabelNow[i] += easeTo(rLabelNow[i],rLabelTarget[i],.08)} for ( var i = 0; i < 8; i ++ ){ squareLabels[i].rotation.set(0,i%2*Math.PI, rLabelNow[i%2]) } // // wedge colors for ( var i = 0; i < 8; i ++ ){wedges[i].material.opacity = opacityNow[i] } for ( var i = 0; i < 2; i ++ ){domino[i].material.opacity = opacityNow[8+i] } if(inertia<.18){ // things that happen only when the square is not moving for ( var i = 0; i < 10; i ++ ){ opacityNow[i] += easeTo(opacityNow[i], opacityTarget[i],.013*highlightOpacity) } wedges[nextState[wState*8+w]].material.opacity = Math.max(.5*highlightOpacity, wedges[nextState[wState*8+w]].material.opacity) // wedge highlight wedges[nextState[wState*8+w]].material.color.setHex(colorSymClass[colorIndex]) domino[d].material.opacity = Math.max(.5*highlightOpacity, domino[d].material.opacity) // domino highlight domino[d].material.color.setHex(colorSymClass[colorIndex]) wedges[wState].material.color.setHex(colorSymClass[colorIndex]) domino[dState].material.color.setHex(colorSymClass[colorIndex]) for(var i=0; i<5; i++){reflectionLines[i].material.opacity = 0} if(w%2 ==1){reflectionLines[(w-1)/2].material.opacity = 1} if((dState+d)%2==1){reflectionLines[4].material.opacity = 1} } action = w dAction = (d+dState)%2 colorIndex = 8*dAction + action wedges[wState].material.opacity = highlightOpacity domino[dState].material.opacity = highlightOpacity // label opacity for ( var i = 0; i < 6; i ++){ // fad out text opacityLabelNow[i] += easeTo(opacityLabelNow[i], opacityLabelTarget[6*(8*dState+wState)+i], .05) matLabels[i].opacity = opacityLabelNow[i] } renderer.render(scene, camera) // renders scene } // USER INPUT let p1 = 1 // polarity that fixes horizontal and vertical flips let p2 = 1 // polarity the fixes ⤢ direction let p3 = 1 let p4 = 1 let pi = Math.PI let actionLabelNowF = // 8*wState + action [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0,-2, 0,-1, -1,-1,-1,-1,-1,-1,-1,-1, -1,-1,-1, 0,-1,-3,-1,-2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 2, 0, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1,-1, 1, 0] let actionLabelTargetF = // 8*wState + action [0, 0,-1, 0, 2, 0, 1, 0, 0, 0, 1, 1,-2,-2,-1,-1, -1,-1,-2,-1, 1,-1, 0,-1, -1,-1, 0, 0,-3,-3,-2,-2, 2, 2, 1, 2, 4, 2, 3, 2, 2, 2, 3, 3, 0, 0, 1, 1, 1, 1, 0, 1, 3, 1, 2, 1, 1, 1, 2, 2,-1,-1, 0, 0] let actionLabelNowB = // 8*wState + action [0, 0, 0, 1, 0,-2, 0,-1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 2, 1,-1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 3, 2, 0, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, -1,-1,-1, 0,-1,-3,-1,-2, -1,-1,-1,-1,-1,-1,-1,-1] let actionLabelTargetB = // 8*wState + action [0, 0, 1, 1,-2,-2,-1,-1, 0, 0,-1, 0, 2, 0, 1, 0, 1, 1, 2, 2,-1,-1, 0, 0, 1, 1, 0, 1, 3, 1, 2, 1, 2, 2, 3, 3, 0, 0, 1, 1, 2, 2, 1, 2, 4, 2, 3, 2, -1,-1, 0, 0,-3,-3,-2,-2, -1,-1, -2,-1, 1,-1, 0,-1] function click(){ if(inertia<.18 || action%2==1){ rLabelNow[0] = actionLabelNowF[8*wState + action]*pi/2 // sets front rotation rLabelNow[1] = actionLabelNowB[8*wState + action]*pi/2 // sets back rotation rLabelTarget[0] = actionLabelTargetF[8*wState + action]*pi/2 // sets front target rLabelTarget[1] = actionLabelTargetB[8*wState + action]*pi/2 // sets back target }else{ rLabelTarget[0] += (actionLabelTargetF[8*wState + action]-actionLabelNowF[8*wState + action])*pi/2 // rLabelTarget[1] += (actionLabelTargetB[8*wState + action]-actionLabelNowB[8*wState + action])*pi/2 // } wedges[nextState[wState*8+w]].material.color.setHex(colorSymClass[colorIndex]) for(var i=0; i<4; i++){reflectionLines[i].material.opacity = 0} if(w%2 ==1){reflectionLines[(w-1)/2].material.opacity = 1} if((dState+d)%2==1){reflectionLines[4].material.opacity = 1} if(action==0){rTarget[0] += 0} // 0 if(action==1){rTarget[2+p1] += p1*p2*pi; p3*=-1 } // ⟷ if(action==2){rTarget[5] += -((wState%2)*2-1)*pi/2} // ↶ 90 if(action==3){rTarget[2] += -pi; p1*=-1; p2*=-1} // ⤡ if(action==4){rTarget[5] += (2*(wState % 2)-1)*pi} // 🗘 180 if(action==5){rTarget[2-p1] += p1*p2*p3*pi; } // ⬍ if(action==6){rTarget[5] += ((wState%2)*2-1)*pi/2; } // ↷ 90 if(action==7){rTarget[4] += p2*pi; p1*=-1; } // ⤢ wState = nextState[wState*8 + action] if((1+d)%2==dState){ // domino flip dState = (1+dState)%2 rTarget[6] += -Math.PI; } } window.addEventListener('click', () => { click() }) // mouse input window.addEventListener('touchstart', () => { click() }) window.addEventListener('mouseout', () => {mouse.x=100; mouse.y=100}) render(); } /*{ function fullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(element.webkitRequestFullScreen ) { element.webkitRequestFullScreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } } let button = html``; button.onclick = function () { fullScreen (canvas1) }; //specifies what goes to full screen return button; }*/33:T4ec,Most math is concerned with counting, but the abstract field of group theory studies geometry through an object's symmetry. A great example of this is the math behind how to solve a Rubik's cube — the shape embodies symmetries that define how the faces can be rotated, and by composing multiple actions, algorithms can intelligently move pieces around to solve the cube. This user interface is for a more simple group than the Rubik's cube. The first element is the symmetries of the square, which is called the dihedral four group (because of the four sides of a square) or sometimes called the dihedral group order eight (because of the eight ways a square can be rotated or flipped and then put back in the same footprint). The second element is a cyclic two group, which is just like a light switch that can be turned on and off. Together, they are the direct product of both groups. Clicking on any part of the interface moves that element to the light grey region on top. Different actions are colored by equivalence classes: - **light grey**: do nothing - **dark grey**: inversion / half turn - **purple**: quarter rotation - **blue**: [normal core][1] - **green**: flip [1]: https://en.wikipedia.org/wiki/Core_(group_theory)#The_normal_core34:[] 30:{"id":"52c0806da16ec337","slug":"dihedral-order-8-cross-cyclic-2-ui","title":"Dihedral Order 8 cross Cyclic 2 UI","thumbnail":"20563aaf5ae3f817673511d7db2071a97b6cb33941d07305b757e0272673e393","access_level":"public","create_time":"$D2022-05-27T19:49:23.485Z","update_time":"$D2022-06-05T01:04:06.431Z","view_time":null,"first_public_time":"$D2022-05-27T20:44:24.718Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":35,"publish_version":35,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Dihedral Order 8 cross Cyclic 2 UI","cells":[{"id":0,"value":"# Dihedral Order 8 cross Cyclic 2 UI","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"label = {\n let letters = [\"A\", \"B\", \"C\", \"D\", \"0\", \"1\"]\n let size = 300\n let w = size\n let h = size\n const font = `bold ${size}px calibri`;\n \n function makeLabel(text) {\n const ctx = document.createElement('canvas').getContext('2d');\n ctx.canvas.width = w;\n ctx.canvas.height = h;\n // background\n ctx.clearRect(0, 0, w, h)\n // text\n ctx.font = font;\n ctx.textBaseline = 'middle';\n ctx.textAlign = 'center';\n ctx.translate(w / 2, h / 1.8);\n ctx.scale(1, 1);\n ctx.fillStyle ='#000000'\n ctx.fillText(text, 0, 0);\n\n return ctx.canvas;\n } \n let list = []\n for( let i=0; i {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"