Tutorial 2 – #tinycode controlando el tiempo

Este tutorial, de una serie de ellos, pretende servir de apoyo para la convocatoria #tinycode que está activa hasta el 12 de Diciembre de 2020. El mismo día que termina proyectaremos estos pequeños sketches hechos con Processing que caben en un tweet en la fachada digital de Medialab Prado (Madrid). Aquí podrás encontrar más info sobre la convocatoria. Anímate y participa! Happy tinycoding! 😉

En la mayoría de las animaciones se usa una variable para simular el paso del tiempo. Esa variable se incrementa en cada frame y se emplea para colocar los objetos en la pantalla, aplicar efectos, etc. Normalmente, la variable siempre se incrementa la misma cantidad, pero si en cada frame el incremento es variable podemos obtener efectos muy interesantes con muy poco código.

Partimos de este sketch:

//Color palette from Color Hunt: https://colorhunt.co/palette/220248
float t;

void setup() {
  size(360, 360);
  fill(#f05454);
  stroke(#e8e8e8);
  strokeWeight(3);
}

void draw() {
  t+= 0.015;
  background(#222831);
  circle(180 + cos(t)*120.0, 180 + sin(t)*120.0, 35);
}

El código pinta un círculo que gira alrededor del centro de la pantalla a una velocidad constante. Cuanto mayor sea el valor que sumamos, más rápido se moverá el círculo (el ángulo se mide en radianes, así que tened en cuenta que 6.28 o π*2 es una vuelta completa, en vez de 360º. Si el tema radianes no te queda muy claro, en esta página encontrarás una animación que te puede ayudar)

En este caso, la variable que simula el paso del tiempo es t (en la línea 12), y se incrementa en 0.015 en cada frame. Es un valor totalmente arbitrario que me parecía adecuado para el sketch. No hay valores correctos ni incorrectos, todo depende del efecto que queramos lograr. Para otros casos puede ser mucho mayor o más pequeño, o ser una expresión más complicada.

En los siguientes ejemplos solo vamos a cambiar esa línea y ver qué resultados obtenemos.

Avance aleatorio

Podemos hacer que el tiempo avance a tirones, añadiendo a cada frame 0.015 y restando una cantidad al azar entre 0 y 0.02.

t+= 0.015 - random(2)/100.0;

El avance puede ser más suave si usamos noise. Para conseguir comportamientos más complejos, usamos frameCount, una variable interna de Processing que aumenta automáticamente de uno en uno cada vez que se pinta un frame.

t+= noise(frameCount/75.0)/12.0;

Y con los parámetros adecuados, podemos retroceder en el tiempo (a partir del segundo 8)

t+= noise(frameCount/65.0)/15.0 - 0.03;

Avance controlado

En vez de depender de funciones aleatorias, podemos usar funciones con una salida predecible.

t+=0.015 + sin(frameCount/75.0)/10.0;

En cada paso, además de sumar 0.015, añadimos un valor que oscila regularmente entre -0.1 y 0.1. En total, el avance del tiempo variará entre -0.085 y 0.115.

Si no queremos retroceder en el tiempo, añadimos la función abs. Esta función devuelve el valor absoluto del número que le pasemos como parámetro.

t+= 0.015 + abs(sin(frameCount/75.0)/10.0);

Con la función exp podemos simular un acelerón rápido seguido de un frenado gradual.

t += exp(-frameCount%100/20.0)/10.0;

Y con una función similar, pow, tendremos una aceleración y frenado más gradual.

t += pow(sin(frameCount/33.0), 4)*0.1;

¡Recuerda! Si haces algo raro, bonito, interesante o glitchy, y te cabe en un tuit, compártelo con el hashtag #tinycode y citando a @CCodeMadrid. Y si controlas el paso del tiempo de otra manera, cuéntanoslo y la incluimos en esta recopilación.

Juan Alonso (@kokuma) – Diciembre 2020

Tutorial 1 – #tinycode paso a paso

Este tutorial, de una serie de ellos, pretende servir de apoyo para la convocatoria #tinycode que está activa hasta el 12 de Diciembre de 2020. El mismo día que termina proyectaremos estos pequeños sketches hechos con Processing que caben en un tweet en la fachada digital de Medialab Prado (Madrid). Aquí podrás encontrar más info sobre la convocatoria. Anímate y participa! Happy coding! 😉

Cuando descubrí este tuit me quedé hipnotizado por el movimiento de los tentáculos. El movimiento que consigue @Hau_kun es muy fluido y natural, y lo ha logrado con un código relativamente sencillo.

Vamos a construir este sketch paso a paso, desde cero, para entender cómo funciona e incorporar alguna de sus técnicas y trucos a nuestro repertorio.

Sólo necesitamos unos conocimientos básicos de Processing (variables y bucles) y saber cómo funciona el «Perlin noise«. Hay un video estupendo de The Coding Train donde Daniel Shiffman explica en detalle cómo funciona y cómo usarlo.

Si modificas el sketch original, comparte los resultados con nosotros publicando el código en Twitter, con el hashtag #tinycode y citando a @CCodeMadrid

El proceso

1- El canvas

Creamos un canvas de 720 x 720, y en cada frame, lo primero, borramos su contenido.

void setup() {
  size(720, 720);
}
void draw() {
  background(0);
}

2- El tentáculo (I)

Empezamos con un tentáculo. Lo pintamos empezando desde el centro del canvas (720/2 = 360) El tentáculo está formado por 50 círculos de radio 5, separados 7 píxeles.

void setup() {
  size(720, 720);
}
void draw() {
  background(0);
  float x = 360;
  float y = 360;
  for (float d=0; d<50; d++) {
    circle(x, y, 5);
    x += 7;
  }
}

3- El tentáculo (II)

Vamos a variar el diámetro de los círculos, y desplazarlos para que tampoco estén a la misma distancia. Para ello aprovechamos la variable d.

Para variar el diámetro de momento usamos un map . Cuando d pasa de 0 a 50, el diámetro cambiará de 20 a 0. Así pintaremos círculos grandes en el centro y más pequeños en el extremo, imitando la forma de un tentáculo.

Para variar la distancia usamos otro map, en este caso variando de 5 a 10, para que los círculos de los extremos estén más alejados entre si. Luego nos cargaremos esta parte.

void setup() {
  size(720, 720);
}
void draw() {
  background(0);
  float x = 360;
  float y = 360;
  for (float d=0; d<50; d++) {
    circle(x, y, map(d,0,50,20,0));
    x += map(d,0,50,5,10);
  }
}

4- Primera reducción y un efecto

Si quitamos espacios y ponemos todo en una línea estamos ya en 153 caracteres, un 54% del espacio total y ni siquiera estamos animando nada. Empezamos a reducir el código, tratando –de momento– de mantener la legibilidad.

Lo primero que podemos hacer es mover todas las declaraciones a una misma línea. Además, como x e y empiezan valiendo lo mismo, podemos compactar la asignación.

En vez de background(0), podemos usar clear(), que es casi lo mismo y nos ahorra algunos caracteres. Y de paso, eliminamos los map, sustituyéndolos por las correspondientes fórmulas matemáticas. Hemos bajado a 122 caracteres, el 43%, sin perder demasiada legibilidad.

De paso, añadimos blendMode(DIFFERENCE) para que se invierta el color de la superposición de los círculos (Si pinto sobre negro lo hago en blanco, si pinto sobre blanco, lo hago en negro). Aunque en el código original blendMode aparece dentro de la función draw(), por mi paz mental lo he movido a setup(), ya que realmente no hace falta llamarlo en cada fotograma.

float d, x, y;
void setup() {
  size(720, 720);
  blendMode(DIFFERENCE);
}
void draw() {
  clear();
  x = y = 360;
  for (d=.5; d>0; d-=.01) {
    circle(x, y, d*40);
    x += (1-d)*5+4;
  }
}

5- Movimiento en un eje

Vamos con el movimiento. Para ello, necesitamos una variable t que simule el paso del tiempo y aumente un poco en cada iteración. Empezamos extendiendo y contrayendo el tentáculo en el eje x. Para que el movimiento sea fluido, llamamos a la función noise En este caso, la reescalamos entre -15 y 15 y la usamos para modificar la posición de cada círculo. En cada iteración la llamamos 50 veces, pero sumamos el valor de t, de tal manera que en la primera vuelta noise nos devuelve 50 valores entre 0.5 y 0, la segunda entre 0.505 y 0.005, la tercera entre 0.510 y 0.010… Así garantizamos que tanto la posición de los círculos como su animación es fluida y continua.

float t, d, x, y;
void setup() {
  size(720, 720);
  blendMode(DIFFERENCE);
}
void draw() {
  clear();
  t+=.005;
  x = y = 360;
  for (d=.5; d>0; d-=.01) {
    circle(x, y, d*40);
    x += (noise(d+t)-.5)*30;
  }
}

6- Movimiento en dos ejes

Repetimos el paso anterior, pero ahora con el eje y. Para que los valores no sean los mismos que los del eje x, pasamos otras coordenadas a la función noise. El autor ha usado 9 como punto de partida, pero cualquier otro número valdría.

float t, d, x, y;
void setup() {
  size(720, 720);
  blendMode(DIFFERENCE);
}
void draw() {
  clear();
  t+=.005;
  x = y = 360;
  for (d=.5; d>0; d-=.01) {
    circle(x, y, d*40);
    x += (noise(d+t)-.5)*30;
    y += (noise(d+t,9)-.5)*30;
  }
}

7- Y ahora ¡con más tentáculos!

Añadir más tentáculos es sorprendentemente simple: basta con meter el bucle que pinta el tentáculo (el que modifica la variable d) dentro de otro bucle, que se repetirá tantas veces como tentáculos queramos –9 en este caso, asignado a la variable i– y añadir i a la función noise como una tercera coordenada.

Aunque i es un entero, lo declaramos como float, para ahorrarnos los caracteres extra que supondría una declaración de tipo int i;

float t, i, d, x, y;
void setup() {
  size(720, 720);
  blendMode(DIFFERENCE);
}
void draw() {
  clear();
  t+=.005;
  for (i=0; i<9; i++) {
    x=y=360;
    for (d=.5; d>0; d-=.01) {
      circle(x, y, d*40);
      x += (noise(i, d+t)-.5)*30;
      y += (noise(i, d+t,9)-.5)*30; 
    }
  }
}

8- Segunda reducción

En esta segunda reducción metemos la asignación de x e y dentro del circle, y quitamos todos los espacios y saltos de línea innecesarios (dejo un salto de línea por legibilidad), quedándonos en unos holgados 206 caracteres, así que lo mismo es interesante volver a los espacios y saltos de línea 😅.

float t,i,d,x,y;void setup(){size(720,720);blendMode(DIFFERENCE);}void draw(){clear();t+=.005;
for(i=0;i<9;i++){x=y=360;for(d=.5;d>0;d-=.01){circle(x+=(noise(i,d+t)-.5)*30,y+=(noise(i,d+t,9)-.5)*30,d*40);}}}

Trucos y técnicas empleadas

💡Agrupa todas las declaraciones en una línea, y usa variables del mismo tipo (todas float o todas int)

float t, i, d, x, y;

💡Usa los operadores ++, +=, … siempre que sea posible.

t+=.005;
...
i++
...
x+=(noise(i,d+t)-.5)*30

💡Para conseguir un movimiento fluido y que tenga continuidad entre fotogramas, usa la función noise.

x+=noise(d+t)*30

💡Usa clear() en vez de background(0)

clear();

💡Agrupa las asignaciones.

x=y=360;
circle(
  x+=(noise(i,d+t)-.5)*30,
  y+=(noise(i,d+t,9)-.5)*30,
  d*40)

¡Recuerda! Si haces algo raro, bonito, interesante o glitchy, y te cabe en un tuit, compártelo con el hashtag #tinycode y citando a @CCodeMadrid

Juan Alonso (@kokuma) – Noviembre 2020

Call for #tinycode sketches

en colaboración con Medialab Prado, y en ocasión del Processing Community Day @ Madrid – 2020 

[ english text below ]

organizamos una:

call for #tinycode sketches

envíanos tu código de programación creativa de menos de 256 caracteres y lo proyectaremos en los 192 x 157 pixels de la fachada digital de Medialab Prado el 12 de diciembre 2020.

para participar:

  1. Crea tu código en p5js / processing* en menos de 256 caracteres.
  2. Asegurate que pueda funcionar con la resolución de la fachada digital de Medialab Prado – Madrid (192 x 157 pixels)
  3. Publicalo en un tweet con el hashtag #tinycode y menciona a nuestra cuenta @CCodeMadrid
  4. Si quieres, publicalo también en tu web y/o en plataformas como openprocessing o p5js-editor y escíbenos a:
    info (at) creativecodingmadrid (punto) com 

tienes hasta el 11 de diciembre !

*  si prefieres utilizar otro entorno de programación adelante !


 
sábado 12 de diciembre
en Medialab Prado y/o Streeming
a las 17.00 horas

tinycode meet-up 

charla informal sobre el proceso de creación en modalidad tinycode con la participación de Naoto Hiéda @naoto_hieda

a las 18.30 horas

proyección en la fachada digital

Plaza de las letras – 28014 Madrid
(y en video streaming)
 

 
recursos:
Aquí puedes encontrar documentación técnica sobre las características de la fachada digital.
En programalaplaza.medialab-prado.es  hay un editor para simular la proyección en la fachada y un primer ejemplo  
Naoto Hieda (@naoto_hieda) ha creado una herramienta web ad-hoc para la convocatoria en la que tiene contador de caracteres y minimiza el código para quitar espacios y añade el hashtag #tinycode y mención a la cuenta de Creative Coding Madrid. (gracias!)
 
Estamos preparando unos talleres on-line sobre técnicas de programación tinycode que anunciaremos pronto, mientras tanto podrás consultar:

english text
in collaboration with Medialab Prado and as part of the Processing Community Day @ Madrid 2020
 
we are glad to announce a
 

Call for #tinycode sketches

tweet your creative code in less than 256 chars and we will display-it on the media façade at Medialab Prado on saturday, december the 12th.
 
to participate:
 
  1. write your code using p5js / processing * in less than 256 chars
  2. make sure that it could work on the 192 by 157 pixels of the media façade
  3. tweet it on your account tagged as #tinycode and don’t forget to mention @CCodeMadrid
  4. if you wish so, publish your code on your web site and / or on a platform like openprocessing, p5js editor … and send us the url at info (at) creativecodingmadrid (dot) com
 
before december the 11th
* feel free to use the coding platform you prefer
 

 
Saturday December the 12th
at Medialab Prado and web streaming
 
17.00 CET

tinycode meet-up

an informal talk about our experience in tinycode writing with our guest Naoto Hiéda @naoto_hieda
 
18.30 CET

public screening on the media façade

Plaza de las letras – 28014 Madrid
(and video streaming)
 

 
resources:
Here you can find technical documentation about the characteristics of the digital facade.
In programalaplaza.medialab-prado.es there is an editor to simulate the projection on the facade and a first example  
Naoto Hieda (@naoto_hieda) has developed an ad-hoc web editor for minifying+counting a tiny sketch. Currently it automatically appends #tinycode @CCodeMadrid to make it easier. (Thanks!)
 
We are preparing some on-line workshops on tinycode programming techniques that we will announce soon, in the meantime:

Galería recode

Durante el confinamiento del COVID tuvimos que suspender nuestras actividades presenciales. Pero un día hablando por el grupo de Telegram surgió una iniciativa inspirada en el proyecto re-code el cual pretende preservar piezas del Computer Art de los 70s traduciéndolas a un lenguaje moderno como Processing. En este caso hemos extendido la propuesta a otras corrientes como el arte óptico, el arte conceptual, Bauhaus, etc. La intención es traducir a código aquellas obras artísticas que sean programables (patrones, aleatoriedad, geometría) y aprender en el proceso tanto de el/la artista como del reto de programarlo. Cada participante ha elegido alguna pieza de figuras pioneras de diferentes corrientes artísticas y la ha interpretado en Processing.

Puedes ver el código, la recreación y un texto pulsando en cada elemento.

captura del resultado visual del código que reinterpreta la obra wall drawing 1136 de Sol Lewitt. En ella aparecen lineas y curvas de una serie de colores saturados.

Sol Lewitt, Wall Drawing #1136 (2004)

Reinterpretación generativa del Wall Drawing 1136 de Sol Lewitt realizada con p5.js por Julián Pérez. Haz click en la imagen! Es generativa 💫 Las obras de Sol Lewitt, concretamente las ...
Leer Más

Dick Land and Dan Cohen, Flowers (1978)

Una "traducción" a p5js de la obra de Dick Land and Dan Cohen. Flowers apareció publicado en la portada del volumen 3 de "Computer Graphics and Art" en Mayo de ...
Leer Más

Emma Kunz, Work no.117 (ca. 1950)

Versión realizada con p5.js de la obra "Work no.117" de Emma Kunz, realizada por Julián Pérez. Mueve el ratón por el sketch para modificar diferentes parámetros 🐭 Emma Kunz (1892-1963) ...
Leer Más
AlbertoAriza recodes "Geometric Komposition"

Richard Paul Lohse, Geometric Komposition (ca. 1940)

Recreación y evolución de la obra de Richard Paul Lohse, "Geometric Komposition"; por Alberto G. Ariza. Sketch generativo, realizado en p5.js y que cambia mediante el clic del usuario. Lo ...
Leer Más
Double Tent - Paul Klee

Paul Klee, Double Tent (1923)

Recreación y evolución del cuadro Double Tent de Paul Klee por Carles Gutiérrez. El cuadro original está hecho con técnica de Acuarela y lápiz sobre papel, cortado y recién combinado, ...
Leer Más
Beethoven poster by Josef-Müller Brockmann

Josef Müller-Brockmann, Beethoven poster (1955)

Reinterpretación del cartel Beethoven para la Zurich Town Hall de Josef Müller-Brockmann realizada en p5js entre Silvia Teixeira, Carles Gutiérrez y Alex Muñoz. Haz click para interactuar con los arcos ...
Leer Más

Pablo Palazuelo, Miniscrit (1990)

Recoding realizado por Dart (Javi F Gorostiza) del óleo del artista. En cada ejecución las figuras que salen en cada línea son aleatorias tanto en forma, tamaño como posición. Al ...
Leer Más
VeraMolnar Des-Ordres

Vera Molnar, (Dés)Ordres (1974)

Recreación bastante literal de la obra de Vera Molnar "(Dés)Ordres" Vera Molnar tiene trabajos que giran alrededor de la repetición de formas matemáticas, de como se alejan de la "perfección" ...
Leer Más

Lygia Pape, Livro do Tempo (1963)

Recreación de la obra "Livro do Tempo" (1961-63) de la artista brasileña Lygia Pape. La obra original consiste en 365 bloques de madera, con una "gramática" de colores y formas ...
Leer Más

Aaron Marcus, Cybernetic Landscapes (1973)

A comienzos de los años 70 Aaron Marcus ya se pegaba con algunos de los primeros ordenadores gráficos intentando ver qué mas podían dar de asi . Esta pieza está ...
Leer Más

Aaron Marcus, Evolving Gravity II (1974)

Una de las piezas más conocidas de Aaron Marcus. La elegí por su sencillez de elementos. La pieza original que encontré es una imagen estática y decidí simplemente generarla secuencialmente ...
Leer Más

Luis Caruncho, Cuadro infinito nº 4 (1989)

Fiel al constructivismo de la vanguardia de 1950, Luis Caruncho poseía una pasión innata por la geometría provista de colorido, con variaciones interminables, en busca de un cuadro infinito. El ...
Leer Más

Disclaimer: las piezas recopiladas en esta galería se consideran obras derivadas de diferentes artistas y en ningún caso tratan de reproducir las obras originales. La intención no es otra que la divulgación artística y difusión de la comunidad.

Buscamos propuestas: Processing Community Day 2020 (pospuesto)

Evento pospuesto debido la suspensión de actividades por la pandemia del coronavirus. Avisaremos de nuevas fechas cuando sea posible

El año pasado, siguiendo la ola mundial, organizamos el Processing Community Day de Madrid. Este año queremos hacerlo aún mas divertido e interesante. Medialab-Prado nos vuelve a dejar espacio para organizarlo el día 25 de abril ( Sábado)

Nos gustaría recibir propuestas de todo tipo para conocernos y estrechar lazos entre toda la comunidad de creative coding local.

Nos encanta anunciar que tenemos ya confirmada la presencia de dos ponentes estelares: Alba G. Corral  y  Jaime Munariz   

Si tienes algo que ofrecer, ¡anímate a participar!. Pese al nombre, no sólo se aceptan propuestas centradas en Processing, sino que ampliamos la llamada a cualquier uso creativo de la programación.

Envíanos un primer resumen usando el siguiente formulario.

Fecha máxima de recepción de propuestas: 10 de Marzo

[ninja_forms id=3]

Viernes 21 de Junio. Solsticio de verano. San Juan LEDista

Para el encuentro de verano hemos preparado un plan al fresco. En Medialab-prado nos dan espacio y acceso a su fachada led para programar nuestros proyectos.

Os animamos a participar con el siguiente plan

Viernes 21 de Junio.

Prepara tus visuales de San Juan para la fachada de Medialab-prado

https://www.medialab-prado.es/actividades/solsticio-de-verano-san-juan-ledista

18.00-22.00 Preparación de proyectos. 

  • Expertos y novatos pueden traer de casa sus proyectos o trabajarlos durante estas 4 horas. Los requisitos para poder hacer un proyecto para la fachada se explican mas abajo.
  • Tema: Tradiciones de la noche de san Juan. El verano. El solsticio. 
  • Lugar: Patio interior de Medialab-prado

22.00-23.00 Muestra de proyectos al fresco. Sentaditos en la plaza disfrutaremos del arte propio y ajeno y celebramos la llegada del verano.

Extra: Proyectos para la fachada de medialab

La fachada de Medialab-prado es como una game boy pero gigante. Puedes programar tus proyectos en javascript con P5.js o Three.js usando: http://programalaplaza.medialab-prado.es 

O puedes hacerlos con tu software favorito siguiendo la documentación que hay aquí:

Lo principal es que tu código esté preparando para funcionar pintando a 192×157 pixels. El resto seguramente podamos ayudarte el día 21.

Puedes ver como quedan los proyectos aquí:

OSC SPRING JAM

OSC (Open Sound Control) es un protocolo de comunicación estandarizado en el mundo de la música y la programación creativa, que permite enviar datos entre programas y/o diferentes dispositivos conectados en la misma red de una manera muy ágil.

Proponemos una “jam session” donde pueden participar personas provenientes de distintos campos creativos, en la que haya un equipo o dispositivos que generen datos que puedan ser recibidos por otro equipo, para poder generar audio, gráficos, luz, interacciones….a partir de esos datos, en tiempo real.

El resultado será una especie de orquesta visual y sonora, ligeramente sincronizada según los envíos de datos de unos dispositivos centrales: Cámaras, mesas de mezclas, botones…

La actividad está abiertas a visitas, pero si quieres participar con audio o visuales apúntate en el formulario.

La sala dispone de un proyector y sistema de sonido, pero si quieres participar, tráete tu ordenador, instrumento musical, proyector, pantalla, cacharro…. indícalo en el formulario para tenerlo en cuenta (mesas, regletas, etc)

Las dos primeras horas, serán tipo «workshop» abierto, tanto para configurar la red que vamos a utilizar, tanto como para echar una mano a las personas interesadas en participar a implementar el poder recibir/enviar OSC desde su equipo.

(Ejemplo: te hiciste unos gráficos preciosos en Processing en un workshop hace un tiempo, y te interesaría darles una vuelta, si implementas recibir OSC en el sketch, los parámetros y variables de tu sketch se pueden modificar con datos provenientes de otra persona/equipo/sketch/device)

Incluso, si lo tuyo no es programar pero sí tocar un instrumento «analógico», o la expresión corporal, estáis invitadisimos. Planeamos poner un micrófono para poder recoger datos del sonido de un instrumento acústico o voz, y una cámara para recoger datos de movimiento.

¿Dónde?

 Terrario Intemediae Madrid. Paseo de la Chopera, 14, 28045 Madrid

¿Cuando?

Viernes 26 de Abril

17:00 – 19:00 Warm up para participantes y curiosos con ganas de utilizar OSC en sus proyectos.

19:00 – 21:00 Jam abierta al público.

[ninja_form id=2]