L-systems, part 1

HTML

<ol id="log"></ol>

JavaScript

function log(message) {
  const logElement = document.getElementById('log');
  const textNode = document.createTextNode(message);
  const listElement = document.createElement('li');
  listElement.append(textNode);
  logElement.append(listElement);
}

const tree = {
  axiom: 'X',
  rules: {
    X: 'F[-X][X]F[-X]+FX',
    F: 'FF',
  },
}

function applyRule(rules, char) {
  return rules[char] || char;
}

function renderAGeneration(system, previousGeneration) {
  let nextGeneration = '';
  for (const character of previousGeneration) {
    nextGeneration += applyRule(system.rules, character);
  }
  return nextGeneration;
}

numIters = 4;
system = tree;

let systemState = system.axiom;
log(systemState);
for (let i = 1; i < numIters; i++) {
  systemState = renderAGeneration(system, systemState);
  log(systemState);
}