hexapaths

<html>
<head>
</head>
<body style="background: #dddddd;">
<div>
Step size: <input id="steps" value="10"></input>
Step count: <input id="stepcount" value="100"></input>
<button onclick="draw(document.getElementById('steps').value,document.getElementById('stepcount').value);">Draw!</button>
<br />
Drawn: <input id="drawn" value="" size="100"></input>
</div>
<canvas id="canvas" width="800" height="800"></canvas>
<script>
var P = function(_x, _y, _w) {
    return {
        x: _x,
        y: _y,
        w: _w,
        setPos: function(_x, _y) {
            this.x = _x;
            this.y = _y;
        }
    }
};

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");


function circle(x,y,radius,color){
    ctx.strokeStyle =color;
    ctx.beginPath();
    ctx.arc(x,y,radius,0,Math.PI*2);
    ctx.closePath();
    ctx.stroke();
}

function draw(steps, stepcount){
    ctx.fillStyle="rgba(255, 255, 255, 1)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    var p = new P(400, 400, Math.PI),
        sixty = Math.PI/3;
    document.getElementById('drawn').value='';
    circle(p.x,p.y,1,'#0f0');

    for (var i = 0; i<stepcount; i++) {
        ctx.strokeStyle = "rgba(0,0,0,.2)";
        ctx.beginPath();
        ctx.moveTo(p.x,p.y);
        var res = Math.floor((Math.random()*2));
        document.getElementById('drawn').value += res;
        p.w+=sixty - res*sixty*2;
        p.setPos(p.x + Math.sin(p.w)* steps, p.y + Math.cos(p.w)* steps);
        ctx.lineTo(p.x, p.y);
        ctx.closePath();
        ctx.stroke();
    }
    circle(p.x,p.y,1,'#f00');

}
</script>
</body>
</html>