tree-color.html

<!--
 * Copyright 2013, Gregg Tavares.
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 *     * Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *     * Neither the name of Gregg Tavares. nor the names of his
 * contributors may be used to endorse or promote products derived from
 * this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body, html {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}
#canvas {
    width: 100%;
    height: 100%;
}
#content {
    width: 100%;
    height: 100%;
}

#content>table {
    width: 100%;
    height: 100%;
}
#content>table>tbody>tr>td {
    border: 1px solid black;
    width: 50%;
    height: 100%;
}
#editor {
    width: 100%;
    height: 100%;
}
</style>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/webgl-utils.js"></script>
<script id="code" type="something-not-javascript">
//
var lerp = function(a, b, l) {
  return a + (b - a) * l;
};

var lerpVector = function(a, b, l) {
  var dest = [];
  for (var ii = 0; ii < a.length; ++ii) {
    dest.push(lerp(a[ii], b[ii], l));
  }
  return dest;
};

var colorRamp = function(ramp, l) {
  // compute place in ramp;
  l = Math.min(0.999999, l);
  var pos = (ramp.length - 1) * l;
  var start = Math.min(Math.floor(pos), ramp.length - 1);
  var lerp = pos % 1;
  //console.log("l: " + l + ", start: " + start + ", lerp: " + lerp);
  var result = lerpVector(ramp[start], ramp[start + 1], lerp);
  //console.log(result);
  return result;
};

var makeColor = function(color) {
  return "rgb(" + Math.floor(color[0]) + "," + Math.floor(color[1]) + "," + Math.floor(color[2]) + ")";
};

Tree = (function(undefined, window){
  var randInt = function(range) {
    return Math.floor(Math.random() * range);
  };

  var drawBranch = function(ctx, options, depth) {
    for (var ii = 0; ii < options.numBranches; ++ii) {
      var lerp = ii / (options.numBranches - 1);
      var branchLerp = lerp * 2 - 1;
      var colorLerp = depth / options.maxDepth;
      var color = colorRamp(options.colorRamp, colorLerp);
      ctx.strokeStyle = makeColor(color);
      ctx.lineWidth = options.maxDepth - depth + 1;
      ctx.save();
      var r = options.branchRotate * branchLerp;
      ctx.rotate(r);
      ctx.beginPath()
      ctx.moveTo(0, 0);
      var len = options.branchLength / Math.pow(options.lengthFudge, depth);
      ctx.lineTo(0, len);
      ctx.stroke();
      if (depth < options.maxDepth) {
        ctx.translate(0, len);
        drawBranch(ctx, options, depth + 1)
      }
      ctx.restore();
    }
  };

  var drawTree = function(ctx, options) {
    drawBranch(ctx, options, 0);
  };

  return {
    draw: drawTree,

    dummy: undefined,
  };
}());

var draw = function(ctx) {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.strokeStyle = "black";
  ctx.save();
  ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
//    ctx.translate(ctx.canvas.width / 2, 0);

  Tree.draw(ctx, {
    maxDepth: 4,
    numBranches: 5,
    branchLength: 128,
    lengthFudge: 1.3,
    branchRotate: (Math.PI * 0.3),
//    colorRamp: [
//      [180, 80,   0],
//      [0, 200,   0],
//    ],
    colorRamp: [
      [255,   0,   0],
      [255, 255,   0],
      [  0, 255,   0],
      [  0, 255, 255],
      [  0,   0, 255],
      [255,   0, 255],
    ],
  });

  ctx.restore();
};

draw(ctx);
</script>
<script>
function main() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  var source = document.getElementById("code").text;
  var editor = document.getElementById("editor");
  var func = function() {};
  editor.value = source;

  var resizeCanvas = function() {
    if (canvas.width != canvas.clientWidth ||
        canvas.heigt != canvas.clientHeight) {
      canvas.width = canvas.clientWidth;
      canvas.height = canvas.clientHeight;
    }
    func(ctx);
  };

  var temp;
  var onSourceChange = function() {
    source = editor.value;
    var success = true;
    var e;
    var temp;
    try {
      var t = "temp = {fn: function() { return function(ctx) {" + source + "}; }()}";
      var f = eval(t).fn;
      f(ctx);
    } catch (e) {
      console.log(e);
      success = false
    }

    if (success) {
      func = f;
    }
  };

  $(window).resize(resizeCanvas);
  editor.addEventListener('keyup', function(event) {
    if (event.keyCode == 37 ||
        event.keyCode == 38 ||
        event.keyCode == 39 ||
        event.keyCode == 40) {
      return;
    }
    onSourceChange();
  });

  resizeCanvas();
  onSourceChange();
}

$(function(){
  main();
});

</script>
</head>
<body>
<div id="content">
  <table>
    <tr>
      <td>
        <textarea id="editor"></textarea>
      </td>
      <td>
        <canvas id="canvas"></canvas>
      </td>
  </table>
</div>
</body>
</html>