Skip to content

gerizim16/3d-l-system-generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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}
drawing
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

License