SDA · Actividad: Programación Gráfica, Primitivas, Eventos y Transformaciones con Processing

Materia: Creación Digital y Pensamiento Computacional (CDYPC 1º Bachillerato)

Saberes básicos:

• A.4. Funciones gráficas: punto, línea, triángulo, cuadrado, rectángulo, círculo, elipse, sectores y arcos.
• A.5. Procesamiento de imágenes. Gráficos vectoriales. Diseño digital generativo basado en algoritmos. Eventos: ratón y teclado. Uso de la línea y el punto para dibujar líneas a mano alzada. Operaciones en el espacio: translaciones, escalados, rotaciones. Diseño de patrones.Entorno de trabajo: Processing (Modo Java / p5.js)

📖 TEORÍA (Para la Página de Moodle / Entrada de Blog)

1. El entorno de Processing y la estructura de un programa

Processing es un entorno de programación orientado al arte generativo, el diseño y la creación visual. Todo programa interactivo en Processing se organiza en torno a dos funciones principales:

• setup(): Se ejecuta una sola vez al iniciar el programa. Aquí definimos el tamaño del lienzo (size), la velocidad de fotogramas (frameRate) y la configuración inicial.
• draw(): Se ejecuta en un bucle continuo (normalmente 60 veces por segundo). Aquí colocamos el código de dibujo e interacción.

Processing

void setup() {
  size(600, 400); // Crea un lienzo de 600px de ancho por 400px de alto
  background(255); // Fondo blanco (RGB: 255)
}

void draw() {
  // Código que se repite continuamente
}

2. Primitivas Gráficas de Dibujo (Saber Básico A.4)

En Processing, las coordenadas se miden en píxeles. El origen $(0, 0)$ se encuentra en la esquina superior izquierda de la pantalla. El eje $X$ crece hacia la derecha y el eje $Y$ crece hacia abajo.

(0,0) ──────────────► X (+)
  │
  │
  ▼
Y (+)

A. Punto y Línea

• point(x, y): Dibuja un único píxel en la posición $(x, y)$.
• line(x1, y1, x2, y2): Dibuja un segmento recto desde el punto $(x1, y1)$ hasta el punto $(x2, y2)$.

B. Polígonos (Cuadrado, Rectángulo, Triángulo y Cuadrilátero)

• rect(x, y, ancho, alto): Dibuja un rectángulo situando su esquina superior izquierda en $(x, y)$. Si ancho == alto, obtenemos un cuadrado.
• triangle(x1, y1, x2, y2, x3, y3): Dibuja un triángulo uniendo sus 3 vértices.
• quad(x1, y1, x2, y2, x3, y3, x4, y4): Dibuja un cuadrilátero cualquiera conectando sus 4 vértices.

C. Formas Curvas (Círculo, Elipse y Arco)

• ellipse(x, y, ancho, alto): Dibuja una elipse centrada en la posición $(x, y)$.
• circle(x, y, diametro): Dibuja un círculo perfecto centrado en $(x, y)$.
• arc(x, y, ancho, alto, inicio, fin): Dibuja una sección de elipse. Los ángulos de inicio y fin se especifican en radianes (0, PI, TWO_PI, HALF_PI).

D. Color, Relleno y Grosor

• stroke(r, g, b): Establece el color de la línea o borde.
• strokeWeight(px): Cambia el grosor del borde en píxeles.
• fill(r, g, b): Define el color de relleno para las figuras cerradas.
• noFill() / noStroke(): Elimina el relleno o el borde de las siguientes figuras.

💻 Programa de ejemplo 1: Catálogo de primitivas gráficas

Processing

void setup() {
  size(500, 300);
  background(240);
}

void draw() {
  // 1. Punto y Línea
  strokeWeight(6);
  stroke(200, 0, 0); // Rojo
  point(50, 40);
  
  strokeWeight(2);
  stroke(0);
  line(50, 60, 150, 60);

  // 2. Rectángulo y Triángulo
  fill(100, 180, 255); // Azul claro
  rect(50, 100, 100, 60);

  fill(255, 180, 100); // Naranja
  triangle(200, 160, 250, 100, 300, 160);

  // 3. Círculo, Elipse y Arco
  fill(150, 220, 150); // Verde
  circle(80, 230, 60);

  fill(220, 150, 220); // Rosa
  ellipse(200, 230, 80, 50);

  stroke(0);
  fill(255, 255, 100); // Amarillo
  arc(320, 230, 70, 70, 0, PI + HALF_PI); // Arco de 3/4 de círculo
}

3. Eventos e Interactividad: Ratón y Teclado (Saber Básico A.5)

Processing incluye variables de sistema que leen en tiempo real la actividad del usuario:

• mouseX / mouseY: Posición $X$ e $Y$ actual del puntero del ratón.
• pmouseX / pmouseY: Posición $X$ e $Y$ del ratón en el fotograma anterior.
• mousePressed: Variable booleana (true si hay un botón del ratón pulsado, false en caso contrario).
• keyPressed: Variable booleana que indica si se ha pulsado alguna tecla.
• key: Contiene el carácter numérico o letra de la última tecla pulsada.

Delineado a mano alzada:

Al trazar una línea continua entre (pmouseX, pmouseY) y (mouseX, mouseY) cuando mousePressed es verdadero, obtenemos un efecto fluido de lápiz o pincel digital.

💻 Programa de ejemplo 2: Pincel interactivo y eventos de teclado

Processing

void setup() {
  size(600, 400);
  background(255);
}

void draw() {
  // Dibujar a mano alzada solo si se mantiene pulsado el ratón
  if (mousePressed) {
    stroke(50, 50, 200);
    strokeWeight(4);
    // Conecta la posición previa con la posición actual del ratón
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

// Función que se dispara al pulsar cualquier tecla
void keyPressed() {
  // Si pulsamos la tecla 'c' o 'C', borramos el lienzo
  if (key == 'c' || key == 'C') {
    background(255);
  }
}

4. Operaciones en el Espacio y Patrones Generativos (Saber Básico A.5)

Para alterar la posición u orientación de los gráficos vectoriales en el lienzo, Processing dispone de transformaciones geométricas:

1. translate(x, y): Desplaza el origen $(0,0)$ del sistema de coordenadas a la posición $(x, y)$.
2. rotate(radianes): Gira el sistema de coordenadas respecto al origen actual. Nota: radians(grados) convierte grados a radianes.
3. scale(factor): Aumenta o disminuye la escala de todo lo que se dibuje a continuación.
4. pushMatrix() / popMatrix(): Guardan y restauran el estado del sistema de coordenadas para evitar que una transformación afecte al resto del dibujo.

💻 Programa de ejemplo 3: Patrón generativo con transformaciones

Processing

void setup() {
  size(400, 400);
  background(30);
  rectMode(CENTER); // Dibujar rectángulos especificando su punto central
}

void draw() {
  background(30);

  // Trasladamos el punto de origen al centro del lienzo
  translate(width / 2, height / 2);

  // Rotamos de forma continua según el número de fotograma
  rotate(radians(frameCount));

  // Dibujamos una serie de cuadrados concéntricos iterativos
  for (int i = 8; i > 0; i--) {
    fill(i * 30, 100, 250 - i * 20, 180);
    stroke(255);
    strokeWeight(1.5);
    rect(0, 0, i * 35, i * 35);
    rotate(radians(15)); // Rotación acumulativa
  }
}

🎬 Recursos en Vídeo para Profundizar

Si quieres revisar el paso a paso en vídeo, ver más ejemplos de código explicados o resolver dudas sobre la sintaxis de Processing, puedes consultar las explicaciones del canal educativo MonterrosoTIC:

📺 Canal de YouTube: MonterrosoTIC