Last active
August 27, 2016 17:02
-
-
Save kirjavascript/55b5ad7367d200ebddd3104a450c4c5d to your computer and use it in GitHub Desktop.
rainbow maze
This file contains 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
height: 1000 |
This file contains 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
<!doctype html> | |
<html class="no-js" lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="x-ua-compatible" content="ie=edge"> | |
<title></title> | |
<meta name="description" content=""> | |
<meta name="theme-color" content="#000000"> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
</head> | |
<body> | |
<script> | |
var size = { | |
x: 40, | |
y: 40 | |
}; | |
var len = 25; | |
var svg = d3.select(document.body) | |
.append('svg') | |
.attr('width', size.x*len) | |
.attr('height', size.y*len); | |
var visited = [{ x: 0, y: 0 }]; | |
var stack = [{ x: 0, y: 0 }]; | |
var currentPos = { x: 0, y: 0 }; | |
var delay = 25; | |
var rainbow = d3.scaleSequential(d3.interpolateRainbow).domain([0, (size.x * size.y)/3]); | |
var loop = setInterval(function() { | |
var nextPos = getNextPosition(currentPos); | |
while (!nextPos && stack.length) { | |
currentPos = stack.pop(); | |
nextPos = getNextPosition(currentPos); | |
} | |
if (!nextPos) { | |
clearInterval(loop); | |
} | |
else { | |
svg.append('line') | |
.style('stroke', rainbow(stack.length)) | |
.style('stroke-width', '5') | |
.style('stroke-linecap', 'round') | |
.attr('x1', (currentPos.x*len)+(len/2)) | |
.attr('y1', (currentPos.y*len)+(len/2)) | |
.attr('x2', (currentPos.x*len)+(len/2)) | |
.attr('y2', (currentPos.y*len)+(len/2)) | |
.transition() | |
.duration(delay) | |
.attr('x2', (nextPos.x*len)+(len/2)) | |
.attr('y2', (nextPos.y*len)+(len/2)) | |
currentPos = nextPos; | |
stack.push(currentPos); | |
visited.push(currentPos); | |
} | |
}, delay); | |
function checkValidPosition(pos) { | |
var inBounds = pos.x >= 0 && pos.y >= 0 && pos.x < size.x && pos.y < size.y; | |
var notVisited = visited.findIndex(datum => { | |
return datum.x == pos.x && datum.y == pos.y; | |
}) == -1; | |
return inBounds && notVisited; | |
} | |
function getNextPosition(currentPos) { | |
var valid = [ | |
{x:currentPos.x+1,y:currentPos.y}, | |
{x:currentPos.x-1,y:currentPos.y}, | |
{x:currentPos.x,y:currentPos.y+1}, | |
{x:currentPos.x,y:currentPos.y-1}, | |
].filter(checkValidPosition); | |
if (!valid.length) { | |
return false; | |
} | |
else { | |
return valid[((Math.random()*valid.length)|0)]; | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment