Método p5.js textureWrap()

La función textureWrap() en p5.js se usa para configurar el modo de ajuste de textura global. Se puede usar para establecer el comportamiento de la textura cuando sale de su rango normal. Tiene tres modos:

• El modo CLAMP hace que los píxeles en el borde de la textura se extiendan hasta su límite. Este es el comportamiento predeterminado.
• El modo REPETIR hace que la textura se repita hasta que alcance el límite. 
• El modo ESPEJO funciona de manera similar a REPETIR, pero invierte la textura en cada mosaico nuevo.

REPEAT y MIRROR solo funcionan si el tamaño de la textura es potencia de 2. Los cambios tienen efecto hasta que se realiza la siguiente llamada a la función.

Sintaxis:

textureWrap(wrapX, [wrapY])

Parámetros:

• wrapX: esta es una constante que establece el modo de envoltura de la textura en la dirección x. Puede tener los valores CLAMP, REPEAT o MIRROR. El valor predeterminado es el modo ABRAZADERA.
• wrapY: esta es una constante que establece el modo de envoltura de la textura en la dirección y. Puede tener los valores CLAMP, REPEAT o MIRROR. Es un parámetro opcional.

El siguiente ejemplo ilustra la función textureWrap() en p5.js:

Ejemplo 1: Uso del modo CLAMP para el ajuste de textura.

let img;
  
function preload() {
  img = loadImage('images/gfg.jpg');
}
  
function setup() {
  createCanvas(300, 300, WEBGL);
    
  // Set the texture wrapping mode
  // to CLAMP
  textureWrap(CLAMP);
}
  
function draw() {
  background(0);
  
  let dX = mouseX;
  let dY = mouseY;
  
  let u = lerp(1.0, 2.0, dX);
  let v = lerp(1.0, 2.0, dY);
  
  scale(width / 2);
  
  texture(img);
  
  beginShape();
  vertex(-1, -1, 0, 0, 0);
  vertex(1, -1, 0, u, 0);
  vertex(1, 1, 0, u, v);
  
  vertex(1, 1, 0, u, v);
  vertex(-1, 1, 0, 0, v);
  vertex(-1, -1, 0, 0, 0);
    
  endShape();
}

Producción:

Ejemplo 2: Uso del modo ESPEJO para el ajuste de textura.

let img;
function preload() {
  img = loadImage('images/gfg.jpg');
}
  
function setup() {
  createCanvas(300, 300, WEBGL);
    
  // Set the texture wrapping mode
  // to MIRROR
  textureWrap(MIRROR);
}
  
function draw() {
  background(0);
  
  let dX = mouseX;
  let dY = mouseY;
  
  let u = lerp(1.0, 2.0, dX);
  let v = lerp(1.0, 2.0, dY);
  
  scale(width / 2);
  
  texture(img);
  
  beginShape();
  vertex(-1, -1, 0, 0, 0);
  vertex(1, -1, 0, u, 0);
  vertex(1, 1, 0, u, v);
  
  vertex(1, 1, 0, u, v);
  vertex(-1, 1, 0, 0, v);
  vertex(-1, -1, 0, 0, 0);
    
  endShape();
}

Producción:

Ejemplo 3: Uso del modo REPETIR para el ajuste de textura.

let img;
function preload() {
  img = loadImage('images/gfg.jpg');
}
  
function setup() {
  createCanvas(300, 300, WEBGL);
    
  // Set the texture wrapping mode
  // to REPEAT
  textureWrap(REPEAT);
}
  
function draw() {
  background(0);
  
  let dX = mouseX;
  let dY = mouseY;
  
  let u = lerp(1.0, 2.0, dX);
  let v = lerp(1.0, 2.0, dY);
  
  scale(width / 2);
  
  texture(img);
  
  beginShape();
  vertex(-1, -1, 0, 0, 0);
  vertex(1, -1, 0, u, 0);
  vertex(1, 1, 0, u, v);
  
  vertex(1, 1, 0, u, v);
  vertex(-1, 1, 0, 0, v);
  vertex(-1, -1, 0, 0, 0);
    
  endShape();
}

Producción:

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