Programación Creativa con Processing: Fundamentos y Ejercicios Prácticos

Fundamentos de Sintaxis en Processing

Es fundamental recordar siempre el uso del punto y coma (;) al final de cada instrucción. A continuación, se detallan las funciones básicas de configuración del entorno:

• Line(x1, y1, x2, y2): Dibuja una línea entre dos puntos. Ejemplo: Line(100, 100, 0, 0);
• Size(ancho, alto): Define el tamaño de la pantalla. Ejemplo: Size(500, 500);
• Background(R, G, B): Define el color de fondo. Los valores van de 0 a 255.
  • Negro: (0)
  • Blanco: (255)
  • Gris: (150)
  • Color personalizado: (255, 90, 100)

Dibujo de Figuras Geométricas

Para las figuras, generalmente se utilizan 4 coordenadas: las dos primeras indican la localización y las dos siguientes el tamaño.

• Ellipse: Utilizada para crear círculos y elipses.
• Rect: Utilizada para crear cuadrados y rectángulos.
• noStroke(): Función para quitar el contorno de las figuras.
• Fill: Se utiliza para dar color de relleno a una figura.

Estructuras Principales y Animación

Processing se basa en dos bloques principales de código:

• void setup() { ... }: Se utiliza para definir las propiedades iniciales del entorno.
• void draw() { ... }: Se utiliza para crear la animación, ejecutándose en bucle.

Interacción con el Usuario

• Seguir al ratón: void draw() { figura(mouseX, mouseY, 200, 200); }
• Evitar el rastro: Para que no se vea el rastro del movimiento, se debe llamar a la función background() dentro del draw() para refrescar la pantalla en cada fotograma.
• Movimiento aleatorio: Se utiliza la función random(). Ejemplo: (random(número), random(número), 200, 200);
• Cambio de color aleatorio: fill(random(255), random(100), random(90));

Uso de Variables

Podemos utilizar diferentes tipos de variables para dinamizar el código:

• Float: Para números con decimales. Ejemplo: float dMin = 20; float dMax = 20;
• Int: Para números enteros. Ejemplo: int r1 = 20; int r2 = 20;
• Boolean: Para estados lógicos. Ejemplo: crecer = true; (útil para cambios de tamaño en el setup).

Ejercicios Prácticos de Programación

1) Generación de figuras en posiciones aleatorias

Haz un programa para generar un círculo y un cuadrado en la pantalla, pero que su posición varíe de una manera aleatoria.

void setup() {
  size(400, 400);
}

void draw() {
  ellipse(random(width - 10), random(height - 10), 50, 50);
  fill(255, 0, 0);
  rect(random(width - 10), random(height - 10), 50, 50);
  fill(0, 255, 0);
}

2) Figuras con colores aleatorios

Mismo ejercicio que el anterior, pero que los colores de ambos cambien de forma aleatoria.

void setup() {
  size(400, 400);
}

void draw() {
  ellipse(random(width - 10), random(height - 10), 50, 50);
  fill(random(255), random(255), random(255));
  rect(random(width - 10), random(height - 10), 50, 50);
  fill(random(255), random(255), random(255));
}

3) Control de velocidad y limpieza de rastro

Mismo ejercicio que el anterior, pero disminuyendo la velocidad con la que aparecen el círculo y el cuadrado, y haciendo que a cada instante solo aparezca una sola figura de cada tipo (sin dejar rastro).

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  ellipse(random(width - 10), random(height - 10), 50, 50);
  fill(random(255), random(255), random(255));
  rect(random(width - 10), random(height - 10), 50, 50);
  fill(random(255), random(255), random(255));
  frameRate(5);
}

4) Círculo con radio como variable

Haz un círculo en el punto (200, 200) declarando su radio como variable. Toma como valor inicial de esta variable el que quieras.

int r = 20;

void setup() {
  size(500, 500);
}

void draw() {
  ellipse(200, 200, r, r);
}

5) Animación de rebote

Bola que se mueve por la pantalla y rebota cuando choca con los lados.

int x = 0;
int y = 0;
int incx = 3;
int incy = 4;

void setup() {
  size(500, 500);
}

void draw() {
  background(200);
  ellipse(x, y, 50, 50);
  x = x + incx;
  y = y + incy;
  
  if (x >= width) {
    incx = -1;
  }
  if (x < 0) {
    incx = 1;
  }
}

6) Elipse interactiva con cambio de tamaño

Haz una elipse que siga al ratón y vaya cambiando de tamaño entre un valor mínimo y un máximo:

// Declaración de variables globales del programa
float dMin = 20; // tamaño mínimo del círculo
float dMax = 200; // tamaño máximo del círculo
float d = dMin; // tamaño ‘actual’ del círculo
boolean crecer; // indica si el círculo ha de aumentar o disminuir

void setup() {
  size(500, 500);
  background(255);
  crecer = true; // empezamos creciendo
}

void draw() {
  ellipse(mouseX, mouseY, d, d);
  
  // Comprobamos si el diámetro excede de los límites máximo y mínimo
  if (d >= dMax) {
    crecer = false;
  } else if (d <= dMin) {
    crecer = true;
  }
  
  // Actualizamos el tamaño del círculo según el valor de ‘crecer’
  if (crecer == true) {
    d += 3; // aumentar 3 píxeles el diámetro
  } else {
    d -= 3; // reducir 3 píxeles el diámetro
  }
}

7) Manejo de imágenes con PImage

Crear un programa capaz de mostrar una imagen. En Processing existe la clase PImage para almacenar imágenes cargadas desde un fichero mediante loadImage().

• PImage: Tipo de variable para contener una imagen.
• loadImage("archivo"): Carga la imagen localizada en el directorio del sketch.
• image(nombre, x, y): Muestra la imagen en las coordenadas especificadas.

PImage im;

void setup() {
  size(400, 400);
  im = loadImage("foto.jpg"); // Nombre del fichero de imagen
}

void draw() {
  image(im, 0, 0); // Muestra la imagen en coordenadas 0, 0
}