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

🛠️ TAREA MOODLE (Para la actividad de entregables)

Título de la tarea:

SDA.1 - Práctica: Dibujo con primitivas, pincel interactivo y patrones generativos en Processing

Descripción para el alumnado:

Markdown

## 💻 SDA.1 - Práctica de Programación Gráfica con Processing

En esta práctica vas a realizar **tres pequeños programas en Processing** para afianzar el uso de primitivas gráficas, el control mediante eventos de ratón y teclado, y las transformaciones espaciales básicas.

---

### 📌 EJERCICIO 1: Mi primer personaje o escena con primitivas (3 Puntos)

Crea un script en Processing que dibuje una escena simple o personaje (un robot, una casa, un animal o un vehículo) utilizando **al menos 5 primitivas gráficas diferentes**:
* Debe incluir obligatoriamente: `line()`, `rect()`, `triangle()`, `circle()` o `ellipse()`, y `point()`.
* Utiliza al menos **tres colores de relleno distintos (`fill`)** y ajusta el grosor de los bordes (`strokeWeight`).
* Nombre del archivo: `E1_Primitivas_TuNombre.pde`

---

### 📌 EJERCICIO 2: Pincel interactivo multicolor con borrador (3.5 Puntos)

Crea una aplicación de dibujo a mano alzada interactiva que cumpla las siguientes especificaciones:
1. Permite **dibujar líneas continuas** al arrastrar el ratón con el botón pulsado (`pmouseX`, `pmouseY`, `mouseX`, `mouseY`).
2. **Cambio de color por teclado:**
   * Al pulsar la tecla **'r'**, el pincel cambia a color **Rojo**.
   * Al pulsar la tecla **'v'**, el pincel cambia a color **Verde**.
   * Al pulsar la tecla **'a'**, el pincel cambia a color **Azul**.
3. **Borrador:** Al pulsar la tecla **'b'** o **'B'**, se borra todo el lienzo dejando la pantalla blanca de nuevo.
* Nombre del archivo: `E2_Pincel_TuNombre.pde`

---

### 📌 EJERCICIO 3: Patrón geométrico rotatorio (3.5 Puntos)

Crea un programa que dibuje un patrón generativo animado:
1. Coloca el origen del sistema de coordenadas en el **centro del lienzo** mediante `translate()`.
2. Aplica una **rotación continua** usando `rotate()` vinculada al número de fotogramas (`frameCount` o `radians()`).
3. Dibuja una figura compuesta (por ejemplo, dos rectángulos cruzados o una combinación de círculo y triángulo) que gire sobre su propio eje.
* Nombre del archivo: `E3_Patron_TuNombre.pde`

---

### 📤 Instrucciones de Entrega en Moodle

Pega en el cuadro de texto de la tarea el **código fuente completo** de cada uno de los 3 ejercicios indicando claramente el nombre de cada script.

🔑 SOLUCIONES DE LOS EJERCICIOS (Para referencia y autocorrección del alumnado / profesorado)

🟢 Solución – Ejercicio 1: Escena / Robot con primitivas gráficas

Processing

// Ejercicio 1: Robot con primitivas gráficas
void setup() {
  size(400, 400);
  background(220);
}

void draw() {
  // Antena (Línea y Punto)
  strokeWeight(3);
  stroke(50);
  line(200, 100, 200, 50);
  strokeWeight(10);
  stroke(255, 0, 0); // Bola roja en la punta
  point(200, 40);

  // Cabeza (Rectángulo)
  strokeWeight(2);
  stroke(0);
  fill(180, 190, 200); // Gris metálico
  rect(130, 100, 140, 100);

  // Ojos (Círculos)
  fill(100, 220, 255); // Azul brillante
  circle(170, 140, 30);
  circle(230, 140, 30);

  // Nariz (Triángulo)
  fill(255, 200, 0); // Amarillo
  triangle(200, 155, 190, 175, 210, 175);

  // Boca (Línea)
  strokeWeight(4);
  stroke(50);
  line(160, 185, 240, 185);

  // Orejas (Elipses)
  strokeWeight(2);
  fill(255, 100, 100);
  ellipse(115, 150, 20, 40);
  ellipse(285, 150, 20, 40);
}

🟢 Solución – Ejercicio 2: Pincel interactivo multicolor

Processing

// Ejercicio 2: Pincel interactivo a mano alzada
color colorPincel;

void setup() {
  size(500, 500);
  background(255);
  colorPincel = color(0); // Inicia en color negro
}

void draw() {
  // Dibuja trazo continuo si se mantiene presionado el ratón
  if (mousePressed) {
    stroke(colorPincel);
    strokeWeight(5);
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

void keyPressed() {
  // Cambio de color según la tecla pulsada
  if (key == 'r' || key == 'R') {
    colorPincel = color(230, 40, 40); // Rojo
  } else if (key == 'v' || key == 'V') {
    colorPincel = color(40, 180, 60); // Verde
  } else if (key == 'a' || key == 'A') {
    colorPincel = color(40, 80, 220); // Azul
  } else if (key == 'b' || key == 'B') {
    background(255); // Borrar lienzo (limpiar a blanco)
  }
}

🟢 Solución – Ejercicio 3: Patrón geométrico rotatorio

Processing

// Ejercicio 3: Molinillo geométrico rotatorio
void setup() {
  size(400, 400);
  rectMode(CENTER);
}

void draw() {
  background(20); // Fondo oscuro para dar contraste

  // Trasladar origen de coordenadas al centro de la ventana
  translate(width / 2, height / 2);

  // Rotar el lienzo según el contador de fotogramas
  rotate(radians(frameCount * 2));

  // Dibujar cruz de rectángulos (Molinillo)
  noStroke();
  
  fill(255, 90, 90, 200); // Rojo semitransparente
  rect(0, 0, 200, 40);

  fill(90, 255, 120, 200); // Verde semitransparente
  rect(0, 0, 40, 200);

  // Detalle central
  fill(255, 255, 100);
  circle(0, 0, 30);
}

📊 Rúbrica de evaluación para el profesorado (Moodle)

Criterio	Excelente (100%)	En proceso (50%)	No logrado / Incompleto (0%)
Uso de primitivas gráficas (E1) (3 ptos)	Incluye las 5 primitivas exigidas con buena combinación de color y estilos de borde.	Falta alguna primitiva o no aplica colores de relleno/borde.	El script no ejecuta o no utiliza primitivas gráficas.
Interactividad y eventos (E2) (3.5 ptos)	Pincel fluido a mano alzada, cambio correcto de 3 colores y limpiador de lienzo con la tecla ‘b’.	El pincel dibuja pero no de forma continua (pmouse) o falla algún evento de teclado.	No atiende a los eventos de ratón/teclado.
Transformaciones espaciales (E3) (3.5 ptos)	Traslada correctamente el origen con translate(), aplica rotación continua y crea un patrón estético.	Aplica la rotación sin trasladar el origen al centro o la figura gira fuera de pantalla.	No aplica transformaciones geométricas (translate/rotate).