Waves.pde

/*Buenos días/tardes/noches, Guillermo:

Para esta entrega, decidí irme por algo un poco más sencillo, por el feedback de la entrega anterior. 

Quise hacer una obra que transmitiera equilibrio y calma, pero que existiera la posibilidad de que el equilibrio se pueda romper, aunque haciendo que eventualmente el sistema pueda volver a la calma. 
Antes de ponerme manos a la obra, investigué un poco más sobre arte generativo fuera de los recursos del aula. Detallo a continuación los tutoriales que ví antes de empezar a programar:

- Creative Coderie. (26 de Junio de 2021). Generative Masks & 3D noise in Processing | Generative Art | Tutorial [Vídeo]. YouTube. https://www.youtube.com/watch?v=6btSLYnf30M
- Daniel Simu. (12 de Julio de 2021). Making Generative Art | Intro to Processing [Vídeo]. YouTube. https://www.youtube.com/watch?v=wghDDYnIFM0
- The Coding Train. (27 de Julio de 2015). I.5: Perlin Noise - The Nature of Code [Vídeo]. YouTube. https://www.youtube.com/watch?v=8ZEMLCnn8v0

Uniendo esa información con la información de los recursos del aula, decidí jugar con formas básicas, movimiento, y sobre todo con colores (inspirada por el segundo vídeo y por los trabajos de la plataforma
the dot is black).

Decidí que el mejor movimiento para transmitir calma y flujo en un estado de equilibrio son las ondas, ya que me hacen pensar en el agua, así que desempolvé unas entregas de años anteriores para la
asignatura de física para multimedia, porque ya había trabajado con ecuaciones de movimientos antes y sabía que la ecuación del movimiento armónico simple me podía servir. A partir de ahí el proceso 
fue relativamente sencillo, empecé trabajando con una única bolita y programando cómo quería que fueran sus comportamientos, dentro de draw(). El uso del Perlin noise fue esencial para poder aportar 
al walker ese movimiento aleatorio que se nos pide, pero haciéndolo fluido y agradable a la vista.

Una vez que estuve satisfecha con el movimiento de la bolita y con la lógica de los clicks, pasé el código que tenía dentro de draw() a una clase, con sus respectivos métodos y su constructor y, cuando ya
tuve eso hecho, utilicé un loop para crear una única fila de 10 bolitas. Esto me ayudó mucho a notar y arreglar problemas de ubicación y coordinación del sistema que iban surgiendo a medida que se
iba interactuando con él, problemas que terminé arreglando duplicando algunas variables dentro de la clase (para mantener un registro de los valores originales) y utilizando un tiempo global y un tiempo 
individual para cada partícula.

En este punto, ya lo tenía hecho, simplemente tuve que montar la matriz de partículas con los bucles anidados, y pulir algunos detalles de comportamiento, como la velocidad o el tamaño, y aplicar el
blendMode() correspondiente, que es lo que le da vida y colorido a toda la composición.

Como acotación importante, mencionar que el programa está hecho para que el número de partículas generadas por la matriz sea totalmente aleatório, pero realmente la intención es que tenga de 400 partículas
en adelante, ya que es cuando la obra se ve más bonita, dinámica y colorida.

Espero le guste :)

Un saludo,
Sarah
*/

color[] colors = { //Paleta de colores a utilizar, de forma aleatoria
  color(255, 0, 0),
  color(0, 255, 0),
  color(0, 0, 255)
};
float globalT; //tiempo global
int clickControl = 0; //variable de control para saber si se ha hecho click o no
Particle[] particles; //declaro array para almacenar y dibujar las partículas
int particlesAmount; //para usarlo en el array y poderlo cambiar facilmente
float runTime; //para poder usarlo para imprimir las instrucciones de interacción


void setup() {
  size(1200, 700, P2D);
  particlesAmount = int(random(10, 51)); //usado definir el tamaño del cuadrado de partículas: particlesAmount x particlesAmount
  particles = new Particle[particlesAmount * particlesAmount];
  globalT = 0;
  
  int index = 0; //variable local para poderla usar en el loop, y así rellenar cada uno de los ínidces del array
    
  
  for(int i = 0; i < particlesAmount; i++){//Esta dimensión de la matriz/bucle será para el eje x o columnas
    for(int j = 0; j < particlesAmount; j++){//y esta dimensión es para el eje y
      //Declaro las variables locales en el loop para que sea más fácil entender el constructor y modificar cualquier cosa que haga falta más adelante, o para cambiar la obra en caso deseado
      float A = 30; // amplitud, define qué tan grande o amplia será la onda
      float w = 20; // frecuencia angular, cambia la velocidad en la que se mueve la partícula dentro de la onda
      float theta = i; // fase inicial, controla a qué altura de la onda inicia el movimiento
      float t = 0; //tiempo
      color c = colors[int(random(3))]; //color de la partícula
      float posX = (width+800)*i/particlesAmount + 25; //posición en X, hago que se salga de la pantalla para que se pueda hacer ver en pantalla completa también
      float posY = (height+400)*j/particlesAmount; //posición en Y
      float extent = random(5, 90); //define el tamaño del círculo de forma aleatoria
      
      //creamos una partícula para cada iteración, con el constructor
      particles[index] = new Particle(A, w, theta, t, c, posX, posY, extent);
      index++;
    } 
  }
}

void draw(){
  runTime = millis(); //iniciamos millis
  fill(0, 20);
  rect(0, 0, width, height); //en vez de usar background, uso este cuadrado con opacidad de fondo, para dar un aspecto de "halo" que persigue las partículas
  
  //agrego instrucciones los primeros 4 segundos de reproducción del programa
  if(runTime < 4000){
    fill(255);
    textSize(28);
    textAlign(CENTER);
    text("Para interactuar con el programa, mueve el cursor o haz click", width/2, height/2);
  }else if(runTime > 3000){
    blendMode(ADD); //muy importante para dar el efecto de color deseado, y que los valores del rojo, verde yazul se mezclen
  
    globalT += 0.0008; //es lo que permite el movimiento armónico. Sin incrementar el tiempo, no hay movimiento
    
    //dibujamos y damos comportamiento a cada una de las partículas generadas en el loop, con ayuda de un For-Each
    for(Particle particle : particles){
      particle.display();
      particle.behaviour();
    }
    
     blendMode(BLEND); // devolvemos la configuración de la mezcla de color a su estado original, para que el cuadrado del principio, el consecuentemente el efecto de "rastro", pueda funcionar bien
    }
}

//permite cambiar el valor de la variable clickControl al hacer click, lo que a su vez controla los dos estados del programa
void mouseClicked(){
  if(clickControl == 0){
    clickControl += 1;
  } else {
    clickControl -= 1;
  }
}