p5.js translate() function

0 0 1 minute read

The translate() function in p5.js is used to specify the amount to displace objects within the display window. The x parameter is used to specify the left/right translation and y parameter is used to specify up/down translation.

Syntax:

translate(x, y, [z])

translate(vector)

Parameters: This function accepts three parameters as mentioned above and described below:

x: This parameter stores the value of left/right translation.
y: This parameter stores the value of up/down translation.
z: This parameter stores the value of forward/backward translation.

In another syntax, we can only provide the p5 vector object.

Below programs illustrate the translate() function in p5.js:

Example 1: This example uses translate() function to specify the amount to displace objects.

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); 
} 

Output:

Example 2: This example uses translate() function to specify the amount to displace objects within the display window.

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); 
} 

Output:

Reference: https://p5js.org/reference/#/p5/translate

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!