# Aesthetic Dynamics

A delta-driven approach to shaders, systems and computational art.

## Brief description <a href="#brief-description" id="brief-description"></a>

During this workshop we will be working with specific [cables.gl](https://cables.gl/)’s patches that will become the playground for the computation and exploration of different systems that evolve in time. We will be working with math concepts, coding GPU-programs and finding personal artistic expressions within.

<figure><img src="/files/vax3ZTKGB8YmEGQQs0BS" alt=""><figcaption><p>Phase Flow</p></figcaption></figure>


# Introduction


# Code of conduct

It is very imortant to create a safe space between all of us.

### Welcome!

We are looking forward to building a space of containment, respect and free from harassment for everyone in order to create a relaxed, learning and safe environment.

Organizational stuff:

* [Sol Sarratea](mailto:ssarratea@mailbox.org)
* UPDATE Festival Team

### Unaccepted behaviour:

Harassment includes:

* Offensive comments related to gender, gender identity and expression, sexual orientation, disability, mental illness, neuro(a)typicality, physical appearance, body size, race, or religion
* Unwelcome comments regarding a person’s lifestyle choices and practices, including those related to food, health, parenting, drugs, and employment.
* Deliberate misgendering or use of ‘dead’ or rejected names
* Gratuitous or off-topic sexual images or behavior in spaces where they’re not appropriate
* Simulated physical contact (e.g. textual descriptions like “*hug*” or “*backrub*”) without consent or after a request to stop.
* Threats of violence
* Incitement of violence towards any individual, including encouraging a person to commit suicide or to engage in self-harm
* Deliberate intimidation
* Sustained disruption of discussion
* Unwelcome sexual attention
* Continued one-on-one communication after requests to cease
* Publication of non-harassing private communication

### Reporting

If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact the admins. They'll respond as promptly as they can.

We will respect confidentiality requests for the purpose of protecting victims of abuse. At our discretion, we may publicly name a person about whom we’ve received harassment complaints, or privately warn third parties about them. We will not name harassment victims without their affirmative consent.

### Consequences

Participants asked to stop any harassing behavior are expected to comply immediately.

If a participant engages in harassing behavior, the admins may take any action they deem appropriate, up to and including expulsion from this slack and identifying the participant publicly as someone about whom we've received complaints.

### Credits and License

This code of conduct is based on Annalee Flower Horne's [Sample Slack Code of Conduct](https://gist.github.com/annalee/2cddeff11357c3a8a613583ebca4dc17), which is in turn based on Geek Feminism's [Community Anti-Harassment Policy](http://geekfeminism.wikia.com/wiki/Community_anti-harassment/Policy). We have adapted the Sample Slack Code of Conduct for our own use under the terms of the [Creative Commons Attribution License](https://creativecommons.org/licenses/by/4.0/).


# About us

## Update Festival

UPDATE is organized by an artist-run organization ASTE ([https://aste.gallery](https://aste.gallery/)) and Liepaja University based Art Research Lab (MPLab, [https://liepu.lv](https://liepu.lv/))

In 2023, the UPDATE Festival will take place from November 21-25. This year’s festival theme is UPDATE. Automatic creativity. The festival’s focus will revolve around creative automation processes in art, bringing together artists and workshop leaders who will reflect on the highest levels of automation, including tools of artificial intelligence used in the creation of art and design, as well as maintaining a healthy routine and process efficiency in creative work. Additionally, there will be discussions about automation processes in art from a historical perspective. The workshop program is designed for on-site participants, and certain workshops and masterclasses will be available both on-site and online.

## Sol Sarratea

<figure><img src="/files/DMMRCgSUwdjBz6DDhZMP" alt="" width="375"><figcaption><p>@PLX Festival 2023</p></figcaption></figure>

Is a computational artist and programmer, with a focus on system design. By weaving different technologies builds digital environments that evolve in time. She enjoys building physical installations, web experiences and performing as a livecoder, coding GPU-programs in real-time to create visuals.

Her practice engages code, networks, and protocols as transformative elements in the intersection of arts and technology resonating in different socio-political landscapes.

For the last couple of years has been teaching introductory courses on making visual arts with GLSL programming. <br>

{% embed url="<https://docs.google.com/presentation/d/e/2PACX-1vS_FNmPQ3nm8LqHm2TTTe-BlKmN-c7dt1wzgLLn0tcqFfif3m4N3lFEAZM35gMxbHXbbU2QJDoVehnQ/embed?start=false&loop=false&delayms=3000&slide=id.g10f823dbbfc_0_200>" %}
Portfolio 2022&#x20;
{% endembed %}

{% embed url="<https://docs.google.com/presentation/d/e/2PACX-1vQIFCCQduFnAzRaj9xIrCCS3Elh78JAdhsRXDun9VVifAL0brmedv1O0QkFKWJFmfJq4waIn8zSIU8v/pub?start=false&loop=false&delayms=3000>" %}
Selected slides from a presentation to mention  the role of code in my work
{% endembed %}


# Organization

## About worshop:

What it is not:

* introductory course on foundations of GLSL.
* advanced formal course of physics-maths.

What are its goals:

* Exploring different ideas, and combined them with creativity.
* Introduce shaders as the medium to compute ideas.
* Use the computer as a convivial tool.
* Create learning community: encourage active participation, sharing thoughts and questions.
* Merge art and science in the creative imaginarium.

### **About the Classes:** <a href="#sobre-las-clases" id="sobre-las-clases"></a>

Under  [Content](/content) you can find the theoretical and practical material for each day.&#x20;

## Feedback

You can either reach in real person, [by email ](mailto:ssarratea@mailbox.org)or [anonymous comments](https://freesuggestionbox.com/pub/oegocxu) for any suggestions/comments on the course.&#x20;


# Content


# Day 1

## Slides <a href="#brief-description" id="brief-description"></a>

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

## Shared Document for collaborative writing

{% embed url="<https://pad.riseup.net/p/UPDATE_Festival>" %}

## Patch of the day

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

## Activities

Using a CustomShader operator to read an incoming texture:

1. How can we change the input texture?
2. How can we change the world view?
3. How can we swapfrom the output texture the rgba channgels for bgra?

Using the output texture in a point cloud:

1. How can we change the world view?
2. How can we change the particles positions as a group? How can we move each particle independently?
3. How can we change the particle size and color?

Further additions:

* Usage of operator for body tracking and translating particles with nose movement.

## Notes

**Cables.gl Documentation**

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

**Are.na channels with bibliographical references**

{% embed url="<https://www.are.na/sol-sarratea/dynamics-ajfosdw6oym>" %}

{% embed url="<https://www.are.na/sol-sarratea/computer-graphics-history-dctglwv0hey>" %}

**List of GLSL Functions**

{% embed url="<https://shaderific.com/glsl.html>" %}

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

**Metric to measure understanding**

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

<br>


# OpCustomShader

Summary of the code written in the fragment shader inside the operator custom shader in our patch of the day

```
#ifdef GL_ES
precision highp float;
#endif

IN vec2 texCoord;

// Incoming texture: we tried video and webcam
uniform sampler2D uTexture0;

// Incoming number values
uniform float uTime;
uniform float uNoseX;
uniform float uNoseY;


{{MODULES_HEAD}}

void main()
{
  
   // 1. We read the incoming texture as a vector 4
   vec4 color = texture2D(uTexture0, texCoord); // [ r, g, b, a] 
   
   
   // 2. We use the coordinates given from the operator to place the particles 
   // in the world space
   vec4 positions = vec4(
       (texCoord.x + uNoseX)*20.-10.,           
       (texCoord.y +uNoseY)*20.-10.,          
       color.r*2.,               
       1.);
  
   
   //3. We write 2 textures
   outColor0 = positions; // Has information of the position of the particles
   outColor1= color;      // Will colorize the particles
   
   outColor2 = vec4(0.);
   outColor3 = vec4(0.);
}
```


# Day 2

## Slides

{% embed url="<https://docs.google.com/presentation/d/e/2PACX-1vR57Gj-FdPYtIRIcf4UgXNO_9-aYuoH88zqhNVp9W_qQds7iCC8flv3ax78XmNuRMSepyLanrNM1Hak/pub?start=false&loop=false&delayms=3000>" %}
Shader Definition
{% endembed %}

##

{% embed url="<https://docs.google.com/presentation/d/e/2PACX-1vSG5vEWQYCY0zSl1LkbUlNY4so7LLsQmdx3HIMSckZNiCKlyVTG3QZvHqNg6q7HhaETb1z2kC4bgc8x/pub?start=false&loop=false&delayms=3000>" %}
Intro to dynamical systems
{% endembed %}

## Shared Document for collaborative writing

{% embed url="<https://pad.riseup.net/p/UPDATE_Festival>" %}

## Patches of the day

New: simulate particle trails with feedback

{% embed url="<https://cables.gl/p/FLEwNK>" %}
Drawing with harmonographs
{% endembed %}

New: Having a textures for initializing and updating positions that will change in time.

{% embed url="<https://cables.gl/edit/Q4m5tL>" %}
Exploring pendulum motions
{% endembed %}

#### Bonus

{% embed url="<https://cables.gl/p/rrwBuL>" %}
Exploring pendulum phase space
{% endembed %}

## Activities

### Goal: bring particle motions into our systems

1. What could trigger different movements, different patterns? Try mapping a external variable: either from Sidebar or any other operator into the movement.
2. How can particles have independent motion?
3. Which other offsets can be added similar to slider: OffsetZ?


# Day 3

## Slides

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

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

## Shared Document for collaborative writing

{% embed url="<https://pad.riseup.net/p/UPDATE_Festival>" %}

## Patch of the day

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

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

### Bonus

{% embed url="<https://cables.gl/p/J9hTKK>" %}
Lorenz Attractor
{% endembed %}

## Activities

**Goal: Design the map of external input to motion and color of current systems**

1. How can we combine colors and textures?
2. What  devices can be used? <https://cables.gl/ops/Ops.Devices>

Referential patches:

* [Audio Classifier](https://cables.gl/edit/rJ0LGl)
* [Sound Machine](https://cables.gl/edit/zubKVf)
* [Color detection](https://cables.gl/edit/vSwLsT)
* [Speech recognition](https://cables.gl/p/9p7kw4)
* [Iterate over images: animation](https://cables.gl/p/NBYREL)
* [Time sequenced](https://cables.gl/p/GbEqL-)

Makey makey references for building physical controllers:

* <https://www.youtube.com/watch?v=o4iTQ7lr2W0>
* <https://www.youtube.com/watch?v=rfQqh7iCcOU&t=62s>

## Aditional Links

{% embed url="<https://neilstrickland.github.io/ordinary_differential_equations/web/linear_2d/index.html>" %}
Second patch of the day's formula
{% endembed %}

{% embed url="<https://neilstrickland.github.io/ordinary_differential_equations/web/phase/index.html>" %}
Many phase portraits
{% endembed %}


# Day 4

## Slides

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

## Shared Document for collaborative writing

{% embed url="<https://pad.riseup.net/p/UPDATE_Festival>" %}

## Patch of the day

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

## Activities

**Goal: Improve how current systems look like**

1. Making composition of colors\&textures in cables.gl
2. Add effects like fog, blur and other effects

## Additional Material

{% embed url="<https://paulbourke.net/fractals/clifford/>" %}

{% embed url="<https://softologyblog.wordpress.com/2009/10/19/3d-strange-attractors/>" %} <br>
{% endembed %}

{% embed url="<https://www.youtube.com/watch?v=AzdpM-vfUCQ>" %}

{% embed url="<https://paulbourke.net/fractals/lyapunov/>" %}


# Additional material

## GLSL - GPU programming

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

{% embed url="<https://iquilezles.org/>" %}

## Intuitive maths

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

## Chaos

{% embed url="<https://hypertextbook.com/chaos/logistic/>" %}

{% embed url="<https://spaceandtim.es/etc/chaos_and_reductionism/>" %}

{% embed url="<https://web.archive.org/web/20000829113446/http://thasos.cc.duth.gr/~mboudour/nonlin.html>" %}
Link of links
{% endembed %}

#### Physical experiments

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

{% embed url="<https://ace.gatech.edu/experiments2/2413/lorenz/fall02/>" %}

{% embed url="<https://botanicamathematica.wordpress.com/2013/03/18/chaotic-knitting/>" %}

{% embed url="<https://www.instructables.com/Visualizing-Chaos-With-the-Double-Pendulum/>" %}


# GLSL Syntax

Further information for people interesting in writing GLSL

## Additional shader example for understanding syntax

```

#ifdef GL_ES
precision highp float;
#endif

IN vec2 texCoord;

// Uniform variables: 
// bridge between  CPU - GPU that allows mapping external information 
// For example: time
uniform float uTime;


{{MODULES_HEAD}}

void main()
{
  
    /* Declaration of variables
       type name = value; */

    // Real numbers
    float number_0 = 1.0; // with dot
    int number_1 = 1;

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

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

    //4 dimensions [_ ,_ ,_ ,_ ]
    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.);

    // Referencing vectors information
    // [r, g, b, a] || [x , y , z , w] 

    float numero_2 = v4_0.r; // is equivalent to v4_0.x
    vec2 v2_2 = v4_0.rg;     // is equivalent to v4_0.xy
    vec3 v3_3 = v4_0.gbr;    // is equivalent to v4_0.yzx

    gl_FragColor = vec4(0.5); // [ (r, g ,b , a) ]  with values in between 0. y 1.
}

```

## Functions to explore

Complete list of functions:&#x20;

* [https://www.shaderific.com/glsl-functions ](<https://www.shaderific.com/glsl-functions >)
* <https://thebookofshaders.com/glossary/>

### FUNCTIONS

#### Trigonometry&#x20;

cos(x)&#x20;

sin(x)

tan(x)

Power pow(x, 0.5) == sqrt(x)&#x20;

pow(x, 1.)&#x20;

pow(x, 2.)&#x20;

pow(x, n) for any n:=number&#x20;

sqrt(x): square root

&#x20;inversesqrt(x) 1./sqrt(x)

#### Exponentials&#x20;

exp(x) : base 10&#x20;

exp2(x): base 2

#### Logarithms&#x20;

log(x) : base 10&#x20;

log2(x) : base 2

#### Geometry&#x20;

length(x): length of a vector in the Euclidean norm.&#x20;

distance(x,y): distance between x and y&#x20;

dot(x,y): inner product between x and y (scalar product)

#### Other&#x20;

abs(x) : absolute value of x. E.g. abs(1)=1, abs(-1)=1&#x20;

sign(x) : sign of x. E.g. sign(1)=1 sign(-1)=0&#x20;

floor(x) : the nearest whole number that is less than x. Ex: floor(3.14) = 3&#x20;

ceiling(x):the nearest integer that is greater than x. Example: ceiling(3.14) = 4&#x20;

fract(x): the fractional part of x. Example: fract(3.14)= .14;&#x20;

min(a,b): minimum value between a and b&#x20;

max(a,b): minimum value between a and b&#x20;

clamp(x, a, b): if `x` is less than `a` returns a, if `x` is greater than `b` returns `b`, otherwise returns `x`.

mod(x, y): returns the remainder of the division of `x divided by` y\`

mix(x, y, a): x\*(1.-a)+y*a*&#x20;

*step(x, a): returns 0 if x <= a, and returns 1 if x > a.*&#x20;

*smoothstep(x,a,b): returns 0 if x\<a, interpolates between 0 and 1 if a\<x<=b, returns 1 if x > b.*&#x20;

*Example for use in function explorer:*&#x20;

*`float y = cos(cos(cos(x`*`x+u_time*.1),1.5)*10.-u_time);`