Skip to content

Instantly share code, notes, and snippets.

@marklundin

marklundin/gist:7536365

Created November 18, 2013 22:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save marklundin/7536365 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save marklundin/7536365 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
define([
'geometry/delaunay',
'meshes/meter',
'geom!models/label.js',
'utils/easing',
'models/map',
'utils/math',
'tweets',
'meny',
'geom!models/intro-hate.js',
'geom!models/intro-love.js',
'angular',
'threejs',
'tween',
'jquery',
'OrbitControls'
],function( triangulate, meter, label, easing, map, math, tweets, Meny, hateGraph, loveGraph ){
var self = this,
HEADER_HEIGHT = $(".header-container").height() + $("#love-title").height(),
$w = $(window),
$body = $('body'),
$hashtag = $('#hashtag'),
$tweetContent = $('#tweet-content'),
love = $('#love'),
lastSentZip = '',
hate = $('#hate'),
handle = $('#handle'),
divider = $('.divider-line'),
mouseTarget = window.innerWidth,
running = false;
mousePos = window.innerWidth;
function onPostSuccess(){
if(meny){
meny.close();
}
}
window.onPostSuccessHandlers.push(onPostSuccess);
function matrixLerp( from, to, target, n ){
for (var i = 0; i < 16; i++){
target.elements[i] = math.lerp( n, from.elements[i], to.elements[i] );
}
return target;
}
function showHate(){
$('body').addClass('hate').removeClass('love');
$hashtag.html('#ihatemyjob');
$('#tweet-content').attr('placeholder', 'Why do you hate your job?');
}
function showLove(){
$('body').addClass('love').removeClass('hate');
$hashtag.html('#ilovemyjob');
$('#tweet-content').attr('placeholder', 'Why do you love your job?');
}
// create menu
var meny = Meny.create({
menuElement: $('.popup').get(0),
contentsElement: $('.map-container').get(0),
position: 'top',
height:305,
mouse:false,
touch: false
});
// updateMask();
var hasWebGL = !window.WebGLRenderingContext ? false : document.createElement('canvas').getContext("webgl") !== null;
var mouseX = 0, mouseY;
// $( window ).resize( updateMask );
$('#close-popup').click(function(){
controls.enabled = true;
meny.close();
});
$( "#post-twitter").click(function(){
controls.enabled = false;
meny.open();
$tweetContent.get(0).focus();
// window.open( 'http://lovemyjob.jit.su/connect', 'Find me','height=500,width=500,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no');
});
// OAuth flow for twitter
$('.add-tweet-to-map').click(function(){
var message = $('#tweet-content').val(),
zip = $('#zip-code').val(),
isHate = $('body').hasClass('hate'),
hashtag = isHate ? ' #ihatemyjob' : ' #ilovemyjob',
vars = '?message=' + encodeURIComponent(message + hashtag) + '&zip=' + encodeURIComponent(zip);
if(message === ''){
console.error('No tweet message.');
return;
}
if(zip === '' || !isValidUSZip(zip)){
console.error('Not valid zip code.');
return;
}
lastSentZip = zip;
window.open(window.location.origin + '/redirect.php' + vars, 'twitterwindow', 'height=450, width=550, top='+($w.height()/2 - 225) +', left='+$w.width()/2 +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
function isValidUSZip(sZip) {
return (/^\d{5}(-\d{4})?$/).test(sZip);
}
});
$hashtag.click(function(){
var isHate = $('body').hasClass('hate');
if(isHate){
showLove();
positionDivide(0.9, true);
}else{
showHate();
positionDivide(0.1, true);
}
});
var isMouseOverDivide = false,
currHandleTopTarget;
divider.mouseover(function(e){
isMouseOverDivide = true;
});
divider.mouseout(function(e){
isMouseOverDivide = false;
//currHandleTopTarget = 275;
});
$('body').mousemove(function(e){
if(isMouseOverDivide){
currHandleTopTarget = e.pageY;
}
});
var Renderer = hasWebGL ? THREE.WebGLRenderer : THREE.CanvasRenderer;
var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100000 ),
orthoPro = new THREE.OrthographicCamera( window.innerWidth / - 3, window.innerWidth / 3, window.innerHeight / 3, window.innerHeight / - 3, 1, 100000 ).projectionMatrix,
loveRenderer= new Renderer({alpha:true, antialias:true }),
hateRenderer= new Renderer({alpha:true, antialias:true }),
controls = new THREE.OrbitControls( camera, document.getElementById( 'map-container' )),
projector = new THREE.Projector(),
mouse = new THREE.Vector3( 0, 0, camera.near );
raycaster = new THREE.Raycaster( camera.position, mouse.sub( camera.position ).normalize() );
// loveRenderer.setClearColor( 0xFF0000 );
controls.noZoom = true;
controls.noPan = true;
// controls.noRoll = true;
controls.enabled = false;
controls.dynamicDampingFactor = 0.6;
controls.maxPolarAngle = Math.PI * 0.5;
controls.rotateSpeed = 0.9;
var loveScene = new THREE.Scene();
var hateScene = new THREE.Scene();
var light = new THREE.DirectionalLight();
light.position.x = -500;
light.position.y = 500;
loveScene.plane = new THREE.Mesh( label.geometry, new THREE.MeshBasicMaterial({color:new THREE.Color().setRGB( 138/255, 143/255, 149/255 ), wireframe:false}) )
hateScene.plane = new THREE.Mesh( label.geometry.clone(), new THREE.MeshBasicMaterial({color:new THREE.Color().setRGB( 138/255, 143/255, 149/255 ), wireframe:false}) )
loveScene.fillPlane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 900 ), new THREE.MeshBasicMaterial({color:new THREE.Color().setRGB( 215/255, 219/255, 230/255 ), wireframe:false}) )
hateScene.fillPlane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 900 ), new THREE.MeshBasicMaterial({color:new THREE.Color().setRGB( 21/255, 23/255, 35/255 ), wireframe:false}) )
// var vl = loveScene.mapAsset.geometry.vertices.length;
// while( vl-- > 0 ){
// loveScene.mapAsset.geometry.vertices[vl].z = 0;
// }
// hateScene.mapAsset.dynamic = true;
hateScene.fillPlane.rotation.x = loveScene.fillPlane.rotation.x = hateScene.plane.rotation.x = loveScene.plane.rotation.x = Math.PI * -0.5;
hateScene.fillPlane.position.y = loveScene.fillPlane.position.y = -1;
// hateScene.plane.scale = loveScene.plane.scale;
// loveScene.plane.scale.set( 1.6, 1.6, 1 );
// wfmap.position = loveScene.mapAsset.position = hateScene.mapAsset.position;
// wfmap.scale = loveScene.mapAsset.scale = hateScene.mapAsset.scale;
//
// loveScene.particles.scale.y = hateScene.mapAsset.scale.y = -1;
// loveScene.particles.position.y += 1;
// var cont = new THREE.Object3D();
// cont.add( loveScene.mapAsset );
// cont.add( loveScene.particles );
// loveScene.map = cont;
// cont = new THREE.Object3D();
// cont.add( hateScene.mapAsset );
// hateScene.map = cont;
var blue = new THREE.Color().setRGB( 42/255, 169/255, 224/255 )
hateScene.light = light;
loveScene.light = light.clone();
loveScene.add( loveScene.map );
hateScene.add( hateScene.map );
loveScene.add( loveScene.fillPlane );
loveScene.add( hateScene.fillPlane );
loveScene.add( loveScene.plane );
hateScene.add( hateScene.plane );
loveScene.add( loveScene.light );
hateScene.add( hateScene.light );
loveScene.add( new meter( new THREE.MeshBasicMaterial({color:blue, wireframe: false}),
new THREE.MeshBasicMaterial({color:new THREE.Color( 0xE07CA0 ), wireframe: false})) );
hateScene.add( new meter( new THREE.MeshBasicMaterial({color:blue, wireframe: false}),
new THREE.MeshBasicMaterial({color:new THREE.Color( 0xD4B349 ), wireframe: false})) );
camera.position.z = 1100;
// camera.position.y = 100;
camera.lookAt( loveScene.position );
var hateCamera = camera.clone();
hateCamera.position = camera.position;
// hateCamera.projectionMatrix = camera.projectionMatrix;
hateCamera.up = camera.up;
hateCamera.lookAt( loveScene.position );
document.getElementById('love').appendChild( loveRenderer.domElement );
document.getElementById('hate').appendChild( hateRenderer.domElement );
loveRenderer.setSize( loveRenderer.domElement.offsetWidth, loveRenderer.domElement.offsetHeight );
hateRenderer.setSize( hateRenderer.domElement.offsetWidth, hateRenderer.domElement.offsetHeight );
var resizeTimeout = null,
startingDivideRatio = -1;
function resize(){
resizing = true;
hateCamera.aspect =camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
hateCamera.updateProjectionMatrix();
var h = window.innerHeight;// - $('.header').height();
love.height( h );
hate.height( h );
// get current divide ratio
var pos = hate.css('clip').split('px');
pos = pos[pos.length - 2];
var currentDivideRatio = parseInt(pos, 10) / window.innerWidth;
// positionDivide(currentDivideRatio);
// if(resizeTimeout){
// clearTimeout(resizeTimeout);
// resizeTimeout = null;
// }else{
// startingDivideRatio = currentDivideRatio;
// }
// resizeTimeout = setTimeout(function(){
// clearTimeout(resizeTimeout);
// resizeTimeout = null;
// if(startingDivideRatio >= 0){
// //TweenMax.to(hate, 0.75, { clip:'rect(0px, ' + window.innerWidth + 'px, ' + window.innerHeight + 'px, ' + (startingDivideRatio * window.innerWidth) +'px)', ease:Cubic.easeOut});
// positionDivide( startingDivideRatio, true );
// TweenMax.to( handle, 0.75, { left: (startingDivideRatio * window.innerWidth - (handle.outerWidth() * 0.5)) + 'px', ease:Cubic.easeOut});
// TweenMax.to( divider, 0.75, { left: (startingDivideRatio * window.innerWidth) + 'px', ease:Cubic.easeOut});
// }
// }, 300);
HEADER_HEIGHT = $(".header-container").innerHeight() + $("#love-title").innerHeight();
// console.log( $(".header-container").innerHeight(), $("#love-title").innerHeight() );
$('.map-container').css('height', h - HEADER_HEIGHT);
loveRenderer.setSize( window.innerWidth, h - HEADER_HEIGHT );
hateRenderer.setSize( window.innerWidth, h - HEADER_HEIGHT );
}
document.addEventListener( 'mousemove', function(){
mouseX = ( event.clientX / window.innerWidth ) * 2 - 1;
mouseY = -Math.max( 0, ( event.pageY- HEADER_HEIGHT ) / loveRenderer.domElement.height ) * 2 + 1;
// console.log( (( event.pageY- HEADER_HEIGHT ) / love.height()) );
// console.log( ( event.pageY- HEADER_HEIGHT ), loveRenderer.domElement.height );
});
function positionDivide(ratio, isAnimated){
var updateHandlePosition = function(){
var pos = hate.css('clip').split('px');
pos = pos[pos.length - 2];
var drg_w = handle.outerWidth();
handle.css({
left:pos - (drg_w / 2) + 'px'
});
};
var xVal = (ratio * window.innerWidth);
if(isAnimated){
TweenMax.to(divider, 0.75, {left: xVal + 'px', ease:Cubic.easeOut});
TweenMax.to(hate, 0.75, { clip:'rect(0px, ' + window.innerWidth + 'px, ' + window.innerHeight + 'px, ' + (ratio * window.innerWidth) +'px)', ease:Cubic.easeOut, onUpdate: updateHandlePosition});
}else{
divider.css('left', xVal + 'px');
updateHandlePosition();
hate.css('clip', 'rect(0px, ' + window.innerWidth + 'px, ' + window.innerHeight + 'px, ' + xVal +'px)');
}
<<<<<<< HEAD
});
var isMouseOverDivide = false,
currHandleTopTarget;
divider.mouseover(function(e){
isMouseOverDivide = true;
});
divider.mouseout(function(e){
isMouseOverDivide = false;
//currHandleTopTarget = 275;
});
$('body').mousemove(function(e){
if(isMouseOverDivide){
currHandleTopTarget = e.pageY;
}
});
var Renderer = hasWebGL ? THREE.WebGLRenderer : THREE.CanvasRenderer;
var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100000 ),
orthoPro = new THREE.OrthographicCamera( window.innerWidth / - 3, window.innerWidth / 3, window.innerHeight / 3, window.innerHeight / - 3, 1, 100000 ).projectionMatrix,
loveRenderer= new Renderer({alpha:true, antialias:true }),
hateRenderer= new Renderer({alpha:true, antialias:true }),
controls = new THREE.OrbitControls( camera, document.getElementById( 'map-container' )),
projector = new THREE.Projector(),
mouse = new THREE.Vector3( 0, 0, camera.near );
raycaster = new THREE.Raycaster( camera.position, mouse.sub( camera.position ).normalize() );
// loveRenderer.setClearColor( 0xFF0000 );
controls.noZoom = true;
controls.noPan = true;
// controls.noRoll = true;
controls.enabled = false;
controls.dynamicDampingFactor = 0.6;
controls.maxPolarAngle = Math.PI * 0.5;
controls.rotateSpeed = 0.9;
var loveScene = new THREE.Scene();
var hateScene = new THREE.Scene();
var light = new THREE.DirectionalLight();
light.position.x = -500;
light.position.y = 500;
loveScene.plane = new THREE.Mesh( label.geometry, new THREE.MeshBasicMaterial({color:new THREE.Color().setRGB( 138/255, 143/255, 149/255 ), wireframe:false}) )
hateScene.plane = new THREE.Mesh( label.geometry.clone(), new THREE.MeshBasicMaterial({color:new THREE.Color().setRGB( 138/255, 143/255, 149/255 ), wireframe:false}) )
loveScene.fillPlane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 900 ), new THREE.MeshBasicMaterial({color:new THREE.Color().setRGB( 215/255, 219/255, 230/255 ), wireframe:false}) )
hateScene.fillPlane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 900 ), new THREE.MeshBasicMaterial({color:new THREE.Color().setRGB( 21/255, 23/255, 35/255 ), wireframe:false}) )
// var vl = loveScene.mapAsset.geometry.vertices.length;
// while( vl-- > 0 ){
// loveScene.mapAsset.geometry.vertices[vl].z = 0;
// }
// hateScene.mapAsset.dynamic = true;
hateScene.fillPlane.rotation.x = loveScene.fillPlane.rotation.x = hateScene.plane.rotation.x = loveScene.plane.rotation.x = Math.PI * -0.5;
hateScene.fillPlane.position.y = loveScene.fillPlane.position.y = -1;
// hateScene.plane.scale = loveScene.plane.scale;
// loveScene.plane.scale.set( 1.6, 1.6, 1 );
// wfmap.position = loveScene.mapAsset.position = hateScene.mapAsset.position;
// wfmap.scale = loveScene.mapAsset.scale = hateScene.mapAsset.scale;
//
// loveScene.particles.scale.y = hateScene.mapAsset.scale.y = -1;
// loveScene.particles.position.y += 1;
// var cont = new THREE.Object3D();
// cont.add( loveScene.mapAsset );
// cont.add( loveScene.particles );
// loveScene.map = cont;
// cont = new THREE.Object3D();
// cont.add( hateScene.mapAsset );
// hateScene.map = cont;
var blue = new THREE.Color().setRGB( 42/255, 169/255, 224/255 )
hateScene.light = light;
loveScene.light = light.clone();
loveScene.add( loveScene.map );
hateScene.add( hateScene.map );
loveScene.add( loveScene.fillPlane );
loveScene.add( hateScene.fillPlane );
loveScene.add( loveScene.plane );
hateScene.add( hateScene.plane );
loveScene.add( loveScene.light );
hateScene.add( hateScene.light );
loveScene.add( new meter( new THREE.MeshBasicMaterial({color:blue, wireframe: false}),
new THREE.MeshBasicMaterial({color:new THREE.Color( 0xE07CA0 ), wireframe: false})) );
hateScene.add( new meter( new THREE.MeshBasicMaterial({color:blue, wireframe: false}),
new THREE.MeshBasicMaterial({color:new THREE.Color( 0xD4B349 ), wireframe: false})) );
camera.position.z = 1100;
// camera.position.y = 100;
camera.lookAt( loveScene.position );
var hateCamera = camera.clone();
hateCamera.position = camera.position;
// hateCamera.projectionMatrix = camera.projectionMatrix;
hateCamera.up = camera.up;
hateCamera.lookAt( loveScene.position );
document.getElementById('love').appendChild( loveRenderer.domElement );
document.getElementById('hate').appendChild( hateRenderer.domElement );
loveRenderer.setSize( loveRenderer.domElement.offsetWidth, loveRenderer.domElement.offsetHeight );
hateRenderer.setSize( hateRenderer.domElement.offsetWidth, hateRenderer.domElement.offsetHeight );
var resizeTimeout = null,
startingDivideRatio = -1;
function resize(){
resizing = true;
hateCamera.aspect =camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
hateCamera.updateProjectionMatrix();
var h = window.innerHeight;// - $('.header').height();
love.height( h );
hate.height( h );
// get current divide ratio
var pos = hate.css('clip').split('px');
pos = pos[pos.length - 2];
var currentDivideRatio = parseInt(pos, 10) / window.innerWidth;
// positionDivide(currentDivideRatio);
// if(resizeTimeout){
// clearTimeout(resizeTimeout);
// resizeTimeout = null;
// }else{
// startingDivideRatio = currentDivideRatio;
// }
// resizeTimeout = setTimeout(function(){
// clearTimeout(resizeTimeout);
// resizeTimeout = null;
// if(startingDivideRatio >= 0){
// //TweenMax.to(hate, 0.75, { clip:'rect(0px, ' + window.innerWidth + 'px, ' + window.innerHeight + 'px, ' + (startingDivideRatio * window.innerWidth) +'px)', ease:Cubic.easeOut});
// positionDivide( startingDivideRatio, true );
// TweenMax.to( handle, 0.75, { left: (startingDivideRatio * window.innerWidth - (handle.outerWidth() * 0.5)) + 'px', ease:Cubic.easeOut});
// TweenMax.to( divider, 0.75, { left: (startingDivideRatio * window.innerWidth) + 'px', ease:Cubic.easeOut});
// }
// }, 300);
HEADER_HEIGHT = $(".header-container").innerHeight() + $("#love-title").innerHeight();
// console.log( $(".header-container").innerHeight(), $("#love-title").innerHeight() );
$('.map-container').css('height', h - HEADER_HEIGHT);
loveRenderer.setSize( window.innerWidth, h - HEADER_HEIGHT );
hateRenderer.setSize( window.innerWidth, h - HEADER_HEIGHT );
}
document.addEventListener( 'mousemove', function(){
mouseX = ( event.pageX / window.innerWidth ) * 2 - 1;
mouseY = -Math.max( 0, ( event.pageY - HEADER_HEIGHT ) / loveRenderer.domElement.height * window.devicePixelRatio ) * 2 + 1;
// console.log( ( event.pageY- HEADER_HEIGHT ), loveRenderer.domElement.height );
});
function positionDivide(ratio, isAnimated){
var updateHandlePosition = function(){
var pos = hate.css('clip').split('px');
pos = pos[pos.length - 2];
var drg_w = handle.outerWidth();
handle.css({
left:pos - (drg_w / 2) + 'px'
});
};
var xVal = (ratio * window.innerWidth);
if(isAnimated){
TweenMax.to(divider, 0.75, {left: xVal + 'px', ease:Cubic.easeOut});
TweenMax.to(hate, 0.75, { clip:'rect(0px, ' + window.innerWidth + 'px, ' + window.innerHeight + 'px, ' + (ratio * window.innerWidth) +'px)', ease:Cubic.easeOut, onUpdate: updateHandlePosition});
}else{
divider.css('left', xVal + 'px');
updateHandlePosition();
hate.css('clip', 'rect(0px, ' + window.innerWidth + 'px, ' + window.innerHeight + 'px, ' + xVal +'px)');
}
}
window.addEventListener( 'resize', resize );
resize();
var sph = new THREE.Mesh( new THREE.SphereGeometry( 5 ), new THREE.MeshBasicMaterial({color:blue, depthTest:false}));
loveScene.add( sph );
sph.material.visible = false;
// var tween = new TWEEN.Tween( camera.position ).to({y:700, z:1200}, 4000 ).onUpdate(function(){
var tick = 0;
var projectedVector = new THREE.Vector3();
var active, currentTweet;
mousePos += ( mouseTarget - mousePos ) * 0.15;
// love.css('clip', 'rect(0px, '+mousePos+'px, '+window.innerHeight+'px, 0px)');
hate.css('clip', 'rect(0px, '+window.innerWidth+'px, '+window.innerHeight+'px, '+mousePos * window.innerWidth+'px)');
var va = new THREE.Vector3(),
vb = new THREE.Vector3(),
vc = new THREE.Vector3(), nearest, vad, vbd, vcd, nearestPoint;
var dragging = false,
resizing = false,
onLoveSide = true,
mouseCoords = new THREE.Vector3();
function animate(){
if( !dragging ){
// var currHandlePos = parseInt(handle.css('top'), 10);
handle.css('top', currHandleTopTarget + 'px');
controls.update();
hateCamera.lookAt( controls.target );
hateScene.light.position.x = loveScene.light.position.x = Math.sin( tick ) * 500;
tick += 0.001;
if( controls.enabled && !controls.dragging ){
onLoveSide = mouseX * 0.5 + 0.5 < mousePos / window.innerWidth
mouse.set( mouseX, mouseY, 1 );
projectedVector.copy( mouse );
var intersects = projector.pickingRay( projectedVector, camera ).intersectObject( onLoveSide ? loveScene.map : hateScene.map, true );
// var intersects = raycaster
sph.material.visible = intersects.length > 0;
if( intersects.length > 0 /*&& active !== intersects[0].faceIndex*/ ){
active = intersects[0];
va.copy( active.object.geometry.vertices[active.face.a] ).applyMatrix4( active.object.matrixWorld );
vb.copy( active.object.geometry.vertices[active.face.b] ).applyMatrix4( active.object.matrixWorld );
vc.copy( active.object.geometry.vertices[active.face.c] ).applyMatrix4( active.object.matrixWorld );
vad = active.point.distanceTo( va );
vbd = active.point.distanceTo( vb );
vcd = active.point.distanceTo( vc );
nearest = Math.min( vad, vbd, vcd );
if( nearest < 20 ){
nearestPoint = nearest === vad ? active.object.geometry.vertices[active.face.a] : nearest === vbd ? active.object.geometry.vertices[active.face.b] : active.object.geometry.vertices[active.face.c];
if( nearestPoint.tweetRef && callback && currentTweet != nearestPoint.tweetRef ){
currentTweet = nearestPoint.tweetRef;
callback( currentTweet, projector.projectVector( mouseCoords.copy( nearestPoint ).applyMatrix4( active.object.matrixWorld ), camera ), onLoveSide );
}else if( updateCallback ){
//updateCallback( projector.projectVector( mouseCoords.copy( intersects[0].point ), camera ));
}
}else if( outCallback && currentTweet ){
active = null;
currentTweet = null;
outCallback();
}
// sph.position.copy( intersects[0].point )
}else if( outCallback && currentTweet ){
active = null;
currentTweet = null;
outCallback();
}
}
loveRenderer.render( loveScene, camera );
hateRenderer.render( hateScene, camera );
}
requestAnimationFrame( animate );
}
=======
}
window.addEventListener( 'resize', resize );
resize();
var sph = new THREE.Mesh( new THREE.SphereGeometry( 5 ), new THREE.MeshBasicMaterial({color:blue, depthTest:false}));
loveScene.add( sph );
sph.material.visible = false;
// var tween = new TWEEN.Tween( camera.position ).to({y:700, z:1200}, 4000 ).onUpdate(function(){
>>>>>>> 452d58c1c86d1a33b2f469e375afde7c721fba7a
var tick = 0;
var projectedVector = new THREE.Vector3();
var active, currentTweet;
mousePos += ( mouseTarget - mousePos ) * 0.15;
// love.css('clip', 'rect(0px, '+mousePos+'px, '+window.innerHeight+'px, 0px)');
hate.css('clip', 'rect(0px, '+window.innerWidth+'px, '+window.innerHeight+'px, '+mousePos * window.innerWidth+'px)');
var va = new THREE.Vector3(),
vb = new THREE.Vector3(),
vc = new THREE.Vector3(), nearest, vad, vbd, vcd, nearestPoint;
var dragging = false,
resizing = false,
onLoveSide = true,
mouseCoords = new THREE.Vector3();
function animate(){
if( !dragging ){
// var currHandlePos = parseInt(handle.css('top'), 10);
handle.css('top', currHandleTopTarget + 'px');
<<<<<<< HEAD
//REVEAL HATE SIDE
handle.animate({
left: -drg_w,
top: 275
}, {duration:1000, delay:100, ease:Cubic.easeInOut, progress:function(){
mousePos = handle.offset().left + (0.5*drg_w);
positionDivide(mousePos / window.innerWidth);
}, complete:function(){
// REMOVE GRAPH DETAIL
loveScene.remove( loveScene.graph );
// SHOW + HIDE HATE OVERLAY
mouseCoords.copy( hateFactory.getHighestPoint() ).applyMatrix4( hateScene.map.children[0].matrixWorld );
projector.projectVector( mouseCoords, camera )
// mouseCoords.y = 100;
if( mouseCoords.x > window.innerWidth - $('#panel').innerWidth() - 100 ) mouseCoords.x = window.innerWidth - $('#panel').innerWidth() - 300
callback( hateFactory.getHighestPoint().tweetRef,
mouseCoords, false, true, function(){
//REVEAL LOVE SIDE
handle.animate({
left: window.innerWidth-50,
top: 275
}, {duration:1000, delay:100, ease:Cubic.easeInOut, progress:function(){
mousePos = handle.offset().left + (0.5*drg_w);
positionDivide(mousePos / window.innerWidth);
}, complete:function(){
// REMOVE HATE GRAPH
hateScene.remove( hateScene.graph );
// PAN TO 3D
TweenMax.to( camera.position, 3, {y:700, z:1000, delay:1.5, onUpdate:function(){
// matrixLerp( orthoPro, targetMatrix, camera.projectionMatrix, camera.position.vlerp );
}, onComplete: function(){
controls.enabled = true;
hate.fadeIn( 0 );
var mouseUp = function(){
dragging = false;
controls.enabled = true;
$(document).off( 'mousemove', updateCursor );
$(document).off( 'mouseup', mouseUp );
};
var updateCursor = function(e){
drg_h = drag.outerHeight();
drg_w = drag.outerWidth();
mousePos = Number(e.pageX + pos_x - (0.5*drg_w));
positionDivide(mousePos / window.innerWidth);
if(e.pageX > (window.innerWidth / 2) && $body.hasClass('hate')){
showLove();
}
if(e.pageX < (window.innerWidth / 2) && $body.hasClass('love')){
showHate();
}
drag.offset({
top:e.pageY + pos_y - drg_h,
left:e.pageX + pos_x - drg_w
});
};
divider.on('mousedown', function( e ){
dragging = true;
pos_y = drag.offset().top + drg_h - e.pageY;
pos_x = drag.offset().left + drg_w - e.pageX;
controls.enabled = false;
$(document).on( 'mousemove', updateCursor );
divider.on('mouseup', mouseUp );
$(document).on('mouseup', mouseUp);
});
}});
}})
})
}});
} );
}
}); // end Tween
animate();
}
};
}
=======
controls.update();
hateCamera.lookAt( controls.target );
hateScene.light.position.x = loveScene.light.position.x = Math.sin( tick ) * 500;
tick += 0.001;
if( controls.enabled && !controls.dragging ){
onLoveSide = mouseX * 0.5 + 0.5 < mousePos / window.innerWidth
mouse.set( mouseX, mouseY, 1 );
projectedVector.copy( mouse );
var intersects = projector.pickingRay( projectedVector, camera ).intersectObject( onLoveSide ? loveScene.map : hateScene.map, true );
// var intersects = raycaster
sph.material.visible = intersects.length > 0;
if( intersects.length > 0 /*&& active !== intersects[0].faceIndex*/ ){
active = intersects[0];
va.copy( active.object.geometry.vertices[active.face.a] ).applyMatrix4( active.object.matrixWorld );
vb.copy( active.object.geometry.vertices[active.face.b] ).applyMatrix4( active.object.matrixWorld );
vc.copy( active.object.geometry.vertices[active.face.c] ).applyMatrix4( active.object.matrixWorld );
vad = active.point.distanceTo( va );
vbd = active.point.distanceTo( vb );
vcd = active.point.distanceTo( vc );
nearest = Math.min( vad, vbd, vcd );
if( nearest < 20 ){
nearestPoint = nearest === vad ? active.object.geometry.vertices[active.face.a] : nearest === vbd ? active.object.geometry.vertices[active.face.b] : active.object.geometry.vertices[active.face.c];
if( nearestPoint.tweetRef && callback && currentTweet != nearestPoint.tweetRef ){
currentTweet = nearestPoint.tweetRef;
callback( currentTweet, projector.projectVector( mouseCoords.copy( nearestPoint ).applyMatrix4( active.object.matrixWorld ), camera ), onLoveSide );
}else if( updateCallback ){
//updateCallback( projector.projectVector( mouseCoords.copy( intersects[0].point ), camera ));
}
}else if( outCallback && currentTweet ){
active = null;
currentTweet = null;
outCallback();
}
// sph.position.copy( intersects[0].point )
}else if( outCallback && currentTweet ){
active = null;
currentTweet = null;
outCallback();
}
}
loveRenderer.render( loveScene, camera );
hateRenderer.render( hateScene, camera );
}
requestAnimationFrame( animate );
}
var callback,
outCallback,
loveTweets,
hateTweets;
return {
initLoad: function(){
var self = this;
tweets.initLoad({
onUpdate: function(){
// TODO - update map with
// tweets.getLoveTweets() && tweets.getHateTweets()
console.log( 'updating' );
},
testComplete: function(){
self.start();
}
});
},
onSelectData: function( fn, up ,out ){
callback = fn;
outCallback = out;
updateCallback = up;
},
start: function(){
console.log( 'START' );
var loveData = tweets.getLoveTweets(),
hateData = tweets.getHateTweets();
var targetMatrix = camera.projectionMatrix.clone();
// camera.projectionMatrix.copy( orthoPro );
// camera.updateProjectionMatrix();
var loveFactory = new map( loveData ),
hateFactory = new map( hateData );
loveScene.graph = new THREE.Mesh( loveGraph.geometry, new THREE.MeshBasicMaterial({color:new THREE.Color( 0xE07CA0 )}));
hateScene.graph = new THREE.Mesh( hateGraph.geometry, new THREE.MeshBasicMaterial({color:new THREE.Color( 0xD4B349 )}));
var l = loveGraph.geometry.vertices.length;
while( l-- > 0){
if( loveGraph.geometry.vertices[l].x > 500 ) loveGraph.geometry.vertices[l].x -= 185;
}
l = hateGraph.geometry.vertices.length;
while( l-- > 0){
if( hateGraph.geometry.vertices[l].x > 400 ){
hateGraph.geometry.vertices[l].x -= 186;
// console.log( hateGraph.geometry.vertices[l].x );
}
}
// hateScene.graph.position = loveScene.graph.position;
loveScene.graph.position.x += 32;
hateScene.graph.position.y = loveScene.graph.position.y += 84;
hateScene.graph.position.x += 160;
loveScene.graph.position.z = hateScene.graph.position.z = 100;
loveScene.map = loveFactory.getObject3D( new THREE.MeshPhongMaterial({color:new THREE.Color( 0xE07CA0 ), wireframe: false, side:THREE.BackSide}) );
hateScene.map = hateFactory.getObject3D( new THREE.MeshPhongMaterial({color:new THREE.Color( 0xD4B349 ), wireframe: false, side:THREE.BackSide}) );
loveScene.particles = loveFactory.getParticles( new THREE.ParticleSystemMaterial( { size: 6, opacity: 0 , transparent: true, color:new THREE.Color( 0x222222 ), map: THREE.ImageUtils.loadTexture(
"images/dot.png"
)} ));
hateScene.particles = hateFactory.getParticles( new THREE.ParticleSystemMaterial( { size: 6, opacity: 1 , transparent: true, color:new THREE.Color( 0xdddddd ), map: THREE.ImageUtils.loadTexture(
"images/dot.png"
) } ));
loveScene.particles.position.copy( loveScene.map.children[0].position );
hateScene.particles.position.copy( hateScene.map.children[0].position );
loveScene.particles.position.z = loveScene.particles.position.z -= 2;
loveScene.map.dynamic = true;
hateScene.map.rotation.x = Math.PI * 0.5;
loveScene.map.rotation.x = Math.PI * 0.5;
loveScene.add( loveScene.map );
hateScene.add( hateScene.map );
loveScene.add( loveScene.graph );
hateScene.add( hateScene.graph );
loveScene.map.add( loveScene.particles );
hateScene.map.add( hateScene.particles );
var c = hateScene.map.children.length;
var highestHateVertex = hateScene.map.children[0].geometry.vertices[0];
while( c-- > 0 ){
var l = hateScene.map.children[c].geometry.vertices.length;
while( l-- > 0 ) hateScene.map.children[c].geometry.vertices[l].z = hateScene.map.children[c].geometry.vertices[l].zepto || 0;
hateScene.map.children[c].geometry.computeFaceNormals();
hateScene.map.children[c].geometry.normalsNeedUpdate = true;
hateScene.map.children[c].geometry.verticesNeedUpdate = true;
}
resize();
// $('#love-title').fadeIn();
// $('#hate-title').fadeIn();
$('#shared').fadeIn();
var toast = {amount:0};
var self = this;
TweenMax.to( toast, 3, {amount:1, delay: 1, onUpdate:function(){
var c = loveScene.map.children.length;
while( c-- > 0 ){
var child = loveScene.map.children[c].geometry.vertices;
var l = child.length;
var w = 100, offset = 0;
while( l-- > 0 ){
if( child[l].zepto ){
offset = (( w - child[l].x ) / w ) ;
/*particles.vertices[l].z = */child[l].z = Math.min( 0, Math.max( child[l].zepto * toast.amount , child[l].zepto ));
}
}
loveScene.map.children[c].geometry.computeFaceNormals();
loveScene.map.children[c].geometry.normalsNeedUpdate = true;
loveScene.map.children[c].geometry.verticesNeedUpdate = true;
}
// loveScene.particles.geometry.verticesNeedUpdate = true;
},
onComplete: function(){
var drag = handle,
drg_h = drag.outerHeight(),
drg_w = drag.outerWidth(),
pos_y,
pos_x;
camera.position.vlerp = 0;
TweenMax.to( loveScene.particles.material, 1, {opacity:1, ease:Cubic.easeInOut });
// REVEAL + AUTOHIDE OVERLAY
mouseCoords.copy( loveFactory.getHighestPoint() ).applyMatrix4( loveScene.map.children[0].matrixWorld );
projector.projectVector( mouseCoords, camera ),
// mouseCoords.y = 10;
callback( loveFactory.getHighestPoint().tweetRef,
mouseCoords, true, true, function(){
//REVEAL HATE SIDE
handle.animate({
left: -drg_w,
top: 275
}, {duration:1000, delay:100, ease:Cubic.easeInOut, progress:function(){
mousePos = handle.offset().left + (0.5*drg_w);
positionDivide(mousePos / window.innerWidth);
}, complete:function(){
// REMOVE GRAPH DETAIL
loveScene.remove( loveScene.graph );
// SHOW + HIDE HATE OVERLAY
mouseCoords.copy( hateFactory.getHighestPoint() ).applyMatrix4( hateScene.map.children[0].matrixWorld );
projector.projectVector( mouseCoords, camera )
// mouseCoords.y = 100;
if( mouseCoords.x > window.innerWidth - $('#panel').innerWidth() - 100 ) mouseCoords.x = window.innerWidth - $('#panel').innerWidth() - 300
callback( hateFactory.getHighestPoint().tweetRef,
mouseCoords, false, true, function(){
//REVEAL LOVE SIDE
handle.animate({
left: window.innerWidth-50,
top: 275
}, {duration:1000, delay:100, ease:Cubic.easeInOut, progress:function(){
mousePos = handle.offset().left + (0.5*drg_w);
positionDivide(mousePos / window.innerWidth);
}, complete:function(){
// REMOVE HATE GRAPH
hateScene.remove( hateScene.graph );
// PAN TO 3D
TweenMax.to( camera.position, 3, {y:700, z:1000, delay:1.5, onUpdate:function(){
// matrixLerp( orthoPro, targetMatrix, camera.projectionMatrix, camera.position.vlerp );
}, onComplete: function(){
controls.enabled = true;
hate.fadeIn( 0 );
var mouseUp = function(){
dragging = false;
controls.enabled = true;
$(document).off( 'mousemove', updateCursor );
$(document).off( 'mouseup', mouseUp );
};
var updateCursor = function(e){
drg_h = drag.outerHeight();
drg_w = drag.outerWidth();
mousePos = Number(e.pageX + pos_x - (0.5*drg_w));
positionDivide(mousePos / window.innerWidth);
if(e.pageX > (window.innerWidth / 2) && $body.hasClass('hate')){
showLove();
}
if(e.pageX < (window.innerWidth / 2) && $body.hasClass('love')){
showHate();
}
drag.offset({
top:e.pageY + pos_y - drg_h,
left:e.pageX + pos_x - drg_w
});
};
divider.on('mousedown', function( e ){
dragging = true;
pos_y = drag.offset().top + drg_h - e.pageY;
pos_x = drag.offset().left + drg_w - e.pageX;
controls.enabled = false;
$(document).on( 'mousemove', updateCursor );
divider.on('mouseup', mouseUp );
$(document).on('mouseup', mouseUp);
});
}});
}})
})
}});
} );
}
}); // end Tween
animate();
}
};
}
>>>>>>> 452d58c1c86d1a33b2f469e375afde7c721fba7a
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment