> For the complete documentation index, see [llms.txt](https://genesis-digital.solsarratea.world/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://genesis-digital.solsarratea.world/clases/dia-1.md).

# Dia 1

## Bienvenides

{% embed url="<https://docs.google.com/presentation/d/e/2PACX-1vRR6klGURVJXjH7gN-adFWJ13CUuFK32o5-AZHwwpqwJZtaAXUGkGT3AsQ9IyiBunEIOIjPSZjXeoCs/pub?start=false&loop=false&delayms=3000>" %}

## Introducción a Cables.gl

Cables.gl es editor online de un lenguaje visual (cajas y conectores) para la generación de contenido audiovisual.

Ventajas: \
\- Encapsula la complejidad de algunos shaders para quienes no desean aprenderlos en profundidad\
\- Es muy fácil de integrar con distintos operadores\
\- Es versátil y es web (no requiere instalaciones, y permite modo multi-usuario para colaborar remotamente)

En cada clase vamos a trabajar en un patch en particular el cual se puede clonar y customizar.

Estructura básica de los patches que usaremos:\
\- Textura base: puede ser texto, webcam, imágen, video, inclusive un shader customizado.\
\- Acción: Un operador personalizado (OpCustomShader) para ejecutar un program sobre la textura base.\
\- Post-Procesamiento: con el operador image compose, o con un shader customizado.

<figure><img src="/files/kPflymFYMcdPGCBULwQs" alt=""><figcaption><p>La semana pasada se convirtió en un proye Open Source :D</p></figcaption></figure>

## Patch del día

{% embed url="<https://cables.gl/edit/cygCah>" %}

{% embed url="<https://docs.google.com/presentation/d/e/2PACX-1vS1njqxa3HG-WcS6cupjeWrjTtlAexLnerlkpoivX8KzJvbyvHNtcWPmrR6ERwW8ri2eyDcbskOb9kl/pub?start=false&loop=false&delayms=3000>" %}

## Objetivo: familiarizarse con cables.gl&#x20;

### Actividades prácticas&#x20;

#### Guiadas

1. Usar el operador ImageCompose para efectos de color
2. Introducir el CustomShader solo como lectura
3. ~~Introducir el operador Laplaciano. Calcula el gradiente "tasa de cambio" o derivada de una imagen en todas las direcciones.~~
4. ~~Ver  shaders para dar color~~&#x20;

#### A explorar

1. Introducir distintas  texturas bases ( videos, webcam, texto, etc)
2. Usar el ImageCompose con al menos 3 operadores distintos.
3. Probar valores distintos en el shader de Difusión

## Adicional2: Para próximo encuentro: elija su pez :p

<figure><img src="https://lh7-rt.googleusercontent.com/slidesz/AGV_vUegjZZtsvAsIIwLzaXWtt3_p8UhQlrj43cCE5t7YrnyiKwmSSsx2KeujtK7T96GOWhCA7GbGQEFIQi002yNL5CpqBidFyzQccoz3nPtXLgapYOlVoQTtsRz9ubgYxMk0mKnATPzk8Me8IfSsapZcy0uKbPPrmZR=s2048?key=ZpmPhzKj4uTVvIeaXcMP2g" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/1si2vmhcC8ByG0QtyeFB" alt=""><figcaption></figcaption></figure>

## Otros Links:

{% embed url="<https://homepages.inf.ed.ac.uk/rbf/HIPR2/log.htm>" %}