[demo] collisions / add buttons & chrome bounding box fix

elbywan · Mar 30, 2017 · 32ea350 · 32ea350
1 parent 3a9fb0e
commit 32ea350
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 24 deletions.
diff --git a/demo/collisions/collisions.html b/demo/collisions/collisions.html
@@ -15,7 +15,11 @@ <h2>Collisions demo</h2>
             <span class="highlight">Drag and resize</span> the rectangle to highlight collisions.<br>
             Elements that are <span class="highlight">scanned</span> by the collision algorithm are colored in red.
         </p>
-        <strong id="counter"></strong>
+        <div>
+            <strong id="counter"></strong>
+            <button class="action" onclick="addElements()">Add elements</button>
+            <button class="action" onclick="init()">Reset</button>
+        </div>
         <div id="canvas-container">
             <canvas id="quadtree_canvas"></canvas>
             <canvas id="layer_canvas"></canvas>

diff --git a/demo/collisions/collisions.js b/demo/collisions/collisions.js
@@ -14,6 +14,7 @@ eltColor = 'rgba(136, 14, 79, 1)'
 collidingColor = '#F57F17'
 
 eltNb = 1000
+eltIncrement = 100
 
 document.addEventListener('DOMContentLoaded', function () {
     init()
@@ -25,8 +26,6 @@ document.addEventListener('DOMContentLoaded', function () {
             updateLayer()
         }
     })
-    updateCanvas()
-    updateLayer()
 })
 
 var init = function(){
@@ -45,15 +44,11 @@ var init = function(){
     var elts = []
     for(var i = 0; i < eltNb; i++) {
         var squareSize = randomNb(5, 15)
-        elts.push({
-            x: randomNb(0, width),
-            y: randomNb(0, height),
-            width: squareSize,
-            height: squareSize,
-            color: eltColor
-        })
+        elts.push(randomizeElement())
     }
     quadtree.pushAll(elts)
+    updateCanvas()
+    updateLayer()
 }
 
 var updateCanvas = function(){
@@ -86,8 +81,8 @@ var updateLayer = function(){
     var containerBox = container.getBoundingClientRect()
     var collisionBox = collisitionRect.getBoundingClientRect()
     var coordinates = {
-        x: collisionBox.x - containerBox.x,
-        y: collisionBox.y - containerBox.y,
+        x: collisionBox.left - containerBox.left,
+        y: collisionBox.top - containerBox.top,
         width: collisionBox.width,
         height: collisionBox.height
     }
@@ -102,6 +97,26 @@ var updateLayer = function(){
     updateCounters(scanned, colliding, total)
 }
 
+var randomizeElement = function() {
+    var squareSize = randomNb(5, 15)
+    return {
+        x: randomNb(0, width),
+        y: randomNb(0, height),
+        width: squareSize,
+        height: squareSize,
+        color: eltColor
+    }
+}
+
 var updateCounters = function(scanned, colliding, total) {
     counter.innerHTML = "Total : " + total + " | Scanned : " + scanned + " | Colliding : " + colliding
 }
+
+var addElements = function(){
+    var elementArray = []
+    for(var i = 0; i < eltIncrement; i++)
+        elementArray.push(randomizeElement())
+    quadtree.pushAll(elementArray)
+    updateCanvas()
+    updateLayer()
+}
diff --git a/demo/common.css b/demo/common.css
@@ -24,6 +24,23 @@ h2 {
     margin: 0;
 }
 
+button.action {
+    background: #263238;
+    color: #E53945;
+    box-shadow: 0px 0px 2px;
+    border: none;
+    outline: none;
+    padding: 5px 15px;
+    margin: 10px;
+    transition: all 0.15s ease-in-out;
+}
+
+button.action:hover {
+    background: #E53945;
+    color: white;
+    cursor: pointer;
+}
+
 .github-corner {
     fill: white;
     color: #E53945;

diff --git a/docs/demo/collisions/collisions.html b/docs/demo/collisions/collisions.html
@@ -15,7 +15,11 @@ <h2>Collisions demo</h2>
             <span class="highlight">Drag and resize</span> the rectangle to highlight collisions.<br>
             Elements that are <span class="highlight">scanned</span> by the collision algorithm are colored in red.
         </p>
-        <strong id="counter"></strong>
+        <div>
+            <strong id="counter"></strong>
+            <button class="action" onclick="addElements()">Add elements</button>
+            <button class="action" onclick="init()">Reset</button>
+        </div>
         <div id="canvas-container">
             <canvas id="quadtree_canvas"></canvas>
             <canvas id="layer_canvas"></canvas>

diff --git a/docs/demo/collisions/collisions.js b/docs/demo/collisions/collisions.js
@@ -14,6 +14,7 @@ eltColor = 'rgba(136, 14, 79, 1)'
 collidingColor = '#F57F17'
 
 eltNb = 1000
+eltIncrement = 100
 
 document.addEventListener('DOMContentLoaded', function () {
     init()
@@ -25,8 +26,6 @@ document.addEventListener('DOMContentLoaded', function () {
             updateLayer()
         }
     })
-    updateCanvas()
-    updateLayer()
 })
 
 var init = function(){
@@ -45,15 +44,11 @@ var init = function(){
     var elts = []
     for(var i = 0; i < eltNb; i++) {
         var squareSize = randomNb(5, 15)
-        elts.push({
-            x: randomNb(0, width),
-            y: randomNb(0, height),
-            width: squareSize,
-            height: squareSize,
-            color: eltColor
-        })
+        elts.push(randomizeElement())
     }
     quadtree.pushAll(elts)
+    updateCanvas()
+    updateLayer()
 }
 
 var updateCanvas = function(){
@@ -86,8 +81,8 @@ var updateLayer = function(){
     var containerBox = container.getBoundingClientRect()
     var collisionBox = collisitionRect.getBoundingClientRect()
     var coordinates = {
-        x: collisionBox.x - containerBox.x,
-        y: collisionBox.y - containerBox.y,
+        x: collisionBox.left - containerBox.left,
+        y: collisionBox.top - containerBox.top,
         width: collisionBox.width,
         height: collisionBox.height
     }
@@ -102,6 +97,26 @@ var updateLayer = function(){
     updateCounters(scanned, colliding, total)
 }
 
+var randomizeElement = function() {
+    var squareSize = randomNb(5, 15)
+    return {
+        x: randomNb(0, width),
+        y: randomNb(0, height),
+        width: squareSize,
+        height: squareSize,
+        color: eltColor
+    }
+}
+
 var updateCounters = function(scanned, colliding, total) {
     counter.innerHTML = "Total : " + total + " | Scanned : " + scanned + " | Colliding : " + colliding
 }
+
+var addElements = function(){
+    var elementArray = []
+    for(var i = 0; i < eltIncrement; i++)
+        elementArray.push(randomizeElement())
+    quadtree.pushAll(elementArray)
+    updateCanvas()
+    updateLayer()
+}
diff --git a/docs/demo/common.css b/docs/demo/common.css
@@ -24,6 +24,23 @@ h2 {
     margin: 0;
 }
 
+button.action {
+    background: #263238;
+    color: #E53945;
+    box-shadow: 0px 0px 2px;
+    border: none;
+    outline: none;
+    padding: 5px 15px;
+    margin: 10px;
+    transition: all 0.15s ease-in-out;
+}
+
+button.action:hover {
+    background: #E53945;
+    color: white;
+    cursor: pointer;
+}
+
 .github-corner {
     fill: white;
     color: #E53945;