Shake It!

Ver Sketch

Simples cubos que rebotan dejando una estela con un pequeño agregado: cuando dibujo cada cubo agrego una pequeña variación random de unos pocos pixeles. Esto les da un efecto "shake" interesante.

Esta vez no agregue nada para reiniciar el sketch, hay que hacer un refresh en el browser para que vuelva a empezar con otra configuración.

Rebotes

Ver Sketch

Esto surgió a partir de un círculo. Estaba haciendo que un simple círculo rebote, cuando pensé en agregarle un punto en el centro para poder ver la trayectoria completa del círculo. Dejando solamente el punto y agregando un poco de color quedó terminado.

Es muy común que pasen estas cosas. Uno empieza con algo en la mente y termina haciendo completamente otra cosa con solo cambiar un par de parámetros. La única desventaja es que cuesta mucho ponerle fin a las posibilidades y decidirse por alguna.

Haciendo click sobre el sketch, se resetea y vuelve a empezar.

Cellular Automata

Ver Sketch

Esta es mi versión de "Conway's Game of Life" o de un cellular automata.

Primero se tiene una grilla donde cada pixel es una célula muerta. Se generan random cantidad de células vivas usando la variable "density" en posiciones elegidas de igual forma.
Una vez establecido el estado inicial, se empieza a evaluar el ciclo de vida de la siguiente forma:

• Una célula muerta cobra vida cuando tiene mas de 3 células vecinas vivas.
• Por el contrario, una célula viva muere cuando tiene menos de 2 (soledad) o mas de 3 (hacinamiento) células vecinas vivas.

Haciendo click se resetea el estado inicial y el ciclo vuelve a empezar.

Tengo pensado seguir trabajando sobre este sketch. Por ejemplo, se podría hacer con dos tipos diferentes de células (con colores diferentes) donde cada célula interactúa con las de su mismo tipo (o no, también se podría setear un ciclo de vida diferente cuando interactúan las de un tipo con las del otro).

El código a continuación:

// Defino un array para las células
int[][][] cells;

void setup() {
  size(200, 200);
  stroke(255);
  frameRate(15);
  reset();
}

void draw() {
  // Con cada click se resetea el estado
  if (mousePressed == true) {
    reset();
  }
  // Comienza el ciclo de reproducción/muerte
  ca();
}

// Función reset() resetea el estado
void reset() {
  // Densidad de células en el estado inicial
  float density = random(7);
  cells = new int[width][height][2];
  for (int i=0; i < width * height * density; i++) {
    cells[(int)random(width)][(int)random(height)][1] = 1;
  }
  background(0);
}

// Función ca() dibuja los ciclos de reproducción/muerte
void ca() {
  background(0);
  // Primero, dibujo las células vivas
  for (int x=0; x < width; x++) {
    for (int y=0; y < height; y++) {
      if (cells[x][y][1] == 1) {
        point(x, y);
      }
    }
  }

  // Recorro cada célula para decidir si vive o muere
  for (int x=0; x < width; x++) {
    for (int y=0; y < height; y++) {
      // Cantidad de vecinos vivos
      int count = vecinos(x, y);
      // Reproducción, solo células muertas con 3 vecinos vivos
      if (count == 3 && cells[x][y][1] == 0) {
        cells[x][y][1] = 1;
      }
      // Muerte, células vivas con menos de 2 o mas de 3 vecinos vivos
      if ((count < 2 || count > 3) && cells[x][y][1] == 1) {
        cells[x][y][1] = 0;
      }
    }
  }
}

// Función vecinos() devuelve la cantidad de vecinos vivos de una célula
int vecinos(int x, int y) {
  return cells[(x + 1) % width][y][1] + 
    cells[x][(y + 1) % height][1] + 
    cells[(x + width - 1) % width][y][1] + 
    cells[x][(y + height - 1) % height][1] + 
    cells[(x + 1) % width][(y + 1) % height][1] + 
    cells[(x + width - 1) % width][(y + 1) % height][1] + 
    cells[(x + width - 1) % width][(y + height - 1) % height][1] + 
    cells[(x + 1) % width][(y + height - 1) % height][1];
}

Letras Random

Ver Sketch

En esta prueba lo que hago es generar caracteres random() y les asigno, también usando random(), un color en la escala de grices.
Cada vez que se presiona una tecla se vuelven a generar las 6 líneas de 7 caracteres cada una (no se olviden de hacer foco en el sketch para que funcione).

Acá esta el código:

void setup() {
  size(200, 200);
  background(0);
  smooth();

  // Cargo la fuente que voy a usar
  PFont fontA = loadFont("CourierNew36.vlw");
  textFont(fontA, 36);
}

// Variable donde guardo cada caracter
char letter;
// Posición X
int x = 0;
// Posición Y
int y = 0;

void draw() {
  // Los caracteres se actualizan cuando se presiona una tecla
  if (keyPressed == true) {
    background(0);
    // 6 líneas
    for (int k=0; k<=5; k++) {
      if (k==0) {
        y=32;
      } else {
        y=y+32;
      }
      // 7 caracteres por línea
      for (int i=0; i<=6; i++) {
        // Elijo un caracter random
        letter = char(round(random(40, 90)));
        if (i==0) {
          x=10;
        } else {
          x=x+27;
        }
        // Seteo un color random
        fill(random(50,240));
        // Escribo el caracter a pantalla
        text(letter, x, y);
        if (i==6) {
          x=0;
        }
      }
      if (k==5) {
        y=0;
      }
    }
  }
  // Un poco de delay para que no sea tan rápido
  delay(70);
}

Presentación

Descubrí Processing hace unos meses gracias a una compañera de trabajo, mientras intentaba reencontrar la emoción que me brindaba la programación antes de que se convirtiera en mi herramienta de trabajo.
Mi intención es hacer de este blog una suerte de sandbox de mis experiencias en el aprendizaje de este lenguaje. Espero que, además de reflejar los adelantos que vaya haciendo, sirva como forma de intercambio de ideas y experiencias.