Introducción a Processing: Ejercicios Prácticos de Programación Visual

Introducción a Processing: Ejercicios Prácticos

En este documento, se presentan una serie de ejercicios prácticos para introducirse en el entorno de programación Processing. Cada ejercicio está diseñado para ilustrar conceptos básicos de programación visual, incluyendo el dibujo de formas geométricas, la manipulación de colores, la creación de animaciones y la interacción con el usuario.

Ejercicios Básicos

1. Dibujar una línea

Dibuja un segmento de línea que partiendo del origen de coordenadas acabe en el punto (100, 100).

Solución:

line(0, 0, 100, 100);

2. Ajustar el tamaño de la pantalla

Pon la pantalla de visualización del ejercicio a tamaño 400x400 píxeles.

Solución:

size(400, 400);

line(0, 0, 100, 100);

3. Cambiar el color de fondo

Haz el ejercicio 1 con el fondo de pantalla blanco.

Solución:

size(400, 400);

background(255);

line(0, 0, 100, 100);

4. Dibujar un círculo rojo

Dibuja un círculo con origen en el punto (50, 50) de radio 30 y color rojo.

Solución:

fill(255, 0, 0);

ellipse(50, 50, 30, 30);

5. Eliminar el contorno del círculo

Sobre el ejercicio anterior, elimina el contorno del círculo.

Solución:

fill(255, 0, 0);

noStroke();

ellipse(50, 50, 30, 30);

6. Dibujar un cuadrado verde

Dibuja un cuadrado en el centro de una pantalla de 500x500, de lado 80 y de color verde. El fondo de la pantalla será gris claro.

Solución:

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

void draw() {
  fill(0, 225, 0);
  rect(210, 210, 80, 80);
}

7. Dibujar tres círculos de colores

Dibuja sobre una pantalla de 500x500, tres círculos, uno de ellos rojo, otro verde y otro de color intermedio.

Solución:

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

void draw() {
  fill(255, 0, 0);
  ellipse(50, 50, 30, 30);
  fill(0, 255, 0);
  ellipse(100, 100, 30, 30);
  fill(120, 45, 89);
  ellipse(180, 180, 30, 30);
}

Ejercicios de Interactividad y Animación

8. Dibujar una línea que se mueve con el ratón

Dibuja una línea que se mueva con el ratón.

Solución:

void setup() {
  size(500, 500);
  background(250, 0, 100);
}

void draw() {
  stroke(0, 250, 0);
  line(mouseX, mouseY, 200, 200);
}

9. Eliminar el rastro de la línea

Lo mismo que el ejercicio anterior, pero sin dejar el rastro del trazo anterior.

Solución:

void setup() {
  size(500, 500);
  background(250, 0, 100);
}

void draw() {
  background(255);
  stroke(0, 250, 0);
  line(mouseX, mouseY, 200, 200);
}

10. Generar un círculo y un cuadrado 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.

Solución:

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

void draw() {
  background(170, 0, 80);
  ellipse(random(width - 10), random(height - 10), 50, 50);
  rect(random(width - 10), random(height - 10), 50, 50);
  frameRate(5);
}

11. Cambiar los colores de forma aleatoria

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

Solución:

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

void draw() {
  background(170, 0, 80);
  fill(random(255), random(255), random(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);
  frameRate(5);
}

12. Disminuir la velocidad y no dejar 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 aparezcan un solo círculo y un solo cuadrado, es decir, no dejar el rastro del instante anterior.

Solución:

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

void draw() {
  background(255);
  fill(random(255), random(255), random(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);
  frameRate(1);
}

Variables en Processing

En Processing, se pueden utilizar diferentes tipos de variables para almacenar datos. Algunos de los tipos más comunes son:

• int: Para almacenar números enteros.
• float: Para almacenar números decimales.
• boolean: Para almacenar valores de verdad (true o false).
• PImage: Para almacenar imágenes.

13. Declarar el radio como variable

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

Solución:

int r = 20;

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

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

14. Elipse que sigue al ratón con radios variables

Haz una elipse que siga al ratón, poniendo los radios como variables.

Solución:

int r1 = 20;
int r2 = 60;

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

void draw() {
  ellipse(mouseX, mouseY, r1, r2);
}

15. Elipse que cambia 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.

Solución:

float dMin = 20;
float dMax = 200;
float d = dMin;
boolean crecer;

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

void draw() {
  ellipse(mouseX, mouseY, d, d);
  if (d >= dMax) {
    crecer = false;
  } else if (d <= dMin) {
    crecer = true;
  }
  
  if (crecer == true) {
    d += 3;
  } else {
    d -= 3;
  }
}

Estos ejercicios proporcionan una base sólida para comenzar a explorar las posibilidades creativas de Processing. Se anima a los lectores a experimentar con el código, modificar los parámetros y crear sus propias variaciones para profundizar en el aprendizaje de este potente entorno de programación.