Created
December 3, 2016 16:46
-
-
Save lilrooness/a1e3a27a60e7c85b5b21d478ae27305b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| var context = document.getElementById('canvas').getContext('2d'); | |
| var points = []; | |
| var npoints = 200; | |
| var grid = []; | |
| var gridWidth = 400; | |
| var gridHeight = 400; | |
| var screenWidth = context.canvas.width; | |
| var screenHeight = context.canvas.height; | |
| var getNearestPoint = function(x, y, excluded) { | |
| var nearestPoint = {}; | |
| var currentDist = -1; | |
| points.forEach(function(p) { | |
| if(!seenPoint(p, excluded)) { | |
| var dist = Math.pow(x - p.x, 2) + Math.pow(y - p.y, 2); | |
| if(currentDist == -1) { | |
| currentDist = dist; | |
| nearestPoint = p; | |
| } else if(dist < currentDist) { | |
| currentDist = dist; | |
| nearestPoint = p; | |
| } | |
| } | |
| }); | |
| return nearestPoint; | |
| } | |
| var getNearestPointBehind = function(x, y, excluded) { | |
| var nearestPoint = {}; | |
| var currentDist = -1; | |
| points.forEach(function(p) { | |
| if(!seenPoint(p, excluded) && (p.y - y) < 0) { | |
| var dist = Math.pow(x - p.x, 2) + Math.pow(y - p.y, 2); | |
| if(currentDist == -1) { | |
| currentDist = dist; | |
| nearestPoint = p; | |
| } else if(dist < currentDist) { | |
| currentDist = dist; | |
| nearestPoint = p; | |
| } | |
| } | |
| }); | |
| return nearestPoint; | |
| } | |
| var getNearestPointBehindX = function(x, y, excluded) { | |
| var nearestPoint = {}; | |
| var currentDist = -1; | |
| points.forEach(function(p) { | |
| if(!seenPoint(p, excluded) && (p.x - x) < 0) { | |
| var dist = Math.pow(x - p.x, 2) + Math.pow(y - p.y, 2); | |
| if(currentDist == -1) { | |
| currentDist = dist; | |
| nearestPoint = p; | |
| } else if(dist < currentDist) { | |
| currentDist = dist; | |
| nearestPoint = p; | |
| } | |
| } | |
| }); | |
| return nearestPoint; | |
| } | |
| var getNextHighestPoint = function(y, seen) { | |
| var nearestPoint = {}; | |
| var ydiff = -1; | |
| points.forEach(function(p) { | |
| if(((p.y - y) < ydiff || ydiff == -1) && !seenPoint(p, seen)) { | |
| ydiff = p.y - y; | |
| nearestPoint = p; | |
| } | |
| }); | |
| return nearestPoint; | |
| }; | |
| var getNexPointAlongX = function(x, seen) { | |
| var nearestPoint = {}; | |
| var xdiff = -1; | |
| points.forEach(function(p) { | |
| if(((p.x - x) < xdiff || xdiff == -1) && !seenPoint(p, seen)) { | |
| xdiff = p.x - x; | |
| nearestPoint = p; | |
| } | |
| }); | |
| return nearestPoint; | |
| }; | |
| var seenPoint = function(point, seen) { | |
| for(var i=0; i<seen.length; i++) { | |
| if(seen[i].id == point.id) { | |
| return true; | |
| } | |
| } | |
| return false; | |
| } | |
| for(i =0; i< npoints; i++) { | |
| points.push({ | |
| x: Math.random()* screenWidth, | |
| y: Math.random() * screenWidth, | |
| id: i, | |
| color: 'rgb('+ Math.floor(Math.random() * 255) +', '+ Math.floor(Math.random() * 255) +', '+ Math.floor(Math.random() * 255)+')' | |
| }); | |
| } | |
| for(var y=0; y<gridHeight; y++) { | |
| grid.push([]); | |
| for(var x=0; x<gridWidth; x++) { | |
| grid[y].push({x: x, y: y, color: -1}); | |
| } | |
| } | |
| for(var y=0; y<gridHeight; y++) { | |
| for(var x=0; x<gridWidth; x++) { | |
| var p = getNearestPoint(grid[y][x].x, grid[y][x].y, []); | |
| grid[y][x].color = p.color; | |
| } | |
| } | |
| var yLine = 0; | |
| var seenPoints = []; | |
| var edges = []; | |
| for(i=0; i < npoints; i++) { | |
| var p = getNextHighestPoint(yLine, seenPoints); | |
| var link = {}; | |
| if(i==0) { | |
| link = getNearestPoint(p.x, p.y, [p]); | |
| } else { | |
| link = getNearestPointBehind(p.x, p.y, [p]); | |
| } | |
| edges.push({ | |
| x1: p.x, | |
| y1: p.y, | |
| x2: link.x, | |
| y2: link.y | |
| }); | |
| yLine = p.y; | |
| seenPoints.push(p); | |
| } | |
| var xLine = 0; | |
| seenPoints = []; | |
| for(i=0; i < npoints; i++) { | |
| var p = getNexPointAlongX(xLine, seenPoints); | |
| var link = {}; | |
| if(i==0) { | |
| link = getNearestPoint(p.x, p.y, [p]); | |
| } else { | |
| link = getNearestPointBehindX(p.x, p.y, [p]); | |
| } | |
| edges.push({ | |
| x1: p.x, | |
| y1: p.y, | |
| x2: link.x, | |
| y2: link.y | |
| }); | |
| xLine = p.x; | |
| seenPoints.push(p); | |
| } | |
| // render | |
| for(y=0; y<gridHeight; y++) { | |
| for(x=0; x<gridWidth; x++) { | |
| context.fillStyle = grid[y][x].color; | |
| context.fillRect(grid[y][x].x, grid[y][x].y, 1, 1); | |
| } | |
| } | |
| context.fillStyle = 'black'; | |
| points.forEach(function(p) { | |
| context.fillRect(p.x, p.y, 5, 5); | |
| }); | |
| context.lineWidth = 5; | |
| context.strokeStyle = 'black'; | |
| edges.forEach(function(e) { | |
| context.moveTo(e.x1, e.y1); | |
| context.lineTo(e.x2, e.y2); | |
| context.stroke(); | |
| }); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment