lsystem.js

// wait for page to load completely
window.onload = function() {
  var ls = require('./lsystem.js');

  var wonk = ls.soundoff("wonk!");

  // Set up the algae demo
  var aIter = document.getElementById("algae-iterations"),
      aOut = document.getElementById("algae-output");
  aOut.value = ls.algae(0);
  aIter.onchange = function() {
    aOut.value = ls.algae(aIter.value);
  }

  // Set up the Pathagoras Tree demo
  var bIter = document.getElementById("tree-iterations"),
      bOut = document.getElementById("tree-output"),
      bCanvas = document.getElementById("tree-canvas"),
      bCtx = bCanvas.getContext("2d");
  bOut.value = ls.pythagorasTree(0);
  ls.render(380, 480, bCtx);
  bIter.onchange = function() {
    bOut.value = ls.pythagorasTree(bIter.value).replace(/\([0-9]+\)/g, "");
    bCtx.clearRect(0,0, bCanvas.width, bCanvas.height);
    ls.render(380, 480, bCtx);
  }

  // Set up the Koch Curve demo
  var cIter = document.getElementById("koch-iterations"),
      cOut = document.getElementById("koch-output"),
      cCanvas = document.getElementById("koch-canvas"),
      cCtx = cCanvas.getContext("2d");
  cOut.value = ls.kochCurve(0);
  ls.render(30, 450, cCtx);
  cIter.onchange = function() {
    cOut.value = ls.kochCurve(cIter.value);
    cCtx.clearRect(0, 0, cCanvas.width, cCanvas.height);
    ls.render(30, 450, cCtx);
  }

};