add movement demo

elbywan · Aug 20, 2017 · a556955 · a556955
1 parent ef35d47
commit a556955
Show file tree

Hide file tree

Showing 7 changed files with 408 additions and 0 deletions.
diff --git a/demo/movement/movement.css b/demo/movement/movement.css
diff --git a/demo/movement/movement.html b/demo/movement/movement.html
@@ -0,0 +1,28 @@
+<html>
+    <head>
+        <title>quadtree-lib</title>
+        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
+        <script src="../quadtree.min.js"></script>
+        <script src="../common.js"></script>
+        <link rel="stylesheet" type="text/css" href="../common.css"></link>
+        <link rel="stylesheet" type="text/css" href="movement.css"></link>
+    </head>
+    <body>
+        <a href="https://github.com/elbywan/quadtree-lib" class="github-corner" aria-label="View source on Github"><svg width="110" height="110" viewBox="0 0 250 250" style="position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+        <h1>Quadtree-lib</h1>
+        <h2>Movement demo</h2>
+        <p class="intro">
+            Moving elements that change <span class="highlight">direction and color</span> when <span class="highlight">colliding</span>.
+        </p>
+        <div>
+            <strong id="counter"></strong>
+            <button class="action" onclick="demo.addElements()">Add elements</button>
+            <button class="action" onclick="demo.init()">Reset</button>
+        </div>
+        <div id="canvas-container">
+            <canvas id="quadtree_canvas"></canvas>
+        </div>
+
+        <script src="movement.js"></script>
+    </body>
+</html>
diff --git a/demo/movement/movement.js b/demo/movement/movement.js
@@ -0,0 +1,176 @@
+/* global window, document */
+
+window.demo = (function() {
+
+    var canvas = document.getElementById("quadtree_canvas")
+    var ctx = canvas.getContext("2d")
+    var container = document.getElementById("canvas-container")
+    var counter = document.getElementById("counter")
+    var width = Math.min(container.clientWidth, window.innerWidth)
+    var height = width === window.innerWidth ? window.innerWidth : container.clientHeight
+
+    var movementDemo = {
+
+        quadtreeColor: "rgba(120, 144, 156, 0.1)",
+        eltColor: "rgba(136, 14, 79, 1)",
+        eltNb: 50,
+        elts: [],
+        quadtree: null,
+
+        init: function() {
+            canvas.width = width
+            canvas.height = height
+            container.style.height = height + "px"
+            ctx.clearRect(0, 0, width, height)
+            ctx.lineWidth = 1
+            this.quadtree = new window.Quadtree({
+                width: width,
+                height: height
+            })
+            this.elts = []
+            for(var i = 0; i < this.eltNb; i++) {
+                this.elts.push(this.randomElement())
+            }
+            this.quadtree.pushAll(this.elts)
+            this.updateCanvas()
+            this.updateCounter()
+        },
+
+        randomElement: function() {
+            var squareWidth = window.randomNb(5, 20)
+
+            return {
+                x: window.randomNb(0, width - squareWidth),
+                y: window.randomNb(0, height - squareWidth),
+                width: squareWidth,
+                height: squareWidth,
+                speed: window.randomNb(1, 5),
+                direction: [ window.randomNb(-1, 2) || -1, window.randomNb(-1, 2) || 1 ],
+                delay: window.randomNb(1, 3),
+                delayIncrement: 0,
+                color: this.eltColor
+            }
+        },
+
+        addElements: function() {
+            var elementArray = []
+            for(var i = 0; i < this.eltNb; i++) {
+                var elt = this.randomElement()
+                elementArray.push(elt)
+                this.elts.push(elt)
+            }
+            this.quadtree.pushAll(elementArray)
+            this.updateCounter()
+        },
+
+        updateCanvas: function() {
+            ctx.clearRect(0, 0, width, height)
+            var that = this
+            this.quadtree.visit(function() {
+                ctx.strokeStyle = that.quadtreeColor
+                window.drawQuadtree(this, false, ctx)
+                for(var i in this.contents) {
+                    ctx.fillStyle = this.contents[i].color
+                    window.drawSquare(this.contents[i], true, ctx)
+                }
+                for(var j in this.oversized) {
+                    ctx.fillStyle = this.oversized[j].color
+                    window.drawSquare(this.oversized[j], true, ctx)
+                }
+            })
+        },
+
+        updateCounter: function() {
+            counter.innerHTML = this.quadtree.size + " elements"
+        },
+
+        movementTick: function() {
+            var that = this
+            this.elts.forEach(function(elt) {
+                var collisions = that.quadtree.colliding(elt)
+                if(elt.x < 0) {
+                    if(elt.direction[0] < 0)
+                        elt.direction[0] = -elt.direction[0]
+                    elt.x = 0
+                } else if(elt.x + elt.width > width) {
+                    if(elt.direction[0] > 0)
+                        elt.direction[0] = -elt.direction[0]
+                    elt.x = width - elt.width
+                } else if(elt.y < 0) {
+                    if(elt.direction[1] < 0)
+                        elt.direction[1] = -elt.direction[1]
+                    elt.y = 0
+                } else if(elt.y + elt.height > height) {
+                    if(elt.direction[1] > 0)
+                        elt.direction[1] = -elt.direction[1]
+                    elt.y = height - elt.height
+                } else if(collisions.length > 0) {
+                    elt.color = window.randomColor()
+                    var collision = collisions[0]
+                    var edges = {}
+                    if(collision.x <= elt.x && collision.x + collision.width  >= elt.x)  {
+                        edges.left = collision.x + collision.width - elt.x
+                    }
+                    if(collision.x + collision.width >= elt.x + elt.width && collision.x <= elt.x + elt.width) {
+                        edges.right = elt.x + elt.width - collision.x
+                    }
+                    if(collision.y <= elt.y && collision.y + collision.height  >= elt.y)  {
+                        edges.top = collision.y + collision.height - elt.y
+                    }
+                    if(collision.y + collision.height >= elt.y + elt.height && collision.y <= elt.y + elt.height) {
+                        edges.bottom = elt.y + elt.height - collision.y
+                    }
+                    var bestEdge = null
+                    for(var key in edges) {
+                        if(!bestEdge || bestEdge[1] > edges[key])
+                            bestEdge = [ key, edges[key] ]
+                    }
+                    if(bestEdge) {
+                        if(bestEdge[0] === "top") {
+                            if(elt.direction[1] < 0)
+                                elt.direction[1] = -elt.direction[1]
+                            // elt.y = collision.y + collision.height
+                        } else if(bestEdge[0] === "bottom") {
+                            if(elt.direction[1] > 0)
+                                elt.direction[1] = -elt.direction[1]
+                            // elt.y = collision.y - elt.height
+                        } else if(bestEdge[0] === "left") {
+                            if(elt.direction[0] < 0)
+                                elt.direction[0] = -elt.direction[0]
+                            // elt.x = collision.x + collision.width
+                        } else if(bestEdge[0] === "right") {
+                            if(elt.direction[0] > 0)
+                                elt.direction[0] = -elt.direction[0]
+                            // elt.x = collision.x - elt.width
+                        }
+                    }
+                }
+            })
+            var removedElts = []
+            this.elts.forEach(function(elt) {
+                elt.delayIncrement = (elt.delayIncrement + 1) % elt.delay
+                if(elt.delayIncrement === 0) {
+                    that.quadtree.remove(elt)
+                    removedElts.push(elt)
+                    elt.x += elt.direction[0] * elt.speed
+                    elt.y += elt.direction[1] * elt.speed
+                }
+            })
+            this.quadtree.pushAll(removedElts)
+        }
+    }
+
+    document.addEventListener("DOMContentLoaded", function() {
+        movementDemo.init()
+    })
+
+    var renderingLoop = function() {
+        movementDemo.movementTick()
+        movementDemo.updateCanvas()
+        window.requestAnimationFrame(renderingLoop)
+    }
+
+    window.requestAnimationFrame(renderingLoop)
+
+    return movementDemo
+}())
diff --git a/docs/demo/movement/movement.css b/docs/demo/movement/movement.css
diff --git a/docs/demo/movement/movement.html b/docs/demo/movement/movement.html
@@ -0,0 +1,28 @@
+<html>
+    <head>
+        <title>quadtree-lib</title>
+        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
+        <script src="../quadtree.min.js"></script>
+        <script src="../common.js"></script>
+        <link rel="stylesheet" type="text/css" href="../common.css"></link>
+        <link rel="stylesheet" type="text/css" href="movement.css"></link>
+    </head>
+    <body>
+        <a href="https://github.com/elbywan/quadtree-lib" class="github-corner" aria-label="View source on Github"><svg width="110" height="110" viewBox="0 0 250 250" style="position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+        <h1>Quadtree-lib</h1>
+        <h2>Movement demo</h2>
+        <p class="intro">
+            Moving elements that change <span class="highlight">direction and color</span> when <span class="highlight">colliding</span>.
+        </p>
+        <div>
+            <strong id="counter"></strong>
+            <button class="action" onclick="demo.addElements()">Add elements</button>
+            <button class="action" onclick="demo.init()">Reset</button>
+        </div>
+        <div id="canvas-container">
+            <canvas id="quadtree_canvas"></canvas>
+        </div>
+
+        <script src="movement.js"></script>
+    </body>
+</html>