canvas ={ // MATERIALS --------------------------------- const matTorus = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, transparent: true, opacity:.45, depthWrite:false}) const matSolid = new THREE.LineBasicMaterial({color: 0x55ffdd, depthWrite:false, transparent: true}) const matDashed = new THREE.LineDashedMaterial({color: 0xffffff, depthWrite:false, transparent: true, dashSize: .3, gapSize: .15} ) // SET UP ------------------------------------ const π = Math.PI let settings = ({ knots:[ // 1:1 torus knots ({on:true, name:'static', color:"#000000", material: matSolid}), ({on:true, name:'dynamic', color:"#000000", material: matSolid}), ({on:true, name:'negativist', color:"#DDDDDD", material: matDashed}), ({on:true, name:'positivist', color:"#DDDDDD", material: matDashed}), ({on:true, name:'extraverted', color:"#000000", material: matDashed}), ({on:true, name:'introverted', color:"#000000", material: matDashed}), ({on:true, name:'asking', color:"#DDDDDD", material: matSolid}), ({on:true, name:'declaring', color:"#DDDDDD", material: matSolid}), ], smallCircle:[ ({on:false, name:'intuition', color:"#DDDDDD", material: matSolid}), ({on:false, name:'NT research', color:"#DDDDDD", material: matSolid}), ({on:false, name:'logic', color:"#DDDDDD", material: matSolid}), ({on:false, name:'ST pragmatism', color:"#DDDDDD", material: matSolid}), ({on:false, name:'sensation', color:"#DDDDDD", material: matSolid}), ({on:false, name:'SF social', color:"#DDDDDD", material: matSolid}), ({on:false, name:'ethics', color:"#DDDDDD", material: matSolid}), ({on:false, name:'NF humanism', color:"#DDDDDD", material: matSolid}), ], bigCircle:[ ({on:false, name:'peripheral', color:"#DDDDDD", material: matSolid}), ({on:false, name:'alpha', color:"#36A743", material: matSolid}), ({on:false, name:'ascending', color:"#DDDDDD", material: matSolid}), ({on:false, name:'beta', color:"#DE4126", material: matSolid}), ({on:false, name:'central', color:"#DDDDDD", material: matSolid}), ({on:false, name:'gamma', color:"#FFBF01", material: matSolid}), ({on:false, name:'descending', color:"#DDDDDD", material: matSolid}), ({on:false, name:'delta', color:"#32507B", material: matSolid}), ], smallAxis:[ // N ({on:true, name:'Ne', color:"#000000", material: matSolid}), ({on:false, name:'🡑N', color:"#000000", material: matSolid}), ({on:true, name:'Ni', color:"#000000", material: matSolid}), ({on:false, name:'🡓N', color:"#000000", material: matSolid}), // NT ({on:true, name:'Α-NT', color:"#000000", material: matSolid}), ({on:false, name:'Β-NT', color:"#000000", material: matSolid}), ({on:true, name:'Γ-NT', color:"#000000", material: matSolid}), ({on:false, name:'Δ-NT', color:"#000000", material: matSolid}), // T ({on:false, name:'🡐T🡒', color:"#000000", material: matSolid}), ({on:true, name:'Ti', color:"#000000", material: matSolid}), ({on:false, name:'🡒T🡐', color:"#000000", material: matSolid}), ({on:true, name:'Te', color:"#000000", material: matSolid}), // ST ({on:false, name:'Α-ST', color:"#000000", material: matSolid}), ({on:true, name:'Β-ST', color:"#000000", material: matSolid}), ({on:false, name:'Γ-ST', color:"#000000", material: matSolid}), ({on:true, name:'Δ-ST', color:"#000000", material: matSolid}), // S ({on:true, name:'Si', color:"#000000", material: matSolid}), ({on:false, name:'🡑S', color:"#000000", material: matSolid}), ({on:true, name:'Se', color:"#000000", material: matSolid}), ({on:false, name:'🡓S', color:"#000000", material: matSolid}), // SF ({on:true, name:'Α-SF', color:"#000000", material: matSolid}), ({on:false, name:'Β-SF', color:"#000000", material: matSolid}), ({on:true, name:'Γ-SF', color:"#000000", material: matSolid}), ({on:false, name:'Δ-SF', color:"#000000", material: matSolid}), // F ({on:false, name:'🡐F🡒', color:"#000000", material: matSolid}), ({on:true, name:'Fe', color:"#000000", material: matSolid}), ({on:false, name:'🡒F🡐', color:"#000000", material: matSolid}), ({on:true, name:'Fi', color:"#000000", material: matSolid}), // NF ({on:false, name:'Α-NF', color:"#000000", material: matSolid}), ({on:true, name:'Β-NF', color:"#000000", material: matSolid}), ({on:false, name:'Γ-NF', color:"#000000", material: matSolid}), ({on:true, name:'Δ-NF', color:"#000000", material: matSolid}), ], text: [ // Jungian compass ({on:true, text:'N', textColor:"#FFFFFF", backgroundColor:"#959595", hAngle:0/4*π, vAngle:0, radius:0}), ({on:true, text:'NT', textColor:"#FFFFFF", backgroundColor:"#959595", hAngle:1/4*π, vAngle:0, radius:0}), ({on:true, text:'T', textColor:"#FFFFFF", backgroundColor:"#959595", hAngle:2/4*π, vAngle:0, radius:0}), ({on:true, text:'ST', textColor:"#FFFFFF", backgroundColor:"#959595", hAngle:3/4*π, vAngle:0, radius:0}), ({on:true, text:'S', textColor:"#FFFFFF", backgroundColor:"#959595", hAngle:4/4*π, vAngle:0, radius:0}), ({on:true, text:'SF', textColor:"#FFFFFF", backgroundColor:"#959595", hAngle:5/4*π, vAngle:0, radius:0}), ({on:true, text:'F', textColor:"#FFFFFF", backgroundColor:"#959595", hAngle:6/4*π, vAngle:0, radius:0}), ({on:true, text:'NF', textColor:"#FFFFFF", backgroundColor:"#959595", hAngle:7/4*π, vAngle:0, radius:0}), // information elements ({on:true, text:'Ne', textColor:"#FFFFFF", backgroundColor:"#000000", hAngle:0/4*π, vAngle:0/4*π, radius:1}), ({on:true, text:'Ni', textColor:"#FFFFFF", backgroundColor:"#000000", hAngle:0/4*π, vAngle:4/4*π, radius:1}), ({on:true, text:'Te', textColor:"#FFFFFF", backgroundColor:"#000000", hAngle:2/4*π, vAngle:6/4*π, radius:1}), ({on:true, text:'Ti', textColor:"#FFFFFF", backgroundColor:"#000000", hAngle:2/4*π, vAngle:2/4*π, radius:1}), ({on:true, text:'Se', textColor:"#FFFFFF", backgroundColor:"#000000", hAngle:4/4*π, vAngle:4/4*π, radius:1}), ({on:true, text:'Si', textColor:"#FFFFFF", backgroundColor:"#000000", hAngle:4/4*π, vAngle:0/4*π, radius:1}), ({on:true, text:'Fe', textColor:"#FFFFFF", backgroundColor:"#000000", hAngle:6/4*π, vAngle:2/4*π, radius:1}), ({on:true, text:'Fi', textColor:"#FFFFFF", backgroundColor:"#000000", hAngle:6/4*π, vAngle:6/4*π, radius:1}), // information blocks ({on:true, text:'Α-NT', textColor:"#FFFFFF", backgroundColor:"#36A743", hAngle:1/4*π, vAngle:1/4*π, radius:1}), ({on:true, text:'Γ-NT', textColor:"#FFFFFF", backgroundColor:"#FFBF01", hAngle:1/4*π, vAngle:5/4*π, radius:1}), ({on:true, text:'Β-ST', textColor:"#FFFFFF", backgroundColor:"#DE4126", hAngle:3/4*π, vAngle:3/4*π, radius:1}), ({on:true, text:'Δ-ST', textColor:"#FFFFFF", backgroundColor:"#32507B", hAngle:3/4*π, vAngle:7/4*π, radius:1}), ({on:true, text:'Γ-SF', textColor:"#FFFFFF", backgroundColor:"#FFBF01", hAngle:5/4*π, vAngle:5/4*π, radius:1}), ({on:true, text:'A-SF', textColor:"#FFFFFF", backgroundColor:"#36A743", hAngle:5/4*π, vAngle:1/4*π, radius:1}), ({on:true, text:'Δ-NF', textColor:"#FFFFFF", backgroundColor:"#32507B", hAngle:7/4*π, vAngle:7/4*π, radius:1}), ({on:true, text:'B-NF', textColor:"#FFFFFF", backgroundColor:"#DE4126", hAngle:7/4*π, vAngle:3/4*π, radius:1}), // skew blocks ({on:true, text:'B-NT', textColor:"#DE4126", backgroundColor:"#FFFFFF", hAngle:1/4*π, vAngle:3/4*π, radius:1}), ({on:true, text:'Δ-NT', textColor:"#32507B", backgroundColor:"#FFFFFF", hAngle:1/4*π, vAngle:7/4*π, radius:1}), ({on:true, text:'Γ-ST', textColor:"#FFBF01", backgroundColor:"#FFFFFF", hAngle:3/4*π, vAngle:5/4*π, radius:1}), ({on:true, text:'A-ST', textColor:"#36A743", backgroundColor:"#FFFFFF", hAngle:3/4*π, vAngle:1/4*π, radius:1}), ({on:true, text:'Δ-SF', textColor:"#32507B", backgroundColor:"#FFFFFF", hAngle:5/4*π, vAngle:7/4*π, radius:1}), ({on:true, text:'B-SF', textColor:"#DE4126", backgroundColor:"#FFFFFF", hAngle:5/4*π, vAngle:3/4*π, radius:1}), ({on:true, text:'A-NF', textColor:"#36A743", backgroundColor:"#FFFFFF", hAngle:7/4*π, vAngle:1/4*π, radius:1}), ({on:true, text:'Γ-NF', textColor:"#FFBF01", backgroundColor:"#FFFFFF", hAngle:7/4*π, vAngle:5/4*π, radius:1}), // hybrid elements ({on:true, text:'🡑N🡑', textColor:"#000000", backgroundColor:"#FFFFFF", hAngle:0/4*π, vAngle:2/4*π, radius:1}), ({on:true, text:'🡓N🡓', textColor:"#000000", backgroundColor:"#FFFFFF", hAngle:0/4*π, vAngle:6/4*π, radius:1}), ({on:true, text:'🡐T🡒', textColor:"#000000", backgroundColor:"#FFFFFF", hAngle:2/4*π, vAngle:0/4*π, radius:1}), ({on:true, text:'🡒T🡐', textColor:"#000000", backgroundColor:"#FFFFFF", hAngle:2/4*π, vAngle:4/4*π, radius:1}), ({on:true, text:'🡓S🡓', textColor:"#000000", backgroundColor:"#FFFFFF", hAngle:4/4*π, vAngle:6/4*π, radius:1}), ({on:true, text:'🡑S🡑', textColor:"#000000", backgroundColor:"#FFFFFF", hAngle:4/4*π, vAngle:2/4*π, radius:1}), ({on:true, text:'🡒F🡐', textColor:"#000000", backgroundColor:"#FFFFFF", hAngle:6/4*π, vAngle:4/4*π, radius:1}), ({on:true, text:'🡐F🡒', textColor:"#000000", backgroundColor:"#FFFFFF", hAngle:6/4*π, vAngle:0/4*π, radius:1}), ] }) // scene const aspect =.75 //const width = 625 const height = width * aspect 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( -30, 25, -10 ) // 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 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 = mutable orbitSpeed // SHAPE ------------------------------------ let rs = 4 let rb = 16-rs let d = 128 const geometry = new THREE.TorusGeometry( rb, rs-.05, d, d) geometry.computeFlatVertexNormals(); // Needed to us material parameter {flatShading: true} const torus = new THREE.Mesh( geometry, matTorus.clone()) torus.material.color.setHex(0xeeeeee) //0x9022DD torus.rotation.set(.5*Math.PI,0,0) // makes lines on torus surface function circle(rotation, kind) { //kind: 2=small, 3=big, 0=cross1, 1=cross2, //cylindrical coordinates let r = 0 let φ = 0 let y = 0 let t = 0 let verts = [] for(let i=0; i<(d+1); i++){ t= 2 * π * i / d if(kind==0){ r = .99 * rs * Math.cos(t) + rb φ = rotation y = .99 * rs * Math.sin(t) }else if(kind==1){ r = .99 * rs * Math.cos(rotation) + rb φ = t y = .99 * rs * Math.sin(rotation) }else if(kind==2){ r = rs * Math.cos(t) + rb φ = t + rotation y = rs * Math.sin(t) }else if(kind==3){ r = rs * Math.cos(t) + rb φ = t + rotation y = -rs * Math.sin(t) } verts.push(new THREE.Vector3( r*Math.cos(φ),//x y,//y r*Math.sin(φ) //z )) } return verts } //small horizontal circles for(let i=0; i<8; i++){ const geoCircle = new THREE.BufferGeometry().setFromPoints(circle(i * 2 * π /8,0)) const lineCircle = new THREE.Line(geoCircle, matSolid.clone()) lineCircle.material.color.setHex('0x' + settings.smallCircle[i].color.substring(1)) lineCircle.material.opacity = settings.smallCircle[i].on ? 1 : 0 ; scene.add(lineCircle) } //big vertical circles for(let i=0; i<8; i++){ const geoCircle = new THREE.BufferGeometry().setFromPoints(circle(i * 2 * π /8,1)) const lineCircle = new THREE.Line(geoCircle, matSolid.clone()) lineCircle.material.color.setHex('0x' + settings.bigCircle[i].color.substring(1)) lineCircle.material.opacity = settings.bigCircle[i].on ? 1 : 0 ; scene.add(lineCircle) } //make torus knot rings let reorder = [0,2,1,3] for(let i=0; i<2; i++){ for(let j=0; j<4; j++){ const geoCircle = new THREE.BufferGeometry().setFromPoints(circle(j * π /2,i+2)) const lineCircle = new THREE.Line(geoCircle, settings.knots[4*i+reorder[j]].material.clone()) lineCircle.computeLineDistances() lineCircle.material.color.setHex('0x' + settings.knots[4*i+reorder[j]].color.substring(1)) lineCircle.material.opacity = settings.knots[4*i+reorder[j]].on ? 1 : 0 scene.add(lineCircle) } } const centerVerts = [] for(let i=0; i<8; i++){ centerVerts.push(new THREE.Vector3( rb*Math.cos(2 * π * i / 8), //x 0, //y rb*Math.sin(2 * π * i / 8) //z )) } let surfaceVerts = [] for(let i=0; i<8; i++){ for(let j=0; j<4; j++){ surfaceVerts.push(new THREE.Vector3( (rb + rs * Math.cos(2 * π * (2*j+i%2) / 8))*Math.cos(2 * π * i / 8), //x rs * Math.sin(2 * π * (2*j+i%2) / 8), //y (rb + rs * Math.cos(2 * π * (2*j+i%2) / 8))*Math.sin(2 * π * i / 8) //z )) } } //small axes for(let i=0; i<8; i++){ for(let j=0; j<4; j++){ const geoAxis = new THREE.BufferGeometry().setFromPoints([centerVerts[i], surfaceVerts[4*i+j]]) const lineAxis = new THREE.Line(geoAxis, matSolid.clone()) lineAxis.material.color.setHex('0x' + settings.smallAxis[4*i+j].color.substring(1)) lineAxis.material.opacity = settings.smallAxis[4*i+j].on ? 1 : 0 ; scene.add(lineAxis) } } const labelVerts = centerVerts.concat(surfaceVerts) //sprite function makeLabelCanvas(baseWidth, size, name, fill, text) { const borderSize = 4; const ctx = document.createElement('canvas').getContext('2d'); const font = `bold ${size}px calibri`; ctx.font = font; // measure how long the name will be const textWidth = ctx.measureText(name).width; const spriteWidth = baseWidth*.22 + borderSize ; const spriteHeight = size*.9 + borderSize ; ctx.canvas.width = spriteWidth; ctx.canvas.height = spriteHeight; // need to set font again after resizing canvas ctx.font = font; ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.fillStyle = fill; //66ee88 ctx.fillRect(0, 0, spriteWidth, spriteHeight); // scale to fit but don't stretch const scaleFactor = Math.min(1, baseWidth / textWidth); ctx.translate(spriteWidth / 2, spriteHeight / 1.85); ctx.scale(scaleFactor, 1); ctx.fillStyle = text; ctx.fillText(name, 0, 0); return ctx.canvas; } const rootSprite = new THREE.Group() let bgColor let textColor for(let i=0; i