canvas1 ={ // 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; }*/