diff --git a/demo/basic/basic.css b/demo/basic/basic.css
index 10ba13a..9d056e1 100644
--- a/demo/basic/basic.css
+++ b/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;
-}
diff --git a/demo/collisions/collisions.html b/demo/collisions/collisions.html
index 2df5ac7..b0c73b7 100644
--- a/demo/collisions/collisions.html
+++ b/demo/collisions/collisions.html
@@ -13,9 +13,9 @@
diff --git a/demo/collisions/collisions.js b/demo/collisions/collisions.js
index 1e83a54..98228ea 100644
--- a/demo/collisions/collisions.js
+++ b/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
}
diff --git a/demo/common.css b/demo/common.css
index dc82c3f..badb842 100644
--- a/demo/common.css
+++ b/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;
+}
diff --git a/docs/demo/basic/basic.css b/docs/demo/basic/basic.css
index 10ba13a..9d056e1 100644
--- a/docs/demo/basic/basic.css
+++ b/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;
-}
diff --git a/docs/demo/collisions/collisions.html b/docs/demo/collisions/collisions.html
index 2df5ac7..b0c73b7 100644
--- a/docs/demo/collisions/collisions.html
+++ b/docs/demo/collisions/collisions.html
@@ -13,9 +13,9 @@
Quadtree-lib
Collisions demo
Drag and resize the rectangle to highlight collisions.
- Elements that are computed by the collision algorithm are colored in red.
+ Elements that are scanned by the collision algorithm are colored in red.
-
+
diff --git a/docs/demo/collisions/collisions.js b/docs/demo/collisions/collisions.js
index 1e83a54..98228ea 100644
--- a/docs/demo/collisions/collisions.js
+++ b/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
}
diff --git a/docs/demo/common.css b/docs/demo/common.css
index dc82c3f..badb842 100644
--- a/docs/demo/common.css
+++ b/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;
+}