p5.js applyMatrix()用法及代碼示例

p5.js 中的 applyMatrix() 函數用於將作為參數給出的矩陣與當前矩陣相乘。這可用於同時執行平移、縮放、剪切和旋轉操作。這是一個強大的操作，可用於輕鬆操縱場景中的對象。

用法:

applyMatrix(a, b, c, d, e, f)

參數：該方法有六個參數，如上所述，如下所述：

a:它是一個定義要相乘的 2×3 矩陣的數字。
b:它是一個定義要相乘的 2×3 矩陣的數字。
c:它是一個定義要相乘的 2×3 矩陣的數字。
d:它是一個定義要相乘的 2×3 矩陣的數字。
e:它是一個定義要相乘的 2×3 矩陣的數字。
f:它是一個定義要相乘的 2×3 矩陣的數字。

以下示例演示了 p5.js 中的 applyMatrix() 函數：

範例1：在本例中，矩陣用於將矩形旋轉某個角度。

Javascript


function setup() {
  createCanvas(800, 600);
}
  
function draw() {
  
  let step = frameCount % 50;
  
  // Calculate the angle and the 
  // sin and cos values
  let angle = map(step, 10, 60, 0, PI);
  let cos_a = cos(angle);
  let sin_a = sin(angle);
  
  // Set the background colour
  background(200);
  
  // Translate the elements
  translate(500, 50);
  
  // Use applyMatrix() to multiply using
  // the given values
  applyMatrix(cos_a, sin_a,
                -sin_a, -cos_a,
              0, 0);
  
  // Set the colour to fill the graphics
  fill("red");
  
  // Set the shape
  rect(50, 50, 300, 200, 30);
}

輸出：

範例2：在本例中，矩陣用於轉換 2D 圖像。

Javascript


function setup() {
    
  // Create canvas
  createCanvas(800, 600);
    
  // Set the frame rate
  frameRate(20);
}
  
function draw() {
    
  let step1 = frameCount % 15;
  let step2 = frameCount % 50;
  
  fill('lightgreen');
  background(200);
    
  // Apply matrix transform equivalent
  // to translate(x, y)
  applyMatrix(1, 0, 0, 1, 300 + step1, 50);
    
  // Set a shape to be used
  ellipse(56, 46, 185, 185);
    
  fill('red');
    
  // Apply matrix transform equivalent
  // to translate(x, y)
  applyMatrix(1, 0, 0, 1, 100 + step2, 50);
    
  // Set the shape to be used
  rect(30, 20, 50, 50);
}

輸出：

範例3：在此示例中，矩陣用於縮放 2D 圖像。

Javascript


function setup() {
  // Create canvas
  createCanvas(800, 600, WEBGL);
  
  // Set the frame rate
  frameRate(20);
}
  
function draw() {
  let step1 = frameCount % 10;
  let step2 = frameCount % 20;
  
  fill("lightgreen");
  background(200);
  
  // Apply matrix transformation 
  // equivalent to translate(x, y)
  applyMatrix(1 / step1, 0, 0, 1 / step1, 0, 0);
  
  // Set the shape to be used
  ellipse(185, 185, 185, 185);
  
  fill("red");
  
  // Apply matrix transformation 
  // equivalent to scale(x, y)
  applyMatrix(1 / step2, 0, 0, 1 / step2, 0, 1 / step2);
  
  // Set the shape to be used
  rect(30, 20, 100, 100);
}

輸出：

範例4：在本例中，矩陣用於旋轉圖形。

Javascript


function setup() {
  createCanvas(400, 400, WEBGL);
  noFill();
}
  
function draw() {
  background(200);
  
  // Rotate the box
  rotateX(PI / 2);
  rotateY(PI / 8);
  
  stroke(153);
  box(35);
  
  let rad = millis() / 500;
  
  // Set rotation angle
  let ct = cos(rad);
  let st = sin(rad);
  
  // Apply matrix for rotation 
  applyMatrix(  ct, 0.0,  st,  0.0,
               0.0, 1.0, 0.0,  0.0,
               -st, 0.0,  ct,  0.0,
               0.0, 0.0, 0.0,  1.0);
  
  stroke(255);
  box(100);
}

輸出：

相關用法

注：本文由純淨天空篩選整理自_sh_pallavi大神的英文原創作品 p5.js applyMatrix() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。