前面已經介紹過了 L-system 與 SVG。由於是兩種對於圖形完全不同的描述方法，

(1)

第四章林登梅爾系統呈現演算法

本章中提出了 L-system 的概念與 SVG 呈現方式之比較，並且實做了將 L-system 的規則以 SVG 來呈現的演算法。4.1 節介紹 L-system 與 SVG 的概念與兩者之間的相關性；4.2 節介紹 L-system 與 SVG 的轉換模型（Transformation meta model）；4.3 節介紹二維線段遞迴生長法則—Standard Type；4.4 節介紹二維線段遞迴生長法則—Willow Type；4.5 節介紹三維線段遞迴生長法則—Standard Type；4.6 節介紹二維線段遞迴生長法則—Willow Type。

4.1 林登梅爾系統與 SVG 之比較

前面已經介紹過了 L-system 與 SVG。由於是兩種對於圖形完全不同的描述方法，

因此必須用轉換模型與演算法來將 L-system 的規則以及概念轉換成 SVG 的方式進而繪出圖形。

在這一節中對 L-system 的特性簡單描述一下。L-system 是使用文字及符號形成字

串來描繪圖形，其運用重複自我模仿的特性，以一個公理字串及一到數個規則字串來

描述一個樹型物件。公理字串可藉由規則字串以遞迴式來取代以取得結果字串，接著

再以結果字串利用海龜式繪圖法繪製出圖形。如表 4-1 中，以 L-system 基本樹型為例

子，起點為圖中紅色的圓點。而表中左邊第一個欄位為 L-system 的規則，第二個欄位

為結果字串，而最右邊的欄位為所繪出的樹型。

(2)

規則結果字串基本樹型

1 30 F

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

@

F[+F][-F]F

2 30 F

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

@

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

表 4-1 L-system 的基本樹型之規則、結果字串與圖形

但是這些公理字串需要像 L-system Generation Program 這種特定的應用程式才能讀的出來。所以使用者必須在電腦中安裝此類應用程式才能打開它，這是很不方便的。

所以本論文將 L-system 與 SVG 做結合，藉由 SVG 的各種優勢將 L-system 呈現在網頁上，使得使用者在各個環境之下都可以瀏覽。

接著再簡單的描述一下 SVG 的編寫方式。SVG 是一種 2D 的可縮放式圖形語言，

由於 SVG 是以 XML 為基礎，所以也是一種標籤式語言，其最主要提供了幾項基本的

標籤：向量圖形（例如：圓形、直線或是曲線）、影像（image）以及文字（text）。我

們將前面形成 L-system 的基本樹型換為以 SVG 來表示，如表 4-2：

(3)

SVG L-system 基本樹型

<?xml version="1.0" standalone="no"?>

<svg >

</svg>

<?xml version="1.0" standalone="no"?>

<svg >

</svg>

表 4-2 用 SVG 來呈現 L-system 基本樹型的程式碼

由上面這個例子可知，L-system 為一種使用公理字串來遞迴的方式，所以的語法

相當簡短，即使再複雜的圖形也可以用簡單的字串再配合遞迴的次數控制並顯現出

來。如表 4-1 中，遞迴第二次時，L-system 中的每一個線段 F 都用 F-F++F-F 的規則來

取代。而 SVG 是用簡單的標籤來表示圖形，因此可以靜態或是動態的將要顯現出來的

物件、點或是文字加入到 SVG document 當中繪出所需的圖形。正如表 4-2 中，遞迴第

一次時總共有四根固定長度的樹枝 F，所以需要四段 Line 的標籤來繪出圖形；遞迴第

二次時一共有十六根樹枝 F，所以需要十六段 Line 的標籤來繪出圖形。

(4)

要做到使用者能控制繪製 L-system 樹型時的各項變數，可以藉由 JavaScript 來達成。由於 SVG 中每一個基本圖形或線段都需要一組標籤來描述，所以必需以動態的方式跟隨著使用者的操作來增加或減少 SVG 的標籤數量並且給予標籤中需要的屬性值。

如上表中的例子，當遞回一次時需要畫出的四個線段中，必須要知道線段的起點與終點，因此演算法需藉由 L-system 的特性，運用數學計算來找到這些座標點並且用線段將座標點連起來。遞回 n 次的方式也相同。

綜合 L-system 與 SVG 的概念可以做出以下的比較：

在物件的數目方面：L-system 只要給定了規則，遞迴的次數便只要改動一個參數即可；而在 SVG 呈現的部分，遞迴的次數越多，物件的個數也越多並成指數倍成長。

在描述內容的方面：L-system 是採用字串的取代方式，SVG 是使用迴圈的遞迴來呈現。

在圖形呈現的方面：現在 L-system 的規則最方便的是以 L-system Generation

Program 來觀看，需要使用者另外安裝此應用程式；而 SVG 是以 XML based 的 SVG

純文字檔，所以可以直接在裝有 SVG plug-in 的瀏覽器開啟，對使用者來說方便許

多。

(5)

4.2 轉換模型（Transformation meta model）

在 4.1 節當中介紹了 L-system 與 SVG 的差異性，在本節中將提出實際的轉換模型來解釋如何將 L-system 轉換成 SVG。

要將一個 L-system 樹型轉換為 SVG 的語法時需要經過的幾個步驟與流程圖如下：

圖 4-1 轉換模型流程圖

1. L-system Rule：要建立一個 L-system 樹型時，首先會得到一個 L-system Rule，其中包含了幾項最重要的資訊：遞迴次數、偏轉角度、起始符號以及生長的規則（L-system Rule 請參考 2.3 節）。其生長方式是藉由生長規則得到一個起始樹型之後，遞迴第二次時以起始樹型放大後當作下一次遞迴的骨架，而放大後的每一根樹枝構造與起始樹型相同，如下圖。在本論文中，稱其為線段遞迴生長法則（segment Recursive grow method）。另外，在本步驟中，除了要得到這個 L-system 圖形是由什麼樣的規則在生長之外，我們還可以知道此樹型是生長在幾維的空間當中。在 2 維空間中的 L-system 樹型，我們稱其法則為 2D segment Recursive grow method，例如本章中的 4.3、4.4 節之樹型；在 3 維空間中的 L-system 樹型，稱其法則為 3D segment Recursive grow

L-system Rule

幾何圖形分析

數學函式推導

線段遞迴生長法則演算法

(6)

method，例如本章中的 4.5、4.6 節之樹型。

2. 幾何圖形分析：在得到 L-system Rule 之後便要由 SVG 的觀點來探討。前面一節中提到 SVG 的圖形是由絕對或相對座標點來決定圖形的位置，所以在這一階段當中，必須分析出這個 L-system 樹型要用 SVG 來表示時需要知道的坐標點。所以必須先分析這個規則所產生出來的基本圖形，瞭解每一次遞迴將多長幾枝樹枝。如上圖的例子得知，每一次遞迴將多四倍的樹枝，也就是每一次遞迴需要知道的座標點將增加四倍。

3. 數學函式推導：在分析完了幾何圖形之後，接著必須討論這些座標點之間有何關連性。以同樣的例子來說，初始值只得到樹幹的長度及起始點，所以必須藉由現有的資料求得 A、B、C、D 四點座標，其中牽涉到了三角函數的部分，如下圖。此樹型詳細的資料在下一節將有介紹。

說明：遞迴第二次的樹型樹枝長度為原來的兩倍，且樹型結構主幹與遞迴第一次的結構相同（如紅色框框），

而其中每一根樹枝的結構、大小都與遞迴第一次的相同。

(a, b) B

θ

A

C D

θ θ

(7)

4. 線段遞迴法則演算法：經過精密的分析之後，可以將導出來的三角函數與遞迴概念套入演算法當中，實際由程式去執行，即可將 L-system 以 SVG 的方式來呈現。

4.3 基本樹型的二維線段遞迴生長法則（2D segment Recursive grow method—Standard Type）

對於 L-system 這個語言模型在 2.3 節中已經有詳盡的描述。在眾多的 L-system 語法和規則當中，首先探討其中的一種，規則如表 4-3，本論文稱為基本樹型，並且依照 4.2 節所提出的轉換模型來分析：

1. L-system Rule：

表 4-3 即為 L-system 基本樹型的語法，此樹型的結果並沒有牽涉到 3 維空間的偏轉，因此只要在平面上便可以畫出此樹型，本論文稱其法則為 2 維線段遞迴生長法則（2D segment Recursive grow method—Standard Type）。

說明 L-system 語法遞迴次數 1

旋轉角度 30 樹枝寬度 5 起始符號 F

規則 F=F[+F][-F]F 結束符號 @

表 4-3 L-system 基本樹型的語法

(8)

2. 幾何圖形分析：首先畫出這個 L-system 基本樹型的起始圖形。分析過後得知每遞迴一次所需要知道的座標點數目為上一次遞迴的四倍。

3. 數學函式推導：

在 L-system 中，基本的樹型有幾項可控制的變數，例如：遞迴的次數、樹枝張開的角度以及樹枝的寬度；因此在本演算法當中，也提供了這三樣的變數以便調整：

遞迴的次數（n）、樹枝張開的角度（ θ ）以及樹枝的寬度（2w）；而高度 h 與始點

（a, b）為預設值。

第 0 層：

因為必需先建構一開始的第一枝樹枝，所以稱其為第 0 層。

已知始點（a, b）及高度 h 求出第一根樹枝的起點與終點，並將其連線。

A0(x)=a，A0(y)=b－h。

第 1 層：

建構出第 1 層時的樹型架構。

第 1 層的高度為第 0 層的兩倍，所以 h 值變為兩倍（h=h*2）

。

A₁₀(x)= A₀(x)，A₁₀(y)= A₀(y)……….（公式 4.3.1）

A₁₁(x)= A₁₀(x)＋

2 h

sin(-

θ

^)，A11(y)= A₁₀(y)－

2 h

cos(-

θ

)……….（公式 4.3.2）

(a, b)

A

₀

(9)

A12(x)= A10(x)＋

2 h

sin(0)，A11(y)= A10(y)－

2 h

cos(0)……….（公式 4.3.3）

A13(x)= A10(x)＋

2 h

sin(

θ

)，A11(y)= A10(y)－

2 h

cos(

θ

)……….（公式 4.3.4）

由上面的公式可知，將樹的高度放大並畫出骨架之後原來的頂點變為第二層樹枝的中間折半點。由公式 4.3.2 可求出 A

₁₁

，所以左邊樹枝是由起點 A

₁₀

連到終點 A

₁₁

。由公式 4.3.3 可求出 A

₁₂

，所以中間樹枝是由起點 A

₁₀

連到終點 A

₁₂

，且 A

₁₂

與 A

₁₀

沒有角度偏差。由公式 4.3.4 可求出 A

₁₃

，所以右邊樹枝是由起點 A

₁₀

連到終點 A

₁₃

。

接下來的層數以此類推。

4. 線段遞迴法則演算法：

依據上面的分析，進而將數學式套入演算法當中。

1. 宣告一個二維陣列存放所需起點與始點的座標以及偏轉的角度 2. 其中 h 變為 2

^n-1

倍（因為 L-system 的規則關係）

3. 假設遞迴次數為 n，則建立迴圈跑 1~n 次 a. 利用下列公式尋找樹枝的折半點

x=x-h sink θ y=y+h cosk θ

b. 利用下列公式尋找所生出之左、中、右三根樹枝頂點 j=0,1,2

x

_j

=x+h sin(k+ j-1) θ y

_j

=y-h cos(k+ j-1) θ

4.再將折半點與樹枝頂點做連線。

(a, b) A

₁₁

θ

θ A

₁₀

A

₁₃

A

₁₂

θ

(10)

4.4 柳樹樹型的二維線段遞迴生長法則（2D segment Recursive grow method—Willow Type）

1. 得到 L-system Rule：

在前一節當中介紹了 L-system 的基本樹型。接下來本論文設計了另外一個不同的樹型規則的樣本以增加多元性。這個樹型的規則如表 4-4，遞迴一到三次的圖形如圖 4-2，我們稱其為柳樹樹型（willow type）：

說明 L-system 語法遞迴次數 1

旋轉角度 15 樹枝寬度 2 起始符號 F

規則 F= FF[---F+F][-F-F-F]

結束符號 @

表 4-4 L-system 的柳樹樹型語法

圖 4-2 柳樹樹型遞迴一到三次

(11)

2. 幾何圖形分析：首先畫出這個 L-system 柳樹樹型的起始圖形。分析過後得知，每遞迴一次所需要知道的座標點數目為上一次遞迴的七倍。

3.數學函式推導：

由於柳樹樹型有幾項可控制的變數，例如：遞迴的次數、起點座標、樹枝的長度以及樹枝張開的角度；因此我們也提供了這四樣的變數可供調整：遞迴的次數

（n）、起點座標（a,b）、樹枝的長度（L）以及樹枝張開的角度（ θ ）。

圖 4-3 數學理論圖解 L

L*sin θ

θ

L*cos θ

（a）（b）

B

6

B

5

B

₄

B

₃

B

2

B

₁

B

0

C

D

1 3 4

2 5

6

7

(12)

由圖 4-2（b）可知，若樹枝往左邊偏轉 θ 角時，偏轉後長度為 L 的樹枝之座標頂點（x,y）可以由下列公式求出：x=x—Lsin θ ；y=y—Lcos θ 。而圖 4-2（a）為此柳樹樹型形成所需的座標點，敘述如下：

B

0

為始點，所以座標即為（a,b）

B

1

= B

0

－（0,L）………（公式 4.4.1）

B

2

= B

1

－（0,L）………（公式 4.4.2）

B

3

= B

2

—（Lsinθ, Lcosθ）……….………（公式 4.4.3）

B

4

= B

3

—（Lsin 2θ, Lcos 2θ）….…………..………（公式 4.4.4）

C = B

4

—（Lsin 3θ, Lcos 3θ）….………..…………（公式 4.4.5）

B

6

= B

2

….………（公式 4.4.6）

B

5

= B

2

—（Lsin 3θ, Lcos 3θ）….………..………（公式 4.4.7）

D = B

6

—（Lsin 2θ, Lcos 2θ）….………..…………（公式 4.4.8）

公式 4.4.1 與 4.4.2：向 Y 軸方向長一段長為 L 的樹枝

公式 4.4.3：B

2

向上再長一個長為 L 的樹枝且再偏轉一個 θ 角

公式 4.4.4：B3 向上再長一個長為 L 的樹枝且再偏轉一個 θ 角（總共偏轉 2 θ ）公式 4.4.5：B4 向上再長一個長為 L 的樹枝且再偏轉一個 θ 角（總共偏轉 3 θ ）公式 4.4.6：B6 與 B2 位置相同

公式 4.4.7：B2 向上再長一個長為 L 的樹枝且再偏轉三個 θ 角

公式 4.4.8：B6 向上再長一個長為 L 的樹枝且再往回轉一個 θ 角（總共偏轉 2 θ ）

再繼續進行遞回的動作，每一枝樹枝長度都將為原來的兩倍。但由於 C、D 兩

點都不用再長出樹枝，所以存在另外的陣列中。接著只看編號為 B 的點：當遞回第

一次時總共有 7 個頂點，遞迴第二次時總共有 7

²

個頂點，遞迴第三次時總共有 7

³

個頂點。

(13)

4. 線段遞迴生長法則演算法：

1. 首先宣告 B、C、D 三個主要陣列：B 陣列存放數學函式推導中與 B 有關的點、

C 陣列存放數學函式推導中與 C 有關的點、D 陣列存放數學函式推導中與 D 有關的點。

2. 當遞迴次數為 1 時，則依據上面的概念求出 C、D 及 B

₀

到 B

₆

的座標，再將 B

₀

到 B

6

依順序連起來，再連 B

4

到 C 及 B

5

到 D，即連成第一株柳樹。

3. 當遞迴次數為 2∼n 時，

將所有已知與 B 有關的點座標都存到陣列中 7 倍的位置，例如：當遞迴次數為 2 時，B

₀

B

₀

；B

₁

B

₇

；B

₂

B

₁₄

；B

₃

B

₂₁

……如圖 4-3；當遞迴第三次時，再把第二次的每一點移到 7 倍的位置….以此類推。

最後根據相同的方式把每一枝樹枝的其他頂點補齊，再將與 B 有關的點依序連結，最後 C

i

與 B

4+7i

連結，D

i

與 B

5+7i

連結。

圖 4-4 柳樹頂點存放位置

B0

B5

B4

B3

B2

B1

B6

D1

C1

B0

B42

C7

B35

B28

B21

B14

B7

D7

B6

B5

B4

B3

B2

B1

B8

B9

B12

B11

B10

B13

C1

D1

C2

D2

其餘各點以

此類推…

(14)

4.5 基本樹型的三維線段遞迴生長法則（3D segment Recursive grow method—Standard Type）

1. L-system Rule：

根據 4.2 的樹型概念，本論文將 2D 的基本樹型推到 3D 的環境當中，稱其為 3D segment Recursive grow method—Standard Type。而在 3D 基本樹型的結構中，我們讓主要的樹枝生長的方向除了能讓其向右及向左偏轉一個角度（θ）外，也讓樹枝可以向前及向後偏轉另一個角度（φ），如圖 4-5 所示。

圖 4-5 3D 樹型的結構

2. 幾何圖形分析：首先畫出這個 3D L-system 基本樹型的起始圖形。分析過後得知，每遞迴一次所需要知道的座標點數目為上一次遞迴的六倍。

4

0 2 1

ψψ 3

（後方）

5

（前方）

θ θ

2

1 4 3 5

6

(15)

3.數學函式推導：

而在 3D 樹型當中，最主要提供給使用者改變的參數就是遞迴的次數（n）與改變的角度θ與φ。

1. 環境中的座標軸如下：

這裡假設『右方』為『X 軸的正向』時，樹枝向左右兩方偏轉θ時，座標改變的方式為：

2. 由 1.可知，若樹枝向前後兩方偏轉φ時，座標改變的方式為：

X 軸 Y 軸

Z 軸

（0+L*sinθ,0+L*cosθ,0）

θ

（0,0,0）

θ L

（0－L*sinθ,0+L*cosθ,0）

X 軸

φ

（0,0,0）

（0,0+L*cos

φ

, 0+L*sin

φ

）（0,0+L*cos

φ

,0－L*sin

φ

）

Z 軸

φ

(16)

3. 若是樹枝向θ及φ都有偏轉的方向時（樹枝由 1 轉θ到 2，再轉φ到 3），座標改變方式為：

不論是θ和φ旋轉的順序如何，道理都是一樣的。

4. 線段遞迴生長法則演算法：

1. 先宣告一個二維陣列來存放頂點的位置，陣列的大小為 6

ⁿ

×5（5 欄分別存放點的 X、Y、Z 座標以及旋轉的θ角和φ角。

2. 設定好起點與主幹。

3. 建立迴圈遞迴 1 到 n 次，

每次樹枝長度減半。

再建立一個子迴圈，遞迴次數為 1 到上一次做完的總頂點數：

依照上面的分析將頂點本身定位後，再依下列公式找出折半點。

X

mk+5*i

= X

i

+L sin（A

i

θ）；

Y

mk+5*i

= Y

i

－L cos（A

i

θ）cos（B

i

φ）；

Z

mk+5*i

= Z

i

+L sin（B

i

φ）；

A

mk+5*i

=A

i

；

B

mk+5*i

=B

i

；

再建立一個子迴圈，遞迴次數為 1∼4（找出折半點向右、後、左、前再長出的分枝的頂點），用到的方法如下：

Y 軸

Z 軸 X 軸

φ

θ

1

2

3

（L*sinθ,L*cosθ,0）

（L*sinθ,L*cosθ*cos

φ

, L*sin

φ

^） θ

(17)

遞迴次數計算方式結果 1

_sin（1*

2 π

）=1；cos（1*

2 π

）=0

畫出右枝，將θ方向角度加一倍

2

_sin（2*

2 π

）=0；cos（2*

2 π

）= -1

畫出後枝，將φ方向角度減一倍

3

_sin（3*

2 π

）= -1；cos（3*

2 π

）=0

畫出左枝，將θ方向角度減一倍

4

_sin（4*

2 π

）=0；cos（4*

2 π

）=1

畫出前枝，將φ方向角度加一倍

X

mk+5*i+j

= X

i

+Lsin((A

i

+ sin(j*p))θ);

Y

mk+5*i+j

= Y

i

-Lcos((A

i

+ sin(j*p))θ) cos((B

i

+ cos(j*p))φ);

Z

mk+5*i+j

=Z

i

+Lsin((B

i

+ cos(j*p))φ);

A

mk+5*i+j

=A

i

+ sin(j*p);

B

mk+5*i+j

=B

i

+ cos(j*p);

再將 i 點與 mk+5*i+j 點連起來。

4.5.1 柱狀樹枝

由於前面的 2D tree 呈現出來的是平面的長方形樹枝，如下圖。而目前在 3D 的環境當中，我們的樹枝都是顯示骨架的線條，若要是樹型在 3D 環境中更加的真實，我們藉由下面的方法將樹枝改以六角柱代替。

長方形樹幹以六角住代替

(18)

1. 先由底面六角形的中間點找出六角形的六個點。

2. 當樹枝為直立的時候，經由平移 y 軸（即向上平移）找到六角柱的上平面之六角形的六個座標點。畫出六角柱的上平面、底面以及側面的六個長方形，以形成六角柱。

3. 當六角柱生成分枝時，使用旋轉變換公式：

x = x’ cosθ-y’ sinθ y = x’ sinθ-y’ cosθ

使得左右分枝在 x、y 平面旋轉，前後分枝在 y、z 平面旋轉，如下圖。

w

(a, b) (a+w, b)

(a+

2 1

w, b-

2 3

(a- w)

2 1

w, b-

2 3

w) (a-

2

1

w, b+

2 3

w) (a+

2 1

w, b+

2 3

w)

(a-w, b)

(19)

4.6 柳樹樹型的三維線段遞迴生長法則（3D segment Recursive grow method—Willow Type）

1. L-system Rule：

在 4.3 節當中介紹了 L-system 的柳樹樹型。接下來將柳樹放到 3D 的環境當中，

因此我們改變了一下柳樹的結構以呈現較明顯的 3D 效果。而 3D 柳樹的規則如表 4-5，遞迴一到三次的圖形如圖 4-6。

說明 L-system 語法遞迴次數 1

旋轉角度 15 起始符號 F

規則 F=FF[^^^F-F][&&&F-F][-F-F-F]

結束符號 @

表 4-5 L-system 的柳樹樹型語法

圖 4-6 3D 柳樹樹型遞迴一到三次

(20)

2. 幾何圖形分析：

由上面的圖表可知，3D 柳樹樹型的概念是當樹枝向上生長 2F 之後，會向『Y 軸的正向』偏轉 3θ生成一個 F，再向『X 軸的負向』偏轉θ，生成一個 F；之後回到 2F 的頂點，在相『Y 軸的負向』偏轉 3θ生成一個 F，再向『X 軸的負向』偏轉 θ，生成一個 F，又回到 2F 的頂點；最後向『X 軸的負向』偏轉θ長一個 F，再偏轉θ長一個 F，再偏轉θ長一個 F。由分析得知，每遞迴一次我們所要知道的座標點數目為上一次遞迴的九倍。

3.數學函式推導：

由於 3D 柳樹樹型有幾項可控制的變數，例如：遞迴的次數、起點座標、樹枝的長度以及樹枝偏轉的角度；因此在本演算法當中，也提供了這四樣的變數可供調整：遞回的次數（n）、起點座標（a,b）、樹枝的長度（L）以及樹枝張開的角度（θ）。

而頂點的存放方式如圖 4-7，B、C、D、E 為不同的陣列：

1 2 3 4 5

6 7

8

9

(21)

圖 4-7 3D 柳樹樹型的頂點存放方式

圖 4-8 樹枝偏轉後座標點的計算方式

當樹枝 L 產生偏轉時，座標點的計算如圖 4-8 所示。各頂點的存放方式如下：

B

0

為始點，所以座標即為(a,b,c)。

B

1

= B

0

－(0,L,0) ……….………（公式 4.6.1 ） B

2

= B

1

－(0,L,0) ……….………（公式 4.6.2 ） B

3

= B

2

－ (Lsinθ, Lcosθ, 0) ………（公式 4.6.3 ） B

4

= B

3

－ (Lsin 2θ, Lcos 2θ, 0 ) ………..……..（公式 4.6.4 ） C = B

4

－(Lsin 3θ, Lcos 3θ, 0) ………（公式 4.6.5 ） B

5

= B

2

………..………（公式 4.6.6 ） B

6

= B

5

－ ( 0, Lcos 3θ, Lsin 3θ) ………...…….……（公式 4.6.7 ） D = B

6

－(Lsinθ, Lcosθ, 0) ………..…………（公式 4.6.8 ）

E

B

8

C

B

₄

B

3

B

₂

B

1

B

0

B

5

D

B

7

B

6

L

L*sinθ

θ

L*cosθ

（a-Lsinθ, b+Lcosθ,c）

（a, b,c）

(22)

B

₈

= B

₅

－ ( 0, Lcos 3θ,- Lsin 3θ) ………（公式 4.6.10）

E = B

₈

－ (Lsinθ, Lcosθ, 0) ……….……（公式 4.6.11）

公式 4.6.1、4.6.2：向上長一根長為 L 的樹枝

公式 4.6.3：B2 向上再長一個長為 L 的樹枝且再向 X 軸負向偏轉一個 θ 角公式 4.6.4：B3 向上再長一個長為 L 的樹枝且再向 X 軸負向偏轉一個 θ 角

（總共偏轉 2 θ ）

公式 4.6.5：B4 向上再長一個長為 L 的樹枝且再向 X 軸負向偏轉一個 θ 角

（總共偏轉 3 θ ）

公式 4.6.7：B5 向上再長一個長為 L 的樹枝且向 Y 軸負向偏轉三個 θ 角公式 4.6.8：B6 向上再長一個長為 L 的樹枝且向 X 軸負轉一個 θ 角公式 4.6.10：B7 向上再長一個長為 L 的樹枝且向 Y 軸正向偏轉三個 θ 角公式 4.6.11：B8 向上再長一個長為 L 的樹枝且向 X 軸負轉一個 θ 角

……

遞迴第二次後將 B 陣列的點都丟到註標為 9 倍的位置，頂點存放方式以此類推。而當樹枝偏轉了兩個不同軸的方向時，Z 軸的座標點求取方式如 4.4 節的數學函式推導。

4. 線段遞迴生長法則演算法：

1. 首先宣告 B、C、D、E 四個主要陣列：B 陣列存放數學函式推導中與 B 有關的點、

C 陣列存放數學函式推導中與 C 有關的點、D 陣列存放數學函式推導中與 D 有關的點、E 陣列存放數學函式推導中與 E 有關的點。

2. 當遞迴次數為 1 時，則依據數學函式推導的作法求出 C、D、E 及 B

₀

到 B

₈

的座標，

再將 B

0

到 B

4

到 C 連起來、B

5

與 B

6

與 D 連起來、B

7

與 B

8

與 E 連起來，即為第一株柳樹。

3. 當遞迴次數為 2∼n 時，

每一次遞迴都將所有已知與 B 有關的點座標都存到陣列中 9 倍的位置，例如：當

(23)

同；當遞迴第三次時，再把第二次的每一點移到 9 倍的位置….以此類推。

再將每一枝樹枝的其他頂點補齊，方式如下：

主枝部分：

X

_9*i2+1

=X

_9*i2

-Lsin(M

_9*i2

θ)

Y

_9*i2+1

=Y

_9*i2

-Lcos(M

_9*i2

θ) cos (N

_9*i2

θ)

Z

_9*i2+1

=Z

_9*i2

-Lsin(N

_9*i2

θ)

M

_9*i2+1

=M

_9*i2

N

_9*i2+1

=N

_9*i2

X

9*i2+2

=X

9*i2+1

-Lsin(M

9*i2+1

θ)

Y

9*i2+2

=Y

9*i2+1

-Lcos(M

9*i2+1

θ) cos (N

9*i2+1

θ)

Z

9*i2+2

=Z

9*i2+1

-Lsin(N

9*i2+1

θ)

M

9*i2+2

=M

9*i2+1

+1

N

9*i2+2

=N

9*i2+1

物件

9*i2+3

與物件

9*i2+4

同物件

9*i2+2

。物件

9*i2+5

同物件

9*i2+2

。

後枝部分：

X

_9*i2+6

=X

_9*i2+5

-Lsin(M

_9*i2+5

θ)

Y

_9*i2+6

=Y

_9*i2+5

-Lcos(N

_9*i2+5

θ) cos (M

_9*i2+5

θ)

Z

_9*i2+6

=Z

_9*i2+5

-Lsin(N

_9*i2+5

θ)

M

_9*i2+6

=M

_9*i2+5

N

_9*i2+6

=N

_9*i2+5

+3

前枝部分與後枝雷同。

再依序連結，方式如下：

B

_9*i

B

_9*i+1

B

_9*i+2

B

_9*i+3

B

_9*i+4

C

_i

B

_9*i+5

B

_9*i+6

D

_i

B

_9*i+7

B

_9*i+8

E

_i

前面已經介紹過了 L-system 與 SVG。由於是兩種對於圖形完全不同的描述方法，

第四章 林登梅爾系統呈現演算法

4.1 林登梅爾系統與 SVG 之比較

前面已經介紹過了 L-system 與 SVG。由於是兩種對於圖形完全不同的描述方法，

因此必須用轉換模型與演算法來將 L-system 的規則以及概念轉換成 SVG 的方式進而繪 出圖形。

在這一節中對 L-system 的特性簡單描述一下。L-system 是使用文字及符號形成字

串來描繪圖形，其運用重複自我模仿的特性，以一個公理字串及一到數個規則字串來

描述一個樹型物件。公理字串可藉由規則字串以遞迴式來取代以取得結果字串，接著

再以結果字串利用海龜式繪圖法繪製出圖形。如表 4-1 中，以 L-system 基本樹型為例

子，起點為圖中紅色的圓點。而表中左邊第一個欄位為 L-system 的規則，第二個欄位

為結果字串，而最右邊的欄位為所繪出的樹型。

規則 結果字串 基本樹型

表 4-1 L-system 的基本樹型之規則、結果字串與圖形

但是這些公理字串需要像 L-system Generation Program 這種特定的應用程式才能讀 的出來。所以使用者必須在電腦中安裝此類應用程式才能打開它，這是很不方便的。

所以本論文將 L-system 與 SVG 做結合，藉由 SVG 的各種優勢將 L-system 呈現在網頁 上，使得使用者在各個環境之下都可以瀏覽。

接著再簡單的描述一下 SVG 的編寫方式。SVG 是一種 2D 的可縮放式圖形語言，

由於 SVG 是以 XML 為基礎，所以也是一種標籤式語言，其最主要提供了幾項基本的

標籤：向量圖形（例如：圓形、直線或是曲線）、影像（image）以及文字（text）。我

們將前面形成 L-system 的基本樹型換為以 SVG 來表示，如表 4-2：

SVG L-system 基本樹型

表 4-2 用 SVG 來呈現 L-system 基本樹型的程式碼

由上面這個例子可知，L-system 為一種使用公理字串來遞迴的方式，所以的語法

相當簡短，即使再複雜的圖形也可以用簡單的字串再配合遞迴的次數控制並顯現出

來。如表 4-1 中，遞迴第二次時，L-system 中的每一個線段 F 都用 F-F++F-F 的規則來

取代。而 SVG 是用簡單的標籤來表示圖形，因此可以靜態或是動態的將要顯現出來的

物件、點或是文字加入到 SVG document 當中繪出所需的圖形。正如表 4-2 中，遞迴第

一次時總共有四根固定長度的樹枝 F，所以需要四段 Line 的標籤來繪出圖形；遞迴第

二次時一共有十六根樹枝 F，所以需要十六段 Line 的標籤來繪出圖形。

如上表中的例子，當遞回一次時需要畫出的四個線段中，必須要知道線段的起點與終 點，因此演算法需藉由 L-system 的特性，運用數學計算來找到這些座標點並且用線段 將座標點連起來。遞回 n 次的方式也相同。

綜合 L-system 與 SVG 的概念可以做出以下的比較：

在物件的數目方面：L-system 只要給定了規則，遞迴的次數便只要改動一個參數 即可；而在 SVG 呈現的部分，遞迴的次數越多，物件的個數也越多並成指數倍成 長。

在描述內容的方面：L-system 是採用字串的取代方式，SVG 是使用迴圈的遞迴來 呈現。

在圖形呈現的方面：現在 L-system 的規則最方便的是以 L-system Generation

Program 來觀看，需要使用者另外安裝此應用程式；而 SVG 是以 XML based 的 SVG

純文字檔，所以可以直接在裝有 SVG plug-in 的瀏覽器開啟，對使用者來說方便許

多。

4.2 轉換模型（Transformation meta model）

在 4.1 節當中介紹了 L-system 與 SVG 的差異性，在本節中將提出實際的轉換模型 來解釋如何將 L-system 轉換成 SVG。

要將一個 L-system 樹型轉換為 SVG 的語法時需要經過的幾個步驟與流程圖如下：

圖 4-1 轉換模型流程圖

L-system Rule

幾何圖形分析

數學函式推導

線段遞迴生長法則演算法

method，例如本章中的 4.5、4.6 節之樹型。

(a, b) B

θ

A

C D

θ θ

4. 線段遞迴法則演算法：經過精密的分析之後，可以將導出來的三角函數與遞迴概念 套入演算法當中，實際由程式去執行，即可將 L-system 以 SVG 的方式來呈現。

4.3 基本樹型的二維線段遞迴生長法則（2D segment Recursive grow method—Standard Type）

對於 L-system 這個語言模型在 2.3 節中已經有詳盡的描述。在眾多的 L-system 語 法和規則當中，首先探討其中的一種，規則如表 4-3，本論文稱為基本樹型，並且依照 4.2 節所提出的轉換模型來分析：

1. L-system Rule：

表 4-3 即為 L-system 基本樹型的語法，此樹型的結果並沒有牽涉到 3 維空間的 偏轉，因此只要在平面上便可以畫出此樹型，本論文稱其法則為 2 維線段遞迴生長 法則（2D segment Recursive grow method—Standard Type）。

說明 L-system 語法 遞迴次數 1

旋轉角度 30 樹枝寬度 5 起始符號 F

規則 F=F[+F][-F]F 結束符號 @

表 4-3 L-system 基本樹型的語法

2. 幾何圖形分析：首先畫出這個 L-system 基本樹型的起始圖形。分析過後得知每遞迴 一次所需要知道的座標點數目為上一次遞迴的四倍。

3. 數學函式推導：

在 L-system 中，基本的樹型有幾項可控制的變數，例如：遞迴的次數、樹枝張 開的角度以及樹枝的寬度；因此在本演算法當中，也提供了這三樣的變數以便調整：

遞迴的次數（n）、樹枝張開的角度（ θ ）以及樹枝的寬度（2w）；而高度 h 與始點

（a, b）為預設值。

第 0 層：

因為必需先建構一開始的第一枝樹枝，所以稱其為第 0 層。

已知始點（a, b）及高度 h 求出第一根樹枝的起點與終點，並將其連線。

第 1 層：

建構出第 1 層時的樹型架構。

第 1 層的高度為第 0 層的兩倍，所以 h 值變為兩倍（h=h*2）

2

h

θ

2

h

θ

(a, b)

A

2

h

第四章林登梅爾系統呈現演算法

因此必須用轉換模型與演算法來將 L-system 的規則以及概念轉換成 SVG 的方式進而繪出圖形。

規則結果字串基本樹型

但是這些公理字串需要像 L-system Generation Program 這種特定的應用程式才能讀的出來。所以使用者必須在電腦中安裝此類應用程式才能打開它，這是很不方便的。

所以本論文將 L-system 與 SVG 做結合，藉由 SVG 的各種優勢將 L-system 呈現在網頁上，使得使用者在各個環境之下都可以瀏覽。

如上表中的例子，當遞回一次時需要畫出的四個線段中，必須要知道線段的起點與終點，因此演算法需藉由 L-system 的特性，運用數學計算來找到這些座標點並且用線段將座標點連起來。遞回 n 次的方式也相同。

在物件的數目方面：L-system 只要給定了規則，遞迴的次數便只要改動一個參數即可；而在 SVG 呈現的部分，遞迴的次數越多，物件的個數也越多並成指數倍成長。

在描述內容的方面：L-system 是採用字串的取代方式，SVG 是使用迴圈的遞迴來呈現。

在 4.1 節當中介紹了 L-system 與 SVG 的差異性，在本節中將提出實際的轉換模型來解釋如何將 L-system 轉換成 SVG。

4. 線段遞迴法則演算法：經過精密的分析之後，可以將導出來的三角函數與遞迴概念套入演算法當中，實際由程式去執行，即可將 L-system 以 SVG 的方式來呈現。

對於 L-system 這個語言模型在 2.3 節中已經有詳盡的描述。在眾多的 L-system 語法和規則當中，首先探討其中的一種，規則如表 4-3，本論文稱為基本樹型，並且依照 4.2 節所提出的轉換模型來分析：

表 4-3 即為 L-system 基本樹型的語法，此樹型的結果並沒有牽涉到 3 維空間的偏轉，因此只要在平面上便可以畫出此樹型，本論文稱其法則為 2 維線段遞迴生長法則（2D segment Recursive grow method—Standard Type）。

說明 L-system 語法遞迴次數 1

2. 幾何圖形分析：首先畫出這個 L-system 基本樹型的起始圖形。分析過後得知每遞迴一次所需要知道的座標點數目為上一次遞迴的四倍。

在 L-system 中，基本的樹型有幾項可控制的變數，例如：遞迴的次數、樹枝張開的角度以及樹枝的寬度；因此在本演算法當中，也提供了這三樣的變數以便調整：

由上面的公式可知，將樹的高度放大並畫出骨架之後原來的頂點變為第二層樹枝的中間折半點。由公式 4.3.2 可求出 A

。由公式 4.3.3 可求出 A

沒有角度偏差。由公式 4.3.4 可求出 A

在前一節當中介紹了 L-system 的基本樹型。接下來本論文設計了另外一個不同的樹型規則的樣本以增加多元性。這個樹型的規則如表 4-4，遞迴一到三次的圖形如圖 4-2，我們稱其為柳樹樹型（willow type）：

說明 L-system 語法遞迴次數 1

2. 幾何圖形分析：首先畫出這個 L-system 柳樹樹型的起始圖形。分析過後得知，每遞迴一次所需要知道的座標點數目為上一次遞迴的七倍。

由於柳樹樹型有幾項可控制的變數，例如：遞迴的次數、起點座標、樹枝的長度以及樹枝張開的角度；因此我們也提供了這四樣的變數可供調整：遞迴的次數

（n）、起點座標（a,b）、樹枝的長度（L）以及樹枝張開的角度（ θ ）。

（a）（b）