Branched Random Walk

forked from mbostock's block: Branched Random Walk

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height,
    color = d3.scaleSequential(d3.interpolateRainbow).domain([0, 1000]),
    randomX = d3.randomNormal(0.3),
    randomY = d3.randomNormal(0);

render();

canvas.onclick = render;

function render() {
  var x0 = width / 20,
      y0 = height / 2,
      mainWalk = randomWalk(x0, y0, 1000);

context.clearRect(0, 0, width, height);
  context.lineJoin = "round";
  context.lineCap = "round";
  context.lineWidth = 1.5;
  context.strokeStyle = "black";
  renderWalk(mainWalk);

context.globalCompositeOperation = "multiply";
  context.lineWidth = 1;
  for (var i = 0; i < mainWalk.length; i += 2) {
    var branchStart = mainWalk[i],
        x0 = branchStart[0],
        y0 = branchStart[1];
    for (var j = 0; j < 1; ++j) {
      context.strokeStyle = color(i + (Math.random() - 0.5) * 50);
      var x1 = x0, y1 = y0;
      for (var k = 0, m = 20; k < m; ++k) {
        context.globalAlpha = (m - k - 1) / m;
        var pieceWalk = randomWalk(x1, y1, 10),
            pieceEnd = pieceWalk[pieceWalk.length - 1];
        renderWalk(pieceWalk);
        x1 = pieceEnd[0];
        y1 = pieceEnd[1];
      }
      context.globalAlpha = 1;
    }
  }
}

function renderWalk(walk) {
  var i, n = walk.length;
  context.beginPath();
  context.moveTo(walk[0][0], walk[0][1]);
  for (i = 1; i < n; ++i) {
    context.lineTo(walk[i][0], walk[i][1]);
  }
  context.stroke();
}

function randomWalk(x0, y0, n) {
  var points = new Array(n), i;
  points[0] = [x0, y0];
  for (i = 1; i < n; ++i) {
    points[i] = [
      x0 += randomX() * 2,
      y0 += randomY() * 2
    ];
  }
  return points;
}

</script>

https://d3js.org/d3.v4.min.js