Instantly share code, notes, and snippets.

@jonsadka /.block
Last active Dec 28, 2016

Embed
What would you like to do?
Generative art
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var width = 960;
var height = 500;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
var currentPath = 'M100,100 200,100';
var pos = {x: 200, y: 100};
var direction = getNewDirection();
var boundary = {
top: 0, bottom: height, left: 0, right: width
}
svg.append('path')
.attr('class', 'special--line')
.attr('d', currentPath)
.attr('stroke', 'purple')
.attr('fill', 'none')
.attr('stroke-width', 1)
function updateLine(){
direction = getNewDirection(direction);
pos = getNewLocation(pos, direction);
currentPath = `${currentPath} ${pos.x},${pos.y}`;
d3.select('.special--line')
.transition()
.attr('d', currentPath);
}
function getNewDirection(current) {
if (current === 'right') return 'down';
if (current === 'down') return 'left';
if (current === 'left') return 'up';
return 'right';
}
function getNewLocation(location, direction) {
const movedDistance = Math.round(Math.random()*200);
if (direction === 'right'){
location.x += movedDistance;
location.x = Math.min(location.x, boundary.right);
} else if (direction === 'down') {
location.y -= movedDistance;
location.y = Math.max(location.y, boundary.top);
} else if (direction === 'left') {
location.x -= movedDistance;
location.x = Math.max(location.x, boundary.left);
} else {
location.y += movedDistance;
location.y = Math.min(location.y, boundary.bottom);
}
return location;
}
setInterval(updateLine, 10)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment