Cambia la forma en que las texturas se comportan cuando las coordenadas uv de una forma van más allá de la textura.
Para que texture() funcione, una forma necesita una forma de mapear los puntos de su superficie a los píxeles de una imagen. Las formas incorporadas como rect() y box() ya tienen estos mapeos de textura basados en sus vértices. Las formas personalizadas creadas con vertex() requieren que se pasen los mapeos de textura como coordenadas uv.
Cada llamada a vertex() debe incluir 5 argumentos, como en vertex(x, y, z, u, v), para mapear el vértice en las coordenadas (x, y, z) al píxel en las coordenadas (u, v) dentro de una imagen. Por ejemplo, las esquinas de una imagen rectangular se mapean a las esquinas de un rectángulo por defecto:
// Apply the image as a texture. texture(img); <p>// Draw the rectangle. rect(0, 0, 30, 50); </p>Si la imagen en el fragmento de código anterior tiene dimensiones de 300 x 500 píxeles, el mismo resultado se podría lograr de la siguiente manera:
// Apply the image as a texture. texture(img); <p>// Draw the rectangle. beginShape();</p> <p>// Top-left. // u: 0, v: 0 vertex(0, 0, 0, 0, 0);</p> <p>// Top-right. // u: 300, v: 0 vertex(30, 0, 0, 300, 0);</p> <p>// Bottom-right. // u: 300, v: 500 vertex(30, 50, 0, 300, 500);</p> <p>// Bottom-left. // u: 0, v: 500 vertex(0, 50, 0, 0, 500);</p> <p>endShape(); </p>textureWrap() controla cómo se comportan las texturas cuando sus coordenadas uv van más allá de la textura. Hacerlo puede producir efectos visuales interesantes como el mosaico. Por ejemplo, la forma personalizada anterior podría tener coordenadas u mayores que el ancho de la imagen:
// Apply the image as a texture. texture(img); <p>// Draw the rectangle. beginShape(); vertex(0, 0, 0, 0, 0);</p> <p>// Top-right. // u: 600 vertex(30, 0, 0, 600, 0);</p> <p>// Bottom-right. // u: 600 vertex(30, 50, 0, 600, 500);</p> <p>vertex(0, 50, 0, 0, 500); endShape(); </p>Las coordenadas u de 600 son mayores que el ancho de la imagen de textura de 300. Esto crea posibilidades interesantes.
El primer parámetro, wrapX, acepta tres constantes posibles. Si se pasa CLAMP, como en textureWrap(CLAMP), los píxeles en el borde de la textura se extenderán hasta los bordes de la forma. Si se pasa REPEAT, como en textureWrap(REPEAT), la textura se repetirá en mosaico hasta alcanzar los bordes de la forma. Si se pasa MIRROR, como en textureWrap(MIRROR), la textura se repetirá en mosaico hasta alcanzar los bordes de la forma, volteando su orientación entre los mosaicos. Por defecto, las texturas se ajustan a CLAMP.
El segundo parámetro, wrapY, es opcional. Acepta las mismas tres constantes: CLAMP, REPEAT y MIRROR. Si se pasa una de estas constantes, como en textureWRAP(MIRROR, REPEAT), entonces la textura se MIRROR horizontalmente y se REPEAT verticalmente. Por defecto, wrapY se establecerá en el mismo valor que wrapX.
Nota: textureWrap() solo se puede usar en el modo WebGL.
Ejemplos
Sintaxis
textureWrap(wrapX, [wrapY])Parámetros
ya sea CLAMP, REPEAT o MIRROR
ya sea CLAMP, REPEAT o MIRROR
Referencias Relacionadas
copyToContext
Copia el shader de un contexto de dibujo a otro.
setUniform
Establece los valores de las variables uniformes (globales) del shader.
ambientMaterial
Establece el color ambiental del material de la superficie de las formas.
createFilterShader
Crea un objeto p5.Shader para ser utilizado con la función filter().