56 web/beta/scripts/betafunctions.js
View file
@@ -1,4 +1,26 @@
//server & data responses / connections
function getValues(){
data[dataset].pts.forEach(function(ele,ite){
allValues[ite] = ele.value
})
}
function assess(){
allValues.forEach(function(ele,ite){
criteria[dataset].forEach(function(el,it){
if(ele>=el.min&&ele<=el.max){
grades[ite].what = el.name
var range = el.max-el.min, mid = el.max-(range/2)
if(Math.abs(ele-mid)<(range/3)){
grades[ite].rel = 'mid'
}else if((ele-mid)>0){
grades[ite].rel = "high"
}else if((ele-mid)<0){
grades[ite].rel = "low"
}
}
})
})
}
function updatePillars(plr){
var index = plr.replace('plr','')
spd = Math.abs((seseme.getObjectByName(plr).position.y - tgtHts[index].y)*100) + 400
@@ -12,13 +34,16 @@ function updatePillars(plr){
}

// labeling and projection initialization (styling happens here)


function initProjections(tgt,atr){
var projections = new THREE.Group()

projections.name = "projections"
for(var i = 0; i<atr.xyz.length; i++){
tgt['p'+i] = new THREE.Mesh(new THREE.PlaneGeometry(atr.xyz[i].dimX,atr.xyz[i].dimY),
new THREE.MeshBasicMaterial({transparent: true, opacity: 0,
map: THREE.ImageUtils.loadTexture('assets/test/test.png')}))
var mtl = new THREE.MeshBasicMaterial({transparent:true,opacity:0})
tgt['p'+i] = new THREE.Mesh(new THREE.PlaneBufferGeometry(atr.xyz[i].dimX,atr.xyz[i].dimY),
mtl)
tgt['p'+i].rotation.y = rads(atr.origin.ry)
tgt['p'+i].expand = {x: atr.xyz[i].x, y: atr.xyz[i].y, z: atr.xyz[i].z}
tgt['p'+i].origin = {x: atr.origin.x, y: atr.origin.y, z: atr.origin.z}
@@ -29,6 +54,24 @@ function initProjections(tgt,atr){
}
projections.adjust = {x: atr.adjust.x, y: atr.adjust.y, z: atr.adjust.z}
tgt.add(projections)
}
function populateProjection(plr, mode, mtl){ //populate projections with data
//1: grade with correct icon, give it subordinate planes
//- get data (300 co2 lbs.) of parent plr --> data
//- grade it through criteria system, get two words and picture
//- apply picture to projection map
//- apply those two words to two canvasas and map them to two planes
//- scale those two planes to x0z0, give em expansion coord properties
if(mode==='grade'){
var index = plr.replace('plr','')
var icon = grades[index].what
mtl.map = new THREE.ImageUtils.loadTexture('assets/'+icon+'.svg')
console.log(mtl.map)
}




}
function makePrev(text,type,position,scale,bg,color){
var cvs = document.createElement('canvas'), ctx = cvs.getContext('2d'), tex = new THREE.Texture(cvs),
@@ -67,7 +110,7 @@ function makePrev(text,type,position,scale,bg,color){
subY=0
}
console.log(cvs.width)
var mesh = new THREE.Mesh(new THREE.PlaneGeometry(cvs.width, cvs.height), mtl)
var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(cvs.width, cvs.height), mtl)
mesh.scale.set(scale,scale+0.003,scale)
mesh.position.set(position.x,position.y-subY,position.z)
mesh.rotation.set(position.rx,position.ry,position.rz)
@@ -241,7 +284,6 @@ function browse(obj){ //rotation driven info changes
})
lookingAt = obj
if(mode==="explore"){

// var text = document.getElementById('infoBottom')
// text.textContent = data[dataset].pts[index].name
}
@@ -260,7 +302,6 @@ function browse(obj){ //rotation driven info changes
selectedPillar = obj
moveCam({zoom: 1.75, y: 19+(obj.position.y*0.8)},500)
}

}
function delve(obj){ //view depth on selected object
if(mode==="explore"){
@@ -359,6 +400,7 @@ function collapse(obj){ //collapses projections
function selectProjection(obj, onoff){
var current = {x:obj.position.x,y:obj.position.y,z:obj.position.z,s: obj.scale.x, opacity: obj.material.opacity}
var select = new TWEEN.Tween(current)
var bottom = document.getElementById('infoBottom')
if(onoff){
mode = 'detail'
selectedProjection = obj
@@ -367,6 +409,8 @@ function selectProjection(obj, onoff){
select.onComplete(function(){
console.log('detail mode @ ' +obj.name)
})
Velocity(bottom,{height:'6rem'})

}else{
select.to({x:obj.expand.x,y:obj.expand.y, z:obj.expand.z, s: 1, opacity: 0.85},450)
}
32 web/beta/scripts/setup.js
View file
@@ -1,8 +1,7 @@

var dataset = 'ucd_bldgA', metric = 'energy',
dataIndex
var dataset = 'ucd_bldg_nrg'

var allValues = [], grades = [0,0,0,0], gradeRange = []
var allValues = [], grades = [{rel:'',what:''},{rel:'',what:''},{rel:'',what:''},{rel:'',what:''}]

var scene = new THREE.Scene(), camera, renderer,
seseme = new THREE.Group(), plr0, plr1, plr2, plr3, pedestal,
@@ -34,15 +33,12 @@ function setup(){
eventListeners()
syncToData()
// initExperiment()
// createText(seseme,'Student Community Center','Source Serif Pro',
// {x:10,y:-5,z:15,rx:0,ry:0,rz:0},0.045,550,'','black')

function cameraSetup(){
var aspect = window.innerWidth / window.innerHeight

var d = 20
camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 5, 100 )
// camera.position.set( -20, 20, 20 )
camera.position.set( -20, 14.75, 20 )
camera.rotation.order = 'YXZ'
camera.rotation.y = - Math.PI / 4
@@ -140,10 +136,7 @@ function setup(){
projections.position.set(0,-17.6,0)

// pedestal.add(projections)

createPreviews()


})

loader.load("assets/pillarA.js", function(geometry,evt){
@@ -176,13 +169,11 @@ function setup(){
{dimX:2.75, dimY:3.25, x:1.5, y:6.75, z:8.5},
{dimX:2.75, dimY:3.25, x:5, y:1.5, z:11.5},
{dimX:2.75, dimY:3.25, x:-1.5, y:1.5, z:5},
// {dimX:7.5, dimY:8, x:2, y:2, z:8}
]
}
initProjections(plr0,plrAprojections)
initProjections(plr3,plrAprojections)
// createText(plr0,'Plant/Enviro Sci.','Source Serif Pro',
// {x:-1,y:-5,z:11,rx:rads(-35.26),ry:rads(-45),rz:rads(-23.25)},0.04,300,'white','black')

})
loader.load("assets/pillarB.js", function(geometry,evt){
plr1 = new THREE.Mesh(geometry, sesememtl)
@@ -211,19 +202,15 @@ function setup(){
modes: ['grade','info','stats'],
adjust: {x:1,y:1,z:1},
xyz: [
{dimX:2.75, dimY:3.25, x:8, y:6.75, z:8},
{dimX:2.75, dimY:3.25, x:5, y:1.5, z:11},
{dimX:2.75, dimY:3.25, x:11, y:1.5, z:5},
// {dimX:7.5, dimY:8, x:8, y:2, z:8}
]
{dimX:2.75, dimY:3.25, x:8, y:6.75, z:8},
{dimX:2.75, dimY:3.25, x:5, y:1.5, z:11},
{dimX:2.75, dimY:3.25, x:11, y:1.5, z:5}
]
}
initProjections(plr1,plrBprojections)
initProjections(plr2,plrBprojections)

})



//the orb is generated here (adjust segments for smooth)
var orb = new THREE.Mesh( new THREE.SphereGeometry( 2.5, 7, 5 ), orbmtl )
orb.name = "orb"
@@ -308,9 +295,8 @@ function setup(){

}//end function eventListeners
function syncToData(){ //get all data, populate 3d and DOM/UI
dataIndex = data[dataset].metrics.indexOf(metric)

// console.log(data[dataset].pts[0].stats[dataIndex])
getValues()
assess()
}
} //end setup

6 web/beta/styles/UI.css
View file
@@ -38,21 +38,21 @@ html{
.info{
font-family: 'Fira Sans';
position: absolute;
/*border: 1px black solid;*/
z-index: 1;
}

#infoTop{
top: 0; left: 0; right: 0;
margin: 0 auto;
width: 100%;
height: 3rem;
height: 0;
}
#infoBottom{
bottom: 0; left: 0; right: 0;
margin: 0 auto;
width: 100%;
height: 3rem;
height: 0;
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.85));
}
#infoLeft{
width: 0.1rem; height: 3rem;
2 web/styles/UI.css
View file
@@ -77,7 +77,6 @@ h3,h4,h5,h6 {
/* NAVIGATION BUTTONS */

#uiNav /* holds fixed UI nav at bottom */ {
opacity: 0;
position: absolute;
bottom: 3%;
z-index: 5;
@@ -106,7 +105,6 @@ h3,h4,h5,h6 {
/* BODY SECTIONS */

#uiBody { /*holds dynamic UI data/content */
display: none;
position: absolute;
left: 0;
right: 0;