認識矩陣


位移(translate)、縮放(scale)、旋轉(rotate)等,對電腦繪圖是基本的轉換操作,有些操作適合使用向量,而有些操作適合使用矩陣來表示。

例如,在〈基本的二維座標轉換〉談過位移、旋轉、縮放,為了方便,這邊將公式整理過來,並列出對應的矩陣運算表示。

若 tx、ty 分別為 x、y 軸部份的位移量,位移公式可以表示為:

認識矩陣

使用矩陣運算表示的話會是:

認識矩陣

若 sx、sy 分別為 x、y 軸部份的縮放量,縮放公式可以表示為:

認識矩陣

使用矩陣運算表示的話會是:

認識矩陣

若 θ 是繞原點從 x 往 y 軸的旋轉度數,旋轉公式可以表示為:

認識矩陣

使用矩陣運算表示的話會是:

認識矩陣

那麼認識矩陣對使用 p5.js 有什麼意義呢?p5.js 提供了 applyMatrixresetMatrix,前者會對畫布的像素位置依指定的矩陣進行轉換操作,後者會將內部轉換操作的矩陣重置為單位矩陣,因為使用 translatescale 等轉換時,也是改變內部的轉換操作矩陣,呼叫 resetMatrix,等於是重置先前呼叫過的 translatescale 等轉換,每次重新呼叫 draw 方法前,其實就會重置內部矩陣為單位矩陣。

根據 applyMatrix 的 API 文件,若有個矩陣:

認識矩陣

要指定給 applyMatrix 的話,參數順序是 applyMatrix(a, b, c, d, e, f),例如〈使用向量〉中的這個範例:

也可以改寫為:

可以看到,applyMatrix 會與先前呼叫過的轉換操作累計(上例是 translate),不過實際上,旋轉畫布不必使用 applyMatrix,因為 p5.js 提供了 rotate

applyMatrixtranslaterotate 等,都是改變接下來要繪製的像素位置,而且轉換操作呼叫是可以累計的,初學者在混用多個轉換操作時,也因此容易混淆,例如,如果直接看上例,可能會有些初學者困惑的是,上例為什麼是先寫 translate 再寫 rotate 呢?

你可以想成是先畫了個圓:

circle(d1 / 2, 0, d2);

接著旋轉像素:

rotate(angle); 
circle(d1 / 2, 0, d2);

這時畫面就會是轉了圓,接著移動整個畫布的像素 (width / 2, height / 2) 處:

translate(width / 2, height / 2);
rotate(angle); 
circle(d1 / 2, 0, d2);

也就是說,基本的出發點就是,先畫出圖,再逐一疊加轉換操作。

位移、縮放或者是切變(shear),p5.js 也提供了對應的 translatescaleshearXshearY,不必直接使用 applyMatrix,當然,不只有移動、縮放、切變等這些操作,這是 applyMatrix 存在之目的;另一方面,如果你的計算過程涉及矩陣運算,想以最後運算出來的矩陣做轉換,也可以使用 applyMatrix,認識 applyMatrix,也有助於 translaterotate 等的掌握。