2b:null 2c:["$","title",null,{"children":"Dichotomy Pyramid | Lao | Observable"}] 31:T2a7a,canvas1 ={ // SET UP ------------------------------------ const typeList = ["IEI – INFp", "IEE – ENFp", "ILI – INTp", "ILE – ENTp", "LII – INTj", "LIE – ENTj", "LSI – ISTj", "LSE – ESTj", "SLI – ISTp", "SLE – ESTp", "SEI – ISFp", "SEE – ESFp", "ESI – ISFj", "ESE – ESFj", "EII – INFj", "EIE – ENFj"] var selectedType = 0 for(let i=0; i<16; i++){ if(dropdown[0][0] == typeList[i]){selectedType=i} } var baseType = 0 for(let i=0; i<16; i++){ if(dropdown[0][1] == typeList[i]){baseType=i} } let radius = 7 let s=.25 *width/900 *radius/7 //sprite resolution scale let pol = [] for(let i=0; i<16; i++){ pol.push((Types[selectedType].pol[i]+Types[baseType].pol[i]+1)%2) } //constants let pi = Math.PI // scene const aspect = 0.58125 //const width = 500 const height = width * aspect const scene = new THREE.Scene() // camera const camera = new THREE.PerspectiveCamera(32, width/height, 1, 1000) // field of view, aspect ratio, near, far plane camera.position.set( 42, 12, -30 ) // 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 f6f6f6 renderer.setSize(width, height) // set window size scene.fog = new THREE.Fog( 0xffffff, 45,80 ); 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 = true // determines if camera can rotate controls.autoRotate = true controls.autoRotateSpeed = -1.5 // MATERIALS --------------------------------- const material = new THREE.MeshLambertMaterial({color: 0xffff00, side: THREE.DoubleSide, transparent: true, depthWrite: false, opacity:.3, emissive: 0xffff00}) const matNormal = new THREE.MeshNormalMaterial({side: THREE.DoubleSide, transparent: true, depthWrite: false, opacity:.1}); const matSolidLine = new THREE.LineBasicMaterial( {color: 0x66ee88, dashSize: 1, gapSize: .5, transparent: true, opacity:1} ); const matDashedLine = new THREE.LineDashedMaterial( {color: 0x000000, dashSize: 1, gapSize: .5, transparent: true} ); // SHAPE ------------------------------------ let pyramidPoints = [ new THREE.Vector3( 0, 0, 0), //0000 new THREE.Vector3(-1, 1,-1), //0001 << new THREE.Vector3( 1,-1,-1), //0010 << new THREE.Vector3( 0, 0,-1), //0011 new THREE.Vector3(-1,-1, 1), //0100 << new THREE.Vector3(-1, 0, 0), //0101 new THREE.Vector3( 0,-1, 0), //0110 new THREE.Vector3(-1/3,-1/3,-1/3), //0111 new THREE.Vector3( 1, 1, 1), //1000 << Top new THREE.Vector3( 0, 1, 0), //1001 new THREE.Vector3( 1, 0, 0), //1010 new THREE.Vector3(1/3,1/3,-1/3), //1011 new THREE.Vector3( 0, 0, 1), //1100 new THREE.Vector3(-1/3,1/3,1/3), //1101 new THREE.Vector3(1/3,-1/3,1/3), //1110 new THREE.Vector3( 0, 0, 0) //1111 ] //reposition points let axis = new THREE.Vector3(1,0,-1) for(let i=0; i { event.preventDefault(); console.log(event) x=event.layerX y=event.layerY mouse.x = ( x / width ) * 2 - 1, mouse.y = -( y / height ) * 2 + 1 }; ////////////////////////////////////////////////////////////////////////////////////////////// // RENDER LOOP /////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////// let intersects let INTERSECTED; let t=0 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(pickable.children); // checks intersection // highlight object if ( intersects.length > 0 ) { if ( INTERSECTED != intersects[ 0 ].object ) { if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex ); INTERSECTED = intersects[ 0 ].object; INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex(); INTERSECTED.material.emissive.setHex( 0x444400 ); } } else { if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex ); INTERSECTED = null; } // animation t+=.005; //offset labels var camPos = camera.position.clone().normalize().multiplyScalar(1.5) rootSprite.position.set(camPos.x, camPos.y, camPos.z) controls.update() renderer.render(scene, camera) // renders scene } // Input ------------------------- window.addEventListener('click', () => { INTERSECTED.material.color.setHex(Math.random()*0xffffff) }) window.addEventListener('mouseover', () => { controls.autoRotate = false }) window.addEventListener('mouseout', () => { controls.autoRotate = true }) render(); }32:T2ad8,canvas3 ={ // SET UP ------------------------------------ let radius = 1.5 // size of small pyramids const span = 4.5 // size of overall pyramid //constants let pi = Math.PI // scene const aspect = 1.02 //0.58125 //const width = 500 const height = width * aspect const scene = new THREE.Scene() // camera const camera = new THREE.PerspectiveCamera(40, width/height, 1, 1000) // field of view, aspect ratio, near, far plane camera.position.set( 0, 30, 38 ) // 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 f6f6f6 renderer.setSize(width, height) // set window size scene.fog = new THREE.Fog( 0xffffff, 35,70 ); 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 = true // determines if camera can rotate controls.autoRotate = true controls.autoRotateSpeed = -1.5 // MATERIALS --------------------------------- const material = new THREE.MeshLambertMaterial({color: 0xffff00, side: THREE.DoubleSide, transparent: true, depthWrite: false, opacity:.4, emissive: 0xffff00}) const matNormal = new THREE.MeshNormalMaterial({side: THREE.DoubleSide, transparent: true, depthWrite: false, opacity:.15}); const matBlack = new THREE.MeshLambertMaterial({color: 0x000000, side: THREE.DoubleSide}) const matSolidLine = new THREE.LineBasicMaterial( {color: 0x66ee88, dashSize: 1, gapSize: .5, transparent: true, opacity:1} ); const matDashedLine = new THREE.LineDashedMaterial( {color: 0x66ee88, dashSize: .25, gapSize: .25, transparent: true, depthWrite: false, opacity:.4} ); // SHAPE ------------------------------------ // small pyramids let pyramidPoints = [ new THREE.Vector3( -1, -1, -1), //0000 new THREE.Vector3(-1, 1,-1), //0001 << new THREE.Vector3( 1,-1,-1), //0010 << new THREE.Vector3( 0, 0,-1), //0011 new THREE.Vector3(-1,-1, 1), //0100 << new THREE.Vector3(-1, 0, 0), //0101 new THREE.Vector3( 0,-1, 0), //0110 new THREE.Vector3(-1/3,-1/3,-1/3), //0111 new THREE.Vector3( 1, 1, 1), //1000 << Top new THREE.Vector3( 0, 1, 0), //1001 new THREE.Vector3( 1, 0, 0), //1010 new THREE.Vector3(1/3,1/3,-1/3), //1011 new THREE.Vector3( 0, 0, 1), //1100 new THREE.Vector3(-1/3,1/3,1/3), //1101 new THREE.Vector3(1/3,-1/3,1/3), //1110 new THREE.Vector3( 0, 0, 0) //1111 ] //reposition points let axis = new THREE.Vector3(1,0,-1) for(let i=0; i { event.preventDefault(); console.log(event) x=event.layerX y=event.layerY mouse.x = ( x / width ) * 2 - 1, mouse.y = -( y / height ) * 2 + 1 }; ////////////////////////////////////////////////////////////////////////////////////////////// // RENDER LOOP /////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////// let intersects let INTERSECTED; let t=0 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(pickable.children); // checks intersection // highlight object if ( intersects.length > 0 ) { if ( INTERSECTED != intersects[ 0 ].object ) { if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex ); INTERSECTED = intersects[ 0 ].object; INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex(); INTERSECTED.material.emissive.setHex( 0x444400 ); } } else { if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex ); INTERSECTED = null; } // animation t+=.005; //offset labels var camPos = camera.position.clone().normalize().multiplyScalar(.3) rootSprite.position.set(camPos.x, camPos.y, camPos.z) for(let i=0; i { INTERSECTED.material.color.setHex(Math.random()*0xffffff) }) window.addEventListener('mouseover', () => { controls.autoRotate = false }) window.addEventListener('mouseout', () => { controls.autoRotate = true }) render(); }33:T508,Reinin = [ {num: '0', vector: '0000', labelPlus : 'Valid', labelMinus : 'Null'}, {num: '1', vector: '0001', labelPlus : 'Irrational', labelMinus : 'Rational'}, {num: '2', vector: '0010', labelPlus : 'Logical', labelMinus : 'Ethical'}, {num: '3', vector: '0011', labelPlus : 'Constructivist', labelMinus : 'Emotivist'}, {num: '4', vector: '0100', labelPlus : 'Intuitive', labelMinus : 'Sensory'}, {num: '5', vector: '0101', labelPlus : 'Tactical', labelMinus : 'Strategic'}, {num: '6', vector: '0110', labelPlus : 'Democratic', labelMinus : 'Aristocratic'}, {num: '7', vector: '0111', labelPlus : 'Process', labelMinus : 'Result'}, {num: '8', vector: '1000', labelPlus : 'Extravert', labelMinus : 'Introvert'}, {num: '9', vector: '1001', labelPlus : 'Static', labelMinus : 'Dynamic'}, {num: '10', vector: '1010', labelPlus : 'Yielding', labelMinus : 'Obstinate'}, {num: '11', vector: '1011', labelPlus : 'Merry', labelMinus : 'Serious'}, {num: '12', vector: '1100', labelPlus : 'Carefree', labelMinus : 'Farsighted'}, {num: '13', vector: '1101', labelPlus : 'Judicious', labelMinus : 'Decisive'}, {num: '14', vector: '1110', labelPlus : 'Positivist', labelMinus : 'Negativist'}, {num: '15', vector: '1111', labelPlus : 'Asking', labelMinus : 'Declaring'} ] 34:[] 2f:{"id":"150943a563cde34b","slug":"dichotomy-pyramid","title":"Dichotomy Pyramid","thumbnail":"f05fc592ac140756af3cfa7071188469a9e6df18bd2a8f9b6367c6a8131c46d0","access_level":"public","create_time":"$D2021-06-18T11:51:30.183Z","update_time":"$D2022-05-23T05:17:01.770Z","view_time":null,"first_public_time":"$D2021-06-18T17:58:28.131Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":1183,"publish_version":1183,"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,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Dichotomy Pyramid","cells":[{"id":0,"value":"md`# Dichotomy Pyramid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"md`### PG(3,2) Galois Geometry`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1085,"value":"viewof dropdown = inputsGroup([\n [\n select({\n title: \"Type\",\n description: \"Traits on pyramid.\",\n options: [\"IEI – INFp\", \"IEE – ENFp\", \"ILI – INTp\", \"ILE – ENTp\", \"LII – INTj\", \"LIE – ENTj\", \"LSI – ISTj\", \"LSE – ESTj\", \"SLI – ISTp\", \"SLE – ESTp\", \"SEI – ISFp\", \"SEE – ESFp\", \"ESI – ISFj\", \"ESE – ESFj\", \"EII – INFj\", \"EIE – ENFj\"],\n value: \"SLE – ESTp\"\n })\n ,\n select({\n title: \"Reference Frame\",\n description: \"Defines positive polarities.\",\n options: [\"IEI – INFp\", \"IEE – ENFp\", \"ILI – INTp\", \"ILE – ENTp\", \"LII – INTj\", \"LIE – ENTj\", \"LSI – ISTj\", \"LSE – ESTj\", \"SLI – ISTp\", \"SLE – ESTp\", \"SEI – ISFp\", \"SEE – ESFp\", \"ESI – ISFj\", \"ESE – ESFj\", \"EII – INFj\", \"EIE – ENFj\"],\n value: \"ILE – ENTp\"\n })\n ,\n /* select({\n title: \"Pyramid Space\",\n description: \"Categories on pyramid\",\n options: [\"Reinin\", \"Minaiev\", \"Bipyramid\", \"Jungian Compass\", \"Auguastan Compass\", \"Intersection\"],\n value: \"Reinin\"\n })*/\n ]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":523,"value":"md`### Pyramid of Differences`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":491,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"Types = [\n {type: 'IEI', pol:[1,1,0,0,1,1,0,0,0,0,1,1,0,0,1,1]}, //0\n {type: 'IEE', pol:[1,1,0,0,1,1,0,0,1,1,0,0,1,1,0,0]}, //1\n {type: 'ILI', pol:[1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0]}, //2\n {type: 'ILE', pol:[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}, //3\n \n {type: 'LII', pol:[1,0,1,0,1,0,1,0,0,1,0,1,0,1,0,1]}, //4\n {type: 'LIE', pol:[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0]}, //5\n {type: 'LSI', pol:[1,0,1,0,0,1,0,1,0,1,0,1,1,0,1,0]}, //6\n {type: 'LSE', pol:[1,0,1,0,0,1,0,1,1,0,1,0,0,1,0,1]}, //7\n \n {type: 'SLI', pol:[1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1]}, //8\n {type: 'SLE', pol:[1,1,1,1,0,0,0,0,1,1,1,1,0,0,0,0]}, //9\n {type: 'SEI', pol:[1,1,0,0,0,0,1,1,0,0,1,1,1,1,0,0]}, //10\n {type: 'SEE', pol:[1,1,0,0,0,0,1,1,1,1,0,0,0,0,1,1]}, //11\n \n {type: 'ESI', pol:[1,0,0,1,0,1,1,0,0,1,1,0,1,0,0,1]}, //12\n {type: 'ESE', pol:[1,0,0,1,0,1,1,0,1,0,0,1,0,1,1,0]}, //13\n {type: 'EII', pol:[1,0,0,1,1,0,0,1,0,1,1,0,0,1,1,0]}, //14\n {type: 'EIE', pol:[1,0,0,1,1,0,0,1,1,0,0,1,1,0,0,1]} //15\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.96/build/three.min.js\");\n await require(\"three@0.98/examples/js/controls/OrbitControls.js\").catch(() => {});\n /*await require(\"three@0.98/examples/js/lines/LineSegmentsGeometry.js\").catch(() => {});\n await require(\"three@0.98/examples/js/lines/LineGeometry.js\").catch(() => {});\n await require(\"three@0.98/examples/js/lines/WireframeGeometry2.js\").catch(() => {});\n await require(\"three@0.98/examples/js/lines/LineMaterial.js\").catch(() => {});\n await require(\"three@0.98/examples/js/lines/LineSegments2.js\").catch(() => {});\n await require(\"three@0.98/examples/js/lines/Line2.js\").catch(() => {});\n await require(\"three@0.98/examples/js/lines/Wireframe.js\").catch(() => {});*/\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1090,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1086,"value":"import { inputsGroup } from '@bumbeishvili/input-groups'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"