# Vectores y UV

> Crea y separa vectores, mide distancias y ángulos, y mueve, repite, gira, retuerce o curva las coordenadas.

Source: https://albakore.github.io/pyzed/es/shading/nodes/vectors-uv/

Cada ejemplo de esta página se ejecuta después de estas dos líneas y termina enviando un color al nodo Salida:

```python
from pyzed import shading

g = shading.Graph("demo")
```

## Vector

Los vectores son grupos de 2, 3 o 4 números: una posición (x, y), un color (r, g, b) o un color con alfa (r, g, b, a). Estos nodos los crean, separan y miden.

### Componer

*Compose* · `compose` · Vector · `g.compose(...)`

Construye un vector a partir de sus componentes.

Construye un vector a partir de números sueltos: tres valores en un color RGB, dos en un punto. El ajuste `type` elige vec2, vec3 o vec4 (la barra lateral también tiene *Componer vec2* y *Componer vec4*).

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `x` | `float` | `0` |
| `y` | `float` | `0` |
| `z` | `float` | `0` |

| Salida | Tipo |
| --- | --- |
| `vector` | `vec3` |

| Ajuste | Valores | Por defecto |
| --- | --- | --- |
| `type` | `vec2`, `vec3`, `vec4` | `vec3` |

Las entradas siguen el ajuste `type`: `x` e `y` para vec2, hasta `w` para vec4.

**Entradas de la barra lateral**

| Entrada | Qué hace | En Python |
| --- | --- | --- |
| Componer | Construye un vector a partir de sus componentes. | `g.compose(...)` |
| Componer vec2 | Construye un vec2 a partir de x e y. | `g.compose_vec2(...)` |
| Componer vec4 | Construye un vec4 a partir de x, y, z y w. | `g.compose_vec4(...)` |

```python title="Ejemplo"
uv = g.uv()
rgb = g.compose(uv["x"], uv["y"], 0.5)
g.output(g.rgba(rgb, 1.0))
```

### Descomponer

*Decompose* · `decompose` · Vector · `g.decompose(...)`

Los componentes de un vector (x, y, z y w; r, g, b y a para colores).

Separa un vector en sus componentes: `x`, `y`, `z`, `w` (el rojo, verde, azul y alfa de un color).

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `vector` | `T` | `(0, 0, 0, 1)` |

| Salida | Tipo |
| --- | --- |
| `x` | `float` |
| `y` | `float` |
| `z` | `float` |
| `w` | `float` |

```python title="Ejemplo"
c = g.color("#f97316")
parts = g.decompose(c)
g.output(g.rgba(parts["x"], 1.0))
```

### Reordenar

*Swizzle* · `swizzle` · Vector · `g.swizzle(...)`

Elige y reordena componentes: “yx”, “zzz”, “rgb”, “x”…

Elige y reordena componentes con una máscara: `yx` intercambia x e y, `rgb` quita el alfa, `xxx` repite uno. En Python, `puerto.yx` o `puerto.rgb` lo añade por ti.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `vector` | `T` | `(0, 0, 0, 1)` |

| Salida | Tipo |
| --- | --- |
| `result` · resultado | `vec2` |

| Ajuste | Valores | Por defecto |
| --- | --- | --- |
| `mask` | `text` | `yx` |

```python title="Ejemplo"
uv = g.uv()["uv"]
g.output(g.rgba(g.compose(uv.y, uv.x, 0.0), 1.0))
```

### Producto escalar

*Dot* · `dot` · Vector · `g.dot(...)`

El producto escalar de a y b: cuánto apuntan en la misma dirección.

El producto escalar: cuánto apuntan dos direcciones hacia el mismo lado (1 igual, 0 en ángulo recto, −1 opuestas). `p · p` es la longitud al cuadrado.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `a` | `T` | `(1, 0)` |
| `b` | `T` | `(1, 0)` |

| Salida | Tipo |
| --- | --- |
| `result` · resultado | `float` |

```python title="Ejemplo"
p = g.uv()["uv"] - 0.5
d = g.dot(p, p)
g.output(g.rgba(1.0 - d * 4.0, 1.0))
```

### Producto vectorial

*Cross* · `cross` · Vector · `g.cross(...)`

El producto vectorial de dos vec3.

El producto vectorial de dos vectores 3D: una dirección perpendicular a ambos. Sobre todo para trucos de iluminación.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `a` | `vec3` | `(1, 0, 0)` |
| `b` | `vec3` | `(0, 1, 0)` |

| Salida | Tipo |
| --- | --- |
| `result` · resultado | `vec3` |

```python title="Ejemplo"
n = g.cross([1.0, 0.0, 0.0], [0.0, 1.0, 0.0])
g.output(g.rgba(n, 1.0))
```

### Longitud

*Length* · `length` · Vector · `g.length(...)`

La longitud de un vector.

Lo largo que es un vector. La longitud de UV centrado es la distancia al centro: un círculo en un nodo.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `vector` | `T` | `(1, 1)` |

| Salida | Tipo |
| --- | --- |
| `length` · longitud | `float` |

```python title="Ejemplo"
d = g.length(g.centered_uv()["centered"])
g.output(g.rgba(1.0 - d, 1.0))
```

### Distancia

*Distance* · `distance` · Vector · `g.distance(...)`

Lo lejos que están a y b.

A qué distancia están dos puntos. Por defecto `a` es el UV del píxel, así que mide del píxel a `b`.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `a` | `T` | *UV* (contexto) |
| `b` | `T` | `(0.5, 0.5)` |

| Salida | Tipo |
| --- | --- |
| `distance` · distancia | `float` |

```python title="Ejemplo"
d = g.distance(b=[0.5, 0.5])
g.output(g.rgba(g.smoothstep(0.3, 0.0, d), 1.0))
```

### Normalizar

*Normalize* · `normalize` · Vector · `g.normalize(...)`

El vector con longitud 1.

La misma dirección con longitud 1: para direcciones, vectores de luz y reflejos.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `vector` | `T` | `(1, 1)` |

| Salida | Tipo |
| --- | --- |
| `result` · resultado | `T` |

```python title="Ejemplo"
n = g.normalize(g.uv()["uv"] - 0.5)
g.output(g.rgba(g.compose(n.x, n.y, 0.5) * 0.5 + 0.5, 1.0))
```

### Reflejar

*Reflect* · `reflect` · Vector · `g.reflect(...)`

La dirección i reflejada en una superficie orientada a n.

Hace rebotar la dirección `i` en una superficie orientada hacia `n`, como una pelota en una pared.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `i` | `T` | `(1, -1)` |
| `n` | `T` | `(0, 1)` |

| Salida | Tipo |
| --- | --- |
| `result` · resultado | `T` |

```python title="Ejemplo"
r = g.reflect(g.uv()["uv"] - 0.5, [0.0, 1.0])
g.output(g.rgba(g.compose(r.x, r.y, 0.5) + 0.5, 1.0))
```

### Polar

`polar` · Vector · `g.polar(...)`

La distancia y el ángulo del píxel alrededor de center (respeta la proporción): ángulo en radianes (−π..π) y de 0 a 1.

Distancia y ángulo alrededor de un centro: la clave de lo radial, como barridos de radar, gráficos de tarta, rayos de sol y espirales. `angle01` va de 0 a 1 alrededor del círculo.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `uv` | `vec2` | *UV* (contexto) |
| `center` · centro | `vec2` | `(0.5, 0.5)` |

| Salida | Tipo |
| --- | --- |
| `radius` · radio | `float` |
| `angle` · ángulo | `float` |
| `angle01` · angle 0..1 | `float` |
| `polar` | `vec2` |

```python title="Ejemplo"
p = g.polar()
rays = g.step(0.5, g.fract(p["angle01"] * 12.0))
g.output(g.rgba(rays, 1.0))
```

## UV

Los nodos UV cambian **dónde** miran los nodos siguientes, no el color: conecta su salida `uv` a la entrada `uv` (o `p`) de un patrón, un ruido o una forma para moverlo, repetirlo, girarlo o deformarlo.

### Repetición y desplazamiento

*Tiling and offset* · `tiling_offset` · UV · `g.tiling_offset(...)`

uv × tiling + offset: repite y mueve lo que lo use.

Repite y mueve lo que viene después: `tiling` (2, 2) lo muestra dos veces en cada dirección, `offset` lo desplaza.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `uv` | `vec2` | *UV* (contexto) |
| `tiling` · repetición | `vec2` | `(2, 2)` |
| `offset` · desplazamiento | `vec2` | `(0, 0)` |

| Salida | Tipo |
| --- | --- |
| `uv` | `vec2` |

```python title="Ejemplo"
uv = g.tiling_offset(tiling=[4.0, 4.0])
g.output(g.rgba(g.fract(uv["uv"]).x, 1.0))
```

### Desplazar

*Scroll* · `scroll` · UV · `g.scroll(...)`

Mueve uv con el tiempo: uv + speed × time.

Mueve las coordenadas con el tiempo: ponlo antes de un ruido o un patrón para que se desplace como nubes o una cinta transportadora.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `uv` | `vec2` | *UV* (contexto) |
| `speed` · velocidad | `vec2` | `(0.1, 0)` |
| `time` · tiempo | `float` | *Tiempo* (contexto) |

| Salida | Tipo |
| --- | --- |
| `uv` | `vec2` |

```python title="Ejemplo"
uv = g.scroll(speed=[0.1, 0.0])
n = g.fbm(uv["uv"], scale=3.0)
g.output(g.rgba(n, 1.0))
```

### Rotar

*Rotate* · `rotate` · UV · `g.rotate(...)`

Gira uv alrededor de center un ángulo angle (radianes).

Gira las coordenadas alrededor de `center` `angle` radianes (conecta el Tiempo para que gire solo).

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `uv` | `vec2` | *UV* (contexto) |
| `center` · centro | `vec2` | `(0.5, 0.5)` |
| `angle` · ángulo | `float` | `0.5` |

| Salida | Tipo |
| --- | --- |
| `uv` | `vec2` |

```python title="Ejemplo"
uv = g.rotate(angle=g.time()["time"])
s = g.stripes(uv["uv"], count=8.0)
g.output(g.rgba(s, 1.0))
```

### Remolino

*Twirl* · `twirl` · UV · `g.twirl(...)`

Retuerce uv alrededor de center, más cuanto más lejos.

Retuerce las coordenadas alrededor de un centro, más cuanto más lejos: remolinos y portales.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `uv` | `vec2` | *UV* (contexto) |
| `center` · centro | `vec2` | `(0.5, 0.5)` |
| `strength` · intensidad | `float` | `6` |

| Salida | Tipo |
| --- | --- |
| `uv` | `vec2` |

```python title="Ejemplo"
uv = g.twirl(strength=8.0)
c = g.checker(uv["uv"], cells=[8.0, 8.0])
g.output(g.rgba(c, 1.0))
```

### Pixelar

*Pixelate* · `pixelate` · UV · `g.pixelate(...)`

Ajusta uv a una cuadrícula de celdas, para un aspecto pixel art.

Ajusta las coordenadas a una cuadrícula de celdas, así lo que viene después parece pixel art.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `uv` | `vec2` | *UV* (contexto) |
| `cells` · celdas | `vec2` | `(48, 32)` |

| Salida | Tipo |
| --- | --- |
| `uv` | `vec2` |

```python title="Ejemplo"
uv = g.pixelate(cells=[24.0, 16.0])
g.output(g.gradient(g.noise(uv["uv"], scale=4.0)))
```

### Barril

*Barrel* · `barrel` · UV · `g.barrel(...)`

Curva uv como una pantalla CRT; inside es 0 donde el uv curvado sale de la pantalla.

Curva las coordenadas como el cristal de un CRT antiguo. Multiplica el color por `inside` para oscurecer las esquinas que se salen de la pantalla.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `uv` | `vec2` | *UV* (contexto) |
| `amount` · cantidad | `float` | `0.25` |

| Salida | Tipo |
| --- | --- |
| `uv` | `vec2` |
| `inside` · dentro | `float` |

```python title="Ejemplo"
b = g.barrel(amount=0.3)
c = g.checker(b["uv"], cells=[10.0, 8.0])
g.output(g.rgba(c * b["inside"], 1.0))
```

### Caleidoscopio

*Kaleidoscope* · `kaleidoscope` · UV · `g.kaleidoscope(...)`

Refleja uv alrededor de center en segmentos.

Refleja las coordenadas en `segments` porciones alrededor de un centro, como un caleidoscopio.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `uv` | `vec2` | *UV* (contexto) |
| `center` · centro | `vec2` | `(0.5, 0.5)` |
| `segments` · segmentos | `float` | `6` |

| Salida | Tipo |
| --- | --- |
| `uv` | `vec2` |

```python title="Ejemplo"
uv = g.kaleidoscope(segments=8.0)
n = g.noise(uv["uv"], scale=6.0)
g.output(g.rgba(g.palette(n), 1.0))
```

### Voltear

*Flip* · `flip` · UV · `g.flip(...)`

Refleja uv en horizontal, en vertical o en ambos.

Refleja las coordenadas en horizontal (`x`), en vertical (`y`) o en ambas.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `uv` | `vec2` | *UV* (contexto) |

| Salida | Tipo |
| --- | --- |
| `uv` | `vec2` |

| Ajuste | Valores | Por defecto |
| --- | --- | --- |
| `axis` | `x`, `y`, `both` | `x` |

```python title="Ejemplo"
uv = g.flip(axis="y")
g.output(g.gradient(uv["uv"].y))
```

### Repetir

*Repeat* · `repeat` · UV · `g.repeat(...)`

Repite el espacio en celdas alrededor de (0, 0): dibuja una forma y obtén una cuadrícula de ellas. Cell indica en qué celda está el píxel.

Repite el espacio en celdas: dibuja una forma y obtén una cuadrícula entera. `cell` dice en qué celda está el píxel, para dar a cada copia su color.

| Entrada | Tipo | Por defecto |
| --- | --- | --- |
| `p` | `vec2` | *Centrado* (contexto) |
| `cell` · celda | `vec2` | `(0.25, 0.25)` |

| Salida | Tipo |
| --- | --- |
| `p` | `vec2` |
| `cell` · celda | `vec2` |

```python title="Ejemplo"
r = g.repeat(cell=[0.25, 0.25])
d = g.circle(r["p"], radius=0.08)
g.output(g.rgba(g.fill(d), 1.0))
```

**Siempre al día:**

Esta página se genera a partir del catálogo de nodos de `pyzed.shading`, así que los puertos, tipos y valores por defecto son siempre los de esta versión. Cada ejemplo se compila al construir la documentación.

**Ver también:** [Primeros pasos](https://albakore.github.io/pyzed/es/shading/getting-started/) · [La vista Shader](https://albakore.github.io/pyzed/es/shading/shader-designer/) · [Recetas](https://albakore.github.io/pyzed/es/shading/recipes/) · [Grafos de shader en Python](https://albakore.github.io/pyzed/es/shading/shader-graphs/)