Processing: Galaxias minimalistas en espiral

Quedando vista una pequeña introducción a Processing en el código de mi anterior post ya tendríamos una pequeña base con la que crear nuestros pequeños gráficos. Se podría continuar de mil maneras diferentes y podríamos generar a través de las ecuaciones paramétricas unos dibujos realmente interesante, quizás dentro de un tiempo volvamos al tema, pero para más sencillez aún (y enseñando así el potencial del entorno de programación) voy a mostrar un código con el que se crea algo aún más sencillo: una espiral. Todos conocemos lo que es una espiral, pero ¿qué caminos podemos tomar para crear gráficos interesantes con estas? Con unas pequeñas variaciones del código y añadiendo el componente random se pueden llegar a crear imágenes únicas. Como objetivo para los ejemplos de este blog he elegido crear imágenes que pueda publicar, de libre uso y tratando de que sea sencillo recrear y personalizar -desde el código- para cualquier persona desde su ordenador. Entonces, comencemos:

¿Cómo creamos la espiral? Bien, para crear una espiral necesitamos saber qué es exactamente una espiral. Wikipedia nos informa bien al respecto: Una espiral es una línea curva generada por un punto que se va alejando progresivamente del centro a la vez que gira alrededor de él. ¿Cómo he creado yo la espiral que va a ser utilizada? Sencillamente usando valores del seno y coseno de una variable que aumenta en cada iteración del bucle, multiplicados por esa misma variable, no es tan complicado:


point(cos(t) * t,sin(t) * t);

 

Siendo t una variable de tipo float que aumenta en cada iteración de draw() en 0.1. Escribiendo un código de Processing más avanzado se pueden empezar a ver resultados:

float t;

void setup(){
  size(350,350);
  background(20);
}

void draw(){
  strokeWeight(3);
  stroke(240);
  point(cos(t) * t,sin(t) * t);
  t += 0.1;
}

¿Y qué se ve? Tras 2000 iteraciones del bucle se observa lo siguiente:

esperial1.png

Estamos avanzando, pero la espiral se encuentra en la esquina superior izquierda, quizás sea mejor centrarla. Processing toma como valor (0,0) de la pantalla esta esquina superior izquierda, para poner nuestro dibujo en el centro solo hace falta trasladarlo al centro, para ello se utilizar la función translate(), para casos generales tendremos que trasladar la imagen en X: hasta la mitad de la anchura, en Y: hasta la mitad de la altura.


translate(width / 2, height / 2);

 

Con tan solo añadir esta línea al código la cosa cambia:

esperial1.png

Con tan poco esfuerzo ya se está notando un avance cuanto menos curioso. Vamos a empezar a ‘complicar’ las cosas introduciendo esa componente random y a multiplicar el tamaño final de la imagen:


float t;

void setup(){
  size(1920,1080); //1080p puede ser grande para tu pantalla, prueba size(1280,720);
  background(20);
}

void draw(){
    translate(width / 2,height / 2);
    strokeWeight(random(0,6));
    stroke(random(0,255),random(0,255),random(0,255));
    point(cos(t) * t,sin(t) * t);
    t += 0.1;
}

 

¿12.000 iteraciones del bucle anterior?galaxy.png

 

 

 

¿Dudas sobre las funciones? Consulta las referencias!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s