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])
or
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, neveropen 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!
