在p5.js程式庫當中所執行的translate等轉換操作,內部的處理機制就是矩陣運算,因此,藉由探索applyMatrix的作法,能夠有助於掌握這類轉換操作,而且,在使用其他繪圖工具時,我們對於矩陣運算的認識,也會影響這類運用上的靈活度。

p5.js常用轉換操作

想使用p5.js繪圖,必須掌握像素座標的運算,動手實作位移、旋轉、縮放等是基本需求,若要減輕實作上的負擔,可以透過p5.Vector,也就是透過向量來表示座標,如此一來,就可以使用p5.Vector的rotate、reflect等方法,減少一些實作時需要的幾何運算細節。

但是,p5.js未內建位移、旋轉、縮放等轉換操作嗎?其實是有的,在官方參考文件的〈Transform〉就列有translate、rotate、scale等函式,不過,初學者可能對這些函式的使用感到困惑,因為它們並不是針對某個像素座標,而是針對整個畫布中的像素。

舉例來說,translate會改變其後續要繪製的像素位置,若撰寫translate(width/2, height/2);circle(0, 0, 10);,會以畫布正中為圓心繪圓,如果想讓圓以畫布左上角為圓心、轉動30度呢?這需要兩次的轉換操作,也就是寫為rotate(30);translate(width/2, height/2);circle(0, 0, 10);。

嗯?為什麼是先寫rotate後,才寫translate?轉動後再位移?不!實際效果會是位移後才轉動!

初學者在結合兩個以上的轉換時,經常會有上數這種困擾,以為轉換操作必須就程式碼的撰寫順序來倒著閱讀。但是,閱讀的順序,其實代表的是矩陣乘法的順序!rotate相當於運用了一個旋轉矩陣R,而translate相當於使用了一個旋轉矩陣T,因此,如果想讓圓以畫布左上角為圓心轉動,矩陣乘法就是R*T!

p5.js官方API文件上也談到,轉換操作是累計的(cumulative),每次重新呼叫draw時會重置,如果想將某些轉換操作獨立設計為一個單元,在這個單元中的操作不想被單元之後的繪圖使用,可以使用push、pop──push會將當前轉換操作置入堆疊,無論之後做了什麼轉換操作定,都可以透過pop回復至push前的設定。

使用applyMatrix

除了常用的translate、rotate、scale等函式,p5.js也提供applyMatrix,我們可以指定轉換矩陣,而且,translate、rotate、scale等函式所能做到的事,都可透過applyMatrix、指定對應的轉換矩陣做到,而每次呼叫applyMatrix,就相當於做了一次矩陣乘法。

有趣的是,applyMatrix的參數順序。在其API文件提及,參數順序是根據WHATWG對transform的規範,只是為什麼如此規範?這就等於在提出一個問題,怎麼以程式碼來表示矩陣呢?直覺上,我們會想到陣列,那麼,該怎麼表示呢?

舉例來說,想要建立2D版本的位移矩陣,若tx、ty表示x、y方向的位移量,若使用一維陣列表示時,是寫為[1,0,tx,0,1,ty,0,0,1],那就是「以列為主(row-major)」的實現方式,因為是以[row1 row2 row3]的方式來撰寫。

此時,若寫為[1,0,0,0,1,0,tx,ty,1],則是「以行為主(column-major)」的實現方式,因為,這是以[column1 column2 column3]的方式來實現矩陣。

無論是「以列為主」或「以行為主」,純粹只是標示上的問題,採用哪個都行,各有其支持者。

「以列為主」的實現,透過適當排列,能符合矩陣的視覺效果,第一次接觸矩陣的開發者通常直覺上會採取「以列為主」,有些工具(例如DirectX)也採取列為主。

至於採取「以行為主」的工具,通常與OpenGL有關,因其規格書及參考手冊採取「以行為主」(也就經常造成許多習慣以列為主的開發者接觸OpenGL時的誤用)。

以2D方式使用applyMatrix,就參數的安排上,其實就是行為主的撰寫方式,然而不寫出0、0與1的部份,在applyMatrix的API文件中有個3D版本的使用範例,可以與旋轉矩陣對照一下,就會發現參數安排正是完整的行為主撰寫方式。

使用矩陣程式庫

瞭解applyMatrix的使用方式後,若要尋找程式庫來協助矩陣運算,可以考慮glMatrix——其實,它是為了WebGL而生的程式庫,然而因為它實作矩陣時是以行為主,也就可以使用於p5.js,對於方才圓以畫布左上角為圓心轉動的需求,也可以如下實現:

const m = mat3.create(); // 單位矩陣
mat3.rotate(m, m, angle * PI / 180);
mat3.translate(m, m, [width / 2, height / 2]);
applyMatrix(...forApplyMatrix(m));
circle(0, 0, 10);

這邊的重點在於先寫了rotate再translate,這是因為它們內部進行了矩陣乘法,而且,是以「後乘(Post-Multiplication)」,或稱為「右乘(Right-Multiplication)」的方式實現。

想知道這代表什麼,必須先知道矩陣乘法沒有交換率,A*B與B*A的結果不一定相同,於是,這就引發了一個問題,若目前已有矩陣M,與另一個矩陣T相乘,順序上該怎麼安排呢?

若是M*T,表示M後乘T,相對地,若是T*M,表示M前乘(Pre-Multiplication)或左乘(Left-Multiplication)T,glMatrix採用後乘的原因在於,rotate、translate的內部實作,就是在進行矩陣乘法,若從一個單位矩陣開始,想建立矩陣R*T的結果,內部相當於實現了:

multiply(R)
multiply(T)

如此在書寫上就符合R*T的順序,glMatrix以行為主、後乘的實現方式,其實,這是因為WebGL承自OpenGL,而OpenGL的慣例正是以行為主與後乘(然而,也有採用前乘的工具,例如DirectX)。

p5.js也符合這個慣例的原因,在於translate等轉換操作,背後都是矩陣運算,而可以累計的原因在於,內部維護著一個全域的矩陣,每個轉換操作(包括applyMatrix),都會對它執行右乘。

p5.s有個resetMatrix可以將內部矩陣重置為單位矩陣,其實每次draw前,轉換操作都會被重置,就是因為內部矩陣被重置為單位矩陣;p5.js的push函式,則是將內部全域矩陣複製一份置入堆疊,之後pop的話,會取出堆疊中的矩陣作為全域矩陣,因此可以回復先前的操作狀態。

掌握矩陣運算的實現

在p5.js,一旦認知到內建的轉換操作,內部都涉及矩陣運算,實現上「以行為主」且採取後乘,之後,我們對於translate、applyMatrix、resetMatrix、push、pop的使用時機,就不容易混淆了。

實際上不只p5.js,繪圖相關的工具或程式庫涉及轉換操作時,背後往往就是矩陣運算,只不過採取的實現方式可能不同。例如,我常玩的OpenSCAD是採取二維陣列、以列為主、後乘方式實現,可搭配multmatrix來使用。

無論如何,只要能掌握各自工具或程式庫的實現方式,對於轉換操作就都能靈活運用了。

作者簡介


Advertisement

更多 iThome相關內容