D3 Examples - Random trees without RNGs

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {display:block; margin: 20px auto; border: 2px solid #4892c6; max-width: 100%; box-sizing: border-box; }
  </style>
</head>
<body>
<script>(function() {
  'use strict';
​
  var _options = {
    // Everything above -3 is boring
    cellIndex: -41,
    // Range: -3 to 3
    edgeIndex: -2,
    // Cells per axis
    width: 160,
    height: 80,
    // Render scale in px
    scale: 6,
    // Rate of depth color change
    depthScale: .03,
    // Iteration delay
    delay: 10,
    renderInterval: 25,
​
    drawDepth: true,
    drawLines: true
  };
​
  var _stack = [];
  var _points = new Map();
​
  var _live = document.createElement('canvas').getContext('2d');
  _live.canvas.width  = _options.width * _options.scale;
  _live.canvas.height = _options.height * _options.scale;
  document.body.appendChild(_live.canvas);
​
  var _offscreen = _live.canvas.cloneNode().getContext('2d');
  _offscreen.lineWidth   = _options.scale * .2;
  _offscreen.lineCap     = 'round';
  _offscreen.strokeStyle = '#000';
​
  var root = addPoint([~~(_options.width / 2), ~~(_options.height / 2)]);
  renderPoint(_offscreen, root);
  play();
​
  function play() {
    var i = _options.renderInterval;
    while(_stack.length) {
      var point = iterate();
      if(point) {
        renderPoint(_offscreen, point);
        if(--i <= 0 && _options.delay >= 0) {
          setTimeout(play, _options.delay);
          publish();
          return;
        }
      }
    }
    publish();
​
  }
​
  function iterate() {
    var added;
    var cell = removeIndex(_stack, _options.cellIndex);
    var edges = mask(cell)
      .filter(isInBounds)
      .filter(isAvailable);
    var edge = removeIndex(edges, _options.edgeIndex);
    if(edge) {
      added = addPoint(edge, cell);
      if(edges.length) {
        _stack.push(cell);
      }
    }
​
    return added;
  }
​
  // Registers and initializes the given point and adds it to the stack.
  function addPoint(point, parent) {
    var o = getOffset(point);
    var p = point.slice();
    p.parent = parent || null;
    p.depth = parent ? parent.depth + 1 : 0;
​
    _points.set(o, p);
    _stack.push(p);
    return p;
  }
​
  // Returns a string ID for a point.
  function getOffset(point) {
    return point.join(',');
  }
​
  // Checks if a point is inside the extent.
  function isInBounds(point) {
    return point[0] >= 0 && point[0] < _options.width
      && point[1] >= 0 && point[1] < _options.height;
  }
​
  // Checks if a point's offset is not yet blocked.
  function isAvailable(point) {
    return !_points.has(getOffset(point));
  }
​
  // Normalizes an index and extracts the element at the resulting index.
  function removeIndex(arr, index) {
    if(!arr.length) {
      return null;
    }
    var i = index < 0
      ? Math.max(0, arr.length + index)
      : Math.min(arr.length - 1, index);
    return arr.splice(i, 1)[0];
  }
​
  // Produces edge coordinates for a point.
  function mask(point) {
    var mask = [
      [ 1,  0],
      [ 0,  1],
      [-1,  0],
      [ 0, -1]
    ];
​
    var i = mask.length;
    while(i--) {
      mask[i][0] += point[0];
      mask[i][1] += point[1];
    }
​
    return mask;
  }
​
  function renderPoint(ctx, point) {
    var s = _options.scale, sh = s / 2;
    var x = point[0] * s;
    var y = point[1] * s;
​
    if(_options.drawDepth) {
      var level = ~~(70 + 185 * Math.abs(Math.cos(point.depth * _options.depthScale)));
      ctx.fillStyle = 'rgb(' + level + ',' + level + ',' + level + ')';
      ctx.fillRect(x, y, s, s);
    }
​
    if(_options.drawLines && point.parent) {
      ctx.beginPath();
      ctx.moveTo(point.parent[0] * s + sh, point.parent[1] * s + sh);
      ctx.lineTo(x + sh, y + sh);
      ctx.stroke();
    }
  }
​
  function publish() {
    _live.clearRect(0, 0, _live.canvas.width, _live.canvas.height);
    _live.drawImage(_offscreen.canvas, 0, 0);
  }
​
}());</script>
</body>
</html>
    