1. L-system and SVG
2D SVG Tree
2002/10/16

2. Outline Fractal L-system 2D SVG tree 3D SVG Demo 2D SVG tree
Conclusion

3. Fractal
Lewis Fry Richardson
Geometry fractal
Koch curve

4. L-system Lindenmayer system (L-system)
First proposed by A. Lindenmayer for simulating cellular developments.
A string-writing system.
Incorporating with turtle graphics to model plants and plant organs.

5. L-system (Cont.) L-system concept
Using Turtle graphics with some letters are given visual or geometric meanings
F : Move forward a step and draw a line along the trail.
+ : Turn left (counterclockwise) by a default positive angle.
- : Turn right (clockwise) by a default positive angle.
[ : Push current state (position & orientation) into a stack.
] : Pop and restore previous saved state from the stack top.

6. L-system (Cont.) Example r = 0, result string = F
F=F[+F][-F]F
r = 0, result string = F
r = 1, result string = F[+F][-F]F
r = 2, result string = F[+F][-F]F [+F[+F][-F]F ][- F[+F][-F]F ] F[+F][-F]F

7. L-system (Cont.) Example F=F[+F][-F]F F ‧ ‧ ‧ ‧ r＝0 r＝3 r＝2 r＝1

8. L-system (Cont.) L-system File Basic Structure:
Line 1: Repetition Count.
Line 2: Default branching angle.
Line 3: Seed.
Line 4: Default Rule.
Line 5: End.

9. L-system (Cont.) L-system File Structure: result string =
Line 1: 2
Line 2: 30
Line 3: F
Line 4 (Rule): F=F[+F][-F]F
Line
result string =
F[+F][-F]F [+F[+F][-F]F ]
[- F[+F][-F]F ] F[+F][-F] F

10. 2D SVG tree Show the tree (use SVG) Input parameter: Level Angle Width
Rule: F=F[+F][-F]F

11. 2D SVG tree Algorithm 1. w=w/2，h=1000，m=4^n 2. B [m][3]
3.      B[0][0]=600，B [0][1]=-300，B [0][2]= 0
4.      for k=1,…,n
5.      h=h/2
6.      for i=0,…,4^(k-1)
B[i][0]=B[i][0]-h sinB[i][2]
B[i][1]=B[i][1]+h cosB[i][2]
B[i][2]=B[i][2]
B[i][2]a //rotate angle
for j=0,1,2
B [4^(k-1)+3×i+j][0]=B[i][0]+h sin(B[i][2]+ j-1)
B [4^(k-1)+3×i+j][1]=B[i][1]-h cos(B[i][2]+ j-1)
B [4^(k-1)+3×i+j][2]=B[i][2]+ (j-1)

12. 3D SVG Javascript platform Author : William Ueng 翁維瓏 中央研究院
Capability :
simulate 3D SVG environment
Point
Line
rotate the object

13. Demo 2D SVG tree Demo(tree) Demo(solid) 2D tree in 3D SVG environment
Cube
Pyramid
Hexagonal-Prism

14. 3D SVG (Cont.) Javascript platform Capability :
to simulate 3D SVG environment
Point
Line
rotate the object
integrate tree Algorithm and 3D environment
integrate solid and 3D environment
provide interaction
Tree: Level, Angle, Width …….
Solid: color, height, width, coordinate …….

15. Conclusion improvement : Hidden Surface Removal Change view image
Object builder