/* Now you can move your mouse over the canvas to make more triangles! Thanks Ironwallaby for delaunay triangulation implementation https://github.com/ironwallaby/delaunay */ $(function () { setTimeout(function(){ var sim = new Eng(); var gui = new dat.GUI(); //gui.addColor(sim, 'nextLineColor'); gui.add(sim, 'edgeBounce', 0, 1); gui.add(sim, 'acceleration', 0, 1); gui.add(sim, 'maxSpeed', 0, 5); gui.add(sim, 'maxArea', 0, 20000); gui.add(sim, 'clear'); }, 10); }); var Eng = function () { window.onresize = $.proxy(function(event) { this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; }, this); this.canvas = document.getElementById('playground'); this.c = document.getElementById('playground').getContext('2d'); this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; this.timestep = 16; this.updatePositionTimestep = 16; this.updatePositions = true; $(this.canvas).bind('mousemove', $.proxy(function (e) { if(e.offsetX==undefined) // this works for Firefox { x = e.pageX-$('#playground').offset().left; y = e.pageY-$('#playground').offset().top; } else // works in Google Chrome { x = e.offsetX; y = e.offsetY; } this.followMouse(x, y); }, this)); this.getRandomArbitrary = function (min, max) { return Math.floor(Math.random() * (max - min) + min); } this.maxArea = (window.innerWidth * window.innerHeight)/850; this.i = 50; this.vertices = new Array(this.i); this.edgeBounce = 0.4; this.acceleration = 0.6; this.maxSpeed = 4; for(var tr = 0; tr < this.vertices.length; tr++) { var x, y; x = this.getRandomArbitrary(-10, this.canvas.width + 10); y = this.getRandomArbitrary(-10, this.canvas.height + 10); this.vertices[tr] = {x: x, y: y, velX: 0, velY: 0, steps : 0}; } this.vertices[0] = {x: 0, y: 0, velX: 0, velY: 0, steps : 0}; this.vertices[1] = {x: 0, y: this.canvas.height + 10, velX: 0, velY: 0, steps : 0}; this.vertices[2] = {x: this.canvas.width + 10, y: 0, velX: 0, velY: 0, steps : 0}; this.vertices[3] = {x: this.canvas.width + 10, y: this.canvas.height + 10, velX: 0, velY: 0, steps : 0}; this.clear = function () { for(var tr = 0; tr < this.vertices.length; tr++) { if(this.vertices[tr].mouse) { this.vertices.splice(tr, 1); } }; }; for (var st = 0; st < 80; st++) { this.vertices.push({ x: st*10, y: this.canvas.height/2, velX: 0, velY: 0, steps: 50, mouse : true }); this.vertices.push({ x: st*10, y: this.canvas.height/2, velX: 0, velY: 0, steps: 20, mouse : true }); this.vertices.push({ x: st*10, y: this.canvas.height/2, velX: 0, velY: 0, steps: 40, mouse : true }); this.vertices.push({ x: st*10, y: this.canvas.height/2, velX: 0, velY: 0, steps: 70, mouse : true }); this.vertices.push({ x: st*10, y: this.canvas.height/2, velX: 0, velY: 0, steps: 70, mouse : true }); this.vertices.push({ x: st*10, y: this.canvas.height/2, velX: 0, velY: 0, steps: 50, mouse : true }); this.vertices.push({ x: st*10, y: this.canvas.height/2, velX: 0, velY: 0, steps: 60, mouse : true }); this.vertices.push({ x: st*10, y: this.canvas.height/2, velX: 0, velY: 0, steps: 30, mouse : true }); } this.followMouse = function (x, y) { this.vertices.push({ x: x, y: y, velX: 0, velY: 0, steps: 50, mouse : true }); this.vertices.push({ x: x, y: y, velX: 0, velY: 0, steps: 20, mouse : true }); } this.loop = function () { this.c.clearRect(0,0, this.canvas.width, this.canvas.height); if(this.updatePositions) { this.updatePositions = false; for(var tr = 0; tr < this.vertices.length; tr++) { if(this.vertices[tr].steps > 0) { this.vertices[tr].velX = this.vertices[tr].velX + (Math.random() - 0.499999) * this.acceleration; this.vertices[tr].velY = this.vertices[tr].velY + (Math.random() - 0.499999) * this.acceleration; if (this.vertices[tr].x > this.canvas.width + 20) { this.vertices[tr].velX = this.vertices[tr].velX - this.edgeBounce; } else if(this.vertices[tr].x < -20) { this.vertices[tr].velX = this.vertices[tr].velX + this.edgeBounce; } if (this.vertices[tr].y > this.canvas.height + 20) { this.vertices[tr].velY = this.vertices[tr].velY - this.edgeBounce; } else if(this.vertices[tr].y < -20) { this.vertices[tr].velY = this.vertices[tr].velY + this.edgeBounce; } if (this.vertices[tr].velY > this.maxSpeed) { this.vertices[tr].velY = this.maxSpeed; } if (this.vertices[tr].velX > this.maxSpeed) { this.vertices[tr].velX = this.maxSpeed; } this.vertices[tr].x = this.vertices[tr].x + this.vertices[tr].velX; this.vertices[tr].y = this.vertices[tr].y + this.vertices[tr].velY; } this.vertices[tr].steps--; } setTimeout($.proxy(function () { this.updatePositions = true; }, this), this.updatePositionTimestep); } var triangles = triangulate(this.vertices) i = triangles.length while(i) triangles[--i].draw(this) setTimeout($.proxy(function () { this.loop(); }, this), this.timestep); } this.loop(); } function Triangle(a, b, c) { this.a = a this.b = b this.c = c var A = b.x - a.x, B = b.y - a.y, C = c.x - a.x, D = c.y - a.y, E = A * (a.x + b.x) + B * (a.y + b.y), F = C * (a.x + c.x) + D * (a.y + c.y), G = 2 * (A * (c.y - b.y) - B * (c.x - b.x)), minx, miny, dx, dy /* If the points of the triangle are collinear, then just find the * extremes and use the midpoint as the center of the circumcircle. */ if(Math.abs(G) < 0.000001) { minx = Math.min(a.x, b.x, c.x) miny = Math.min(a.y, b.y, c.y) dx = (Math.max(a.x, b.x, c.x) - minx) * 0.5 dy = (Math.max(a.y, b.y, c.y) - miny) * 0.5 this.x = minx + dx this.y = miny + dy this.r = dx * dx + dy * dy } else { this.x = (D*E - B*F) / G this.y = (A*F - C*E) / G dx = this.x - a.x dy = this.y - a.y this.r = dx * dx + dy * dy } } Triangle.prototype.draw = function(eng) { eng.c.beginPath() var area = Math.abs((this.a.x * (this.b.y - this.c.y) + this.b.x*(this.c.y-this.a.y) + this.c.x * (this.a.y - this.b.y))/2); eng.c.moveTo(this.a.x, this.a.y) eng.c.lineTo(this.b.x, this.b.y) eng.c.lineTo(this.c.x, this.c.y) var bga = 1; if (area/eng.maxArea > 0.5) { eng.c.strokeStyle = 'rgba(255, 255, 255, 1)'; eng.c.stroke(); var bga = 1; } else { var bga = area/eng.maxArea; } eng.c.fillStyle = 'rgba(255, 255, 255, ' + bga + ')'; eng.c.fill() eng.c.closePath() } function byX(a, b) { return b.x - a.x } function dedup(edges) { var j = edges.length, a, b, i, m, n outer: while(j) { b = edges[--j] a = edges[--j] i = j while(i) { n = edges[--i] m = edges[--i] if((a === m && b === n) || (a === n && b === m)) { edges.splice(j, 2) edges.splice(i, 2) j -= 2 continue outer } } } } function triangulate(vertices) { /* Bail if there aren't enough vertices to form any triangles. */ if(vertices.length < 3) return [] /* Ensure the vertex array is in order of descending X coordinate * (which is needed to ensure a subquadratic runtime), and then find * the bounding box around the points. */ vertices.sort(byX) var i = vertices.length - 1, xmin = vertices[i].x, xmax = vertices[0].x, ymin = vertices[i].y, ymax = ymin while(i--) { if(vertices[i].y < ymin) ymin = vertices[i].y if(vertices[i].y > ymax) ymax = vertices[i].y } /* Find a supertriangle, which is a triangle that surrounds all the * vertices. This is used like something of a sentinel value to remove * cases in the main algorithm, and is removed before we return any * results. * * Once found, put it in the "open" list. (The "open" list is for * triangles who may still need to be considered; the "closed" list is * for triangles which do not.) */ var dx = xmax - xmin, dy = ymax - ymin, dmax = (dx > dy) ? dx : dy, xmid = (xmax + xmin) * 0.5, ymid = (ymax + ymin) * 0.5, open = [ new Triangle( {x: xmid - 20 * dmax, y: ymid - dmax, __sentinel: true}, {x: xmid , y: ymid + 20 * dmax, __sentinel: true}, {x: xmid + 20 * dmax, y: ymid - dmax, __sentinel: true} ) ], closed = [], edges = [], j, a, b /* Incrementally add each vertex to the mesh. */ i = vertices.length while(i--) { /* For each open triangle, check to see if the current point is * inside it's circumcircle. If it is, remove the triangle and add * it's edges to an edge list. */ edges.length = 0 j = open.length while(j--) { /* If this point is to the right of this triangle's circumcircle, * then this triangle should never get checked again. Remove it * from the open list, add it to the closed list, and skip. */ dx = vertices[i].x - open[j].x if(dx > 0 && dx * dx > open[j].r) { closed.push(open[j]) open.splice(j, 1) continue } /* If not, skip this triangle. */ dy = vertices[i].y - open[j].y if(dx * dx + dy * dy > open[j].r) continue /* Remove the triangle and add it's edges to the edge list. */ edges.push( open[j].a, open[j].b, open[j].b, open[j].c, open[j].c, open[j].a ) open.splice(j, 1) } /* Remove any doubled edges. */ dedup(edges) /* Add a new triangle for each edge. */ j = edges.length while(j) { b = edges[--j] a = edges[--j] open.push(new Triangle(a, b, vertices[i])) } } /* Copy any remaining open triangles to the closed list, and then * remove any triangles that share a vertex with the supertriangle. */ Array.prototype.push.apply(closed, open) i = closed.length while(i--) if(closed[i].a.__sentinel || closed[i].b.__sentinel || closed[i].c.__sentinel) closed.splice(i, 1) /* Yay, we're done! */ return closed } if (typeof module !== 'undefined') { module.exports = { Triangle: Triangle, triangulate: triangulate } }

!