From 9f528eea47ef7c97c05a2eff42f130243adecb12 Mon Sep 17 00:00:00 2001 From: Amira Abdel-Rahman <aabdelrahman@gsd.harvard.edu> Date: Thu, 21 Nov 2019 21:39:58 -0500 Subject: [PATCH] new grids integrated into the workflow --- .../graph/main.js | 53 +- .../physical_computing_interface/index.html | 2 +- 01_Code/physical_computing_interface/main.js | 47 + .../threejs/grid.html | 2 +- .../threejs/grid.js | 838 ++++++++---------- .../threejs/grid1.js | 749 ++++++++++++++++ 6 files changed, 1188 insertions(+), 503 deletions(-) create mode 100644 01_Code/physical_computing_interface/threejs/grid1.js diff --git a/01_Code/physical_computing_interface/graph/main.js b/01_Code/physical_computing_interface/graph/main.js index 1d3aaa4..1e7c916 100644 --- a/01_Code/physical_computing_interface/graph/main.js +++ b/01_Code/physical_computing_interface/graph/main.js @@ -275,40 +275,25 @@ document.addEventListener('DOMContentLoaded', function(){ x=parseInt(x); y=parseInt(y); z=parseInt(z); - for (var i=-1;i<=1;i++) { - for (var j=-1;j<=1;j++) { - for (var k=-1;k<=1;k++) { - if((i==0 &&j==0)|| (i==0 &&k==0) || (k==0 &&j==0)) //no diagonals - { - - var i1 = (x+i) ; - var j1 = (y+j) ; - var k1 = (z+k) ; - - var outofbound= i1==-1 ||j1==-1 ||k1==-1 ||i1==gridSize ||j1==gridSize ||k1==gridSize; - - - // ignore the item we're looking for neighbours for - if(!outofbound ) - { - if (!(i1==x && j1==y && k1==z)&& occupancy[i1][j1][k1]) { - var tgt=cy.$id('[' +x +"," +y+","+z+']'); - tgt._private.data.data.neighbors.push('[' +i1 +"," +j1+","+k1+']'); - tgt=cy.$id('[' +i1 +"," +j1+","+k1+']'); - // console.log(i1); - // console.log(j1); - // console.log(k1); - // console.log(x); - // console.log(y); - // console.log(z); - tgt._private.data.data.neighbors.push('[' +x +"," +y+","+z+']'); - cy.add([ - { group: "edges", data: { source: '[' +x +"," +y+","+z+']', target: '[' +i1 +"," +j1+","+k1+']'}} - ]); - } - } - } - } + var list=getNeighboursList(grid,x,y,z); + + for(var i=0;i<list.length;i++){ + var i1,j1,k1; + [i1,j1,k1]=list[i]; + if (occupancy[i1][j1][k1]) { + var tgt=cy.$id('[' +x +"," +y+","+z+']'); + tgt._private.data.data.neighbors.push('[' +i1 +"," +j1+","+k1+']'); + tgt=cy.$id('[' +i1 +"," +j1+","+k1+']'); + // console.log(i1); + // console.log(j1); + // console.log(k1); + // console.log(x); + // console.log(y); + // console.log(z); + tgt._private.data.data.neighbors.push('[' +x +"," +y+","+z+']'); + cy.add([ + { group: "edges", data: { source: '[' +x +"," +y+","+z+']', target: '[' +i1 +"," +j1+","+k1+']'}} + ]); } } } diff --git a/01_Code/physical_computing_interface/index.html b/01_Code/physical_computing_interface/index.html index d84376c..825190e 100644 --- a/01_Code/physical_computing_interface/index.html +++ b/01_Code/physical_computing_interface/index.html @@ -108,7 +108,7 @@ <!-- code --> <script src="./main.js"></script> <!-- event handling and main json structure --> <script src="./threejs/assembly.js"></script><!-- assembly and timestep handling --> -<script src="./threejs/main.js"></script><!-- threejs visualization --> +<script src="./threejs/grid.js"></script><!-- threejs visualization --> <script src="./graph/main.js"></script><!-- graph flow visualization--> <script src="./json/main.js"></script><!-- json --> diff --git a/01_Code/physical_computing_interface/main.js b/01_Code/physical_computing_interface/main.js index d2c4651..e03123e 100644 --- a/01_Code/physical_computing_interface/main.js +++ b/01_Code/physical_computing_interface/main.js @@ -1,5 +1,12 @@ var gridSize=20; var voxelSpacing=50; +var color1= 0xffffff; /*white*/ +var color2= 0x020227; /*kohly*/ +var color3= 0x1c5c61; /*teal*/ +var color4= 0xfa6e70; //red/orange +var color5=0x380152; //purple +var color6=0x696767; //grey + //////////////////////events////////////////// function addNode (x,y,z,replay=false){ @@ -85,6 +92,46 @@ function getXYZfromName(name){ var z=nums[2]; return new THREE.Vector3(x,y,z); } +function getNeighboursList(grid,x,y,z){ + var list=[]; + for(var i=0;i<grid.neighbors.length;i++){ + //if 0,4,8 + var x1=parseInt(x)+grid.neighbors[i].x; + var y1=parseInt(y)+grid.neighbors[i].y; + var z1=parseInt(z)+grid.neighbors[i].z; + if(z%2!=0){ + x1+=grid.neighborsLayerOffset[i].x; + y1+=grid.neighborsLayerOffset[i].y; + z1+=grid.neighborsLayerOffset[i].z; + } + if(grid.doubleOffset){ + if(parseInt(z/2)%2!=0){ //2,3 , 6,7 + if(z%2!=0){//3,7,11 + x1=parseInt(x)+grid.neighborsLayerOffset2[i].x; + y1=parseInt(y)+grid.neighborsLayerOffset2[i].y; + z1=parseInt(z)+grid.neighborsLayerOffset2[i].z; + }else{//2,6 + x1=parseInt(x)+grid.neighborsLayerOffset1[i].x; + y1=parseInt(y)+grid.neighborsLayerOffset1[i].y; + z1=parseInt(z)+grid.neighborsLayerOffset1[i].z; + + } + }else{ //0,1 ,4,5 + if(z%2!=0){//1,5 + x1=parseInt(x)+grid.neighborsLayerOffset[i].x; + y1=parseInt(y)+grid.neighborsLayerOffset[i].y; + z1=parseInt(z)+grid.neighborsLayerOffset[i].z; + }else{ //0,4 + } + + } + } + list.push([x1,y1,z1]); + + } + return list; + +} ////////////////////////////////////////////// //////////performance calculations///////////////// diff --git a/01_Code/physical_computing_interface/threejs/grid.html b/01_Code/physical_computing_interface/threejs/grid.html index c13fbdc..86908dc 100644 --- a/01_Code/physical_computing_interface/threejs/grid.html +++ b/01_Code/physical_computing_interface/threejs/grid.html @@ -12,7 +12,7 @@ <script src="../lib/OrbitControls.js"></script> <!-- code --> -<script src="./grid.js"></script> +<script src="./grid1.js"></script> </body> </html> \ No newline at end of file diff --git a/01_Code/physical_computing_interface/threejs/grid.js b/01_Code/physical_computing_interface/threejs/grid.js index 3066505..69ca6cd 100644 --- a/01_Code/physical_computing_interface/threejs/grid.js +++ b/01_Code/physical_computing_interface/threejs/grid.js @@ -1,24 +1,3 @@ -var color1= 0xffffff; /*white*/ -var color2= 0x020227; /*kohly*/ -var color3= 0x1c5c61; /*teal*/ -var color4= 0xfa6e70; //red/orange -var color5=0x380152; //purple -var color6=0x696767; //grey - -var camera, scene, renderer; -var plane; -var mouse, raycaster, isShiftDown = false; -// var rollOverMesh, rollOverMaterial; -var cubeGeo, cubeMaterial,sphereGeo,helperMaterial,helperPosition,helperColor; -var objects = []; -var container = document.getElementById( 'webgl' ); -// var container1 = document.getElementById( 'threejs' ); -var controls; -var voxelSpacing=50.0; -var occupancy,occupancyHelper; - - - var gridPresets={ Cubic : { @@ -220,530 +199,455 @@ var gridPresets={ } -} - +}; var grid=gridPresets.Dice; -var gridSize=20.0; - -init(); - -// buildGrid(5); - -function getWidth(){ - // return container.style.width; - return window.innerWidth; -} -function getHeight(){ - // return container.style.height; - return window.innerHeight ; -} +function threejs(){ + var camera, scene, renderer; + var plane; + var mouse, raycaster, isShiftDown = false; + // var rollOverMesh, rollOverMaterial; + var cubeGeo, cubeMaterial,sphereGeo,helperMaterial,helperPosition,helperColor; + var objects = []; + var container = document.getElementById( 'webgl' ); + // var container1 = document.getElementById( 'threejs' ); + var controls; + var voxelSpacing=50.0; + var occupancyHelper; + var voxels=[]; + + + init(); + + function init() { + camera = new THREE.PerspectiveCamera( 45, getWidth()/ getHeight() , 1, 10000 ); + camera.position.set( 500, 800, 1300 ); + camera.lookAt( gridSize/2, 0, gridSize/2 ); + scene = new THREE.Scene(); + scene.background = new THREE.Color( 0xffffff ); + + cubeGeo = new THREE.BoxBufferGeometry( voxelSpacing, voxelSpacing, voxelSpacing ); + sphereGeo = new THREE.SphereGeometry( voxelSpacing/2, 32, 32 ); + cubeMaterial = new THREE.MeshPhongMaterial( { color: 0x1c5c61 } ); + + // grid + var gridHelper = new THREE.GridHelper( (gridSize)*voxelSpacing, gridSize ); + gridHelper.position.x=gridSize/2.0*voxelSpacing-voxelSpacing/2.0; + gridHelper.position.z=gridSize/2.0*voxelSpacing-voxelSpacing/2.0; + gridHelper.position.y=-voxelSpacing/2.0*grid.voxelScaleZ; + + gridHelper.scale.x=grid.xScale; + gridHelper.scale.z=grid.yScale; + gridHelper.scale.y=grid.zScale; + scene.add( gridHelper ); -function init() { - camera = new THREE.PerspectiveCamera( 45, getWidth()/ getHeight() , 1, 10000 ); - camera.position.set( 500, 800, 1300 ); - camera.lookAt( gridSize/2, 0, gridSize/2 ); - scene = new THREE.Scene(); - scene.background = new THREE.Color( 0xffffff ); - - cubeGeo = new THREE.BoxBufferGeometry( voxelSpacing, voxelSpacing, voxelSpacing ); - sphereGeo = new THREE.SphereGeometry( voxelSpacing/2, 32, 32 ); - cubeMaterial = new THREE.MeshPhongMaterial( { color: 0x1c5c61 } ); - - // grid - var gridHelper = new THREE.GridHelper( (gridSize)*voxelSpacing, gridSize ); - gridHelper.position.x=gridSize/2.0*voxelSpacing-voxelSpacing/2.0; - gridHelper.position.z=gridSize/2.0*voxelSpacing-voxelSpacing/2.0; - gridHelper.position.y=-voxelSpacing/2.0*grid.voxelScaleZ; - - gridHelper.scale.x=grid.xScale; - gridHelper.scale.z=grid.yScale; - gridHelper.scale.y=grid.zScale; - scene.add( gridHelper ); - - - - // roll-over helpers - var rollOverGeo = new THREE.BoxBufferGeometry( voxelSpacing, voxelSpacing, voxelSpacing ); - rollOverMaterial = new THREE.MeshBasicMaterial( { color: color4, opacity: 0.8, transparent: true } ); - rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial ); - rollOverMesh.scale.x=grid.voxelScaleX; - rollOverMesh.scale.z=grid.voxelScaleY; - rollOverMesh.scale.y=grid.voxelScaleZ; - scene.add( rollOverMesh ); - - raycaster = new THREE.Raycaster(); - mouse = new THREE.Vector2(); - // var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 ); - // geometry.rotateX( - Math.PI / 2 ); - // plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) ); - // scene.add( plane ); - // objects.push( plane ); - - helperPosition = new Float32Array( 1 * 3 ); - var c = new THREE.Color( color1 ); - helperColor = new Float32Array( 1 * 3 ); - helperColor[0]=c.r; - helperColor[1]=c.g; - helperColor[2]=c.b; - helperMaterial = new THREE.PointsMaterial( { size: 5, vertexColors: THREE.VertexColors,color:color3 } ); - - buildGrid(gridSize); - createHelperMeshes(gridSize); - // var axesHelper = new THREE.AxesHelper( 20 *grid.voxelSpacing); - // scene.add( axesHelper ); + // roll-over helpers + var rollOverGeo = new THREE.BoxBufferGeometry( voxelSpacing, voxelSpacing, voxelSpacing ); + rollOverMaterial = new THREE.MeshBasicMaterial( { color: color4, opacity: 0.8, transparent: true } ); + rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial ); + rollOverMesh.scale.x=grid.voxelScaleX; + rollOverMesh.scale.z=grid.voxelScaleY; + rollOverMesh.scale.y=grid.voxelScaleZ; + scene.add( rollOverMesh ); + + raycaster = new THREE.Raycaster(); + mouse = new THREE.Vector2(); + // var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 ); + // geometry.rotateX( - Math.PI / 2 ); + // plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) ); + // scene.add( plane ); + // objects.push( plane ); + + helperPosition = new Float32Array( 1 * 3 ); + var c = new THREE.Color( color1 ); + helperColor = new Float32Array( 1 * 3 ); + helperColor[0]=c.r; + helperColor[1]=c.g; + helperColor[2]=c.b; + helperMaterial = new THREE.PointsMaterial( { size: 5, vertexColors: THREE.VertexColors,color:color3 } ); + + buildGrid(gridSize); + createHelperMeshes(gridSize); + - // lights - var ambientLight = new THREE.AmbientLight( 0x606060 ); - scene.add( ambientLight ); - var directionalLight = new THREE.DirectionalLight( 0xffffff ); - directionalLight.position.set( 1, 0.75, 0.5 ).normalize(); - scene.add( directionalLight ); - renderer = new THREE.WebGLRenderer( { antialias: true } ); - renderer.setPixelRatio( window.devicePixelRatio ); - renderer.setSize( getWidth(), getHeight() ); + // var axesHelper = new THREE.AxesHelper( 20 *grid.voxelSpacing); + // scene.add( axesHelper ); - renderer = new THREE.WebGLRenderer(); - - container.appendChild( renderer.domElement ); - controls = new THREE.OrbitControls( camera, renderer.domElement ); - controls.target=new THREE.Vector3( gridSize/2*voxelSpacing,0 ,gridSize/2*voxelSpacing ); - controls.update(); - - // document.body.appendChild( renderer.domElement ); - onWindowResize(); - container.addEventListener( 'mousemove', onDocumentMouseMove, false ); - container.addEventListener( 'mousedown', onDocumentMouseDown, false ); - // window.addEventListener( 'keydown', onDocumentKeyDown, false ); - // window.addEventListener( 'keyup', onDocumentKeyUp, false ); - // - window.addEventListener( 'mouseup', onWindowResize, false ); + // lights + var ambientLight = new THREE.AmbientLight( 0x606060 ); + scene.add( ambientLight ); + var directionalLight = new THREE.DirectionalLight( 0xffffff ); + directionalLight.position.set( 1, 0.75, 0.5 ).normalize(); + scene.add( directionalLight ); + renderer = new THREE.WebGLRenderer( { antialias: true } ); + renderer.setPixelRatio( window.devicePixelRatio ); + renderer.setSize( getWidth(), getHeight() ); + + renderer = new THREE.WebGLRenderer(); + + container.appendChild( renderer.domElement ); + controls = new THREE.OrbitControls( camera, renderer.domElement ); + controls.target=new THREE.Vector3( gridSize/2*voxelSpacing,0 ,gridSize/2*voxelSpacing ); + controls.update(); + + // document.body.appendChild( renderer.domElement ); + onWindowResize(); + container.addEventListener( 'mousemove', onDocumentMouseMove, false ); + container.addEventListener( 'mousedown', onDocumentMouseDown, false ); + // window.addEventListener( 'keydown', onDocumentKeyDown, false ); + // window.addEventListener( 'keyup', onDocumentKeyUp, false ); + // + window.addEventListener( 'mouseup', onWindowResize, false ); - window.addEventListener( 'resize', onWindowResize, false ); + window.addEventListener( 'resize', onWindowResize, false ); - animate(); -} + animate(); + } -//////////////////////// + //////////////////////// -function onWindowResize( event ) { + function onWindowResize( event ) { - camera.aspect = getWidth() / getHeight(); - camera.updateProjectionMatrix(); + camera.aspect = getWidth() / getHeight(); + camera.updateProjectionMatrix(); - renderer.setSize( getWidth(), getHeight() ); -} + renderer.setSize( getWidth(), getHeight() ); + } -function animate() { + function animate() { - requestAnimationFrame( animate ); + requestAnimationFrame( animate ); - render(); -} + render(); + } -function render() { - renderer.render( scene, camera ); - controls.update(); -} + function render() { + renderer.render( scene, camera ); + controls.update(); + } -//////////////////////////// -function buildGrid(gridSize){ - occupancy=[]; - occupancyHelper=[]; - for (var i=0;i<gridSize;++i){ - occupancy.push([]); - occupancyHelper.push([]); - for (var j=0;j<gridSize;++j){ - occupancy[i].push([]); - occupancyHelper[i].push([]); - for (var k=0;k<gridSize;++k){ - occupancy[i][j].push(false); - occupancyHelper[i][j].push(false); + //////////////////////////// + function buildGrid(gridSize){ + // occupancy=[]; + occupancyHelper=[]; + for (var i=0;i<gridSize;++i){ + // occupancy.push([]); + occupancyHelper.push([]); + for (var j=0;j<gridSize;++j){ + // occupancy[i].push([]); + occupancyHelper[i].push([]); + for (var k=0;k<gridSize;++k){ + // occupancy[i][j].push(false); + occupancyHelper[i][j].push(false); + } } } + // buildVoxelAt( 10, 0,0); + // for (var i=0;i<gridSize;++i){ + // for (var j=0;j<gridSize;++j){ + // for (var k=0;k<3;++k){ + // // if(k<5){ + // buildVoxelAt(grid, i, j,k); + // // console.log(i+" "+ j+" "+k) + // occupancy[i][j][k]=true; + // // } + // } + // } + // } } - // buildVoxelAt(grid, 0, 0,0); - // buildVoxelAt(grid, 1, 0,0); - - // buildVoxelAt(grid, 0, 1,0); - // buildVoxelAt(grid, 1, 1,0); - - // buildVoxelAt(grid, 5, 5,4); //voxel - // buildVoxelAt(grid, 5, 4,3); //neighbour - // buildVoxelAt(grid, 4, 4,3); //neighbour - // buildVoxelAt(grid, 5, 4,5); //neighbour - // buildVoxelAt(grid, 5, 5,5); //neighbour - - //rule 1 if (5,5) z==4, neighbors: (0,-1,-1) (-1,-1,-1) (0,-1, 1) (0,0, 1) // layer 0, 4,8 - - // buildVoxelAt(grid, 15, 3, 1); //voxel - // buildVoxelAt(grid, 15, 4, 0); //neighbour - // buildVoxelAt(grid, 15, 3, 0); //neighbour - // buildVoxelAt(grid, 14, 3, 2); //neighbour - // buildVoxelAt(grid, 15, 3, 2); //neighbour - - //rule 2 if (10,5) z==4, neighbors: (0,1,-1) (0,0,-1) (-1, 0, 1) (0,0,1) // layer 1, 5, 9 - - - // buildVoxelAt(grid, 10, 10,6); //voxel - // buildVoxelAt(grid, 11, 10,5); //neighbour - // buildVoxelAt(grid, 10, 10,5); //neighbour - // buildVoxelAt(grid, 10, 9,7); //neighbour - // buildVoxelAt(grid, 10, 10,7); //neighbour + function buildVoxelAt( grid,x, y,z){ + // occupancy[x][y][z]=true; + // console.log(occupancy); + var voxel = new THREE.Mesh( cubeGeo, cubeMaterial ); + // var voxel = new THREE.Mesh( sphereGeo, cubeMaterial ); - //rule 2 if (10,5) z==4, neighbors: (1,0,-1) (0,0,-1) (0,-1, 1) (0,0,1) // layer 2, 6, 19 - - // buildVoxelAt(grid, 10, 3,11); //voxel - - // buildVoxelAt(grid, 10, 4,10); //neighbour - // buildVoxelAt(grid, 10, 3,10); //neighbour - // buildVoxelAt(grid, 10, 4,12); //neighbour - // buildVoxelAt(grid, 11, 4,12); //neighbour - - //rule 2 if (10,5) z==4, neighbors: (0,1,-1) (0,0,-1) (0, 1, 1) (1,1,1) // layer 3, 7, 11 - - - - - // buildVoxelAt( 10, 0,0); - // for (var i=0;i<gridSize;++i){ - // for (var j=0;j<gridSize;++j){ - // for (var k=0;k<3;++k){ - // // if(k<5){ - // buildVoxelAt(grid, i, j,k); - // // console.log(i+" "+ j+" "+k) - // occupancy[i][j][k]=true; - // // } - // } - // } - // } -} - -function buildVoxelAt( grid,x, y,z){ - occupancy[x][y][z]=true; - var voxel = new THREE.Mesh( cubeGeo, cubeMaterial ); - // var voxel = new THREE.Mesh( sphereGeo, cubeMaterial ); - - var p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y; - [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=getTransforms(grid,x, y,z); - // console.log(getTransforms(grid,x, y,z)) - - voxel.scale.x=s_x; - voxel.scale.z=s_z; - voxel.scale.y=s_y; - - voxel.position.x=0; - voxel.position.y=0; - voxel.position.z=0; - - voxel.rotation.y=r_y; - - - voxel.position.x=p_x; - voxel.position.y=p_y; - voxel.position.z=p_z; - - // voxel.scale.x=grid.voxelScaleX; - // voxel.scale.z=grid.voxelScaleY; - // voxel.scale.y=grid.voxelScaleZ; + var p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y; + [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=getTransforms(grid,x, y,z); + // console.log(getTransforms(grid,x, y,z)) - // console.log([voxel.position.x ,voxel.position.y ,voxel.position.z ,voxel.scale.x,voxel.scale.y,voxel.scale.z,voxel.rotation.y]) + voxel.scale.x=s_x; + voxel.scale.z=s_z; + voxel.scale.y=s_y; - // voxel.position.x=0.0; - // voxel.position.y=0.0; - // voxel.position.z=0.0; - // if(z%2!=0){ - // voxel.rotation.y=grid.zLayerRotation; - // voxel.position.x+=grid.voxelSpacing*grid.xScale*(grid.xLayerOffset); - // voxel.position.z+=grid.voxelSpacing*grid.yScale*(grid.yLayerOffset); + voxel.position.x=0; + voxel.position.y=0; + voxel.position.z=0; - // } + voxel.rotation.y=r_y; - // voxel.position.x+=grid.voxelSpacing*grid.xScale*(x ); - // voxel.position.z+=grid.voxelSpacing*grid.yScale*(y ); - // voxel.position.y+=grid.voxelSpacing*grid.zScale*(z ); + + voxel.position.x=p_x; + voxel.position.y=p_y; + voxel.position.z=p_z; + + voxel.name="["+parseInt(x) +","+parseInt(y) +","+parseInt(z) +"]"; - // if(y%2!=0){ - // voxel.position.x+=grid.voxelSpacing*grid.xScale*(grid.xLineOffset); - // voxel.position.z+=grid.voxelSpacing*grid.yScale*(grid.yLineOffset); + scene.add(voxel); + voxels.push(voxel); + } - // } + function getTransforms(grid,x, y,z){ + var s_x=grid.voxelScaleX; + var s_z=grid.voxelScaleY; + var s_y=grid.voxelScaleZ; - // console.log([voxel.position.x ,voxel.position.y ,voxel.position.z ,voxel.scale.x,voxel.scale.y,voxel.scale.z,voxel.rotation.y]) - + var p_x=0.0; + var p_y=0.0; + var p_z=0.0; + var r_y=0.0; + if(z%2!=0){ + r_y=grid.zLayerRotation; + p_x+=grid.voxelSpacing*grid.xScale*(grid.xLayerOffset); + p_z+=grid.voxelSpacing*grid.yScale*(grid.yLayerOffset); - scene.add(voxel); -} + } + if(grid.doubleOffset){ + if(parseInt(z/2)%2!=0){ + p_x+=grid.voxelSpacing*grid.xScale*(grid.xLayerOffset2); + p_z+=grid.voxelSpacing*grid.yScale*(grid.yLayerOffset2); + } + } -function getTransforms(grid,x, y,z){ - var s_x=grid.voxelScaleX; - var s_z=grid.voxelScaleY; - var s_y=grid.voxelScaleZ; + p_x+=grid.voxelSpacing*grid.xScale*(x ); + p_z+=grid.voxelSpacing*grid.yScale*(y ); + p_y+=grid.voxelSpacing*grid.zScale*(z ); - var p_x=0.0; - var p_y=0.0; - var p_z=0.0; - var r_y=0.0; - if(z%2!=0){ - r_y=grid.zLayerRotation; - p_x+=grid.voxelSpacing*grid.xScale*(grid.xLayerOffset); - p_z+=grid.voxelSpacing*grid.yScale*(grid.yLayerOffset); + if(y%2!=0){ + p_x+=grid.voxelSpacing*grid.xScale*(grid.xLineOffset); + p_z+=grid.voxelSpacing*grid.yScale*(grid.yLineOffset); - } - if(grid.doubleOffset){ - if(parseInt(z/2)%2!=0){ - p_x+=grid.voxelSpacing*grid.xScale*(grid.xLayerOffset2); - p_z+=grid.voxelSpacing*grid.yScale*(grid.yLayerOffset2); } + return [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]; } - p_x+=grid.voxelSpacing*grid.xScale*(x ); - p_z+=grid.voxelSpacing*grid.yScale*(y ); - p_y+=grid.voxelSpacing*grid.zScale*(z ); - - if(y%2!=0){ - p_x+=grid.voxelSpacing*grid.xScale*(grid.xLineOffset); - p_z+=grid.voxelSpacing*grid.yScale*(grid.yLineOffset); + function createHelperMeshes(gridSize){ + for (var i=0;i<gridSize;++i){ + for (var j=0;j<gridSize;++j){ + buildHelperSnap(grid,i,j,0); + } + } } - return [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]; -} -function createHelperMeshes(gridSize){ - for (var i=0;i<gridSize;++i){ - for (var j=0;j<gridSize;++j){ - buildHelperSnap(grid,i,j,0); - } - } + function buildHelperSnap(grid,x,y,z){ + occupancyHelper[x][y][z]=true; + var geometry = new THREE.PlaneBufferGeometry( grid.voxelSpacing*grid.xScale, grid.voxelSpacing*grid.yScale ); + geometry.rotateX( - Math.PI / 2 ); + plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) ); + // plane = new THREE.Mesh( geometry,helperMaterial ); + -} + [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=getTransforms(grid,x, y,z); + // console.log(getTransforms(grid,x, y,z)) -function buildHelperSnap(grid,x,y,z){ - occupancyHelper[x][y][z]=true; - var geometry = new THREE.PlaneBufferGeometry( grid.voxelSpacing*grid.xScale, grid.voxelSpacing*grid.yScale ); - geometry.rotateX( - Math.PI / 2 ); - plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) ); - // plane = new THREE.Mesh( geometry,helperMaterial ); - + plane.scale.x=s_x; + plane.scale.z=s_z; + // rollOverMesh.scale.y=s_y; - [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=getTransforms(grid,x, y,z); - // console.log(getTransforms(grid,x, y,z)) + plane.position.x=0; + plane.position.y=0; + plane.position.z=0; - plane.scale.x=s_x; - plane.scale.z=s_z; - // rollOverMesh.scale.y=s_y; + plane.rotation.y=r_y; - plane.position.x=0; - plane.position.y=0; - plane.position.z=0; + + plane.position.x=p_x; + plane.position.y=p_y; + plane.position.z=p_z; - plane.rotation.y=r_y; + // plane.scale.x=grid.xScale*0.95; + // plane.scale.z=grid.yScale*0.95; - - plane.position.x=p_x; - plane.position.y=p_y; - plane.position.z=p_z; + // plane.position.x=0.0; + // plane.position.y=0.0; + // plane.position.z=0.0; - // plane.scale.x=grid.xScale*0.95; - // plane.scale.z=grid.yScale*0.95; + // plane.position.x+=grid.voxelSpacing*grid.xScale*(x ); + // plane.position.z+=grid.voxelSpacing*grid.yScale*(y ); + // plane.position.y+=grid.voxelSpacing*grid.zScale*(z ); - // plane.position.x=0.0; - // plane.position.y=0.0; - // plane.position.z=0.0; + // if(y%2!=0){ + // plane.position.x+=grid.voxelSpacing*grid.xScale*(grid.xLineOffset); + // plane.position.z+=grid.voxelSpacing*grid.yScale*(grid.yLineOffset); - // plane.position.x+=grid.voxelSpacing*grid.xScale*(x ); - // plane.position.z+=grid.voxelSpacing*grid.yScale*(y ); - // plane.position.y+=grid.voxelSpacing*grid.zScale*(z ); + // } + // plane.position.y-=grid.voxelSpacing*grid.zScale/2.0; + plane.name="p["+parseInt(x) +","+parseInt(y) +","+parseInt(z) +"]"; + + helperPosition[0]=plane.position.x; + helperPosition[1]=plane.position.y; + helperPosition[2]=plane.position.z; + var helperGeometry = new THREE.BufferGeometry(); + helperGeometry.setAttribute( 'position', new THREE.BufferAttribute( helperPosition.slice(), 3 ) ); + helperGeometry.setAttribute( 'color', new THREE.BufferAttribute( helperColor.slice(), 3 ) ); + helper = new THREE.Points( helperGeometry, helperMaterial ); + helper.name="s["+parseInt(x) +","+parseInt(y) +","+parseInt(z) +"]"; + + scene.add( helper ); + scene.add( plane ); + objects.push( plane ); + } - // if(y%2!=0){ - // plane.position.x+=grid.voxelSpacing*grid.xScale*(grid.xLineOffset); - // plane.position.z+=grid.voxelSpacing*grid.yScale*(grid.yLineOffset); + function buildNeighbourHelpers(grid, x, y,z){ - // } - // plane.position.y-=grid.voxelSpacing*grid.zScale/2.0; - plane.name="p["+parseInt(x) +","+parseInt(y) +","+parseInt(z) +"]"; - + var list=getNeighboursList(grid,x,y,z); + + for(var i=0;i<list.length;i++){ + var x1,y1,z1; + [x1,y1,z1]=list[i]; + if(helperAt(x1,y1,z1)){ + buildHelperSnap(grid,x1,y1,z1); + } - + } - + //go through all neighbours + //if occupancy empty + //add helper meshes?? + //how to rotate plane - helperPosition[0]=plane.position.x; - helperPosition[1]=plane.position.y; - helperPosition[2]=plane.position.z; - var helperGeometry = new THREE.BufferGeometry(); - helperGeometry.setAttribute( 'position', new THREE.BufferAttribute( helperPosition.slice(), 3 ) ); - helperGeometry.setAttribute( 'color', new THREE.BufferAttribute( helperColor.slice(), 3 ) ); - helper = new THREE.Points( helperGeometry, helperMaterial ); - helper.name="s["+parseInt(x) +","+parseInt(y) +","+parseInt(z) +"]"; - - scene.add( helper ); - scene.add( plane ); - objects.push( plane ); -} + } -function buildNeighbourHelpers(grid, x, y,z){ - - for(var i=0;i<grid.neighbors.length;i++){ - //if 0,4,8 - var x1=parseInt(x)+grid.neighbors[i].x; - var y1=parseInt(y)+grid.neighbors[i].y; - var z1=parseInt(z)+grid.neighbors[i].z; - if(z%2!=0){ - x1+=grid.neighborsLayerOffset[i].x - y1+=grid.neighborsLayerOffset[i].y - z1+=grid.neighborsLayerOffset[i].z + function helperAt(x,y,z){ + if(x<0||y<0||z<0){ + return false; } - if(grid.doubleOffset){ - if(parseInt(z/2)%2!=0){ //2,3 , 6,7 - if(z%2!=0){//3,7,11 - console.log("neighbors 3 7") - x1=parseInt(x)+grid.neighborsLayerOffset2[i].x; - y1=parseInt(y)+grid.neighborsLayerOffset2[i].y; - z1=parseInt(z)+grid.neighborsLayerOffset2[i].z; - }else{//2,6 - console.log("neighbors 2 6") - x1=parseInt(x)+grid.neighborsLayerOffset1[i].x; - y1=parseInt(y)+grid.neighborsLayerOffset1[i].y; - z1=parseInt(z)+grid.neighborsLayerOffset1[i].z; - - } - }else{ //0,1 ,4,5 - if(z%2!=0){//1,5 - console.log("neighbors 1 5") - x1=parseInt(x)+grid.neighborsLayerOffset[i].x; - y1=parseInt(y)+grid.neighborsLayerOffset[i].y; - z1=parseInt(z)+grid.neighborsLayerOffset[i].z; - }else{ //0,4 - console.log("neighbors 0 4") - } - - } + if(x>=gridSize||y>=gridSize||z>=gridSize){ + return false; } - if(helperAt(x1,y1,z1)){ - buildHelperSnap(grid,x1,y1,z1); + if(occupancy[x][y][z]||occupancyHelper[x][y][z]){ + return false; } - - } - - //go through all neighbours - //if occupancy empty - //add helper meshes?? - //how to rotate plane - -} - -function helperAt(x,y,z){ - if(x<0||y<0||z<0){ - return false; - } - if(x>=gridSize||y>=gridSize||z>=gridSize){ - return false; - } - if(occupancy[x][y][z]||occupancyHelper[x][y][z]){ - return false; - } - - return true; - -} - -///////////////////// - -function onDocumentMouseMove( event ) { - event.preventDefault(); - mouse.set( ( event.clientX / getWidth() ) * 2 - 1, - ( event.clientY /getHeight() ) * 2 + 1 ); - raycaster.setFromCamera( mouse, camera ); - var intersects = raycaster.intersectObjects( objects ); - if ( intersects.length > 0 ) { - var intersect = intersects[ 0 ]; - var obj=getXYZfromName(intersect.object.name); - - [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=getTransforms(grid,obj.x, obj.y,obj.z); - // console.log(getTransforms(grid,x, y,z)) - - // rollOverMesh.scale.x=s_x; - // rollOverMesh.scale.z=s_z; - // rollOverMesh.scale.y=s_y; - rollOverMesh.name="r["+parseInt(obj.x) +","+parseInt(obj.y) +","+parseInt(obj.z) +"]" - rollOverMesh.position.x=0; - rollOverMesh.position.y=0; - rollOverMesh.position.z=0; - - rollOverMesh.rotation.y=r_y; - - rollOverMesh.position.x=p_x; - rollOverMesh.position.y=p_y; - rollOverMesh.position.z=p_z; + return true; - - // rollOverMesh.position.copy( intersect.object.position ).add(temp ); - } - render(); -} - -function onDocumentMouseDown( event ) { - event.preventDefault(); - mouse.set( ( event.clientX / getWidth() ) * 2 - 1, - ( event.clientY / getHeight() ) * 2 + 1 ); - raycaster.setFromCamera( mouse, camera ); - var intersects = raycaster.intersectObjects( objects ); - if ( intersects.length > 0 ) { - var intersect = intersects[ 0 ]; - var obj=getXYZfromName(intersect.object.name); + function updateHelperMeshesAfterRemove(grid,x,y,z){ + buildHelperSnap(grid,x,y,z); + var list=getNeighboursList(grid,x,y,z); - switch (event.which) { - case 1: - // console.log('Left Mouse button pressed.'); //add voxel - obj=getXYZfromName(rollOverMesh.name); - buildVoxelAt( grid, obj.x, obj.y,obj.z); - - //deleteHelper Meshes - var name='[' +obj.x +"," +obj.y+","+obj.z+']'; + for(var i=0;i<list.length;i++){ + var x1,y1,z1; + [x1,y1,z1]=list[i]; + if(!helperAt(x1,y1,z1)&&z1>0){ + // buildHelperSnap(grid,x1,y1,z1); + var name='[' +x1+"," +y1+","+z1+']'; var object = scene.getObjectByName( 'p'+name ); scene.remove( object ); objects.splice( objects.indexOf( object ), 1 ); - var object = scene.getObjectByName( 's'+name ); + object = scene.getObjectByName( 's'+name ); scene.remove( object ); + occupancyHelper[x1][y1][z1]=false; + } - buildNeighbourHelpers(grid, obj.x, obj.y,obj.z); - - break; - case 2: - // console.log('Middle Mouse button pressed.'); - break; - case 3: - // console.log('Right Mouse button pressed.');//remove voxel - break; - default: - // console.log('You have a strange Mouse!'); } - + } + + ///////////////////// + + function onDocumentMouseMove( event ) { + event.preventDefault(); + mouse.set( ( event.clientX / getWidth() ) * 2 - 1, - ( event.clientY /getHeight() ) * 2 + 1 ); + raycaster.setFromCamera( mouse, camera ); + var intersects = raycaster.intersectObjects( objects ); + if ( intersects.length > 0 ) { + var intersect = intersects[ 0 ]; + var obj=getXYZfromName(intersect.object.name); + + [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=getTransforms(grid,obj.x, obj.y,obj.z); + // console.log(getTransforms(grid,x, y,z)) + + // rollOverMesh.scale.x=s_x; + // rollOverMesh.scale.z=s_z; + // rollOverMesh.scale.y=s_y; + rollOverMesh.name="r["+parseInt(obj.x) +","+parseInt(obj.y) +","+parseInt(obj.z) +"]" + rollOverMesh.position.x=0; + rollOverMesh.position.y=0; + rollOverMesh.position.z=0; + + rollOverMesh.rotation.y=r_y; + + + rollOverMesh.position.x=p_x; + rollOverMesh.position.y=p_y; + rollOverMesh.position.z=p_z; + + + // rollOverMesh.position.copy( intersect.object.position ).add(temp ); + + } render(); } - -} + function onDocumentMouseDown( event ) { + + event.preventDefault(); + mouse.set( ( event.clientX / getWidth() ) * 2 - 1, - ( event.clientY / getHeight() ) * 2 + 1 ); + raycaster.setFromCamera( mouse, camera ); + var intersects = raycaster.intersectObjects( objects ); + var intersects1 = raycaster.intersectObjects( voxels ); + if ( intersects.length > 0 ||intersects1.length>0){ + if(event.which==1 && intersects.length > 0) { //left click + var intersect = intersects[ 0 ]; + var obj=getXYZfromName(intersect.object.name); + obj=getXYZfromName(rollOverMesh.name); + addNode (obj.x, obj.y,obj.z); + }else if ( intersects1.length > 0 && event.which==3){//right click + var intersect = intersects1[ 0 ]; + // console.log(intersect.object); + var obj=getXYZfromName(intersect.object.name); + removeNode(obj.x,obj.y,obj.z); + } + render(); + } + + } + + document.addEventListener('removeNode', function (e) { + var name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']'; + var object = scene.getObjectByName( name ); + scene.remove( object ); + voxels.splice( objects.indexOf( object ), 1 ); + updateHelperMeshesAfterRemove(grid,e.detail.x,e.detail.y,e.detail.z); + + + }, false); -///////////////////// + document.addEventListener('addNode', function (e) { + buildVoxelAt( grid, e.detail.x, e.detail.y,e.detail.z); -function getXYZfromName(name){ - var nums=name.match(/\d+/g); - var x=nums[0]; - var y=nums[1]; - var z=nums[2]; - return new THREE.Vector3(x,y,z); -} + //deleteHelper Meshes + var name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']'; + var object = scene.getObjectByName( 'p'+name ); + scene.remove( object ); + objects.splice( objects.indexOf( object ), 1 ); + object = scene.getObjectByName( 's'+name ); + scene.remove( object ); + occupancyHelper[e.detail.x][e.detail.y][e.detail.z]=false; -// -function changeToGrid(newGrid){ + buildNeighbourHelpers(grid, e.detail.x, e.detail.y,e.detail.z); + + }, false); + + // + function changeToGrid(newGrid){ + } + function getWidth(){ + // return container.style.width; + return $('#threejs').width() ; + } + + function getHeight(){ + // return container.style.height; + return $('#threejs').height() ; + } } +threejs(); diff --git a/01_Code/physical_computing_interface/threejs/grid1.js b/01_Code/physical_computing_interface/threejs/grid1.js new file mode 100644 index 0000000..1db5873 --- /dev/null +++ b/01_Code/physical_computing_interface/threejs/grid1.js @@ -0,0 +1,749 @@ +var color1= 0xffffff; /*white*/ +var color2= 0x020227; /*kohly*/ +var color3= 0x1c5c61; /*teal*/ +var color4= 0xfa6e70; //red/orange +var color5=0x380152; //purple +var color6=0x696767; //grey + +var camera, scene, renderer; +var plane; +var mouse, raycaster, isShiftDown = false; +// var rollOverMesh, rollOverMaterial; +var cubeGeo, cubeMaterial,sphereGeo,helperMaterial,helperPosition,helperColor; +var objects = []; +var container = document.getElementById( 'webgl' ); +// var container1 = document.getElementById( 'threejs' ); +var controls; +var voxelSpacing=50.0; +var occupancy,occupancyHelper; + + + +var gridPresets={ + Cubic : { + + xScale:1.0, + yScale:1.0, + zScale:1.0, + xLineOffset:0.0, + yLineOffset:0.0, + xLayerOffset:0.0, + yLayerOffset:0.0, + zLayerRotation:0.0, + doubleOffset:false, + voxelSpacing:voxelSpacing, + voxelScaleX:0.95, + voxelScaleY:0.95, + voxelScaleZ:0.95, + neighbors:[ + {x: 1,y: 0,z: 0}, + {x:-1,y: 0,z: 0}, + {x: 0,y: 1,z: 0}, + {x: 0,y:-1,z: 0}, + {x: 0,y: 0,z: 1}, + {x: 0,y: 0,z:-1} + ], + neighborsLayerOffset:[ + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0} + ] + }, + Aspect_2_1_4 : { + xScale:1.0, + yScale:0.5, + zScale:2.0, + xLineOffset:0.0, + yLineOffset:0.0, + xLayerOffset:0.0, + yLayerOffset:0.0, + zLayerRotation:0.0, + doubleOffset:false, + voxelSpacing:voxelSpacing, + voxelScaleX:1.0, + voxelScaleY:1.0, + voxelScaleZ:1.0, + neighbors:[ + {x: 1,y: 0,z: 0}, + {x:-1,y: 0,z: 0}, + {x: 0,y: 1,z: 0}, + {x: 0,y:-1,z: 0}, + {x: 0,y: 0,z: 1}, + {x: 0,y: 0,z:-1} + ], + neighborsLayerOffset:[ + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0} + ] + }, + FaceCenteredCubic: { + xScale:1.0, + yScale:1.0, + zScale:Math.sqrt(2)/2, + xLineOffset:0.0, + yLineOffset:0.0, + xLayerOffset:0.5, + yLayerOffset:0.5, + zLayerRotation:0.0, + doubleOffset:false, + voxelSpacing:voxelSpacing, + voxelScaleX:1.0, + voxelScaleY:1.0, + voxelScaleZ:1.0, + neighbors:[ + {x: 1,y: 0,z: 0}, + {x:-1,y: 0,z: 0}, + {x: 0,y: 1,z: 0}, + {x: 0,y:-1,z: 0}, + {x: 0,y: 0,z: 1}, + {x: 0,y: 0,z:-1} + ], + neighborsLayerOffset:[ + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0} + ] + + }, + HexagonalClosePacked: { + + xScale:1.0, + yScale:Math.sqrt(3)/2, + zScale:Math.sqrt(2)/Math.sqrt(3), + xLineOffset:0.5, + yLineOffset:0.0, + xLayerOffset:0.5, + yLayerOffset:1.0/Math.sqrt(12), + zLayerRotation:0.0, + doubleOffset:false, + voxelSpacing:voxelSpacing, + voxelScaleX:1.0, + voxelScaleY:1.0, + voxelScaleZ:1.0, + neighbors:[ + {x: 1,y: 0,z: 0}, + {x:-1,y: 0,z: 0}, + {x: 0,y: 1,z: 0}, + {x: 0,y:-1,z: 0}, + {x: 0,y: 0,z: 1}, + {x: 0,y: 0,z:-1} + ], + neighborsLayerOffset:[ + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 0,z: 0} + ] + + } , + Dice2: { + xScale:1.0, + yScale:1.0, + zScale:0.2, + xLineOffset:0.0, + yLineOffset:0.0, + xLayerOffset:0.0, + yLayerOffset:0.5, + zLayerRotation:Math.PI/2.0, + voxelSpacing:voxelSpacing, + doubleOffset:false, + voxelScaleX:0.5, + voxelScaleY:0.9, + voxelScaleZ:0.2, + neighbors:[ + {x: 0,y: 0,z: 1}, + {x: 0,y: 0,z:-1}, + {x: 0,y:-1,z: 1}, + {x: 0,y:-1,z:-1} + ], + neighborsLayerOffset:[ + {x: 0,y: 1,z: 0}, + {x: 0,y: 0,z: 0}, + {x: 0,y: 1,z: 0}, + {x: 0,y: 1,z: 0} //if rotated + ] + + }, + Dice: { + xScale:1.0, + yScale:1.0, + zScale:0.2, + xLineOffset:0.0, + yLineOffset:0.0, + xLayerOffset:0.0, + yLayerOffset:0.5, + doubleOffset:true, + xLayerOffset2:0.5, + yLayerOffset2:0.5, + zLayerRotation:Math.PI/2.0, + voxelSpacing:voxelSpacing, + voxelScaleX:0.5, + voxelScaleY:0.9, + voxelScaleZ:0.2, + neighbors:[ // layer 0, 4,8 + {x: 0,y:-1,z:-1}, + {x:-1,y:-1,z:-1}, + {x: 0,y:-1,z: 1}, + {x: 0,y: 0,z: 1} + ], + neighborsLayerOffset:[ // layer 1, 5, 9 + {x: 0,y: 1,z:-1}, + {x: 0,y: 0,z:-1}, + {x:-1,y: 0,z: 1}, + {x: 0,y: 0,z: 1} + ], + neighborsLayerOffset1:[ // layer 2, 6, 19 + {x: 1,y: 0,z:-1}, + {x: 0,y: 0,z:-1}, + {x: 0,y:-1,z: 1}, + {x: 0,y: 0,z: 1} + ], + neighborsLayerOffset2:[ // layer 3, 7, 11 + {x: 0,y: 1,z:-1}, + {x: 0,y: 0,z:-1}, + {x: 0,y: 1,z: 1}, + {x: 1,y: 1,z: 1} + ] + + } + + +} + +var grid=gridPresets.Dice; +var gridSize=20.0; + +init(); + +// buildGrid(5); + +function getWidth(){ + // return container.style.width; + return window.innerWidth; +} + +function getHeight(){ + // return container.style.height; + return window.innerHeight ; +} + +function init() { + camera = new THREE.PerspectiveCamera( 45, getWidth()/ getHeight() , 1, 10000 ); + camera.position.set( 500, 800, 1300 ); + camera.lookAt( gridSize/2, 0, gridSize/2 ); + scene = new THREE.Scene(); + scene.background = new THREE.Color( 0xffffff ); + + cubeGeo = new THREE.BoxBufferGeometry( voxelSpacing, voxelSpacing, voxelSpacing ); + sphereGeo = new THREE.SphereGeometry( voxelSpacing/2, 32, 32 ); + cubeMaterial = new THREE.MeshPhongMaterial( { color: 0x1c5c61 } ); + + // grid + var gridHelper = new THREE.GridHelper( (gridSize)*voxelSpacing, gridSize ); + gridHelper.position.x=gridSize/2.0*voxelSpacing-voxelSpacing/2.0; + gridHelper.position.z=gridSize/2.0*voxelSpacing-voxelSpacing/2.0; + gridHelper.position.y=-voxelSpacing/2.0*grid.voxelScaleZ; + + gridHelper.scale.x=grid.xScale; + gridHelper.scale.z=grid.yScale; + gridHelper.scale.y=grid.zScale; + scene.add( gridHelper ); + + + + // roll-over helpers + var rollOverGeo = new THREE.BoxBufferGeometry( voxelSpacing, voxelSpacing, voxelSpacing ); + rollOverMaterial = new THREE.MeshBasicMaterial( { color: color4, opacity: 0.8, transparent: true } ); + rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial ); + rollOverMesh.scale.x=grid.voxelScaleX; + rollOverMesh.scale.z=grid.voxelScaleY; + rollOverMesh.scale.y=grid.voxelScaleZ; + scene.add( rollOverMesh ); + + raycaster = new THREE.Raycaster(); + mouse = new THREE.Vector2(); + // var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 ); + // geometry.rotateX( - Math.PI / 2 ); + // plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) ); + // scene.add( plane ); + // objects.push( plane ); + + helperPosition = new Float32Array( 1 * 3 ); + var c = new THREE.Color( color1 ); + helperColor = new Float32Array( 1 * 3 ); + helperColor[0]=c.r; + helperColor[1]=c.g; + helperColor[2]=c.b; + helperMaterial = new THREE.PointsMaterial( { size: 5, vertexColors: THREE.VertexColors,color:color3 } ); + + buildGrid(gridSize); + createHelperMeshes(gridSize); + + + // var axesHelper = new THREE.AxesHelper( 20 *grid.voxelSpacing); + // scene.add( axesHelper ); + + // lights + var ambientLight = new THREE.AmbientLight( 0x606060 ); + scene.add( ambientLight ); + var directionalLight = new THREE.DirectionalLight( 0xffffff ); + directionalLight.position.set( 1, 0.75, 0.5 ).normalize(); + scene.add( directionalLight ); + renderer = new THREE.WebGLRenderer( { antialias: true } ); + renderer.setPixelRatio( window.devicePixelRatio ); + renderer.setSize( getWidth(), getHeight() ); + + renderer = new THREE.WebGLRenderer(); + + container.appendChild( renderer.domElement ); + controls = new THREE.OrbitControls( camera, renderer.domElement ); + controls.target=new THREE.Vector3( gridSize/2*voxelSpacing,0 ,gridSize/2*voxelSpacing ); + controls.update(); + + // document.body.appendChild( renderer.domElement ); + onWindowResize(); + container.addEventListener( 'mousemove', onDocumentMouseMove, false ); + container.addEventListener( 'mousedown', onDocumentMouseDown, false ); + // window.addEventListener( 'keydown', onDocumentKeyDown, false ); + // window.addEventListener( 'keyup', onDocumentKeyUp, false ); + // + window.addEventListener( 'mouseup', onWindowResize, false ); + + window.addEventListener( 'resize', onWindowResize, false ); + + + animate(); +} + + +//////////////////////// + +function onWindowResize( event ) { + + camera.aspect = getWidth() / getHeight(); + camera.updateProjectionMatrix(); + + renderer.setSize( getWidth(), getHeight() ); +} + +function animate() { + + requestAnimationFrame( animate ); + + render(); +} + +function render() { + renderer.render( scene, camera ); + controls.update(); +} + +//////////////////////////// +function buildGrid(gridSize){ + occupancy=[]; + occupancyHelper=[]; + for (var i=0;i<gridSize;++i){ + occupancy.push([]); + occupancyHelper.push([]); + for (var j=0;j<gridSize;++j){ + occupancy[i].push([]); + occupancyHelper[i].push([]); + for (var k=0;k<gridSize;++k){ + occupancy[i][j].push(false); + occupancyHelper[i][j].push(false); + } + } + } + + // buildVoxelAt(grid, 0, 0,0); + // buildVoxelAt(grid, 1, 0,0); + + // buildVoxelAt(grid, 0, 1,0); + // buildVoxelAt(grid, 1, 1,0); + + // buildVoxelAt(grid, 5, 5,4); //voxel + // buildVoxelAt(grid, 5, 4,3); //neighbour + // buildVoxelAt(grid, 4, 4,3); //neighbour + // buildVoxelAt(grid, 5, 4,5); //neighbour + // buildVoxelAt(grid, 5, 5,5); //neighbour + + //rule 1 if (5,5) z==4, neighbors: (0,-1,-1) (-1,-1,-1) (0,-1, 1) (0,0, 1) // layer 0, 4,8 + + // buildVoxelAt(grid, 15, 3, 1); //voxel + // buildVoxelAt(grid, 15, 4, 0); //neighbour + // buildVoxelAt(grid, 15, 3, 0); //neighbour + // buildVoxelAt(grid, 14, 3, 2); //neighbour + // buildVoxelAt(grid, 15, 3, 2); //neighbour + + //rule 2 if (10,5) z==4, neighbors: (0,1,-1) (0,0,-1) (-1, 0, 1) (0,0,1) // layer 1, 5, 9 + + + // buildVoxelAt(grid, 10, 10,6); //voxel + // buildVoxelAt(grid, 11, 10,5); //neighbour + // buildVoxelAt(grid, 10, 10,5); //neighbour + // buildVoxelAt(grid, 10, 9,7); //neighbour + // buildVoxelAt(grid, 10, 10,7); //neighbour + + //rule 2 if (10,5) z==4, neighbors: (1,0,-1) (0,0,-1) (0,-1, 1) (0,0,1) // layer 2, 6, 19 + + // buildVoxelAt(grid, 10, 3,11); //voxel + + // buildVoxelAt(grid, 10, 4,10); //neighbour + // buildVoxelAt(grid, 10, 3,10); //neighbour + // buildVoxelAt(grid, 10, 4,12); //neighbour + // buildVoxelAt(grid, 11, 4,12); //neighbour + + //rule 2 if (10,5) z==4, neighbors: (0,1,-1) (0,0,-1) (0, 1, 1) (1,1,1) // layer 3, 7, 11 + + + + + // buildVoxelAt( 10, 0,0); + // for (var i=0;i<gridSize;++i){ + // for (var j=0;j<gridSize;++j){ + // for (var k=0;k<3;++k){ + // // if(k<5){ + // buildVoxelAt(grid, i, j,k); + // // console.log(i+" "+ j+" "+k) + // occupancy[i][j][k]=true; + // // } + // } + // } + // } +} + +function buildVoxelAt( grid,x, y,z){ + occupancy[x][y][z]=true; + var voxel = new THREE.Mesh( cubeGeo, cubeMaterial ); + // var voxel = new THREE.Mesh( sphereGeo, cubeMaterial ); + + var p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y; + [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=getTransforms(grid,x, y,z); + // console.log(getTransforms(grid,x, y,z)) + + voxel.scale.x=s_x; + voxel.scale.z=s_z; + voxel.scale.y=s_y; + + voxel.position.x=0; + voxel.position.y=0; + voxel.position.z=0; + + voxel.rotation.y=r_y; + + + voxel.position.x=p_x; + voxel.position.y=p_y; + voxel.position.z=p_z; + + // voxel.scale.x=grid.voxelScaleX; + // voxel.scale.z=grid.voxelScaleY; + // voxel.scale.y=grid.voxelScaleZ; + + // console.log([voxel.position.x ,voxel.position.y ,voxel.position.z ,voxel.scale.x,voxel.scale.y,voxel.scale.z,voxel.rotation.y]) + + // voxel.position.x=0.0; + // voxel.position.y=0.0; + // voxel.position.z=0.0; + // if(z%2!=0){ + // voxel.rotation.y=grid.zLayerRotation; + // voxel.position.x+=grid.voxelSpacing*grid.xScale*(grid.xLayerOffset); + // voxel.position.z+=grid.voxelSpacing*grid.yScale*(grid.yLayerOffset); + + // } + + // voxel.position.x+=grid.voxelSpacing*grid.xScale*(x ); + // voxel.position.z+=grid.voxelSpacing*grid.yScale*(y ); + // voxel.position.y+=grid.voxelSpacing*grid.zScale*(z ); + + // if(y%2!=0){ + // voxel.position.x+=grid.voxelSpacing*grid.xScale*(grid.xLineOffset); + // voxel.position.z+=grid.voxelSpacing*grid.yScale*(grid.yLineOffset); + + // } + + // console.log([voxel.position.x ,voxel.position.y ,voxel.position.z ,voxel.scale.x,voxel.scale.y,voxel.scale.z,voxel.rotation.y]) + + + scene.add(voxel); +} + +function getTransforms(grid,x, y,z){ + var s_x=grid.voxelScaleX; + var s_z=grid.voxelScaleY; + var s_y=grid.voxelScaleZ; + + var p_x=0.0; + var p_y=0.0; + var p_z=0.0; + var r_y=0.0; + if(z%2!=0){ + r_y=grid.zLayerRotation; + p_x+=grid.voxelSpacing*grid.xScale*(grid.xLayerOffset); + p_z+=grid.voxelSpacing*grid.yScale*(grid.yLayerOffset); + + } + if(grid.doubleOffset){ + if(parseInt(z/2)%2!=0){ + p_x+=grid.voxelSpacing*grid.xScale*(grid.xLayerOffset2); + p_z+=grid.voxelSpacing*grid.yScale*(grid.yLayerOffset2); + } + } + + p_x+=grid.voxelSpacing*grid.xScale*(x ); + p_z+=grid.voxelSpacing*grid.yScale*(y ); + p_y+=grid.voxelSpacing*grid.zScale*(z ); + + if(y%2!=0){ + p_x+=grid.voxelSpacing*grid.xScale*(grid.xLineOffset); + p_z+=grid.voxelSpacing*grid.yScale*(grid.yLineOffset); + + } + return [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]; +} + +function createHelperMeshes(gridSize){ + for (var i=0;i<gridSize;++i){ + for (var j=0;j<gridSize;++j){ + buildHelperSnap(grid,i,j,0); + } + } + +} + +function buildHelperSnap(grid,x,y,z){ + occupancyHelper[x][y][z]=true; + var geometry = new THREE.PlaneBufferGeometry( grid.voxelSpacing*grid.xScale, grid.voxelSpacing*grid.yScale ); + geometry.rotateX( - Math.PI / 2 ); + plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) ); + // plane = new THREE.Mesh( geometry,helperMaterial ); + + + [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=getTransforms(grid,x, y,z); + // console.log(getTransforms(grid,x, y,z)) + + plane.scale.x=s_x; + plane.scale.z=s_z; + // rollOverMesh.scale.y=s_y; + + plane.position.x=0; + plane.position.y=0; + plane.position.z=0; + + plane.rotation.y=r_y; + + + plane.position.x=p_x; + plane.position.y=p_y; + plane.position.z=p_z; + + // plane.scale.x=grid.xScale*0.95; + // plane.scale.z=grid.yScale*0.95; + + // plane.position.x=0.0; + // plane.position.y=0.0; + // plane.position.z=0.0; + + // plane.position.x+=grid.voxelSpacing*grid.xScale*(x ); + // plane.position.z+=grid.voxelSpacing*grid.yScale*(y ); + // plane.position.y+=grid.voxelSpacing*grid.zScale*(z ); + + // if(y%2!=0){ + // plane.position.x+=grid.voxelSpacing*grid.xScale*(grid.xLineOffset); + // plane.position.z+=grid.voxelSpacing*grid.yScale*(grid.yLineOffset); + + // } + // plane.position.y-=grid.voxelSpacing*grid.zScale/2.0; + plane.name="p["+parseInt(x) +","+parseInt(y) +","+parseInt(z) +"]"; + + + + + + + helperPosition[0]=plane.position.x; + helperPosition[1]=plane.position.y; + helperPosition[2]=plane.position.z; + var helperGeometry = new THREE.BufferGeometry(); + helperGeometry.setAttribute( 'position', new THREE.BufferAttribute( helperPosition.slice(), 3 ) ); + helperGeometry.setAttribute( 'color', new THREE.BufferAttribute( helperColor.slice(), 3 ) ); + helper = new THREE.Points( helperGeometry, helperMaterial ); + helper.name="s["+parseInt(x) +","+parseInt(y) +","+parseInt(z) +"]"; + + scene.add( helper ); + scene.add( plane ); + objects.push( plane ); +} + +function buildNeighbourHelpers(grid, x, y,z){ + + for(var i=0;i<grid.neighbors.length;i++){ + //if 0,4,8 + var x1=parseInt(x)+grid.neighbors[i].x; + var y1=parseInt(y)+grid.neighbors[i].y; + var z1=parseInt(z)+grid.neighbors[i].z; + if(z%2!=0){ + x1+=grid.neighborsLayerOffset[i].x + y1+=grid.neighborsLayerOffset[i].y + z1+=grid.neighborsLayerOffset[i].z + } + if(grid.doubleOffset){ + if(parseInt(z/2)%2!=0){ //2,3 , 6,7 + if(z%2!=0){//3,7,11 + console.log("neighbors 3 7") + x1=parseInt(x)+grid.neighborsLayerOffset2[i].x; + y1=parseInt(y)+grid.neighborsLayerOffset2[i].y; + z1=parseInt(z)+grid.neighborsLayerOffset2[i].z; + }else{//2,6 + console.log("neighbors 2 6") + x1=parseInt(x)+grid.neighborsLayerOffset1[i].x; + y1=parseInt(y)+grid.neighborsLayerOffset1[i].y; + z1=parseInt(z)+grid.neighborsLayerOffset1[i].z; + + } + }else{ //0,1 ,4,5 + if(z%2!=0){//1,5 + console.log("neighbors 1 5") + x1=parseInt(x)+grid.neighborsLayerOffset[i].x; + y1=parseInt(y)+grid.neighborsLayerOffset[i].y; + z1=parseInt(z)+grid.neighborsLayerOffset[i].z; + }else{ //0,4 + console.log("neighbors 0 4") + } + + } + } + if(helperAt(x1,y1,z1)){ + buildHelperSnap(grid,x1,y1,z1); + } + + } + + //go through all neighbours + //if occupancy empty + //add helper meshes?? + //how to rotate plane + +} + +function helperAt(x,y,z){ + if(x<0||y<0||z<0){ + return false; + } + if(x>=gridSize||y>=gridSize||z>=gridSize){ + return false; + } + if(occupancy[x][y][z]||occupancyHelper[x][y][z]){ + return false; + } + + return true; + +} + +///////////////////// + +function onDocumentMouseMove( event ) { + event.preventDefault(); + mouse.set( ( event.clientX / getWidth() ) * 2 - 1, - ( event.clientY /getHeight() ) * 2 + 1 ); + raycaster.setFromCamera( mouse, camera ); + var intersects = raycaster.intersectObjects( objects ); + if ( intersects.length > 0 ) { + var intersect = intersects[ 0 ]; + var obj=getXYZfromName(intersect.object.name); + + [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=getTransforms(grid,obj.x, obj.y,obj.z); + // console.log(getTransforms(grid,x, y,z)) + + // rollOverMesh.scale.x=s_x; + // rollOverMesh.scale.z=s_z; + // rollOverMesh.scale.y=s_y; + rollOverMesh.name="r["+parseInt(obj.x) +","+parseInt(obj.y) +","+parseInt(obj.z) +"]" + rollOverMesh.position.x=0; + rollOverMesh.position.y=0; + rollOverMesh.position.z=0; + + rollOverMesh.rotation.y=r_y; + + + rollOverMesh.position.x=p_x; + rollOverMesh.position.y=p_y; + rollOverMesh.position.z=p_z; + + + // rollOverMesh.position.copy( intersect.object.position ).add(temp ); + + } + render(); +} + +function onDocumentMouseDown( event ) { + + event.preventDefault(); + mouse.set( ( event.clientX / getWidth() ) * 2 - 1, - ( event.clientY / getHeight() ) * 2 + 1 ); + raycaster.setFromCamera( mouse, camera ); + var intersects = raycaster.intersectObjects( objects ); + if ( intersects.length > 0 ) { + var intersect = intersects[ 0 ]; + var obj=getXYZfromName(intersect.object.name); + + switch (event.which) { + case 1: + // console.log('Left Mouse button pressed.'); //add voxel + obj=getXYZfromName(rollOverMesh.name); + buildVoxelAt( grid, obj.x, obj.y,obj.z); + + //deleteHelper Meshes + var name='[' +obj.x +"," +obj.y+","+obj.z+']'; + var object = scene.getObjectByName( 'p'+name ); + scene.remove( object ); + objects.splice( objects.indexOf( object ), 1 ); + var object = scene.getObjectByName( 's'+name ); + scene.remove( object ); + + buildNeighbourHelpers(grid, obj.x, obj.y,obj.z); + + break; + case 2: + // console.log('Middle Mouse button pressed.'); + break; + case 3: + // console.log('Right Mouse button pressed.');//remove voxel + break; + default: + // console.log('You have a strange Mouse!'); + } + + render(); + } + + +} + +///////////////////// + +function getXYZfromName(name){ + var nums=name.match(/\d+/g); + var x=nums[0]; + var y=nums[1]; + var z=nums[2]; + return new THREE.Vector3(x,y,z); +} + +// +function changeToGrid(newGrid){ + +} + -- GitLab