[demo] collisions / add counters

demo/basic/basic.css

@@ -7,10 +7,3 @@
     position:absolute;
     z-index: 2;
 }
-
-#counter {
-    padding: 5px 15px;
-    color: #E53945;
-    border: 1px solid #E53945;
-    margin: 10px;
-}

demo/collisions/collisions.html

@@ -13,9 +13,9 @@ <h1>Quadtree-lib</h1>
         <h2>Collisions demo</h2>
         <p class="intro">
             <span class="highlight">Drag and resize</span> the rectangle to highlight collisions.<br>
-            Elements that are <span class="highlight">computed</span> by the collision algorithm are colored in red.
+            Elements that are <span class="highlight">scanned</span> by the collision algorithm are colored in red.
         </p>
-
+        <strong id="counter"></strong>
         <div id="canvas-container">
             <canvas id="quadtree_canvas"></canvas>
             <canvas id="layer_canvas"></canvas>

demo/collisions/collisions.js

@@ -4,11 +4,12 @@ var layer = document.getElementById("layer_canvas")
 var layerCtx = layer.getContext("2d")
 var container = document.getElementById("canvas-container")
 var collisitionRect = document.getElementById("canvas-collision")
+var counter = document.getElementById("counter")
 var width = Math.min(container.clientWidth, window.innerWidth)
 var height = width === window.innerWidth ? window.innerWidth : container.clientHeight
 
 quadtreeColor = 'rgba(120, 144, 156, 0.1)'
-checkedColor = 'rgba(229, 57, 53, 1)'
+scannedColor = 'rgba(229, 57, 53, 1)'
 eltColor = 'rgba(136, 14, 79, 1)'
 collidingColor = '#F57F17'
 
@@ -69,9 +70,14 @@ var updateCanvas = function(){
 }
 
 var updateLayer = function(){
+    var scanned = 0
+    var colliding = 0
+    var total = quadtree.size
+
     var monkeyPatchCollisionAlgorithm = function(elt1, elt2) {
-        layerCtx.fillStyle = checkedColor
+        layerCtx.fillStyle = scannedColor
         drawSquare(elt2, true, layerCtx)
+        scanned++
         var ref, ref1, ref2, ref3
         return !(elt1.x > elt2.x + ((ref = elt2.width) != null ? ref : 0) || elt1.x + ((ref1 = elt1.width) != null ? ref1 : 0) < elt2.x || elt1.y > elt2.y + ((ref2 = elt2.height) != null ? ref2 : 0) || elt1.y + ((ref3 = elt1.height) != null ? ref3 : 0) < elt2.y);
     }
@@ -90,5 +96,12 @@ var updateLayer = function(){
     quadtree.colliding(coordinates, monkeyPatchCollisionAlgorithm).forEach(function(elt) {
         layerCtx.fillStyle = collidingColor
         drawSquare(elt, true, layerCtx)
+        colliding++
     })
+
+    updateCounters(scanned, colliding, total)
+}
+
+var updateCounters = function(scanned, colliding, total) {
+    counter.innerHTML = "Total : " + total + " | Scanned : " + scanned + " | Colliding : " + colliding
 }

demo/common.css

@@ -65,3 +65,10 @@ div#canvas-container {
     box-shadow: 1px 1px 50px;
     background-color: #212121;
 }
+
+#counter {
+    padding: 5px 15px;
+    color: #E53945;
+    border: 1px solid #E53945;
+    margin: 10px;
+}

docs/demo/basic/basic.css

@@ -7,10 +7,3 @@
     position:absolute;
     z-index: 2;
 }
-
-#counter {
-    padding: 5px 15px;
-    color: #E53945;
-    border: 1px solid #E53945;
-    margin: 10px;
-}

docs/demo/collisions/collisions.html

@@ -13,9 +13,9 @@ <h1>Quadtree-lib</h1>
         <h2>Collisions demo</h2>
         <p class="intro">
             <span class="highlight">Drag and resize</span> the rectangle to highlight collisions.<br>
-            Elements that are <span class="highlight">computed</span> by the collision algorithm are colored in red.
+            Elements that are <span class="highlight">scanned</span> by the collision algorithm are colored in red.
         </p>
-
+        <strong id="counter"></strong>
         <div id="canvas-container">
             <canvas id="quadtree_canvas"></canvas>
             <canvas id="layer_canvas"></canvas>

docs/demo/collisions/collisions.js

@@ -4,11 +4,12 @@ var layer = document.getElementById("layer_canvas")
 var layerCtx = layer.getContext("2d")
 var container = document.getElementById("canvas-container")
 var collisitionRect = document.getElementById("canvas-collision")
+var counter = document.getElementById("counter")
 var width = Math.min(container.clientWidth, window.innerWidth)
 var height = width === window.innerWidth ? window.innerWidth : container.clientHeight
 
 quadtreeColor = 'rgba(120, 144, 156, 0.1)'
-checkedColor = 'rgba(229, 57, 53, 1)'
+scannedColor = 'rgba(229, 57, 53, 1)'
 eltColor = 'rgba(136, 14, 79, 1)'
 collidingColor = '#F57F17'
 
@@ -69,9 +70,14 @@ var updateCanvas = function(){
 }
 
 var updateLayer = function(){
+    var scanned = 0
+    var colliding = 0
+    var total = quadtree.size
+
     var monkeyPatchCollisionAlgorithm = function(elt1, elt2) {
-        layerCtx.fillStyle = checkedColor
+        layerCtx.fillStyle = scannedColor
         drawSquare(elt2, true, layerCtx)
+        scanned++
         var ref, ref1, ref2, ref3
         return !(elt1.x > elt2.x + ((ref = elt2.width) != null ? ref : 0) || elt1.x + ((ref1 = elt1.width) != null ? ref1 : 0) < elt2.x || elt1.y > elt2.y + ((ref2 = elt2.height) != null ? ref2 : 0) || elt1.y + ((ref3 = elt1.height) != null ? ref3 : 0) < elt2.y);
     }
@@ -90,5 +96,12 @@ var updateLayer = function(){
     quadtree.colliding(coordinates, monkeyPatchCollisionAlgorithm).forEach(function(elt) {
         layerCtx.fillStyle = collidingColor
         drawSquare(elt, true, layerCtx)
+        colliding++
     })
+
+    updateCounters(scanned, colliding, total)
+}
+
+var updateCounters = function(scanned, colliding, total) {
+    counter.innerHTML = "Total : " + total + " | Scanned : " + scanned + " | Colliding : " + colliding
 }

docs/demo/common.css

@@ -65,3 +65,10 @@ div#canvas-container {
     box-shadow: 1px 1px 50px;
     background-color: #212121;
 }
+
+#counter {
+    padding: 5px 15px;
+    color: #E53945;
+    border: 1px solid #E53945;
+    margin: 10px;
+}