Not cleaner, but less global variables, should be better

js/PointerCamera.js

@@ -2,10 +2,12 @@
 var PointerCamera = function() {
     THREE.PerspectiveCamera.apply(this, arguments);
 
-    if (arguments[4] === undefined)
+    this.renderer = arguments[4];
+
+    if (arguments[5] === undefined)
         listenerTarget = document;
     else
-        listenerTarget = arguments[4];
+        listenerTarget = arguments[5];
 
     // Set Position
     this.theta = Math.PI;
@@ -303,8 +305,8 @@ PointerCamera.prototype.onKeyUp = function(event) {
 }
 
 PointerCamera.prototype.onMouseDown = function(event) {
-    this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
+    this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
-    this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
+    this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
 
     this.dragging = true;
     this.mouseMoved = false;
@@ -313,8 +315,8 @@ PointerCamera.prototype.onMouseDown = function(event) {
 PointerCamera.prototype.onMouseMove = function(event) {
     if (this.dragging) {
         var mouse = {x: this.mouse.x, y: this.mouse.y};
-        this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
+        this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
-        this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
+        this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
 
         this.mouseMove.x = this.mouse.x - mouse.x;
         this.mouseMove.y = this.mouse.y - mouse.y;

js/TutoCamera.js

@@ -2,10 +2,15 @@
 var TutoCamera = function() {
     THREE.PerspectiveCamera.apply(this, arguments);
 
-    if (arguments[4] === undefined)
+    this.renderer = arguments[4];
+    this.onWindowResize = arguments[6];
+    var scene = arguments[5];
+    var container_size = arguments[7];
+
+    if (arguments[8] === undefined)
         listenerTarget = document;
     else
-        listenerTarget = arguments[4];
+        listenerTarget = arguments[8];
 
     // Set Position
     this.theta = Math.PI;
@@ -58,7 +63,7 @@ var TutoCamera = function() {
     this.resetElements = resetBobombElements();
 
     // Create tutorial
-    this.tutorial = new TutorialSteps(this);
+    this.tutorial = new TutorialSteps(this, scene, this.onWindowResize, container_size);
 }
 TutoCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
 TutoCamera.prototype.constructor = TutoCamera;
@@ -339,8 +344,8 @@ TutoCamera.prototype.onKeyUp = function(event) {
 }
 
 TutoCamera.prototype.onMouseDown = function(event) {
-    this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
+    this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
-    this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
+    this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
 
     if (this.allowed.mouseRotate) {
         this.dragging = true;
@@ -351,8 +356,8 @@ TutoCamera.prototype.onMouseDown = function(event) {
 TutoCamera.prototype.onMouseMove = function(event) {
     if (this.dragging) {
         var mouse = {x: this.mouse.x, y: this.mouse.y};
-        this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
+        this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
-        this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
+        this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
 
         this.mouseMove.x = this.mouse.x - mouse.x;
         this.mouseMove.y = this.mouse.y - mouse.y;

js/prototype/Previewer.js

@@ -2,11 +2,12 @@ Math.clamp = Math.clamp || function(number, min, max) {
     return Math.max(Math.min(number, max), min);
 }
 
-var Previewer = function(renderer) {
+var Previewer = function(renderer, scene) {
     this.domElement = document.createElement('canvas');
     this.ctx = this.domElement.getContext('2d');
     this.renderer = renderer;
     this.fixed = false;
+    this.scene = scene;
 }
 
 Previewer.prototype.render = function(prev, container_width, container_height) {
@@ -57,7 +58,7 @@ Previewer.prototype.render = function(prev, container_width, container_height) {
         this.renderer.setScissor(left, bottom, width, height);
         this.renderer.enableScissorTest(true);
         this.renderer.setViewport(left, bottom, width, height);
-        this.renderer.render(scene, prev.camera);
+        this.renderer.render(this.scene, prev.camera);
 
         if (!this.fixed) {
             this.clearNeeded = true;

js/prototype/ReplayCamera.js

@@ -2,6 +2,8 @@
 var ReplayCamera = function() {
     THREE.PerspectiveCamera.apply(this, arguments);
 
+    this.cameras = arguments[4];
+
     this.started = false;
     this.counter = 0;
 
@@ -121,7 +123,7 @@ ReplayCamera.prototype.nextEvent = function() {
             },500);
         })(this);
     } else if (this.event.type == 'arrow') {
-        this.moveHermite(cameras.cameras[this.event.id]);
+        this.moveHermite(this.cameras.cameras[this.event.id]);
     } else if (this.event.type == 'reset') {
         this.reset();
         (function (self) {
@@ -197,3 +199,5 @@ ReplayCamera.prototype.moveHermite = function(otherCamera) {
         new THREE.Vector3()
     );
 }
+
+ReplayCamera.prototype.save = function() {}

js/prototype/TutorialSteps.js

@@ -1,9 +1,12 @@
-var TutorialSteps = function(tutoCamera) {
+var nextStep;
+var TutorialSteps = function(tutoCamera, scene, onWindowResize, container_size) {
     this.camera = tutoCamera;
     this.step = 0;
     this.coins = 0;
     this.camera.allowed = {};
     this.camera.allowed.keyboardTranslate = true;
+    this.onWindowResize = onWindowResize;
+    this.container_size = container_size;
 
     this.instructions = [
         {
@@ -80,6 +83,14 @@ var TutorialSteps = function(tutoCamera) {
         }
     ];
 
+    var self = this;
+    nextStep = function() {self.nextStep();};
+
+    this.scene = scene;
+}
+
+TutorialSteps.prototype.setCameras = function(cameras) {
+    this.cameras = cameras;
 }
 
 TutorialSteps.prototype.nextStep = function() {
@@ -94,15 +105,15 @@ TutorialSteps.prototype.nextStep = function() {
             case 3:
                 this.camera.allowed.keyboardRotate    = true;
                 coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback));
-                coins[coins.length-1].addToScene(scene);
+                coins[coins.length-1].addToScene(this.scene);
                 break;
             case 4:
                 coins.push(new Coin(-0.670782299402527,1.847042640633274,1.562644363633795, callback));
-                coins[coins.length-1].addToScene(scene);
+                coins[coins.length-1].addToScene(this.scene);
                 coins.push(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback));
-                coins[coins.length-1].addToScene(scene);
+                coins[coins.length-1].addToScene(this.scene);
                 coins.push(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback));
-                coins[coins.length-1].addToScene(scene);
+                coins[coins.length-1].addToScene(this.scene);
                 break;
             case 7:
                 this.camera.move(this.camera.resetElements);
@@ -110,30 +121,30 @@ TutorialSteps.prototype.nextStep = function() {
                 break;
             case 8:
                 coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
-                coins[coins.length-1].addToScene(scene);
+                coins[coins.length-1].addToScene(this.scene);
                 break;
             case 12:
-                var cam = createPeachCameras(container_size.width(), container_size.height())[2];
+                var cam = createPeachCameras(this.container_size.width(), this.container_size.height())[2];
-                cameras.push(cam);
+                this.cameras.push(cam);
-                cam.addToScene(scene);
+                cam.addToScene(this.scene);
                 this.camera.move({
                     position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036),
                     target:  new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745)
                 });
                 break;
             case 14:
-                var cams = createPeachCameras(container_size.width(), container_size.height());
+                var cams = createPeachCameras(this.container_size.width(), this.container_size.height());
                 for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) {
-                    cameras.push(cams[i]);
+                    this.cameras.push(cams[i]);
-                    cams[i].addToScene(scene);
+                    cams[i].addToScene(this.scene);
                 }
 
                 coins.push(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback));
-                coins[coins.length-1].addToScene(scene);
+                coins[coins.length-1].addToScene(this.scene);
                 coins.push(new Coin(6.694675339780243,-1.2480369397526456,-1.992336719279164, callback));
-                coins[coins.length-1].addToScene(scene);
+                coins[coins.length-1].addToScene(this.scene);
                 coins.push(new Coin(-2.458336118265302,-1.549510268763568,-11.186153614421212, callback));
-                coins[coins.length-1].addToScene(scene);
+                coins[coins.length-1].addToScene(this.scene);
         }
         this.step++;
     }
@@ -157,7 +168,7 @@ TutorialSteps.prototype.tryFinish = function() {
 
 TutorialSteps.prototype.alert = function(myString, justclicked) {
     this.notify(myString, justclicked);
-    onWindowResize();
+    this.onWindowResize();
 }
 
 TutorialSteps.prototype.notify = function(myString, justclick) {
@@ -165,7 +176,7 @@ TutorialSteps.prototype.notify = function(myString, justclick) {
         '<div class="alert alert-' + (justclick ? 'warning' : 'info') + ' alert-dismissable">' +
             (justclick ?
             '<button type="button" class="close" aria-hidden="true"' +
-                     'onclick="setTimeout(onWindowResize, 100); tutorial.nextStep();' + '">' +
+                     'onclick="setTimeout(onWindowResize, 100); nextStep();' + '">' +
                 '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>' +
             '</button>' : '') +
             '<span><strong>' +

js/prototype/initScene.js

@@ -420,11 +420,13 @@ function initBobomb(camera, scene, static_path, container_size) {
     coins = createBobombCoins();
 
     var otherCams = createBobombCameras(container_size.width(), container_size.height());
-    cameras = new CameraContainer(camera, otherCams);
+    var cameras = new CameraContainer(camera, otherCams);
 
     otherCams.forEach(function(cam) {cam.addToScene(scene);});
 
     setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); })}, 1000);
+
+    return cameras;
 }
 
 function initWhompScene(scene, collidableObjects, loader, static_path) {
@@ -495,11 +497,13 @@ function initWhomp(camera, scene, static_path, container_size) {
     coins = createWhompCoins();
 
     var otherCams = createWhompCameras(container_size.width(), container_size.height());
-    cameras = new CameraContainer(camera, otherCams);
+    var cameras = new CameraContainer(camera, otherCams);
 
     otherCams.forEach(function(cam) {cam.addToScene(scene);});
 
     setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); })}, 1000);
+
+    return cameras;
 }
 
 function initMountainScene(scene, collidableObjects, loader, static_path) {
@@ -575,9 +579,10 @@ function initMountain(camera, scene, static_path, container_size) {
     coins = createMountainCoins();
 
     var otherCams = createMountainCameras(container_size.width(), container_size.height());
-    cameras = new CameraContainer(camera, otherCams);
+    var cameras = new CameraContainer(camera, otherCams);
 
     otherCams.forEach(function(cam) {cam.addToScene(scene);});
 
     setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); })}, 1000);
+    return cameras;
 }

js/prototype/main.js

@@ -1,3 +1,6 @@
+// Let's be sure we avoid using global variables
+var onWindowResize = (function() {
+
 // Disable scrolling
 window.onscroll = function () { window.scrollTo(0, 0); };
 
@@ -13,7 +16,7 @@ var stats;
 var previewer;
 
 var loader;
-var coins;
+var coins = [];
 var beenFullscreen = false;
 var isFullscreen = false;
 var previousTime;
@@ -39,7 +42,9 @@ init();
 animate();
 
 function init() {
-    BD.disable();
+    // Initialize scene
+    scene = new THREE.Scene();
+    renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
 
     // Collidable objects to prevent camera from traversing objects
     var collidableObjects = new Array();
@@ -48,22 +53,18 @@ function init() {
     container = document.getElementById('container');
     container.style.height = container_size.height() + 'px';
     container.style.width = container_size.width() + 'px';
-    renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
     renderer.setSize(container_size.width(), container_size.height());
     // renderer.setSize(container_size.width(), container_size.height());
     renderer.shadowMapEnabled = true;
     renderer.setClearColor(0x87ceeb);
 
     // Initialize previewer
-    previewer = new Previewer(renderer);
+    previewer = new Previewer(renderer, scene);
     previewer.domElement.style.position ="absolute";
     previewer.domElement.style.cssFloat = 'top-left';
     previewer.domElement.width = container_size.width();
     previewer.domElement.height = container_size.height();
 
-    // Initialize scene
-    scene = new THREE.Scene();
-
     // Initialize stats counter
     stats = new Stats();
     stats.setMode(0);
@@ -76,11 +77,11 @@ function init() {
     container.appendChild(renderer.domElement);
 
     // Initialize pointer camera
-    var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container);
+    var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, container);
 
-    // initBobomb(camera1, scene, static_path, container_size);
+    cameras = initBobomb(camera1, scene, static_path, container_size);
-    // initWhomp(camera1, scene, static_path, container_size);
+    // cameras = initWhomp(camera1, scene, static_path, container_size);
-    initMountain(camera1, scene, static_path, container_size);
+    // cameras = initMountain(camera1, scene, static_path, container_size);
 
     // Add listeners
     initListeners();
@@ -109,7 +110,7 @@ function initListeners() {
     buttonManager = new ButtonManager(cameras, previewer);
 
     // Camera selecter for hover and clicking recommendations
-    cameraSelecter = new CameraSelecter(renderer, cameras, buttonManager);
+    cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager);
 }
 
 function fullscreen() {
@@ -246,3 +247,7 @@ function show(object) {
     object.traverse(function(object) {object.visible = true;});
 }
 
+// onWindowResize will be the only global function
+return onWindowResize;
+
+})();

js/prototype/raycasterTools.js

@@ -1,10 +1,11 @@
-var CameraSelecter = function(renderer, cameras, buttonManager) {
+var CameraSelecter = function(renderer, scene, cameras, buttonManager) {
     this.raycaster = new THREE.Raycaster();
     this.renderer = renderer;
     this.mouse = {};
     this.cameras = cameras;
     this.prev = {};
     this.buttonManager = buttonManager;
+    this.scene = scene;
 }
 
 CameraSelecter.prototype.pointedCamera = function() {
@@ -20,7 +21,7 @@ CameraSelecter.prototype.pointedCamera = function() {
 
     this.raycaster.set(camera.position, vector.sub(camera.position).normalize());
 
-    var intersects = this.raycaster.intersectObjects(scene.children, true);
+    var intersects = this.raycaster.intersectObjects(this.scene.children, true);
 
     if ( intersects.length > 0 ) {
         var minDistance;
@@ -69,7 +70,7 @@ CameraSelecter.prototype.update = function(event) {
             // log it
             var event = new BD.Event.Hovered();
             event.start = true;
-            event.arrow_id = cameras.cameras.indexOf(this.currentPointedCamera);
+            event.arrow_id = this.cameras.cameras.indexOf(this.currentPointedCamera);
             event.send();
 
             this.prev.x = this.mouse.x;
@@ -93,7 +94,7 @@ CameraSelecter.prototype.click = function(event) {
     var newCamera = this.pointedCamera(event);
     if (newCamera !== undefined && !(newCamera instanceof Coin)) {
         var event = new BD.Event.ArrowClicked();
-        event.arrow_id = cameras.cameras.indexOf(newCamera);
+        event.arrow_id = this.cameras.cameras.indexOf(newCamera);
         event.send();
 
         newCamera.check();

js/prototype/replay.js

@@ -1,3 +1,5 @@
+var onWindowResize = (function() {
+
 // Disable scrolling
 window.onscroll = function () { window.scrollTo(0, 0); };
 
@@ -12,7 +14,7 @@ var visible = 0;
 var stats;
 
 var loader;
-var coins;
+var coins = [];
 var beenFullscreen = false;
 var isFullscreen = false;
 var previousTime;
@@ -34,6 +36,10 @@ init();
 animate();
 
 function init() {
+    // Initialize scene
+    scene = new THREE.Scene();
+    renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
+
     // Collidable objects to prevent camera from traversing objects
     var collidableObjects = new Array();
 
@@ -41,14 +47,11 @@ function init() {
     container = document.getElementById('container');
     container.style.height = container_size.height() + 'px';
     container.style.width = container_size.width() + 'px';
-    renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
     renderer.setSize(container_size.width(), container_size.height());
     // renderer.setSize(container_size.width(), container_size.height());
     renderer.shadowMapEnabled = true;
     renderer.setClearColor(0x87ceeb);
 
-    // Initialize scene
-    scene = new THREE.Scene();
 
     // Initialize stats counter
     stats = new Stats();
@@ -60,35 +63,10 @@ function init() {
     container.appendChild( stats.domElement );
     container.appendChild(renderer.domElement);
 
-    // init light
-    var directional_light = new THREE.DirectionalLight(0xdddddd);
-    directional_light.position.set(1, 2.5, 1).normalize();
-    directional_light.castShadow = false;
-    scene.add(directional_light);
-
-    var ambient_light = new THREE.AmbientLight(0x555555);
-    scene.add(ambient_light);
-
     // Initialize pointer camera
-    var camera1 = new ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container);
+    var camera1 = new ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000);
-    scene.add(camera1);
+    cameras = initBobomb(camera1, scene, static_path, container_size);
-    camera1.reset();
+    camera1.cameras = cameras;
-
-    // Initialize recommendations
-    var otherCams = createBobombCameras(container_size.width(), container_size.height());
-    cameras = new CameraContainer(camera1, otherCams);
-    otherCams.forEach(function(cam) { cam.addToScene(scene); });
-
-    // Initalize loader
-    var loader = new THREE.OBJMTLLoader();
-
-    // Load scene
-    // initPeachCastle(scene, collidableObjects, loader, static_path);
-    initBobombScene(scene, collidableObjects, loader, static_path);
-    Coin.init();
-    coins = createBobombCoins();
-
-    setTimeout(function() {coins.forEach(function(coin) { coin.addToScene(scene);})}, 1000);
 
     // Add listeners
     initListeners();
@@ -117,7 +95,7 @@ function initListeners() {
     buttonManager = new ButtonManager(cameras);
 
     // Camera selecter for hover and clicking recommendations
-    cameraSelecter = new CameraSelecter(renderer, cameras, buttonManager);
+    cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager);
 }
 
 function fullscreen() {
@@ -245,3 +223,6 @@ function show(object) {
     object.traverse(function(object) {object.visible = true;});
 }
 
+return onWindowResize;
+
+})();

js/prototype/tutorial.js

@@ -1,3 +1,5 @@
+var onWindowResize = (function() {
+
 // Disable scrolling
 window.onscroll = function () { window.scrollTo(0, 0); };
 
@@ -12,7 +14,7 @@ var visible = 0;
 var stats;
 var previewer;
 var loader;
-var coins;
+var coins = [];
 var beenFullscreen = false;
 var isFullscreen = false;
 var previousTime;
@@ -39,6 +41,9 @@ init();
 animate();
 
 function init() {
+    // Initialize scene
+    scene = new THREE.Scene();
+
     // Disable log for this time
     BD.disable();
 
@@ -56,15 +61,12 @@ function init() {
     renderer.setClearColor(0x87ceeb);
 
     // Initialize previewer
-    previewer = new Previewer(renderer);
+    previewer = new Previewer(renderer, scene);
     previewer.domElement.style.position ="absolute";
     previewer.domElement.style.cssFloat = 'top-left';
     previewer.domElement.width = container_size.width();
     previewer.domElement.height = container_size.height();
 
-    // Initialize scene
-    scene = new THREE.Scene();
-
     // Initialize stats counter
     stats = new Stats();
     stats.setMode(0);
@@ -77,10 +79,11 @@ function init() {
     container.appendChild(renderer.domElement);
 
     // Initialize pointer camera
-    var camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container);
+    var camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, container);
     tutorial = camera1.tutorial;
 
     cameras = new CameraContainer(camera1, []);
+    tutorial.setCameras(cameras);
 
     // Load peach scene
     initPeach(camera1, scene, static_path);
@@ -113,7 +116,7 @@ function initListeners() {
     buttonManager = new ButtonManager(cameras, previewer);
 
     // Camera selecter for hover and clicking recommendations
-    cameraSelecter = new CameraSelecter(renderer, cameras, buttonManager);
+    cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager);
 }
 
 function fullscreen() {
@@ -250,3 +253,6 @@ function show(object) {
     object.traverse(function(object) {object.visible = true;});
 }
 
+return onWindowResize;
+
+})();