p5.js |翻译（）函数

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