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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *