intersection = { // SET UP ------------------------------------ const aspect = .8//0.5625 let width = Math.min(window.innerWidth,800) let height = width * aspect const scene = new THREE.Scene() const pi = Math.PI const color = [0x1EDE89, 0x9022DD, 0x4792d4 ] let res = 51 // number of nodes in x and y direction for 3D mesh let yPosition = 3 // move elements up and down let alpha, beta, mean, gamma, para, c let surfaceList = [] let paraList = { X: {g:2, u:.5}, Y: {g:2, u:.5} } // camera const camera = new THREE.PerspectiveCamera(25, width/height, 1, 1000) // field of view, aspect ratio, near, far plane camera.position.set( 45, 20, 45 ) camera.lookAt( 0, -10, 0 ) // 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 // MATERIALS --------------------------------- const material = new THREE.MeshLambertMaterial({color: 'lightblue', transparent: true, opacity:.25, depthWrite:true}) const matHyperbola = new THREE.MeshLambertMaterial({color: 'lightblue', transparent: false, opacity:0}) const matPlane = new THREE.MeshLambertMaterial({color: 0x000000, transparent: true, opacity: 0, side: THREE.DoubleSide, depthWrite:false}) const matArea = new THREE.MeshLambertMaterial({color: 0x000000, emissive: 0xFF0000, transparent: true, opacity: .3, side: THREE.DoubleSide, depthWrite:false}) const matDot = new THREE.MeshLambertMaterial({color: 0x000000, transparent: true, opacity:.8, depthWrite:false}) const matLine = new THREE.LineBasicMaterial({ color: 0x000000, transparent: true, depthWrite:false }); // SHAPE ------------------------------------ // interaction planes const xGeo = new THREE.PlaneGeometry( 20, 20 ); const xPlane = new THREE.Mesh( xGeo, matPlane.clone() ); xPlane.position.set(-15,yPosition,0); xPlane.rotation.set(0,pi/2,0); const yGeo = new THREE.PlaneGeometry( 20, 20 ); const yPlane = new THREE.Mesh( yGeo, matPlane.clone() ); yPlane.position.set(0,yPosition,-15); yPlane.rotation.set(0,0,0); const xyGeo = new THREE.PlaneGeometry( 20, 20 ); const xyPlane = new THREE.Mesh( xyGeo, matPlane.clone() ); xyPlane.position.set(0,yPosition-10,0); xyPlane.rotation.set(-pi/2,0,0); const baseGeo = new THREE.PlaneGeometry( 20, 20 ); const base = new THREE.Mesh( baseGeo, material ); base.position.set(0,yPosition-10,0); base.rotation.set(pi/2,0,0); scene.add(base) // cursor const pickable = new THREE.Group(); scene.add(pickable); pickable.add(xPlane, yPlane, xyPlane); // dot handles const xDotGeo = new THREE.SphereGeometry( .5, 32, 16 ); const xDot = new THREE.Mesh( xDotGeo, matDot.clone() ); xDot.material.emissive.setHex(color[0]) xDot.material.opacity = 1 xDot.position.copy( xPlane.position ) scene.add( xDot ); const yDotGeo = new THREE.SphereGeometry( .5, 32, 16 ); const yDot = new THREE.Mesh( yDotGeo, matDot.clone() ); yDot.material.emissive.setHex(color[1]) yDot.material.opacity = 1 yDot.position.copy( yPlane.position ) scene.add( yDot ); const xyDotGeo = new THREE.SphereGeometry( .5, 32, 16 ); const xyDot = new THREE.Mesh( xyDotGeo, matDot.clone() ); xyDot.material.emissive.setHex(color[2]) xyDot.material.opacity = 0 xyDot.position.copy( xyPlane.position ) scene.add( xyDot ); // plane lines const xLineGeo = new THREE.Geometry(); const yLineGeo = new THREE.Geometry(); for (let i = 0; i < 100; i++){ xLineGeo.vertices.push( new THREE.Vector3( (gauss[100][i][0]+1)/2 , 0, 0)); yLineGeo.vertices.push( new THREE.Vector3( (gauss[100][i][0]+1)/2 , 0, 0)); } let x, y, z, parameters function updateBetaLine(mesh, mean, gamma) { mean = Math.max(.02, Math.min(.98, mean)) gamma = Math.max(.05, gamma) para = map(mean, gamma) const count = mesh.geometry.vertices.length; for (let i = 0; i < count; i++) { x = mesh.geometry.vertices[i].x mesh.geometry.vertices[i].y = betaPDF(x, para[0], para[1], para[2])/4 } mesh.geometry.verticesNeedUpdate = true; } const xLine = new THREE.Line(xLineGeo, matLine.clone() ); xLine.material.color.setHex(color[0]) xLine.scale.set(20,20,20) xLine.position.set(-10,-10,.03); xPlane.add( xLine ); updateBetaLine(xLine,.5,2) const yLine = new THREE.Line(yLineGeo, matLine.clone() ); yLine.material.color.setHex(color[1]) yLine.scale.set(20,20,20) yLine.position.set(-10,-10,.03); yPlane.add( yLine ); updateBetaLine(yLine,.5,2) // joint probability surface let p1, p2 function updateJoint(mesh, mean1, gamma1, mean2, gamma2) { mean1 = Math.max(.02, Math.min(.98, mean1)) gamma1 = Math.max(.05, gamma1) mean2 = Math.max(.02, Math.min(.98, mean2)) gamma2 = Math.max(.05, gamma2) p1 = map(mean1, gamma1) p2 = map(mean2, gamma2) for( let i=0; icenterPoint[0] && ((j+1)/res)>centerPoint[1] // circular vs radial if(diagonal){ surfaceGeo.faces.push( new THREE.Face3( i+j*res, i+1+j*res, i+(j+1)*res ), new THREE.Face3( i+1+j*res, i+1+(j+1)*res, i+(j+1)*res ) )}else{ surfaceGeo.faces.push( new THREE.Face3( i+j*res, i+1+j*res, i+1+(j+1)*res), new THREE.Face3( i+j*res, i+1+(j+1)*res, i+(j+1)*res ) )} }} surfaceGeo.computeFaceNormals() let surfaceMesh = new THREE.Mesh(surfaceGeo,material) surfaceMesh.scale.set(20,20,20) surfaceMesh.position.set(-10,yPosition-10,-10); surfaceList.push(surfaceMesh) scene.add(surfaceMesh) // mesh lines const edgeGeo = new THREE.Geometry(); edgeGeo.vertices.push( new THREE.Vector3( (gauss[res][0][0]+1)/2, 0, (gauss[res][0][0]+1)/2)); for(let i=1; i { const areaGeo = new THREE.Geometry(); for(let i=0; i { for(let i=0; i { let n = line1.geometry.vertices.length let charge if( c>0 ){charge = 1}else{charge = -1} if( c == 0 ){ for( let i=0; i { event.preventDefault(); console.log(event) xm=event.layerX ym=event.layerY mouse.x = ( xm / width ) * 2 - 1, mouse.y = -( ym / height ) * 2 + 1 }; ////////////////////////////////////////////////////////////////////////////////////////////// // RENDER LOOP /////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////// let intersects let t=0 let mousedown = false let rotate = false let select = null let selectPoint 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 if(mousedown == false){ surfaceMesh.material.transparent = false surfaceMesh.material.depthWrite = true hyperbola1.material.opacity = 0 hyperbola2.material.opacity = 0 h1Area.material.transparent = true h2Area.material.transparent = true h1Area.material.depthWrite = false h2Area.material.depthWrite = false xyDot.material.opacity = 0 } if( intersects.length > 0 ) { // move handle dots on click if(intersects.some(e => e.object === xPlane) && select == xPlane && mousedown){ selectPoint = intersects[ intersects.findIndex((e) => e.object === xPlane) ] xDot.position.copy( selectPoint.point ) paraList.X.u = selectPoint.point.z/-20+.5 paraList.X.g = (selectPoint.point.y-yPosition)/5+2 updateBetaLine(xLine, paraList.X.u, paraList.X.g ) updateJoint(surfaceList, paraList.Y.u, paraList.Y.g, 1-paraList.X.u, paraList.X.g) updateArea(xLine, xArea) updateArea(edgeLine, edgeArea) mutable parameters = [paraList.X.u, paraList.X.g, paraList.Y.u, paraList.Y.g] }else if(intersects.some(e => e.object === yPlane) && select == yPlane && mousedown){ selectPoint = intersects[ intersects.findIndex((e) => e.object === yPlane) ] yDot.position.copy( selectPoint.point ) paraList.Y.u = selectPoint.point.x/20+.5 paraList.Y.g = (selectPoint.point.y-yPosition)/5+2 updateBetaLine(yLine, paraList.Y.u, paraList.Y.g ) updateJoint(surfaceList, paraList.Y.u, paraList.Y.g, 1-paraList.X.u, paraList.X.g) updateArea(yLine, yArea) updateArea(edgeLine, edgeArea) mutable parameters = [paraList.X.u, paraList.X.g, paraList.Y.u, paraList.Y.g] }else if(intersects.some(e => e.object === xyPlane) && select == xyPlane && mousedown){ selectPoint = intersects[ intersects.findIndex((e) => e.object === xyPlane) ] xyDot.position.copy( selectPoint.point ) c = selectPoint.point.x * selectPoint.point.z / 100 updateHyperbola(c, hyperbola1, hyperbola2) updateJoint(surfaceList, paraList.Y.u, paraList.Y.g, 1-paraList.X.u, paraList.X.g) updateArea(hyperbola1, h1Area) updateArea(hyperbola2, h2Area) hyperbola1.material.opacity = 1 hyperbola2.material.opacity = 1 h1Area.material.transparent = false h2Area.material.transparent = false h1Area.material.depthWrite = true h2Area.material.depthWrite = true xyDot.material.opacity = .8 surfaceMesh.material.transparent = true surfaceMesh.material.depthWrite = false }else{ selectPoint = intersects[0] } } //lock camera when point drag if(select == null){ controls.enableRotate = true }else{ controls.enableRotate = false } controls.update() renderer.render(scene, camera) // renders scene } // Input ------------------------- window.addEventListener('pointerdown', () => { if(select == null){ select = intersects[0].object } mousedown = true }) window.addEventListener('pointerup', () => { select = null mousedown = false }) render(); }