Skip to content

Instantly share code, notes, and snippets.

@kirjavascript
Last active Aug 27, 2016
Embed
What would you like to do?
rainbow maze
height: 1000
<!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