L-system and SVGL-system and SVG

2D SVG Tree2D SVG Tree

2002/10/16

OutlineOutline

FractalFractal L-systemL-system 2D SVG tree2D SVG tree 3D SVG3D SVG Demo 2D SVG treeDemo 2D SVG tree ConclusionConclusion

FractalFractal

Lewis Fry RichardsonLewis Fry Richardson–

Geometry fractalGeometry fractal– Koch curveKoch curve

L-systemL-system

Lindenmayer system (L-system) Lindenmayer system (L-system)

– First proposed by A. Lindenmayer for simulatiFirst proposed by A. Lindenmayer for simulating cellular developments. ng cellular developments.

– A string-writing system. A string-writing system.

– Incorporating with turtle graphics to model plIncorporating with turtle graphics to model plants and plant organs. ants and plant organs.

L-system L-system (Cont.)(Cont.)

L-system conceptL-system concept– Using Turtle graphics with some letters Using Turtle graphics with some letters

are given visual or geometric meaningsare given visual or geometric meanings – F F : Move forward a step and draw a line along the : Move forward a step and draw a line along the

trail. trail. – ++ : Turn left (counterclockwise) by a default positive : Turn left (counterclockwise) by a default positive

angle. angle. – - - : Turn right (clockwise) by a default positive angle. : Turn right (clockwise) by a default positive angle. – [ [ : Push current state (position & orientation) into a : Push current state (position & orientation) into a

stack. stack. – ]] : Pop and restore previous saved state from the : Pop and restore previous saved state from the

stack top.stack top.

L-system L-system (Cont.)(Cont.)

ExampleExample– F=F[+F][-F]FF=F[+F][-F]F

– r = r = 00, result string = F, result string = F– r = r = 11, result string = F[+F][-F]F , result string = F[+F][-F]F – r = r = 22, result string = , result string =

F[+F][-F]FF[+F][-F]F [+ [+F[+F][-F]FF[+F][-F]F ][- ][- F[+F][-F]FF[+F][-F]F ] ] F[+F][-F]FF[+F][-F]F

L-system L-system (Cont.)(Cont.)

ExampleExample– F=F[+F][-F]FF=F[+F][-F]F

F F=F[+F][-F]FF=F[+F][-F]F F[+F][-F]F F[+F][-F]F

[+F[+F][-F]F ][+F[+F][-F]F ]

[- F[+F][-F]F ] [- F[+F][-F]F ]

F[+F][-F] FF[+F][-F] F

‧ ‧ ‧ ‧

r＝

0

r＝

3

r＝

2

r＝

1

L-system File Basic Structure:

– Line 1: Repetition Count.– Line 2: Default branching angle. – Line 3: Seed.– Line 4: Default Rule.– Line 5: End.

L-system (Cont.)L-system (Cont.)

L-system (Cont.)L-system (Cont.)

L-system File Structure:– Line 1: 2– Line 2: 30– Line 3: F– Line 4 (Rule): F=F[+F][-F]FF=F[+F][-F]F– Line 5:@

result string = result string = F[+F][-F]F F[+F][-F]F [+[+F[+F][-F]F F[+F][-F]F ]] [-[- F[+F][-F]F F[+F][-F]F ] ] F[+F][-F] F F[+F][-F] F

2D SVG tree2D SVG tree

Show the tree (use SVG)Show the tree (use SVG) Input parameter:Input parameter:

– LevelLevel– AngleAngle– WidthWidth– Rule: Rule: F=F[+F][-F]FF=F[+F][-F]F

2D SVG tree2D SVG tree

AlgorithmAlgorithm– 1.      w=w/21.      w=w/2 ，， h=1000h=1000 ，， m=4^nm=4^n– 2.      B [m][3]2.      B [m][3]– 3.      B[0][0]=6003.      B[0][0]=600 ，， B [0][1]=-300B [0][1]=-300 ，， B [0][2]= 0B [0][2]= 0– 4.      for k=1,4.      for k=1,……,n,n– 5.      h=h/25.      h=h/2– 6.      for i=0,6.      for i=0,……,4^(k-1),4^(k-1)– B[i][0]=B[i][0]-h sinB[i][2]B[i][0]=B[i][0]-h sinB[i][2]– B[i][1]=B[i][1]+h cosB[i][2]B[i][1]=B[i][1]+h cosB[i][2]– B[i][2]=B[i][2]B[i][2]=B[i][2]

– B[i][2]a //rotate angleB[i][2]a //rotate angle– for j=0,1,2for 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][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][1]=B[i][1]-h cos(B[i][2]+ j-1)– B [4^(k-1)+3×i+j][2]=B[i][2]+ (j-1) B [4^(k-1)+3×i+j][2]=B[i][2]+ (j-1)

3D SVG3D SVG

Javascript platformJavascript platform– Author : Author : William Ueng William Ueng 翁維瓏 中央研究院翁維瓏 中央研究院– Capability :Capability :

simulate 3D SVG environmentsimulate 3D SVG environment– PointPoint– LineLine

rotate the objectrotate the object

Demo 2D SVG treeDemo 2D SVG tree

Demo(tree)Demo(tree)– 2D tree in 3D SVG environment2D tree in 3D SVG environment– 3D tree in 3D SVG environment3D tree in 3D SVG environment

Demo(solid)Demo(solid)– CubeCube– PyramidPyramid– Hexagonal-PrismHexagonal-Prism

3D SVG 3D SVG (Cont.)(Cont.)

Javascript platformJavascript platform– Capability :Capability :

to simulate 3D SVG environmentto simulate 3D SVG environment– PointPoint– LineLine

rotate the objectrotate the object integrate tree Algorithm and 3D environmeintegrate tree Algorithm and 3D environme

ntnt integrate solid and 3D environmentintegrate solid and 3D environment provide interactionprovide interaction

– Tree: Level, Angle, Width …….Tree: Level, Angle, Width …….– Solid: color, height, width, coordinate …….Solid: color, height, width, coordinate …….

ConclusionConclusion

improvement :improvement :– Hidden Surface RemovalHidden Surface Removal– Change viewChange view– imageimage– Object builderObject builder