refactor: seperate AR functions into module and DOM.

- move ar functions from application to realspace.js, - create dedicated div for realspace canvas.
abrie · Sep 20, 2013 · 005f87d · 005f87d
1 parent 3f236ed
commit 005f87d
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 69 deletions.
diff --git a/application.html b/application.html
@@ -7,6 +7,8 @@
         </style>
     </head>
     <body>
-        <div id="application"></div>
+        <div id="application">
+            <div id="realspace"></div>
+        </div>
     </body>
 </html>
diff --git a/application.js b/application.js
@@ -1,49 +1,19 @@
 "use strict";
 
-requirejs( ['webcam','ardetector','arview','arobject'], function(webcam,ardetector,arview,arobject) {
-
-    var canvas, context, detector, view = undefined;
+requirejs( ['webcam','realspace'], function(webcam,realspace) {
 
     // Initializes components and starts the game loop
     function initialize() {
-        // Create a canvas element to which we will copy video.
-        canvas = document.createElement('canvas');
-        var webcamDimensions = webcam.getDimensions();
-        canvas.width = webcamDimensions.width;
-        canvas.height = webcamDimensions.height;
-
-        // We need a context for the canvas in order to copy to it.
-        context = canvas.getContext('2d');
-
-        // create an AR Marker detector using the canvas as the data source
-        detector = ardetector.create( canvas );
-
-        // Create an AR View for displaying the augmented reality scene
-        view = arview.create( webcam.getDimensions(), canvas );
-
-        // Set the ARView camera projection matrix according to the detector
-        view.setCameraMatrix( detector.getCameraMatrix(10,1000) );
-
-        // Place the arview's GL canvas into the DOM.
-        document.getElementById("application").appendChild( view.glCanvas );
+        // Initialize the AR Display
+        realspace.initialize();
     }
 
     // Runs one iteration of the game loop
     function tick() {
-        // Copy an image from the camara stream onto our canvas
-        webcam.copyToContext(context);
-
-        // The ardetector requires that we set a flag when the canvas has changed.
-        canvas.changed = true;
-
-        // Ask the detector to make a detection pass.
-        detector.detect( onMarkerCreated, onMarkerUpdated, onMarkerDestroyed );
-
-        // Update and render the AR view
-        view.update();
-        view.render();
+        // Run the AR detector and update the AR display
+        realspace.update();
 
-        // Request another iteration of the gameloop
+         // Request another iteration of the gameloop
         window.requestAnimationFrame(tick);
     }
 
@@ -52,36 +22,4 @@ requirejs( ['webcam','ardetector','arview','arobject'], function(webcam,ardetect
         initialize();
         tick();
     });
-
-    // This function is called when a marker is initally detected on the stream
-    function onMarkerCreated(marker) {
-        var object = markerObjects[marker.id];
-        object.transform( marker.matrix );
-        view.add( object, function(isSelected) {
-            onMarkerSelectionChanged(marker.id, isSelected);
-        });
-    }
-
-    // This function is called when an existing marker is repositioned
-    function onMarkerUpdated(marker) {
-        var object = markerObjects[marker.id];
-        object.transform( marker.matrix );
-    }
-
-    // This function is called when a marker disappears from the stream.
-    function onMarkerDestroyed(marker) {
-        var object = markerObjects[marker.id]; 
-        view.remove( object );
-    }
-
-    // This function is called when a marker object is selected/unselected.
-    function onMarkerSelectionChanged(id, isSelected) {
-        console.log("Selection:",id,":",isSelected);
-    }
-
-    // Create marker objects associated with the desired marker ID.
-    var markerObjects = {
-        16: arobject.createMarkerObject({color:0xAA0000}), // Marker #16, red.
-        32: arobject.createMarkerObject({color:0x00BB00}), // Marker #32, green.
-    };
 });
diff --git a/realspace.js b/realspace.js
@@ -0,0 +1,79 @@
+"use strict";
+define(['webcam','ardetector','arview','arobject'], function(webcam,ardetector, arview, arobject) {
+
+    var canvas, context, detector, view = undefined;
+
+    function initialize() {
+        canvas = document.createElement('canvas');
+        var webcamDimensions = webcam.getDimensions();
+        canvas.width = webcamDimensions.width;
+        canvas.height = webcamDimensions.height;
+
+        // We need a context for the canvas in order to copy to it.
+        context = canvas.getContext('2d');
+
+        // create an AR Marker detector using the canvas as the data source
+        detector = ardetector.create( canvas );
+
+        // Create an AR View for displaying the augmented reality scene
+        view = arview.create( webcam.getDimensions(), canvas );
+
+        // Set the ARView camera projection matrix according to the detector
+        view.setCameraMatrix( detector.getCameraMatrix(10,1000) );
+
+        // Place the arview's GL canvas into the DOM.
+        document.getElementById("realspace").appendChild( view.glCanvas );
+    }
+
+    function update() {
+        // Copy an image from the camara stream onto our canvas
+        webcam.copyToContext(context);
+
+        // The ardetector requires that we set a flag when the canvas has changed.
+        canvas.changed = true;
+
+        // Ask the detector to make a detection pass.
+        detector.detect( onMarkerCreated, onMarkerUpdated, onMarkerDestroyed );
+
+        // Update and render the AR view
+        view.update();
+        view.render();
+    }
+
+    // This function is called when a marker is initally detected on the stream
+    function onMarkerCreated(marker) {
+        var object = markerObjects[marker.id];
+        object.transform( marker.matrix );
+        view.add( object, function(isSelected) {
+            onMarkerSelectionChanged(marker.id, isSelected);
+        });
+    }
+
+    // This function is called when an existing marker is repositioned
+    function onMarkerUpdated(marker) {
+        var object = markerObjects[marker.id];
+        object.transform( marker.matrix );
+    }
+
+    // This function is called when a marker disappears from the stream.
+    function onMarkerDestroyed(marker) {
+        var object = markerObjects[marker.id]; 
+        view.remove( object );
+    }
+
+    // This function is called when a marker object is selected/unselected.
+    function onMarkerSelectionChanged(id, isSelected) {
+        console.log("Selection:",id,":",isSelected);
+    }
+
+    // Create marker objects associated with the desired marker ID.
+    var markerObjects = {
+        16: arobject.createMarkerObject({color:0xAA0000}), // Marker #16, red.
+        32: arobject.createMarkerObject({color:0x00BB00}), // Marker #32, green.
+    };
+
+    return {
+        initialize: initialize,
+        update: update
+    }
+});