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 @@

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/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; +}