let current

​

let selected

​

let length;

let x, y, a;

let angle;

let scl;

let w, h;

let axiom;

let rules;

let back;

let stk;

let alpha;

let c;

​

let system;

​

function preload() {

  if (typeof(Storage) !== "undefined") {

    let storageSetup = localStorage.getItem("storageSetup")

​

    if (storageSetup === "true") {

      current = localStorage.getItem("current")

      settings = JSON.parse(localStorage.getItem("settings"))

    } else {

      current = "Default Tree"

      settings[current] = {

        back: "#000000",

        stk: "#2AFF29",

        alpha: "0.9",

        w: "650",

        h: "650",

        length: "175",

        x: "325",

        y: "650",

        a: "0",

        scl: "2",

        angle: "25",

        axiom: "F",

        rules: "F : FF+[+F-F-F]-[-F+F+F]",

      }

​

      updateLocalStorage()

      localStorage.setItem("storageSetup", "true")

​

​

    }

    selected = settings[current]

    enableButton("load")

    enableButton("save")

    enableButton("delete")

  } else {

    alert("Your browser does not support Local Storage. Save/Load Functionality will not be available.")

    disableButton("load")

    disableButton("save")

    disableButton("delete")

  }

}

​

function setup() {

  let canvas = createCanvas(100, 100)

  canvas.parent("canvas")

  init()

  updateSettingToDOM()

}

​

function init() {

  back = selected.back

  stk = selected.stk

  alpha = float(selected.alpha)

  c = color(stk)

  c.setAlpha(alpha * 255)

  w = int(selected.w)

  h = int(selected.h)

  resizeCanvas(w, h)

  length = int(selected.length)

  x = int(selected.x)

  y = int(selected.y)

  a = radians(int(selected.a))

  scl = float(selected.scl)

  angle = radians(int(selected.angle))

  axiom = selected.axiom

  rules = parseRules(selected.rules)

  system = new LSystem(axiom, rules)

  background(back)

}

​

function render() {

  background(back)

  stroke(c)

  resetMatrix()

  translate(x, y)

  rotate(a)

  system.show()

  system.next()

}

​

function readFrom(id) {

  return document.getElementById(id).value

}

​

function writeTo(id, value) {

  return document.getElementById(id).value = value

}

​

function parseRules(ruleSet) {

  let newRules = {};

  let inputs = ruleSet.split("\n")

  for (let rule of inputs) {

    let sanitized = rule.replaceAll(" ", "")

    newRules[sanitized.charAt(0)] = sanitized.substring(2)

  }

  return newRules;

}

​

function enableButton(id) {

  document.getElementById(id).className = "btn btn-info col-md-10"

  document.getElementById(id).disabled = false

​

}

​

function disableButton(id) {

  document.getElementById(id).className = "btn btn-secondary col-md-10"

  document.getElementById(id).disabled = true

}

​

function loadSetting() {

  let options = Object.keys(settings).reduce((l, r) => {

    return l + "\n" + r

  })

  let selection = prompt("Enter Name for current settings\n" + options)

  let option = settings[selection]

  if (option) {

    current = selection

    selected = settings[selection]

    init()

    updateLocalStorage()

    updateSettingToDOM()

  } else {

    alert("Invalid Option")

  }

​

}

​

function deleteSetting() {

  let allNames = Object.keys(settings)

  if (allNames.length === 1) {

    alert("Cannot delete only setting")

  } else {

    let options = Object.keys(settings).reduce((l, r) => {

      return l + "\n" + r

    })

    let oldName = prompt("Enter Name for current settings\n" + options)

    if (settings[oldName]) {

      delete settings[oldName]

      if (oldName === current) {

        current = Object.keys(settings)[0]

      }

    } else {

      alert("Invalid Option")

    }

    updateLocalStorage()

  }

}

​

function reset() {

  selected = loadSettingFromDOM()

  init()

}

​

function saveSetting() {

​

  current = prompt("Enter Name for current settings")

  settings[current] = loadSettingFromDOM()

  updateLocalStorage()

​

}

​

function loadSettingFromDOM() {

  return {

    back: readFrom("back"),

    stk: readFrom("stroke"),

    alpha: readFrom("strokeAlpha"),

    w: readFrom("cw"),

    h: readFrom("ch"),

    length: readFrom("length"),

    x: readFrom("x"),

    y: readFrom("y"),

    a: readFrom("a"),

    scl: readFrom("scl"),

    angle: readFrom("angle"),

    axiom: readFrom("axiom"),

    rules: readFrom("rules"),

  }

}

​

function updateSettingToDOM() {

  document.getElementById("back").jscolor.fromString(selected.back)

  let stkPicker = document.getElementById("stroke").jscolor

  stkPicker.fromString(selected.stk)

  stkPicker.channel("A", selected.alpha)

  writeTo("cw", selected.w)

  writeTo("ch", selected.h)

  writeTo("length", selected.length)

  writeTo("x", selected.x)

  writeTo("y", selected.y)

  writeTo("a", selected.a)

  writeTo("scl", selected.scl)

  writeTo("angle", selected.angle)

  writeTo("axiom", selected.axiom)

  writeTo("rules", selected.rules)

}

​

function updateLocalStorage() {

  localStorage.setItem("current", current)

  localStorage.setItem("settings", JSON.stringify(settings))

}