Cambia el sistema de coordenadas utilizado para las texturas cuando se aplican a formas personalizadas.
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, se puede lograr el mismo resultado 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>textureMode() cambia el sistema de coordenadas para las coordenadas uv de la textura.
El parámetro mode acepta dos constantes posibles. Si se pasa NORMAL, como en textureMode(NORMAL), entonces las coordenadas uv de la textura se pueden proporcionar en el rango de 0 a 1 en lugar de las dimensiones de la imagen. Esto puede ser útil para usar el mismo código para múltiples imágenes de diferentes tamaños. Por ejemplo, el fragmento de código anterior se podría reescribir de la siguiente manera:
// Set the texture mode to use normalized coordinates. textureMode(NORMAL); <p>// Apply the image as a texture. texture(img);</p> <p>// Draw the rectangle. beginShape();</p> <p>// Top-left. // u: 0, v: 0 vertex(0, 0, 0, 0, 0);</p> <p>// Top-right. // u: 1, v: 0 vertex(30, 0, 0, 1, 0);</p> <p>// Bottom-right. // u: 1, v: 1 vertex(30, 50, 0, 1, 1);</p> <p>// Bottom-left. // u: 0, v: 1 vertex(0, 50, 0, 0, 1);</p> <p>endShape(); </p>De forma predeterminada, mode es IMAGE, lo que escala las coordenadas uv a las dimensiones de la imagen. Llamar a textureMode(IMAGE) aplica el valor predeterminado.
Nota: textureMode() solo se puede usar en el modo WebGL.
Ejemplos
Sintaxis
textureMode(mode)Parámetros
ya sea IMAGE o NORMAL.
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().