# La génesis digital de las formas

Material digital para taller online para CCEBA Media Lab.

Partiendo del artículo “La Base Química de la Morfogénesis” de Alan Turing, referente de la computabilidad, usaremos modelos computacionales para explorar muchas de las formas que hallamos normalmente en la naturaleza y en nuestro día a día. Conocidos como los patrones de Turing, observaremos como los puntos, rayas y curvas aparecen en sistemas que cambian con el tiempo.


# Introducción


# Código de conducta 🌈

Es muy importante crear un espacio seguro entre todes

## Código de conducta : Clases

### ¡Bienvenides!

Buscamos que durante las clases este sea un espacio de contención, de respeto y libre de acoso para todes En fin de poder crear un ambiente distendido, de aprendizaje y seguro.

Actualmente organizamos:

* [Sol Sarratea](mailto:ssarratea@mailbox.org?subject=%5BGitHub%5D%20Source%20Han%20Sans)
* CCEBA Media Lab

### Comportamientos no aceptables

Incluyen:

* Comentarios ofensivos, como por ejemplo, aquellos relacionados con el género, identidad de género, expresión de género, orientación sexual, capacidades físicas, salud mental, apariencia física, etnia o religión.
* Comentarios no deseados sobre las prácticas o elecciones de estilo de vida de una persona, incluyendo aquellos relacionados con alimentación, salud, trabajo, crianza o uso de drogas.
* Uso intencional e incorrecto de los pronombres elegidos o utilización del ‘dead name’1 al referirse a una persona.
* Imágenes o comportamientos sexuales no solicitados, tanto virtuales como presenciales.
* Amenazas.
* Intimidación intencional.
* Atención sexual no solicitada.
* Comunicación privada que no cesa cuando se solicita.
* Publicaciones de comunicaciones privadas que no califican como acoso.

El ‘dead name’ es aquel nombre que se le asignó a una persona al nacer y ya no lo utiliza más.

### Denuncias y consultas

Si te están acosando, notás que otra persona está siendo acosada, ves algún comportamiento no aceptable o tenés cualquier otra inquietud, por favor contactate. Es necesario, y la responsabalidad de todes de garantizar los espacios seguros.

Respetaremos los pedidos de confidencialidad para proteger a las víctimas de acoso.

### Consecuencias

Toda persona a quien se le haya pedido que detenga su comportamiento debe hacerlo inmediatamente.

Si alguien se comporta de manera abusiva o violenta, se le restringira el acceso al resto de las clases e identificándole públicamente como alguien de quien recibieron quejas.

### Créditos y Licencia

Este código de conducta está basado en el [Código de conducta de \[LAS\] de Sistemas ](https://github.com/lasdesistemas/codigo-de-conducta); en el [Sample Slack Code of Conduct](https://gist.github.com/annalee/2cddeff11357c3a8a613583ebca4dc17) de Annalee Flower Horne, el cual a su vez se basa en la [Community Anti-Harassment Policy](http://geekfeminism.wikia.com/wiki/Community_anti-harassment/Policy).


# Quienes somos

### Facilitado por CCEBA Media Lab <a href="#facilitado-por-cceba-media-lab" id="facilitado-por-cceba-media-lab"></a>

El **CCEBA Centro Cultural de España en Buenos Aires** forma parte de la Red de Centros de Cooperación Cultural de la Agencia Española de Cooperación Internacional para el Desarrollo (AECID).

[Más info](http://www.cceba.org.ar/quienes-somos-2)

## Sol Sarratea

Es programadora, especializada en computación gráfica, y artista computacional. Le apasiona construir sistemas complejos a partir de componer procesos simples, usando tecnologías de bajo nivel. Es miembro de la comunidad de livecoding. Sus proyectos son alentados por comunidades de código abierto; aprendizaje alternativo; y por la necesidad de construir una identidad propia.

Algunas de sus participaciones incluyen el C337 – Chaos Computer Club,Alemania; ICLC: International Conference en Live Coding, Holanda; UPDATE Festival, Latvia; PLX, Suecia; KUNE, Dinamarca. Lideró cursos como “Alquimia Digital” en Hyperlink Academy, y dicta workshops introductorios a GLSL en inglés y en español.\
Actualmente se encuentra en Leipzig, Alemania desarrollando un videojuego de realiad aumentada para el departamento de Ciencias Aplicadas de la Universidad de Merseburg.

<figure><img src="/files/yIjYKm3pCJwd78y5n6qg" alt=""><figcaption><p>Alternate Lucidity - Instalación interactiva para Festival KUNE en colaboración con <em>Matei</em> Petrescu </p></figcaption></figure>


# Clases


# Dia 1

Introducción al curso y a las herramientas usadas. Haciendo foco en el uso de cables.gl.

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


# OpCustomShader


# Sintaxis GLSL

Detalle de escritura para interesades en fragment shaders

```glsl
IN vec2 texCoord; // Posición normalizada

// Variables uniformes
// puente entre CPU - GPU permite mapear información-valores externos
// Por ejemplo: el tiempo
uniform float time;


{{MODULES_HEAD}}

void main()
{
  
    /* Declaración de variables
       tipo nombre = valor; */

    // Números reales
    float number_0 = 1.0; // (con el ".0")
    int number_1 = 1;

    // Vectores 
    // 2 dimensiones [_ ,_ ]
    vec2 v2_0 = vec2(0.,1.);
    vec2 v2_1 = vec2(number_0,number_1);

    //3 dimensiones [_ ,_ ,_ ]
    vec3 v3_0 = vec3(0.,0.5,1.);
    vec3 v3_1 = vec3(v2_0,1.);
    vec3 v3_2 = vec3(v2_0,number_0);

    //4 dimensiones [_ ,_ ,_ ,_ ]
    vec4 v4_0 = vec4(0.,0.25,0.5,1.);
    vec4 v4_1 = vec4(v2_0,v2_1);
    vec4 v4_2 = vec4(v3_0,0.);

    // Referenciar la información  de los vectores
    // [r, g, b, a] || [x , y , z , w] 

    float numero_2 = v4_0.r; // es equivalente a v4_0.x
    vec2 v2_2 = v4_0.rg;     // es equivalente a v4_0.xy
    vec3 v3_3 = v4_0.gbr;    // es equivalente a v4_0.yzx
    
    //Las varibales que empiezan con"gl_" son variables built-in de GLSL
    // En cables.gl gl_FragColr es igual a usar outColor
    gl_FragColor = vec4(0.5); // [ (r, g ,b , a) ] con valores entre 0. y 1.
}
```


# Dia 2

Patrones de Turing. Modelos de reacción difusión.

## Cables.gl&#x20;

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

### Links que valen la pena chequear para mejorar el workflow:

{% embed url="<https://cables.gl/docs/0_howtouse/ui_walkthrough/ui_walkthrough>" %}

{% embed url="<https://cables.gl/docs/0_howtouse/keys/keys>" %}

## Patrones de Turing

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

## Patch del día

{% embed url="<https://cables.gl/p/MMP0fi>" %}
Gray-Scott
{% endembed %}

{% embed url="<https://cables.gl/p/3IrMRk>" %}
FitzHugh-Nagumo
{% endembed %}

## Objetivo: explorar sistemas de difusión y reacción-difusión&#x20;

### Actividades prácticas&#x20;

#### Guiadas

1. Introducir el operador Laplaciano\
   -> Calcula el gradiente "tasa de cambio" o derivada de una imagen en todas las direcciones.
2. Ver  shaders para dar color
3. Introducir el  Modelo de Gray Scott.
4. Introducir el  Modelo de FitzHugh-Nagumo

#### A explorar

1. Probar valores distintos en el shader de Difusión
2. Probar distintos valores para el shader de Reacción-difusión
3. Mapear valores de slider a factores externos: sonido, mouse, etc

## Otros Links

{% embed url="<https://www.karlsims.com/rd.html>" %}
Tutorial completo que se usó para las slides
{% endembed %}

{% embed url="<https://mrob.com/pub/comp/xmorphia/index.html>" %}
Para encontrar valored de feed and kill
{% endembed %}


# Material de Lectura

## Turing

{% embed url="<https://luismenasche.github.io/turing/pdf/Morphogenesis.pdf>" %}

## Gray-Scott Model

{% embed url="<https://www.math.wsu.edu/math/faculty/schumaker/Math415/Pearson1993.pdf>" %}

## FitzHugh-Nagumo

{% embed url="<https://arxiv.org/pdf/patt-sol/9401002>" %}

## Otros

{% embed url="<https://www.sci.utah.edu/publications/allen06/Sanderson_JGT_2006.pdf>" %}


# Shader: Difusión Simple

```glsl
uniform sampler2D initTex;
uniform sampler2D prevFrame;
uniform vec2 resolution;
uniform float K0; 
uniform float K1;
uniform float K2;
uniform float bbmix;
uniform float time;

IN vec2 texCoord; 


{{MODULES_HEAD}}

void main()
{
    vec2 pixel = texCoord;
    vec4 init = texture2D(initTex,texCoord);
    vec4 prev = texture2D(prevFrame,texCoord);
    
    vec2 dy = vec2(1.,-1.)*1./resolution.y;
    vec2 dx = vec2(1.,-1.)*1./resolution.x;
    
    vec4 N = texture2D(prevFrame, vec2(pixel.x, pixel.y + dy.y));
    vec4 S = texture2D(prevFrame, vec2(pixel.x, pixel.y + dy.x));
    vec4 E = texture2D(prevFrame, vec2(pixel.x + dx.x, pixel.y));
    vec4 W = texture2D(prevFrame, vec2(pixel.x + dx.y, pixel.y));
    
    vec4 NE = texture2D(prevFrame, vec2(pixel.x + dx.x, pixel.y + dy.x));
    vec4 NW = texture2D(prevFrame, vec2(pixel.x + dx.y, pixel.y + dy.x));
    vec4 SE = texture2D(prevFrame, vec2(pixel.x + dx.x, pixel.y + dy.y));
    vec4 SW = texture2D(prevFrame, vec2(pixel.x + dx.y, pixel.y + dy.y));
    
    
    // Lapalace 
    float lap = 0.0;
    lap += prev.r * K0;
    lap += N.r * K1;
    lap += S.r * K1;
    lap += E.r * K1;
    lap += W.r * K1;
    lap += NE.r * K2;
    lap += NW.r * K2;
    lap += SE.r * K2;
    lap += SW.r * K2;
  
    
    vec4 newColor ;
    newColor.r = prev.r+lap*0.045*texCoord.y;
    newColor.g = prev.g+lap*0.02;
    newColor.b = prev.b+lap*0.05;
    newColor.a = 1.0;
    
   
    outColor = mix( init , newColor, bbmix);
}
```


# Dia 3

Kernels. Crecimiento Laplaciano. Cristalización.

## Cables.gl + difusión

{% embed url="<https://docs.google.com/presentation/d/1pWG4rhAAI9_fVmBF2WLuuvLFT6zYZyBxzjG-6de2FLc/pub?start=false&loop=false&delayms=3000>" %}

## Modelos de crecimiento Laplaciano

{% embed url="<https://docs.google.com/presentation/d/1ljlZDkzy9lOsnGMIOfqOTOML1wtpdF_DA8RAECVYkjk/pub?start=false&loop=false&delayms=3000>" %}

## Patch del día

{% embed url="<https://cables.gl/p/iCD4El>" %}

### Variación del patch del día creado en la clase del 19.08.2024&#x20;

{% embed url="<https://cables.gl/p/TcY24m>" %}

## Objetivo: familiarizarse con la noción de kernel de convolución. Explorar sistemas de cristalización.&#x20;

### Actividades prácticas&#x20;

#### Guiadas

1. Repaso de clases previas y profundización sobre la noción de operador Laplaciano y kernel en procesamiento de imágenes.
2. Introducir cristalización usando advección y potenciales.

#### A explorar

1. Probar distintos valores y condiciones iniciales para el shader de Cristalización
2. Mapear valores de slider a factores externos: sonido, mouse, midi etc
3. Probar distintos potenciales, agregar variables uniformes en el shader de Cristalización&#x20;

## Otros links

{% embed url="<https://jamie-wong.com/2016/08/05/webgl-fluid-simulation/>" %}


# Material de lectura

{% embed url="<https://core.ac.uk/download/pdf/30841042.pdf>" %}

{% file src="/files/19md8ueDTzP5ow8BKUKd" %}


# Dia 4

Lenia. Modelos KT.

## cables.gl + variante reacción difusión + cristalización

{% embed url="<https://docs.google.com/presentation/d/1Po4QtALB3MJN6bketIlKOfSmn7FZZXIYCE25UHXdICo/pub?start=false&loop=false&delayms=3000>" %}

## Lenia

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

## Patch del día

## Objetivo: explorar simulaciones artificiales de vida.&#x20;

### Actividades prácticas&#x20;

#### Guiadas

1. Repaso de clases previas, explorar estados iniciales para dar lugar a las simulaciones-
2. Introducir la simulación de Lenia.
3. Intoducir variaciones de la simulación de Lenia

#### A explorar

1. Probar distintos valores y condiciones iniciales para el shader de Cristalización
2. Mapear valores de slider a factores externos: sonido, mouse, midi etc

## Otros Links

{% embed url="<https://chakazul.github.io/lenia.html>" %}

{% embed url="<https://google-research.github.io/self-organising-systems/particle-lenia/>" %}


# Material de lectura

{% embed url="<https://arxiv.org/pdf/1812.05433>" %}

{% embed url="<https://arxiv.org/pdf/2305.13784>" %}


# Material de consulta y referencia

### Cables.gl

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

### Shaders  - GLSL

{% embed url="<https://lashaderwiki.solsarratea.world/>" %}

{% embed url="<https://www.shadertoy.com/>" %}

{% embed url="<https://thebookofshaders.com/>" %}

### Recursos sobre Morfogenesis

{% embed url="<https://github.com/jasonwebb/morphogenesis-resources>" %}

## Visualización de ecuaciones diferenciales parciales

{% embed url="<https://visualpde.com/>" %}