base de página de texturas

src/index.md

@@ -98,6 +98,7 @@ title: "🍃 jardínBit"
 ### Apariencia
 
 * [[P3D: Iluminación]](/notasP3D/iluminacion.html)
+* [[P3D: Texturas en Mallas]](/notasP3D/texturas.html)
 
 ---
 

src/notasP3D/mallas.md

@@ -233,3 +233,7 @@ Si no, no hay problema, y podemos definir todas las caras como triángulos (`TRI
 ## Codificación
 
 Ya que tenemos todos nuestros elementos - vértices nombrados/numerados y con posición, y caras definidas - podemos pasar a escribirlos en Processing. Como referencia, tenemos la Pirámide de arriba.
+
+# Apariencia: Texturas
+
+[[P3D: Texturas en Mallas]](/notasP3D/texturas.html)

src/notasP3D/texturas.md

@@ -0,0 +1,96 @@
+# P3D: Texturas en Mallas
+
+En el mundo 3D podemos utilizar imágenes de mapa de bits como *texturas* de nuestras mallas.
+
+[[P3D: Mallas]](/notasP3D/mallas.html)
+
+Hay múltiples formas de asignar una imagen como textura de una malla. El sistema de coordenadas UV nos permitirá determinar con precisión qué puntos de nuestra textura corresponden a qué vértices de nuestra malla.
+
+# Coordenadas UV
+
+Se les llaman coordenadas UV a las que nos permiten ubicar puntos en una *textura*. El eje U es el horizontal y comienza en 0 en el borde izquierdo, y el eje V es el eje vertical que comienza en 0 en el borde superior.
+
+![](/img/coordenadas-uv.png)
+
+## Modos: `IMAGE` o `NORMAL`
+
+El valor máximo de cada coordenada UV va a depender del modo que escojamos.
+
+La función para asignarlo es `textureMode( )`, que puede tener alguno de los siguientes dos argumentos:
+
+* `IMAGE`: Las coordenadas UV corresponden a las coordenadas de los pixeles de la imagen original.
+* `NORMAL`: Las coordenadas UV se *normalizan*: la U va de 0 (borde izquierdo) a 1 (borde derecho), y la V de 0 (borde superior) a 1 (borde inferior)
+
+Es recomendable trabajar con el modo `NORMAL` pues nos permite pensar en términos de porcentajes, sin importar las dimensiones de la imagen original:
+
+```java
+// normaliza las coordenadas UV de las texturas
+textureMode( NORMAL ); 
+```
+
+## Wrapping: `CLAMP` o `REPEAT`
+
+Con el modo de *wrapping* indicamos qué queremos que suceda al utilizar coordenadas UV que excedan los límites de la textura. 
+
+La función para asignarlo es `textureWrap( )`, que puede tener alguno de los siguientes dos argumentos:
+
+* `CLAMP`: La textura original solo existe dentro de sus límites, y fuera de ellos se asigna el color más cercano a los bordes
+* `REPEAT`: La textura se repite tanto en el eje U como en V.
+
+En general puede convenir utilizar la modalidad de `REPEAT`:
+
+```java
+// repite las texturas en sus ejes U y V
+textureWrap( REPEAT ); 
+```
+
+## Mapeo de coordenadas
+
+Para utilizar una textura en una malla, necesitamos:
+
+* Indicar una textura de tipo `PImage` o `PGraphics` con la función `texture( )`
+* Asignar a cada vértice, no solo sus coordenadas x,y,z, sino también las coordenadas u,v que le corresponderían de la textura.
+
+A continuación algunos ejemplos donde se ve en acción.
+
+# Ejemplos
+
+## Plano con textura de imagen
+
+En este ejemplo se carga una imagen y se utiliza como textura de un plano en XZ.
+
+Observa la correspondencia entre las coordenadas `x,y,z, u,v` de los cuatro vértices.
+
+```java
+
+```
+
+Importante: la imagen debe estar en el mismo directorio que el sketch.
+
+Aquí más notas sobre cargar imágenes:
+
+[[Imágenes: Abrir, mostrar, leer]](/notas/imagenes-read.html)
+
+## Plano con textura generada (`PGraphics`)
+
+Este ejemplo es similar al anterior, pero con una imagen generada algorítmicamente dentro de un canvas virtual o "capa" de tipo `PGraphics`.
+
+```java
+
+```
+
+Notas sobre capas:
+
+[[Imágenes: Capas y máscaras]](/notas/imagenes-capas.html)
+
+## Cilindro con textura de imagen
+
+Este ejemplo parte de un cilindro tradicional, asignando a cada cara cuadrangular una fracción proporcional de la textura en U. 
+
+Mira qué pasa si cambias el factor que multiplica a la cantidad correspondiente a la coordenada U.
+
+```java
+
+```
+
+[[P3D: Sólidos cilíndricos y cónicos]](/notasP3D/cilindricos-y-conicos.html)