# 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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://genesis-digital.solsarratea.world/clases/dia-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.