var can; var c; var quadtree; var particles; var particleTypes; var particleActions; var showingTree; var xAngle; var yAngle; var zAngle; var oilActive; window.ondevicemotion = function(event) { xAngle = event.accelerationIncludingGravity.x yAngle = event.accelerationIncludingGravity.y zAngle = event.accelerationIncludingGravity.z /*rotation = event.rotationRate; if (rotation != null) { arAlpha = Math.round(rotation.alpha); arBeta = Math.round(rotation.beta); arGamma = Math.round(rotation.gamma); }*/ } window.onload = function() { if (window.DeviceMotionEvent==undefined) { console.log("error"); } can = document.getElementById("c"); can.width = 360; can.height = 360; c = can.getContext("2d"); particleTypes = [ "#0000FF", //water "#FFF000", //oil ]; quadtree = new Quadtree(0, 0, can.width, can.height); reset(200); oilActive = true; showingTree = false; animate(); } function animate() { c.fillStyle = "rgba(0,0,0,0.4)" c.fillRect(0, 0, can.width, can.height); quadtree.clear(); for (var i = 0; i < particles.length; i++) { quadtree.add(particles[i]); } for (var i = 0; i < particles.length; i++) { var closeParticles = quadtree.getListInSquare(particles[i].x - 20, particles[i].y - 20, particles[i].x + 20, particles[i].y + 20); particles[i].calcSpeed(closeParticles); particles[i].show(); particles[i].update(); } if(showingTree){ quadtree.show(); } requestAnimationFrame(animate); } function reset(val){ particles = []; for (var i = 0; i < val; i++) { particles.push(new Particle(Math.random() * can.width, Math.random() * can.height, parseInt(Math.random()*1.25))); } quadtree.clear(); } function dist(x1, y1, x2, y2) { return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); } function Quadtree(x1, y1, x2, y2) { this.children = []; this.agents = []; this.fromX = x1; this.fromY = y1; this.width = x2 - x1; this.height = y2 - y1; this.addToParent = true; this.add = function(agent) { if (this.addToParent) { this.agents.push(agent); if (this.agents.length == 4) { this.makeChildren(); for (var i = 0; i < this.agents.length; i++) { this.addToChildren(this.agents[i]); } this.agents = []; } } else { this.addToChildren(agent); } } this.makeChildren = function() { this.children = [ new Quadtree(this.fromX, this.fromY, this.fromX + this.width / 2, this.fromY + this.height / 2), //top-left new Quadtree(this.fromX + this.width / 2, this.fromY, this.fromX + this.width, this.fromY + this.height / 2), //top-right new Quadtree(this.fromX, this.fromY + this.height / 2, this.fromX + this.width / 2, this.fromY + this.height), //bottom-left new Quadtree(this.fromX + this.width / 2, this.fromY + this.height / 2, this.fromX + this.width, this.fromY + this.height), //bottom-right ] this.addToParent = false; } this.addToChildren = function(agent) { if (agent.x < this.fromX + this.width / 2) { if (agent.y < this.fromY + this.height / 2) { this.children[0].add(agent); } else { this.children[2].add(agent); } } else { if (agent.y < this.fromY + this.height / 2) { this.children[1].add(agent); } else { this.children[3].add(agent); } } } this.clear = function() { this.children = []; this.agents = []; this.addToParent = true; } this.touchingSquare = function(x1, y1, x2, y2) { return ( (this.fromX < x1 && this.fromX + this.width > x1 && this.fromY < y1 && this.fromY + this.height > y1) || (this.fromX < x2 && this.fromX + this.width > x2 && this.fromY < y1 && this.fromY + this.height > y1) || (this.fromX < x1 && this.fromX + this.width > x1 && this.fromY < y2 && this.fromY + this.height > y2) || (this.fromX < x2 && this.fromX + this.width > x2 && this.fromY < y2 && this.fromY + this.height > y2) || (x1 < this.fromX && x2 > this.fromX && y1 < this.fromY && y2 > this.fromY) || (x1 < this.fromX + this.width && x2 > this.fromX + this.width && y1 < this.fromY && y2 > this.fromY) || (x1 < this.fromX && x2 > this.fromX && y1 < this.fromY + this.height && y2 > this.fromY + this.height) || (x1 < this.fromX + this.width && x2 > this.fromX + this.width && y1 < this.fromY + this.height && y2 > this.fromY + this.height) ); } this.getListInSquare = function(x1, y1, x2, y2) { var list = []; if (this.touchingSquare(x1, y1, x2, y2)) { if (this.addToParent) { list = this.agents; } else { list = []; for (var i = 0; i < this.children.length; i++) { var list_ = this.children[i].getListInSquare(x1, y1, x2, y2); for (var j = 0; j < list_.length; j++) { list.push(list_[j]); } } } } return list; } this.show = function(){ if (this.addToParent) { c.strokeStyle = "#FFFFFF"; c.strokeRect(this.fromX, this.fromY, this.width, this.height); } else { for (var i = 0; i < this.children.length; i++) { this.children[i].show(); } } } } function Particle(x, y, type) { this.x = x; this.y = y; this.xSpeed = 0; this.ySpeed = 0; this.type = type; this.show = function() { if(oilActive){ c.fillStyle = particleTypes[this.type]; }else{ c.fillStyle = particleTypes[0]; } c.beginPath(); c.arc(this.x, this.y, 5, 0, 2 * Math.PI); c.fill() } this.calcSpeed = function(closeParticles) { for (var i = 0; i < closeParticles.length; i++) { var d = dist(this.x, this.y, closeParticles[i].x, closeParticles[i].y); if (d < 20) { if(this.type != closeParticles[i].type && oilActive){ this.fleeFromStrong(closeParticles[i].x, closeParticles[i].y); }else{ this.fleeFrom(closeParticles[i].x, closeParticles[i].y); } } } } this.fleeFrom = function(x, y) { this.xSpeed += -(x - this.x) / 5; this.ySpeed += -(y - this.y) / 5; } this.fleeFromStrong = function(x, y){ this.xSpeed += -(x - this.x) / 5 * 2; this.ySpeed += -(y - this.y) / 5 * 2; } this.update = function() { this.x += this.xSpeed; this.y += this.ySpeed; this.xSpeed *= 0.8; this.ySpeed *= 0.8; if(xAngle != undefined){ if(this.type == 0 || !oilActive){ this.xSpeed += Math.sin(xAngle/20*Math.PI)*2; this.ySpeed += -Math.sin(yAngle/20*Math.PI)*2; }else if(this.type == 1){ this.xSpeed += Math.sin(xAngle/20*Math.PI)*0.5; this.ySpeed += -Math.sin(yAngle/20*Math.PI)*0.5; } } if (this.x < 1) { //the Math.random() is to prevent the quadtree from breaking this.x = 1 + Math.random() * 3; this.xSpeed *= -1; } else if (this.x > can.width - 1) { this.x = can.width - 1 - Math.random() * 3; this.xSpeed *= -1; } if (this.y < 1) { this.y = 1 + Math.random() * 3; this.ySpeed *= -1; } else if (this.y > can.height - 1) { this.y = can.height - 1 - Math.random() * 3; this.ySpeed *= -1; } } }

Water and Oil || using quadtree