L-system generator and visualiser web app

A web application for generating and visualising L-systems, made using React.

Try it out on GitHub Pages

Table of contents

• About L-systems
  • Example of an L-system
• App description
• Usage
  • Instructions
  • GitHub Pages deployment
  • Run locally
• Dependencies

About L-systems

Lindenmayer systems, also known as L-systems, are a type of formal grammar consisting of: an alphabet that is used to make strings, production rules expanding symbols from strings into larger strings, an initial string called an "axiom" and a mechanism for translating the generated strings into geometric structures. The name of these systems comes from the name of a Hungarian theoretical biologist and botanist Aristid Lindenmayer, who developed them in 1968.

The rules of the L-system grammar are applied iteratively starting from the initial state. They are applied simultaneously, per iteration. The recursive nature of this process leads to self-similarity and thus allows for easy definition of many fractal-like forms. The individual symbols in a resultative string are interpreted as directives for graphical representation. In this app, a single character is an action to take while drawing the form on a <canvas> element.

You can find a very detailed explanation with great examples on Paul Bourke's website. Every recipe implemented in the app is taken from the examples on this website.

Example of an L-system

Symbol meaning (specific for this example):

• F: move forward and draw
• -: rotate left by angle
• +: rotate right by angle

Initial string (axiom): F-F-F-F

Rewrite rule: F -> F-F+F+FF-F-F+F

Angle: 90°

Result:

App description

The visualiser allows for definition of an axiom and multiple rules. You can control how each character is processed for drawing, by choosing which action is triggered by which token.

I'm keeping track of planned features and things worth keeping in mind on my Trello board. It's being occasionally updated, when I come up with something I want to do later. I try to keep it tidy and free of any inconsistencies, but it's not my priority to have it perfectly organised.

Usage

Instructions

Start by inputting the axiom and then enter the processing rules. The predecessor (the character being expanded to its successor) in every rule must consist of a single character. Finally adjust any additional parameters if using any of the tokens needing them (rotation, length multiplication/addition, etc.) and confirm the rules. You can cycle through different iterations using the arrow keys on your keyboard or the controls on the bottom-right side of the screen.

GitHub Pages deployment

The app is deployed on GitHub Pages and can be used there. You can try it out here! Keep in mind, that I'm deploying the website manually, and it could be a couple of commits behind. That won't be the case most of the time, as I try to always deploy it after finishing developing features and reaching other milestones.

Run locally

Alternatively, you could clone the repository and run npm install and npm run start to run the application.

Dependencies

 "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-modal": "^3.16.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },