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

p5.js中的translate()函數用於指定在顯示窗口內放置對象的數量。 x參數用於指定左/右平移，y參數用於指定上/下平移。

用法:

translate(x, y, [z])

或者

translate(vector)

參數：此函數接受上述和以下所述的三個參數：

x:此參數存儲左/右平移的值。
y:此參數存儲上/下轉換的值。
z:此參數存儲前進/後退轉換的值。

用另一種語法，我們隻能提供p5向量對象。

以下程序說明了p5.js中的translate()函數：

範例1：本示例使用translate()函數來指定要放置對象的數量。

function setup() { 
      
    // Create Canvas of given size 
    createCanvas(580, 450); 
} 
  
function draw() { 
      
    // Set the background color 
    background(220); 
      
    // Fill the color 
    fill('lightgreen'); 
      
    // Set the border weight 
    strokeWeight(5); 
      
    // Create rectangle 
    rect(10, 10, 400, 300); 
      
    // Translate the rectangle 
    translate(30, 30); 
      
    // Create rectangle 
    rect(10, 10, 400, 300); 
      
    // Translate the rectangle 
    translate(30, 30); 
      
    // Create rectangle 
    rect(10, 10, 400, 300); 
}

輸出：

範例2：本示例使用translate()函數指定在顯示窗口內放置對象的數量。

function setup() { 
      
    // Create Canvas of given size 
    createCanvas(580, 450); 
} 
  
function draw() { 
      
    // Set the background color 
    background(220); 
      
    for(var i=0, j=255; i<255, j>0; i++, j--) { 
        fill(i, j, i); 
    } 
      
    // Set the stroke weight 
    strokeWeight(5); 
      
    // Use translate function 
    translate(width / 2, height / 2); 
      
    translate(p5.Vector.fromAngle(millis() / 1000, 200)); 
      
    // Create rectangle 
    rect(10, 10, 40, 30); 
}

輸出：

參考： https://p5js.org/reference/#/p5/translate

相關用法

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