Skip to content

Visualize #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KaleFive wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Visualize #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
417ac7d
GOOGLE ANALYTICS
KaleFive Oct 20, 2015
256ee21
Merge branch 'master' into visualize
KaleFive Oct 20, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions browser/js/animation/animation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
</div>
</div>


<div class='animContainer' ng-show='ready'>

<img id='bg-image' ng-src="{{imageSrc}}" />
Expand All @@ -19,9 +18,6 @@
</video>
</div>




<div class="container" ng-show='ready'>
<div class="row">
<div class="col-sm-offset-2 col-sm-8 player-1">
Expand Down
97 changes: 81 additions & 16 deletions browser/js/common/factories/sexyBack.factory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ app.factory('SexyBackFactory', function () {

// this is the variable to cancel the animation rendering when set to false
var onLandingPage = true;
var squareFormationCalled = false;

var scene;

Expand Down Expand Up @@ -35,7 +36,7 @@ app.factory('SexyBackFactory', function () {
HEIGHT = window.outerHeight;

//set the number of bars that can fit on the screen
var numBars = 350;
var numBars = 500;

// set some camera attributes
var VIEW_ANGLE = 80,
Expand All @@ -44,21 +45,22 @@ app.factory('SexyBackFactory', function () {
FAR = 10000;

// create a WebGL renderer
var renderer = new THREE.WebGLRenderer();
var renderer = new THREE.WebGLRenderer({ antialiasing: true });

// get the DOM element to attach to - assume we've got jQuery to hand
var $container = $('#landingPageAnimationContainer');
var $title = $('#title');
$container.append(renderer.domElement);

// var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
var camera = new THREE.OrthographicCamera( WIDTH / -2, WIDTH / 2, HEIGHT / 2, HEIGHT / -2, -2000, 4000);
var camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
// var camera = new THREE.OrthographicCamera( WIDTH / -2, WIDTH / 2, HEIGHT / 2, HEIGHT / -2, -2000, 4000);

scene = new THREE.Scene();
scene.add(camera);

camera.position.z = 500;
camera.position.z = 800;
camera.position.x = 0;
camera.position.y = 300;
camera.position.y = 800;

renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor( 0x2c3338, 1);
Expand All @@ -69,6 +71,7 @@ app.factory('SexyBackFactory', function () {
var analyser = context.createAnalyser();
var radius = 600;
var angle = (2 * Math.PI) / numBars;
var allCubesWave = []; //this is only needed for the cubeWaveFormation
var formations = [circleFormation, lineFormation, quarterFormation];

function circleFormation() {
Expand Down Expand Up @@ -105,7 +108,7 @@ app.factory('SexyBackFactory', function () {
function quarterFormation() {
var quarters = Math.floor(cubes.length / 4)
var angleQuarter = 2 * Math.PI / quarters;
var radiusQuarter = 200;
var radiusQuarter = 300;
var theCorner = {
width: WIDTH / 4,
height: WIDTH/ 4
Expand All @@ -132,9 +135,69 @@ app.factory('SexyBackFactory', function () {
});
}

// function armyFormation() {
//
// }
function armyFormation() {
var totalCircles = 50;
var numCircleRow = 10;
var eachCircle = cubes.length / totalCircles;
var angleArmy = (2 * Math.PI) / eachCircle;
var radiusArmy = 120;
var offZ = -2000;
var offX = -2000;
var j = 0; // this number is the circle that we are constructing
var v = 0; // this number is the v-th bar in that circle
var p = 0; // this is the z-index multiplier
for(var i = 0; i < numBars; i++) {
if(v % eachCircle === 0) {
console.log("ABOUT TO TRANSITION TO NEW CIRCLE: ", j)
v = 0;
j++;
}
if(j % numCircleRow === 0) {
j = 1;
console.log("value of P: ", p, 10 % 10, 9 % 10)
p++;

}
cubes[i].position.x = radiusArmy * Math.sin(angleArmy * v) + offX + (j * 500);
cubes[i].position.z = radiusArmy * Math.cos(angleArmy * v) + offZ + (p * 500);
v++;
};
};

function cubeWaveFormation() {
var rowLength = 25;
var offX = -500;
for(var i = 0; i < rowLength; i++) {
cubes[i].position.x = (i * 50) + offX;
allCubesWave[i] = [];
for(var k = 0; k < rowLength; k++) {
var newCube = cubes[i].clone();
console.log(newCube.position.x)
scene.add(newCube);
newCube.position.z = (k * 50);
allCubesWave[i].push(newCube);
};
};
}

function squareFormation() {
var squareFormationCalled = true;
var rowLength = 25;
var j = 0; // this is equal to column
var k = 0; // this is equal to row
var offX = -500;
var offZ = -500;
for(var i = 0; i < numBars; i++) {
if(i % rowLength === 0) {
j = 0;
k++;
};
cubes[i].position.x = (j * 50) + offX;
cubes[i].position.z = (k * 50) + offZ;
j++;

};
};

var makeCubes = function(numBars) {
for(var i = 0; i < numBars; i++) {
Expand All @@ -144,7 +207,10 @@ app.factory('SexyBackFactory', function () {
groupCubes.add(cube)
cubes.push(cube);
}
quarterFormation();
// cubeWaveFormation();
// squareFormation();
armyFormation();
// quarterFormation();
// circleFormation();
// doubleCircleFormation();
// formations[Math.floor(Math.random() * formations.length)]();
Expand All @@ -162,21 +228,20 @@ app.factory('SexyBackFactory', function () {
var freqByteData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqByteData);

for (var i = 0; i < numBars; ++i) {
for (var i = 0; i < numBars; i++) {
var magnitude = freqByteData[i + OFFSET];
cubes[i].scale.y = magnitude;
cubes[i].position.y = magnitude / 2;
};
window.requestAnimationFrame(RenderScene)

// steady rotation
groupCubes.rotation.y -= 0.001;
groupCubes.rotation.y -= 0.003;
// groupCubes.rotation.z -= 0.0001;

// draw!
renderer.render(scene, camera);
} else {
return;
}
} else return;
};

(function onLoad(e) {
Expand Down
2 changes: 1 addition & 1 deletion browser/js/home/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div id='landingPageAnimationContainer'></div>
</div>
<div class='wrap homeMenu'>
<h1>Dance Dance Evolution</h1>
<h1 id='title'>Dance Dance Evolution</h1>

<!-- <button id="option1" class='btn btn-lg btn-primary outline round activeHome'><div ui-sref='mainMenu'>Main Menu</div></button>
<button id="option2" class='btn btn-lg btn-primary outline round'><div ui-sref='chooseSong'>Dance Now</div></button>
Expand Down
8 changes: 8 additions & 0 deletions server/app/views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,14 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type='text/javascript' src="/utils/radar-chart.js"></script>
<script src="/main.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-69082131-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body ng-app="DDE">
<div id="main" class='main' gamepad ui-view></div>
Expand Down