p5.js translate() function
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() {
createCanvas(580, 450);
}
function draw() {
background(220);
fill( 'lightgreen' );
strokeWeight(5);
rect(10, 10, 400, 300);
translate(30, 30);
rect(10, 10, 400, 300);
translate(30, 30);
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() {
createCanvas(580, 450);
}
function draw() {
background(220);
for ( var i=0, j=255; i<255, j>0; i++, j--) {
fill(i, j, i);
}
strokeWeight(5);
translate(width / 2, height / 2);
translate(p5.Vector.fromAngle(millis() / 1000, 200));
rect(10, 10, 40, 30);
}
|
Output:
Reference: https://p5js.org/reference/#/p5/translate
Last Updated :
17 Aug, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...