-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (135 loc) · 7.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="libraries/css/bootstrap.min.css">
<!-- <script src="libraries/js/bootstrap.min.js"></script> -->
<!-- <script src="libraries/js/jquery.min.js"></script> -->
<script src="libraries/js/p5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8" />
<title>Lindenmayer-System</title>
</head>
<body>
<div class="container-fluid fill">
<div class="row header">
<h1 id="title">Lindenmayer Systems</h1>
</div>
<div class="row main">
<div class="col-md-5">
<p class="text-justify">Originally developed by Aristid Lindenmayer in 1968, an L-System is a formalism
to generate self-similar structures. Although, L-Systems are capable of generating famous fractals
like the Sierpinski Triangle (Axiom: FXF--FF--FF, F →<i> FF</i>, X →<i>
--FXF++FXF++FXF--</i>, angle = <i>60</i>) or the
Gosper Curve (Axiom: FX, X → <i>FX-FY--FY+FX++FXFX+FY-</i>, Y
→<i>
+FX-FYFY--FY-FX++FX+FY</i>, angle = <i>60</i>),
first and
foremost, they were developed to model the growth of plants.
<br>
The algorithm itself is pretty simple: The model is represented by a string, in which the axiom
represents the initial state of the model. On each iteration, every character of the current string
(initially, this is the axiom), is replaced by a string of characters that is defined by the
according reproduction rules. E.g. Axiom: F, F-Reproduction: F → <i>FX</i>,
X-Reproduction: X → <i>F</i>- leads
to the following series of strings: <i>F, FX, FXF-, FXF-FX-, FXF-FX-FXF--, … </i>.
<br>
The visualization is generated by interpreting the current string as a turtle-graphic. "F"
means:
Move forward by a constant length and draw a line; "f" means: Move forward by the same
constant
length and don't draw a line; "+" means: Turn right by a given angle, "-" means:
Turn
left by the
same angle. The symbol "[" stores the current position and angle, whereas the symbol
"]" restores the
last position and angle, i.e. jumps back to the last "[". Every other character is simply
ignored.
For a deep dive in L-Systems turn to <a class=href
href="http://algorithmicbotany.org/papers/abop/abop.pdf">The
Algorithmic Beauty of Plants</a>
by
Przemysław Prusinkiewicz and Aristid Lindenmayer.
<br>
In the visualization to the right, blue represents the current axiom, while dark-grey foreshadows
the first iteration. The visualization dynamically adapts to the current axiom, reproductions and
angle.
</p>
<div id="controls">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Axiom</span>
</div>
<input id="axiom" type="text" class="form-control" value="F">
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text">F-Reproduction</span>
</div>
<input id="F" type="text" class="form-control" value="F[-F]F[+F][F]">
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text">f-Reproduction</span>
</div>
<input id="f" type="text" class="form-control" value="">
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text">X-Reproduction</span>
</div>
<input id="X" type="text" class="form-control" value="">
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Y-Reproduction</span>
</div>
<input id="Y" type="text" class="form-control" value="">
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Variables</span>
</div>
<input id="variables" type="text" class="form-control" value=""
placeholder="Enter further variables as JSON, e.g. {"Z": "FZ"}">
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Angle</span>
</div>
<input id="angle" type="number" class="form-control" value="30">
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Iterations</span>
</div>
<input id="derivation-counter" type="number" class="form-control" value=0 disabled>
</div>
<div id=buttons>
<button id="reset" type="button" class="btn btn-primary">Reset</button>
<button id="derivate" type="button" class="btn btn-primary">Iterate</button>
<button id="download-svg" type="button" class="btn btn-primary">Download</button>
</div>
</div>
</div>
<div class="col-md-7">
<div id=p5></div>
</div>
</div>
<div class="row footer">
<p class="footer-text">
<b>Lindenmayer Systems</b><br>
<a href="https://github.com/rue-a/L-Systems">source code</a>, <a
href="https://github.com/rue-a/L-Systems/blob/master/LICENSE">license</a>, <a
href="https://www.paypal.com/donate/?hosted_button_id=WGQEMQLK6PRQ8">donate</a>
</p>
</div>
</div>
<script src="js/sketch.js"></script>
<script src="js/Curve.js"></script>
<script src="js/Layer.js"></script>
<script src="js/State.js"></script>
<script src="js/Polyline.js"></script>
<script src="js/BoundingBox.js"></script>
<script src="js/Point.js"></script>
</body>
</html>