3D L-system generator

Visit the app here.

The language: Stochastic, Parametric, Context-free, L-System.

Syntax

Symbols

Symbols may have parameters. They are of the format:

symbol{param1, param2, ...}

Parameters are separted by commas. Parameters are optional, thus, the following is also valid:

symbol

Symbols may either be:

Special symbols (commands): uses lowercase characters. These symbols are used to control the turtle. Examples are: +x, l, -z.
Non-special symbols (variables): uses uppercase characters. Examples are: A, BRANCH, X.

Commands

Symbol	Parameters	Description
`m{color, roughness, metalness, flatShading, fog, wireframe, transparent, opacity, side}`	`color`=`0xffffff` : color in hex `roughness`=`0.1` : `[0, 1]` `metalness`=`0.1` : `[0, 1]` `flatShading`=`false` : `true` or `false` `fog`=`true` : influence material with fog `wireframe`=`false` : render as wireframe `transparent`=`false` : enable transparency `opacity`=`1` : opacity when transparency is enabled `side`=`0` : `0`=render front side, `1`=render back side, `2`=render both sides	Set current turtle material.
`f{len}`	`len`=`defaults.length` : length	Move the turtle forward `len` units.
`l{len, startR, endR}`	`len`=`defaults.length` : length `startR`=`turtle.radius` : starting radius `endR`=`turtle.radius` : ending radius	Draw a cylinder of `len` units and move forward `len` units starting with a radius of `startR` and ending with `endR`.
`r{rad}`	`rad`=`defaults.radius` : radius	Set the radius of the turtle to `rad`.
`s`		Begin drawing a curve.
`e`		End the curve, draw the finished curve.
`t{ten}`	`ten`=`0.5` : tension	Set the tension of the curve. `[0, 1]`
`+x{angle}`	`angle`=`defaults.angle` : angle in degrees	Pitch control. Increase pitch by `angle` degrees.
`-x{angle}`	`angle`=`defaults.angle` : angle in degrees	Pitch control. Decrease pitch by `angle` degrees.
`+y{angle}`	`angle`=`defaults.angle` : angle in degrees	Yaw control. Increase yaw by `angle` degrees.
`-y{angle}`	`angle`=`defaults.angle` : angle in degrees	Yaw control. Decrease yaw by `angle` degrees.
`-z{angle}`	`angle`=`defaults.angle` : angle in degrees	Roll control. Increase roll by `angle` degrees.
`-z{angle}`	`angle`=`defaults.angle` : angle in degrees	Roll control. Decrease roll by `angle` degrees.
`[`		Push state to stack. State includes turtle position, material, tension, radius
`]`		Pop state from stack and set it to current state.
`sphere{r, widthSeg, heightSeg, phi, phiLen, theta, thetaLen}`	`r`=`defaults.size/2` : radius `widthSegments`=`12` : number of horizontal segments `[3, inf)` `heightSegments`=`6` : number of vertical segments `[2, inf)` `phiStart`=`0` : horizontal starting angle `phiLength`=`2*pi` : horizontal sweep angle size `thetaStart`=`0` : vertical starting angle `thetaLength`=`pi` : vertical sweep angle size	Draws a sphere centered at the turtle's position. May be used to draw "leaves": `m{0x50C878, 0.7, 0, false, true, false, true, 0.8, 2} sphere{random()/7+0.1, 12, 6, 0, pi/2, 0, pi}`
`box{w, h, d}`	`w`=`defaults.size` : width `h`=`defaults.size` : height `d`=`defaults.size` : depth	Draws a box centered at the turtle's position and aligned with the turtle's axes.
`cube{s}`	`s`=`defaults.size` : side length	Draws a cube centered at the turtle's position and aligned with the turtle's axes.
`cone{r, h, radialSeg}`	`r`=`defaults.size/2` : base radius `h`=`defaults.size` : height `radialSeg`=`8` : number of segmented faces around the circumference of the cone	Draws a cone centered at the turtle's position and aligned with the turtle's axes. Can be used to draw pyramids such as a square base pyramid: `cone{r, h, 4}`.

Axiom

Axiom is a list of symbols separated by whitespace character(s). It is of the format:

symbol1{param1_1, param1_2, ...} symbol2 ...

Parameters of symbols in an axiom must evaluate to a constant. Some valid constant parameters are:

symbol{sin(pi/2)}   // 1
symbol{sin(30 deg)} // 0.5
symbol{pi}          // 3.1415926535898
symbol{1.2}         // 1.2
symbol{log(e)}      // 1
symbol{true}        // true
symbol{false}       // false
symbol{random()}

Parameters are evaluated using math.js. More functions can be found here.

Production rules

Production rules are of the format:

symbol{var1, var2, ...} -> new_symbol1{param1, param2, ...} new_symbol2 new_symbol3 ...

Parameters of the symbol on the left hand side must be variables. For clarity, an example is the following:

symbol{a, b, c} -> new_symbol1{a + 1} new_symbol2{2 * b, c}

All parameters are optional. Thus, the following is also valid:

symbol -> new_symbol1 ...

Special symbols may be used in the left hand side in production rules. Thus, the following is valid:

+x -> +x l

Simple examples

Simple

iterations: 2
axiom: X
production rules:
X -> +x l X

result:
+x l +x l X

Special symbol replacement

iterations: 2
axiom: l
production rules:
l -> +x l

result:
+x +x l

Stochastic

iterations: 2
axiom: START
production rules:
START -> A START
START -> B START

possible results:
A A START
A B START
B A START
B B START

Parametrized

iterations: 1
axiom: l{1}
production rules:
l{x} -> l{sin(x deg)} +x{x} l{2 * x}

result:
l{0.017452406437284} +x{1} l{2}

Examples

Plant

iterations: 4
axiom: m{0x594d30, 0.9, 0} A{0.2}
production rules:
A{r} -> l{0.2, r, r} +x +y +z [ [ A{r/2} ] -x A{r/2} ] -x -y -z l{0.2, r, r} [ -x l{0.2, r, r/2} A{r/2} m{0xf695c3, 0.7, 0} sphere ] +x A{r/2}
l{a, b, c} -> l{a*2.5, b, c}
l{a, b, c} -> l{a*2, b, c}
sphere -> sphere{random()/7+0.1}

Hilbert

iterations: 3
axiom: t{0.5} s X e
production rules:
X -> +x -z X f +x -z X f X +y f +x +z +z X f X -x f -y +z +z X f X +y f +z X +y +z

Sierpinski

iterations: 3
axiom: m{0xffffff, 0.9, 0.9, true} f{8/2} cone{8, 8, 3}
production rules:
cone{s, s} -> f{s/4} cone{s/2, s/2, 3} f{-s/2} [ +x{90} f{s*sin(pi/6)} -x{90} cone{s/2, s/2, 3} ] [ +z{120} +x{90} f{s*sin(pi/6)} -x{90} cone{s/2, s/2, 3} ] [ -z{120} +x{90} f{s*sin(pi/6)} -x{90} cone{s/2, s/2, 3} ] f{s/4}

Plant 2

iterations: 5
axiom: s m{0x228B22} t{0.3} f X e
production rules:
X -> f{1} X [ -x +z{183} +y{10} f{1} X ] [ +x +z{16} +y{5} f{1} X ]

Palm Tree

iterations: 8
axiom: J m{0x00FF00} K K K K K K K K K K K K K K K K K K K K
production rules:
J -> J m{0x964B00} -y cone s f e
K -> -z{30} [ -y{32} L A ]
L -> L -y{4}
A -> s f e [ -x{24} B ] -y{16} [ A ] [ +x{24} B ]
B -> s f e -y{16} B
cone -> m{0x964B00} cone{random()/7+0.3}

Tree

iterations: 9
axiom: A B m{0x8B4513} sphere
production rules:
A -> s f f e
B -> r{0.08} C I +z{60} B
C -> C s f e
E -> -y{4} E
I -> r{0.04} J J J J J J J J
J -> +z{60} [ -y{48} E G ]
G -> r{0.08} C F [ -x{30} m{0x50C878} D sphere ] +y +y [ -x{30} m{0x50C878} D sphere ] G
D -> F [ -x{30} ] +y [ +x{30} ] D
cone -> m{0x50C878} cone{random()/5+0.1}
sphere -> m{0x50C878, 0.7, 0, false, true, false, true, 0.8, 2} sphere{random()/7+1, 12, 6, 0, pi/2, 0, pi}

Cartoon Tree

iterations: 9
axiom: A B m{0x8B4513} sphere
production rules:
A -> s f e
B -> r{0.4} C I +z{60} B
C -> C s f e
E -> -y{4} E
I -> r{0.4} J J J J J J J J
J -> +z{60} [ -y{12} E G ]
G -> r{0.08} C F [ -x{30} m{0x50C878} D cube ] +y +y [ -x{30} m{0x50C878} D cube ] G
D -> F [ -x{30} ] +y [ +x{30} ] D
sphere -> m{0x50C878} sphere{0.5}
cube -> m{0x50C878} cube{1}

Flower

iterations: 5
axiom: m{0x00FF00} J m{0xFF0000} K K K K K K K KK K K K K K K K K K K K
production rules:
J -> J -y s f f f e m{0x00FF00}
K -> -z{30} [ -y{32} L A ]
L -> L -y{4}
A -> s f e [ -x{24} B ] -y{16} [ A ] [ +x{24} B ]
B -> s f e -y{16} B

Heighway Dragon (2D)

iterations: 5
axiom: s t{0.7} f X e
production rules:
X -> X +x Y f +x
Y -> -x f X -x Y

Pentaplexity (2D)

iterations: 3
axiom: s m{0x66cdaa} f +x +x f +x +x f +x +x f +x +x f e
production rules:
f -> s f +x +x f +x +x f +x{180} f -x f +x +x f e

Pattern (2D)

iterations: 4
axiom: s f e
production rules:
f -> f +x f -x f -x f +x f

Contributions

	ABDAO, Regina	VILLARANTE, Gerizim
Conceptualization	Proposed 2D L-Systems	Proposed 3D L-systems
Code	Environments: Desert, Dark Pink Help Menu	Initialized project and libraries to use Language parser Turtle commands Environments: Sunset, Dark Neon, Nature, Sky
Examples created	Plant 2 Palm Tree Tree Cartoon Tree Flower 2D Examples	Plant Hilbert curve Sierpinski pyramid
Documentation	Helped and finalized overall documentation	Helped in overall documentation

References and Inspiration

Developer

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Push Compiled Production Build

git subtree push --prefix dist origin gh-pages

gerizim16 / 3d-l-system-generator