var canvas, ctx; var points, clusters; window.onload = function() { canvas = document.querySelector('canvas'); ctx = canvas.getContext('2d'); document.body.onresize = function() { canvas.width = 0.2*window.innerWidth; canvas.height = .2*window.innerHeight; } document.body.onresize(); points = []; for(var i = 0; i < 600; i++) addRandomPoint(); clusters = []; for(var i = 0; i < 200; i++) addCluster(i/10); animate(); } function animate() { update(1/60); for(var i = 0; i < 3; i++) iterate(); //sort(); draw(); window.requestAnimationFrame(animate); } function update(dt) { var angle; for(var i = 0, p; i < points.length; i++) { p = points[i]; angle = Math.atan2(p.y, p.x); p.vx += Math.sin(angle)*dt; p.vy -= Math.cos(angle)*dt; p.x += p.vx*dt; p.y += p.vy*dt; if(p.x <= -1) p.vx = Math.abs(p.vx); if(p.x >= 1) p.vx = -Math.abs(p.vx); if(p.y <= -1) p.vy = Math.abs(p.vy); if(p.y >= 1) p.vy = -Math.abs(p.vy); } } function iterate() { for(var i = 0; i < points.length; i++) points[i].id = findClosestCluster(points[i]); for(var i = 0; i < clusters.length; i++) reallocateCluster(clusters[i]); function findClosestCluster(point) { var cluster, dx, dy; var closestId = 0, closestDist = 1.5, id, dist; for(id = 0; id < clusters.length; id++) { cluster = clusters[id]; dx = cluster.x - point.x; dy = cluster.y - point.y; dist = Math.sqrt(dx*dx + dy*dy); if(dist < closestDist) { closestId = id; closestDist = dist; } } return closestId; } function reallocateCluster(cluster) { var amount = 0; cluster.x = 0; cluster.y = 0; for(var i = 0, p; i < points.length; i++) { p = points[i]; if(p.id == cluster.id) { cluster.x += p.x; cluster.y += p.y; amount++; } } if(amount != 0) { cluster.x /= amount; cluster.y /= amount; } } } function sort() { var dx1, dy1, angle1, dx2, dy2, angle2; for(var id = 0, c; id < clusters.length; id++) { c = clusters[id]; points = points.sort(function(p1, p2) { if((p1.id != id) || (p2.id != id)) return 0; dx1 = p1.x - c.x; dy1 = p1.y - c.y; dx2 = p2.x - c.x; dy2 = p2.y - c.y; angle1 = Math.atan2(dy1, dx1); angle2 = Math.atan2(dy2, dx2); return angle1 < angle2; }); } } function draw() { var W = canvas.width, H = canvas.height; ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, W, H); ctx.fillStyle = 'rgba(180, 0, 10, 0.1)'; ctx.strokeStyle = 'rgb(200, 220, 230)'; // drawing points /* for(var i = 0, p; i < points.length; i++) { p = points[i]; ctx.beginPath(); ctx.arc(W/2*(1+p.x), H/2*(1-p.y), 2, 0, 7); ctx.stroke(); } */ // drawing clusters for(var id = 0; id < clusters.length; id++) { ctx.beginPath(); for(var i = 0, p; i < points.length; i++) { p = points[i]; if(p.id == id) ctx.lineTo(W/2*(1+p.x), H/2*(1-p.y)); } //ctx.stroke(); ctx.fill(); } } function addRandomPoint() { var x = 2*Math.random() - 1; var y = 2*Math.random() - 1; var vx = 2*Math.random() - 1; var vy = 2*Math.random() - 1; points.push({x:x, y:y, vx:vx, vy:vy}); } function addCluster(i) { var id = clusters.length; var x = 0.01*Math.cos(2*Math.PI*i); var y = 0.01*Math.sin(2*Math.PI*i); clusters.push({id:id, x:x, y:y}); }

regions