¡Bienvenidos a la dimensión visual del código!

Hasta ahora hemos trabajado con datos y texto. Hoy aprenderemos a utilizar funciones gráficas para construir imágenes, figuras geométricas y piezas visuales utilizando Processing, un entorno de programación diseñado específicamente para artistas, diseñadores y creadores digitales.

1. El Lienzo y el Sistema de Coordenadas

Antes de pintar, debemos entender cómo funciona la pantalla. En un entorno gráfico como Processing, el espacio de trabajo es un plano 2D medido en píxeles.

• Comando para crear el lienzo: size(ancho, alto); (Ejemplo: size(800, 600); crea un lienzo de 800 píxeles de ancho por 600 de alto).
• Origen de coordenadas $(0,0)$: A diferencia de las matemáticas tradicionales, el punto $(0,0)$ se encuentra en la esquina superior izquierda de la pantalla.
  • El eje X aumenta hacia la derecha.
  • El eje Y aumenta hacia abajo.

2. Catálogo de Funciones Gráficas Primitivas

Una función en programación es una instrucción a la que le pasamos parámetros para que realice una tarea específica. En Processing, cada figura geométrica se dibuja invocando una función gráfica con sus coordenadas y dimensiones.

A. Punto (point)

Dibuja un único píxel en el lienzo.

Processing

point(x, y);
// Ejemplo: punto en la posición x=100, y=150
point(100, 150);

B. Línea (line)

Traza un segmento recto entre dos puntos $(x1, y1)$ y $(x2, y2)$.

Processing

line(x1, y1, x2, y2);
// Ejemplo: línea desde (50, 50) hasta (200, 300)
line(50, 50, 200, 300);

C. Triángulo (triangle)

Une tres vértices $(x1, y1)$, $(x2, y2)$ y $(x3, y3)$ para formar un triángulo.

Processing

triangle(x1, y1, x2, y2, x3, y3);
// Ejemplo:
triangle(150, 50, 100, 180, 200, 180);

D. Rectángulo y Cuadrado (rect)

Dibuja una figura de cuatro lados. Los dos primeros parámetros son la esquina superior izquierda $(x, y)$, seguidos del ancho ($w$) y alto ($h$).

Processing

rect(x, y, ancho, alto);

// Rectángulo:
rect(100, 100, 200, 100); 

// Cuadrado (ancho y alto iguales):
rect(100, 100, 150, 150);

E. Círculo y Elipse (ellipse / circle)

Dibuja figuras curvas cerradas. En ellipse, los parámetros son el centro $(x, y)$, la anchura ($w$) y la altura ($h$).

Processing

// Elipse genérica
ellipse(x_centro, y_centro, ancho, alto);
ellipse(300, 200, 100, 50);

// Círculo perfecto (usando circle o ellipse con mismo ancho y alto)
circle(x_centro, y_centro, diametro);
circle(300, 200, 80);

F. Arcos y Sectores (arc)

Dibuja una sección de una elipse. Necesita el centro, dimensiones y el ángulo de inicio y fin en radianes (radians(grados)).

Processing

arc(x_centro, y_centro, ancho, alto, angulo_inicio, angulo_fin, [modo]);

// Ejemplo: Un sector circular tipo "Pac-Man" de 0 a 300 grados
arc(200, 200, 100, 100, radians(30), radians(330), PIE);

Modos de Arc en Processing:

• OPEN: Solo dibuja la curva exterior sin cerrar.
• CHORD: Une el inicio y el fin del arco con una línea recta.
• PIE: Dibuja las líneas hacia el centro formando un sector circular (como una porción de tarta).

3. Estilo Básico: Color, Borde y Relleno

Para que nuestras figuras tengan sentido artístico, podemos aplicar atributos de color antes de llamar a la función que dibuja la forma:

• background(r, g, b); $\rightarrow$ Establece el color de fondo del lienzo.
• fill(r, g, b); $\rightarrow$ Aplica el color de relleno para las figuras siguientes.
• stroke(r, g, b); $\rightarrow$ Define el color del borde/contorno.
• strokeWeight(grosor); $\rightarrow$ Cambia el grosor del borde en píxeles.
• noFill(); / noStroke(); $\rightarrow$ Elimina el relleno o el borde respectivamente.

(Los valores R, G, B van de 0 a 255).

Parte 2: Ejercicios para Moodle (Tarea del Alumnado)

Tarea Práctica: Guía de Processing y Arte Generativo

GUÍA DE INSTALACIÓN Y PRIMEROS PASOS CON PROCESSING

Antes de empezar con las actividades, debes instalar el programa en tu ordenador y aprender a usar su entorno básico.

Paso 1: Descarga e Instalación

1. Accede a la web oficial: processing.org/download.
2. Descarga la versión adecuada para tu sistema operativo (Windows, macOS o Linux).
3. En Windows: Se descargará un archivo .zip. Descomprímelo en una carpeta (por ejemplo, en tu escritorio o en Archivos de programa). No requiere instalación compleja: dentro de la carpeta encontrarás el ejecutable processing.exe.
4. En macOS: Abre el archivo descargado y arrastra el icono de Processing a tu carpeta de Aplicaciones.

Paso 2: Conociendo el Entorno (PDE – Processing Development Environment)

Al abrir Processing, verás una ventana muy sencilla compuesta por:

1. Botón Ejecutar (Play ▶): Compila tu código y abre la ventana gráfica donde se dibuja tu obra.
2. Botón Detener (Stop ■): Cierra la ventana gráfica en ejecución.
3. Área de Código (Editor): Espacio donde escribirás las instrucciones de programación.
4. Consola (Zona inferior negra): Muestra mensajes del sistema y errores de sintaxis en rojo si te equivocas al escribir el código.

Paso 3: Tu primer programa de prueba (Sketch)

1. Escribe el siguiente código de prueba en el editor:

Processing

size(400, 400);
background(30, 144, 255); // Fondo azul
fill(255, 215, 0);       // Relleno amarillo
circle(200, 200, 150);    // Círculo en el centro

2. Haz clic en el Botón Ejecutar (Play ▶).
3. Si todo es correcto, se abrirá una ventana emergente de $400 \times 400$ píxeles con un círculo amarillo sobre fondo azul. ¡Ya estás listo para programar!

Paso 4: Cómo guardar tus proyectos

En Processing, cada proyecto se llama Sketch.

• Ve a Archivo $\rightarrow$ Guardar como…
• Asigna un nombre al proyecto (por ejemplo, Actividad1_NombreApellido).
• Processing creará una carpeta con ese mismo nombre y, dentro, un archivo con extensión .pde (el archivo de código que deberás entregar).

INSTRUCCIONES DE ENTREGA DE LA TAREA

Debes entregar un archivo ZIP que contenga:

1. El código de la Actividad 1 en su carpeta correspondiente (Actividad1_NombreApellido.pde).
2. El código de la Actividad 2 en su carpeta correspondiente (Actividad2_NombreApellido.pde).
3. Una captura de pantalla en formato .png o .jpg del resultado visual de cada una de tus obras.

ACTIVIDAD 1: El Lienzo Geométrico (Puntuación: 4 puntos)

Objetivo: Demostrar el dominio de la sintaxis, las funciones primitivas y el sistema de coordenadas.

Crea un programa en Processing con un lienzo de 600 x 600 píxeles con fondo de color libre. Debes dibujar una composición geométrica abstracta estructurada que incorpore al menos una vez cada una de las siguientes funciones gráficas:

1. Un conjunto de puntos (point) dibujando una constelación o línea punteada.
2. Una o más líneas (line) que crucen el lienzo o formen una rejilla.
3. Al menos un triángulo (triangle).
4. Al menos un cuadrado y un rectángulo (rect).
5. Al menos una elipse y un círculo (ellipse / circle).
6. Un arco (arc) utilizando el modo OPEN o CHORD.
7. Un sector circular (arc) utilizando el modo PIE.

Requisito técnico: Cada forma geométrica debe tener un color de relleno (fill) o de borde (stroke) diferente para identificarlas claramente. Incluye comentarios (//) en el código indicando qué función gráfica corresponde a cada elemento de la pantalla.

ACTIVIDAD 2: Proyecto de Arte Generativo “Bauhaus / Neoplasticismo Digital” (Puntuación: 6 puntos)

Objetivo: Desarrollar una obra visual artística usando el código como medio creativo.

Inspirándote en corrientes artísticas como la Bauhaus (Vassily Kandinsky) o el Neoplasticismo (Piet Mondrian), debes crear una composición artística digital en un lienzo de 800 x 600 píxeles.

Requisitos de la Composición:

• Uso armónico del color: Define una paleta de colores coherente utilizando el formato RGB (mínimo 4 colores distintos).
• Complejidad gráfica: La composición debe incluir un mínimo de 12 elementos gráficos distribuidos equilibradamente en el espacio.
• Combinación de formas complejas: Debes combinar sectores/arcos, formas rectas (rectángulos, líneas) y curvas (elipses, círculos) para crear sensación de profundidad o movimiento.
• Identidad de la Obra: Al final de tu código, usa el comando println("Título de la Obra - Autor"); para mostrar por la consola de Processing el título artístico de tu pieza y tu nombre.

Criterios de Evaluación (Rúbrica Moodle):

• Correcto uso de funciones y coordenadas (30%): Ausencia de errores de sintaxis y ubicación coherente en el lienzo.
• Variedad funcional (30%): Integración efectiva de puntos, líneas, polígonos, curvas y arcos/sectores.
• Calidad artística y estética (30%): Trabajo con el color, la composición y el peso visual.
• Orden y comentarios en el código (10%): Código limpio, estructurado e identado.