La función translate() en p5.js se usa para especificar la cantidad para desplazar objetos dentro de la ventana de visualización. El parámetro x se usa para especificar la traducción izquierda/derecha y el parámetro y se usa para especificar la traducción arriba/abajo.
Sintaxis:
translate(x, y, [z])
o
translate(vector)
Parámetros: esta función acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- x: este parámetro almacena el valor de la traducción izquierda/derecha.
- y: este parámetro almacena el valor de la traducción ascendente/descendente.
- z: este parámetro almacena el valor de la traducción hacia adelante/hacia atrás.
En otra sintaxis, solo podemos proporcionar el objeto vector p5.
Los siguientes programas ilustran la función translate() en p5.js:
Ejemplo 1: este ejemplo utiliza la función translate() para especificar la cantidad de objetos desplazados.
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);
}
Producción:
Ejemplo 2: Este ejemplo utiliza la función translate() para especificar la cantidad de objetos desplazados dentro de la ventana de visualización.
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);
}
Producción:
Referencia: https://p5js.org/reference/#/p5/translate
Publicación traducida automáticamente
Artículo escrito por sarthak_ishu11 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA