Animated L-System Limu Forest

/*

variables : F

constants : + − [ ]

start  : F

rules  : (F -> FF-[-F+F+F]+[+F-F-F])

angle  : 22.5°

​

F means "draw forward", − means "turn right by 'angle'", and + means "turn left

by 'angle". The square bracket "[" corresponds to saving the current values for

position and angle, which are restored when the corresponding "]" is executed.

*/

​

const angle = 22.5;

const initialState = "F";

const rules = {

  "F": "^TFFL,-[^^-F,*F,+F]+[^^+F,*F,-F]"

};

​

const initialLength = 85;

const segmentLengthModifier = 0.5;

// Stop iterating the rules once the instruction list exceed this limit.

const maximumStateLength = 10000;

​

let system1 = initialState;

let system2 = initialState;

let system3 = initialState;

let segmentLength = initialLength;

let seed;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

  stroke(0, 255, 0, 100);

  strokeWeight(3);

  angleMode(DEGREES);

  // This one should be truly random, from here on out everyhing is pseudo random

  seed = random(0, 10000);

  // noLoop();

  for (let i = 0; i < 3; i++) {

    system1 = iterateLSystem(system1);

    system2 = iterateLSystem(system2);

    system3 = iterateLSystem(system3);

    segmentLength *= segmentLengthModifier;

  }

}

​

function draw() {

  background(0);

  let i = 0;

  translate(width * 0.25, height - 30);

  for (let sys of [system1, system2, system3]) {

    push();

    translate(i * width * 0.25, 0);

    rotate(-90);

    randomSeed(seed + i * 100);

    drawLSystem(sys, i);

    pop();

    i++;

  }

}

​

function iterateLSystem(system) {

  let newState = "";

  for (let i = 0; i < system.length; i++) {

    const replacement = rules[system[i]];

    if (replacement !== undefined) {

      newState += replacement;

    } else {

      newState += system[i];

    }

  }

  return newState;

}

​

function drawLSystem(system, noiseOffset) {

  // each time we draw, use the same random seed

  for (let i = 0; i < system.length; i++) {

    // Run the instruction

    rotate((noise(i / 10, millis() / 10000, noiseOffset) - 0.5) * 5);

    executeInstruction(system[i]);

  }

}

​

function executeInstruction(instruction) {

  switch (instruction) {

    case "F":

      line(0, 0, segmentLength, 0);

      translate(segmentLength, 0);

      break;

    case "^":

      {

        let r = red(_renderer._getStroke());

        stroke(min(255, r + 100), 255, 0, 100);

      }

      break;

    case ",":

      {

        let r = red(_renderer._getStroke());

        stroke(max(0, r - 100), 255, 0, 100);

      }

      break;

    case "T":

      scale(1.2);

      strokeWeight(_renderer.drawingContext.lineWidth * 1.2);

      break;

    case "L":

      scale(1 / 1.22);

      strokeWeight(_renderer.drawingContext.lineWidth / 1.22);

      break;

    case "+":

      rotate(angle);

      break;

    case "-":

      rotate(-angle);

      break;

    case "*":

      rotate((random([true, false]) ? -angle : angle) / 2);

      break;

    case "[":

      push();

      break;

    case "]":

      pop();

      break;

    default:

      console.log('Unsupported instruction: ' + instruction);

      break;

  }

}

​