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

resetMatrix() 函數用於將當前矩陣替換為單位矩陣(除對角線為 1 外，所有值都為零的方陣)。當我們使用 applyMatrix() 旋轉、平移和縮放任何圖形圖像時，然後通過應用函數 resetMatrix() 我們可以將圖形更改為其原始形式。

用法:

resetMatrix()

以下是說明 resetMatrix() 函數的示例。

第 1 步：打開在線網頁編輯器 https://editor.p5js.org/。

第二步：編寫如下代碼，運行查看輸出。

範例1：

Javascript


// Set up the function
function setup() {
  
    // Create canvas
    createCanvas(800, 400);
}
  
function draw() {
  
    // Set the background colour
    background(200);
  
    // Set the translate function
    translate(500, 50);
  
    // Set the apply matrix function
    applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
  
    // Set the colour to fill the graphics
    fill('red');
  
    // Set the shape.
    rect(50, 50, 300, 200, 30);
  
    // Now call the reset function
    resetMatrix();
  
    // Set the colour to fill the graphics
    fill('green');
  
    // Set the shape
    rect(50, 50, 300, 200, 30);
}

輸出：

範例2：

Javascript


// Set up the function
function setup() {
  
    // Create canvas
    createCanvas(800, 600);
}
  
function draw() {
  
    // Set the function to rotate
    let step = frameCount % 50;
    let angle = map(step, 10, 60, 0, PI);
    let cos_a = cos(angle);
    let sin_a = sin(angle);
  
    // Set the background color
    background(200);
  
    // Set the translate function
    translate(500, 50);
  
    // Set the apply matrix function
    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);
  
    // Now call the reset function
    resetMatrix();
  
    // Set the colour to fill the graphics
    fill('green');
  
    // Set the shape
    rect(50, 50, 300, 200, 30);
}

輸出：

相關用法

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