Tutorial de Processing.

Instrucciones para el alumno

1.Escribe el código en Processing para cada ejercicio.
2.Ejecuta el programa y toma una captura de pantalla de la salida.
3.Guarda el código y la captura en un archivo (Word, PDF, etc.).
4.Asegúrate de que el código esté bien comentado y organizado.
5.Entrega todos los ejercicios completos (código + captura) en la plataforma indicada.

Rubrica para evaluación de tutorial de processing.

Criterio Excelente (5) Bueno (4) Regular (3) Deficiente (2) Insuficiente (1)

Correctitud del Código funciona Código funciona, Código tiene errores Código tiene errores Código tiene errores
código perfectamente y pero tiene pequeños que afectan graves que impiden graves que impiden
resuelve el problema errores no parcialmente el su funcionamiento. su funcionamiento.
de manera óptima. relevantes. resultado.
Captura de pantalla Captura muestra Captura muestra la Captura no coincide Captura no muestra No se entrega la
claramente la salida y salida, pero tiene completamente con la salida correcta o captura de pantalla.
coincide exactamente pequeños detalles no el código o está está incompleta
con el código. relevantes. desenfocada
Creatividad y Código está bien Código está Código está Código está muy Código es ilegible o
presentación organizado, organizado, pero le desorganizado o le desorganizado y no no se entrega.
comentado y sigue faltan algunos faltan varios sigue buenas
buenas prácticas. comentarios o comentarios prácticas.
detalles.
Entrega completa Se entregan todos Se entregan la Se entregan algunos Se entregan muy No se entrega ningún
los ejercicios con mayoría de los ejercicios, pero faltan pocos ejercicios o ejercicio.
código y capturas de ejercicios, pero falta varios códigos o están incompletos.
pantalla completas. algún detalle menor. capturas.

Rúbrica de evaluación para programas en Processing

Criterios de evaluación
1.Correctitud del código:
El código funciona sin errores.
El código resuelve el problema planteado.
El código sigue buenas prácticas de programación.
2.Captura de pantalla:
La captura muestra claramente la salida del programa.
La captura coincide con el código entregado.
3.Creatividad y presentación:
El código está bien organizado y es fácil de entender.
La captura está bien recortada y enfocada en la salida.
4.Entrega completa:
Se entregan todos los ejercicios solicitados.
Cada ejercicio incluye código y captura de pantalla.
1. Introducción a Processing
1.1 ¿Qué es Processing?
Processing es un lenguaje de programación y entorno de desarrollo integrado (IDE) diseñado para artistas,
diseñadores y principiantes. Se utiliza principalmente para crear arte visual, animaciones y proyectos
interactivos. Está basado en Java, pero simplifica muchas cosas para que sea más accesible.

1.2 Entorno de desarrollo (IDE) de Processing

El IDE de Processing es muy sencillo. Consta de:

Un editor de código (donde escribes tu programa).

Un botón de "Play" (para ejecutar el programa).
Una ventana de visualización (donde se muestra el resultado, llamado "canvas").

1.3 Estructura básica de un sketch: setup() y draw()

En Processing, un programa se llama "sketch". Todo sketch tiene dos funciones principales:

1.setup(): Se ejecuta una sola vez al inicio. Aquí defines configuraciones iniciales, como el tamaño del
canvas.
2.draw(): Se ejecuta continuamente en bucle. Aquí defines lo que se dibuja o actualiza en el canvas.

1.4 ¿Qué es un pseudocódigo?

Un pseudocódigo es una descripción informal y simplificada de un programa. No sigue la sintaxis de un
lenguaje de programación, pero explica la lógica y los pasos necesarios para resolver un problema. Es útil
para planificar antes de escribir el código real.

Pseudocódigo de un sketch básico

1. Iniciar el sketch:

- Tamaño del canvas: 400x400 píxeles.

- Color de fondo: gris claro.

2. Dibujar en el canvas:

- Dibujar un círculo en la posición (200, 200) con radio 50.

- Color del círculo: azul.

Código en Processing
void setup() {
size(400, 400); // Tamaño del canvas
background(200); // Color de fondo (gris claro)
}
void draw() {
fill(0, 0, 255); // Color de relleno (azul)
ellipse(200, 200, 50, 50); // Dibujar un círculo
}
Salida esperada
Una ventana de 400x400 píxeles con fondo gris claro.
Un círculo azul en el centro de la ventana.

2. Trabajo con el Canvas

2.1 Tamaño del canvas: size()
El canvas es el área donde se dibuja todo en Processing. Para definir su tamaño, se usa la función size().

Pseudocódigo para definir el tamaño del canvas

1. Iniciar el sketch:
- Tamaño del canvas: 800x600 píxeles.

Código en Processing
void setup() {
size(800, 600); // Define un canvas de 800x600 píxeles
}

2.2 Sistema de coordenadas en Processing

En Processing, el sistema de coordenadas comienza en la esquina superior izquierda del canvas:

El eje X va de izquierda a derecha.

El eje Y va de arriba hacia abajo.
El punto (0, 0) es la esquina superior izquierda.

Pseudocódigo para dibujar en coordenadas específicas

1. Iniciar el sketch:
- Tamaño del canvas: 400x400 píxeles.
2. Dibujar en el canvas:
- Dibujar un punto en la posición (100, 200).

Código en Processing
void setup() {
size(400, 400); // Canvas de 400x400
}
void draw() {
 point(100, 200); // Dibuja un punto en (100, 200)
}
Salida esperada
Un punto pequeño en la posición (100, 200) del canvas.

2.3 Color de fondo: background()

El color de fondo se define con la función background(). Puedes usar valores en escala de grises (0-255) o
colores RGB.

Pseudocódigo para cambiar el color de fondo

1. Iniciar el sketch:
- Tamaño del canvas: 400x400 píxeles.
- Color de fondo: verde claro.

Código en Processing
void setup() {
size(400, 400); // Canvas de 400x400
background(150, 255, 150); // Fondo verde claro (RGB)
}
Salida esperada
Una ventana de 400x400 con fondo verde claro.

2.4 Modos de color: RGB, HSB, etc.

Processing permite trabajar con diferentes modos de color:

RGB: Rojo, Verde, Azul (valores de 0 a 255).

HSB: Tono, Saturación, Brillo (valores de 0 a 255 o 0-360 para el tono).

Pseudocódigo para cambiar el modo de color

1. Iniciar el sketch:

- Tamaño del canvas: 400x400 píxeles.

- Modo de color: HSB.

- Color de fondo: tono 180 (cian), saturación 255, brillo 255.

Código en Processing
void setup() {

size(400, 400); // Canvas de 400x400

colorMode(HSB, 360, 255, 255); // Cambiar a modo HSB

background(180, 255, 255); // Fondo cian

Salida esperada
Una ventana de 400x400 con fondo cian.

2.5 Ejemplo combinado: Canvas con formas y colores

Vamos a combinar todo lo aprendido en un solo sketch.

Pseudocódigo
1. Iniciar el sketch:

- Tamaño del canvas: 500x500 píxeles.

- Color de fondo: gris claro.

2. Dibujar en el canvas:

- Dibujar un rectángulo rojo en (100, 100) con tamaño 200x100.

- Dibujar un círculo azul en (300, 300) con radio 50.

Código en Processing

void setup() {

size(500, 500); // Canvas de 500x500

background(200); // Fondo gris claro

void draw() {

fill(255, 0, 0); // Color de relleno (rojo)

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

fill(0, 0, 255); // Color de relleno (azul)

ellipse(300, 300, 50, 50); // Círculo azul

Salida esperada
Una ventana de 500x500 con fondo gris claro.
 Un rectángulo rojo en la posición (100, 100).
Un círculo azul en la posición (300, 300).

3. Figuras básicas
En Processing, puedes dibujar figuras geométricas básicas como líneas, rectángulos, círculos, triángulos y
más. Estas figuras se dibujan usando funciones específicas.

3.1 Dibujo de formas primitivas

Processing ofrece funciones para dibujar formas primitivas. Las más comunes son:

Línea: line(x1, y1, x2, y2).

Rectángulo: rect(x, y, ancho, alto).
Círculo: ellipse(x, y, ancho, alto).
Triángulo: triangle(x1, y1, x2, y2, x3, y3).
Cuadrilátero: quad(x1, y1, x2, y2, x3, y3, x4, y4).

3.2 Propiedades de las formas

Además de dibujar las formas, puedes personalizar su apariencia con las siguientes funciones:

Color de relleno: fill(rojo, verde, azul).

Color del borde: stroke(rojo, verde, azul).
Grosor del borde: strokeWeight(grosor).
Eliminar borde: noStroke().
Eliminar relleno: noFill().

Pseudocódigo para dibujar formas básicas

1. Iniciar el sketch:

- Tamaño del canvas: 500x500 píxeles.

- Color de fondo: blanco.

2. Dibujar en el canvas:

- Dibujar una línea desde (50, 50) hasta (450, 450).

- Dibujar un rectángulo en (100, 100) con tamaño 200x100.

- Dibujar un círculo en (300, 300) con radio 50.

- Dibujar un triángulo con vértices en (400, 100), (450, 200), (350, 200).

Código en Processing
void setup() {

size(500, 500); // Canvas de 500x500

background(255); // Fondo blanco

}
void draw() {

// Dibujar una línea

stroke(0); // Color del borde (negro)

line(50, 50, 450, 450); // Línea desde (50, 50) hasta (450, 450)

// Dibujar un rectángulo

fill(255, 0, 0); // Color de relleno (rojo)

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

// Dibujar un círculo

fill(0, 0, 255); // Color de relleno (azul)

ellipse(300, 300, 50, 50); // Círculo en (300, 300)

// Dibujar un triángulo

fill(0, 255, 0); // Color de relleno (verde)

triangle(400, 100, 450, 200, 350, 200); // Triángulo

Salida esperada
Una ventana de 500x500 con fondo blanco.
Una línea diagonal desde la esquina superior izquierda hasta la inferior derecha.
Un rectángulo rojo en la posición (100, 100).
Un círculo azul en la posición (300, 300).
Un triángulo verde en la parte superior derecha.

3.3 Transformaciones básicas

Processing permite aplicar transformaciones a las formas, como traslación, rotación y escalado. Las funciones
más comunes son:

Traslación: translate(x, y).

Rotación: rotate(ángulo).
Escalado: scale(factor).
Pseudocódigo para aplicar transformaciones
1. Iniciar el sketch:

- Tamaño del canvas: 400x400 píxeles.

- Color de fondo: gris claro.

2. Dibujar en el canvas:

- Trasladar el origen a (200, 200).

- Rotar 45 grados.
- Dibujar un rectángulo en (0, 0) con tamaño 100x50.

Código en Processing
void setup() {

size(400, 400); // Canvas de 400x400

background(200); // Fondo gris claro

void draw() {

translate(200, 200); // Trasladar el origen a (200, 200)

rotate(radians(45)); // Rotar 45 grados (usar radians para convertir)

fill(255, 0, 0); // Color de relleno (rojo)

rect(0, 0, 100, 50); // Rectángulo en (0, 0)

Salida esperada
Una ventana de 400x400 con fondo gris claro.
Un rectángulo rojo rotado 45 grados, centrado en el canvas.

3.4 Ejemplo combinado: Figuras con colores y transformaciones

Vamos a combinar todo lo aprendido en un solo sketch.

Pseudocódigo
1. Iniciar el sketch:

- Tamaño del canvas: 600x600 píxeles.

- Color de fondo: negro.

2. Dibujar en el canvas:

- Dibujar un círculo en (300, 300) con radio 100.

- Dibujar un rectángulo rotado 30 grados en (300, 300).

- Dibujar un triángulo escalado en (300, 300).

Código en Processing
void setup() {

size(600, 600); // Canvas de 600x600

background(0); // Fondo negro

void draw() {
 // Dibujar un círculo

fill(255, 0, 0); // Color de relleno (rojo)

ellipse(300, 300, 100, 100); // Círculo en (300, 300)

// Dibujar un rectángulo rotado

pushMatrix(); // Guardar la matriz de transformación actual

translate(300, 300); // Trasladar el origen a (300, 300)

rotate(radians(30)); // Rotar 30 grados

fill(0, 255, 0); // Color de relleno (verde)

rect(0, 0, 150, 75); // Rectángulo en (0, 0)

popMatrix(); // Restaurar la matriz de transformación

// Dibujar un triángulo escalado

pushMatrix();

translate(300, 300); // Trasladar el origen a (300, 300)

scale(1.5); // Escalar 1.5 veces

fill(0, 0, 255); // Color de relleno (azul)

triangle(-50, -50, 50, -50, 0, 50); // Triángulo

popMatrix();

Salida esperada
Una ventana de 600x600 con fondo negro.
Un círculo rojo en el centro.
Un rectángulo verde rotado 30 grados.
Un triángulo azul escalado.

4. Variables y tipos de datos

En Processing, las variables son contenedores que almacenan datos. Los tipos de datos más comunes son:

int: Números enteros (ejemplo: int edad = 25;).

float: Números decimales (ejemplo: float altura = 1.75;).
boolean: Valores lógicos (true o false).
String: Texto (ejemplo: String nombre = "Juan";).

4.1 Declaración e inicialización de variables

Para usar una variable, primero debes declararla (decirle a Processing qué tipo de dato almacenará) y luego
inicializarla (asignarle un valor).
Pseudocódigo para usar variables
1. Iniciar el sketch:

- Tamaño del canvas: 400x400 píxeles.

- Color de fondo: gris claro.

2. Declarar variables:

- Entero: posición X de un círculo.

- Decimal: posición Y de un círculo.

- Texto: mensaje para mostrar.

3. Dibujar en el canvas:

- Dibujar un círculo en la posición (X, Y).

- Mostrar el mensaje en la pantalla.

Código en Processing
void setup() {

size(400, 400); // Canvas de 400x400

background(200); // Fondo gris claro

void draw() {

// Declarar e inicializar variables

int posX = 200; // Posición X del círculo

float posY = 150.5; // Posición Y del círculo

String mensaje = "Hola, Processing!"; // Mensaje para mostrar

// Dibujar un círculo

fill(0, 0, 255); // Color de relleno (azul)

ellipse(posX, posY, 100, 100); // Círculo en (posX, posY)

// Mostrar el mensaje

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

text(mensaje, 100, 350); // Mostrar mensaje en (100, 350)

Lo que físicamente se verá en la pantalla

Una ventana de 400x400 píxeles con fondo gris claro.
 Un círculo azul centrado horizontalmente (en X = 200) y ligeramente arriba del centro vertical (en Y = 150.5).
El texto "Hola, Processing!" en la parte inferior de la pantalla, en color negro y tamaño 20.
4.2 Ámbito de las variables (globales vs locales)
Las variables pueden ser globales (accesibles en todo el sketch) o locales (accesibles solo dentro de una
función).

Pseudocódigo para variables globales y locales

1. Iniciar el sketch:

- Tamaño del canvas: 400x400 píxeles.

- Color de fondo: gris claro.

2. Declarar una variable global:

- Entero: tamaño del círculo.

3. Dibujar en el canvas:

- Declarar una variable local: posición X del círculo.

- Dibujar un círculo en (X, 200) con el tamaño global.

Código en Processing
// Variable global

int tamanoCirculo = 150;

void setup() {

size(400, 400); // Canvas de 400x400

background(200); // Fondo gris claro

void draw() {

// Variable local

int posX = 200; // Posición X del círculo

// Dibujar un círculo

fill(255, 0, 0); // Color de relleno (rojo)

ellipse(posX, 200, tamanoCirculo, tamanoCirculo); // Círculo en (posX, 200)

Lo que físicamente se verá en la pantalla

Una ventana de 400x400 píxeles con fondo gris claro.
Un círculo rojo centrado verticalmente (en Y = 200) y horizontalmente (en X = 200), con un tamaño de 150
píxeles.
4.3 Ejemplo combinado: Variables dinámicas
Vamos a usar variables para crear un círculo que se mueve horizontalmente.

Pseudocódigo
1. Iniciar el sketch:

- Tamaño del canvas: 400x400 píxeles.

- Color de fondo: gris claro.

2. Declarar una variable global:

- Entero: posición X del círculo.

3. Dibujar en el canvas:

- Incrementar la posición X del círculo.

- Dibujar el círculo en la nueva posición.

- Reiniciar la posición X si sale del canvas.

Código en Processing
// Variable global

int posX = 0;

void setup() {

size(400, 400); // Canvas de 400x400

background(200); // Fondo gris claro

void draw() {

// Limpiar el canvas en cada fotograma

background(200);

// Dibujar un círculo

fill(0, 255, 0); // Color de relleno (verde)

ellipse(posX, 200, 50, 50); // Círculo en (posX, 200)

// Incrementar la posición X

posX = posX + 2;
 // Reiniciar la posición X si sale del canvas

if (posX > 400) {

posX = 0;

Lo que físicamente se verá en la pantalla

Una ventana de 400x400 píxeles con fondo gris claro.
Un círculo verde que se mueve de izquierda a derecha.
Cuando el círculo llega al borde derecho de la ventana, reaparece en el borde izquierdo.

5. Estructuras de control
Las estructuras de control permiten tomar decisiones y repetir acciones en un programa. Las más comunes
son:

Condicionales: if, else if, else.

Bucles: for, while.
5.1 Condicionales: if, else if, else
Los condicionales permiten ejecutar código dependiendo de si una condición es verdadera o falsa.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: gris claro.

// 2. Declarar una variable:

// - Entero: posición X del círculo.

// 3. Dibujar en el canvas:

// - Si la posición X es menor que 200, dibujar un círculo rojo.

// - Si no, dibujar un círculo azul.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(200); // Fondo gris claro

void draw() {

int posX = mouseX; // Posición X del círculo (seguir el ratón)

 if (posX < 200) { // Si posX es menor que 200

fill(255, 0, 0); // Color de relleno (rojo)

} else { // Si no

fill(0, 0, 255); // Color de relleno (azul)

ellipse(posX, 200, 50, 50); // Dibujar un círculo en (posX, 200)

Lo que físicamente se verá en la pantalla

Una ventana de 400x400 píxeles con fondo gris claro.
Un círculo que sigue el movimiento horizontal del ratón.
El círculo será rojo si está en la mitad izquierda del canvas (X < 200) y azul si está en la mitad derecha (X >=
200).

5.2 Bucles: for

El bucle for permite repetir un bloque de código un número específico de veces.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: negro.

// 2. Dibujar en el canvas:

// - Usar un bucle `for` para dibujar 10 círculos en una fila.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(0); // Fondo negro

void draw() {

for (int i = 0; i < 10; i++) { // Bucle de 0 a 9

float posX = 40 + i * 40; // Posición X de cada círculo

fill(255, 0, 0); // Color de relleno (rojo)

 ellipse(posX, 200, 30, 30); // Dibujar un círculo

Lo que físicamente se verá en la pantalla

Una ventana de 400x400 píxeles con fondo negro.
Una fila de 10 círculos rojos, espaciados uniformemente a lo largo del canvas.

5.3 Bucles: while

El bucle while repite un bloque de código mientras una condición sea verdadera.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: blanco.

// 2. Dibujar en el canvas:

// - Usar un bucle `while` para dibujar círculos hasta que se llene una fila.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(255); // Fondo blanco

void draw() {

int i = 0; // Contador

while (i < 10) { // Mientras i sea menor que 10

float posX = 40 + i * 40; // Posición X de cada círculo

fill(0, 0, 255); // Color de relleno (azul)

ellipse(posX, 200, 30, 30); // Dibujar un círculo

i++; // Incrementar el contador

Lo que físicamente se verá en la pantalla

Una ventana de 400x400 píxeles con fondo blanco.
Una fila de 10 círculos azules, espaciados uniformemente a lo largo del canvas.
5.4 Ejemplo combinado: Condicionales y bucles
Vamos a combinar condicionales y bucles para crear un patrón interactivo.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: gris claro.

// 2. Dibujar en el canvas:

// - Usar un bucle `for` para dibujar una cuadrícula de círculos.

// - Si el círculo está cerca del ratón, cambiar su color.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(200); // Fondo gris claro

void draw() {

for (int i = 0; i < 10; i++) { // Bucle para filas

for (int j = 0; j < 10; j++) { // Bucle para columnas

float posX = 40 + i * 40; // Posición X del círculo

float posY = 40 + j * 40; // Posición Y del círculo

// Calcular la distancia al ratón

float distancia = dist(posX, posY, mouseX, mouseY);

if (distancia < 20) { // Si el ratón está cerca

fill(255, 0, 0); // Color de relleno (rojo)

} else { // Si no

fill(0, 0, 255); // Color de relleno (azul)

ellipse(posX, posY, 30, 30); // Dibujar un círculo

 }

Lo que físicamente se verá en la pantalla

Una ventana de 400x400 píxeles con fondo gris claro.
Una cuadrícula de 10x10 círculos azules.
Cuando el ratón se acerca a un círculo, este cambia a rojo.

6. Funciones
Las funciones son bloques de código que realizan una tarea específica. Pueden recibir parámetros y devolver
valores. En Processing, las funciones son útiles para organizar el código y reutilizarlo.

6.1 Creación de funciones personalizadas

Puedes crear tus propias funciones para realizar tareas repetitivas o complejas.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: gris claro.

// 2. Crear una función personalizada:

// - Nombre: dibujarCirculo.

// - Parámetros: posición X, posición Y, color.

// - Tarea: dibujar un círculo en la posición dada con el color especificado.

// 3. Dibujar en el canvas:

// - Llamar a la función dibujarCirculo varias veces con diferentes parámetros.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(200); // Fondo gris claro

void draw() {

// Llamar a la función dibujarCirculo

dibujarCirculo(100, 100, color(255, 0, 0)); // Círculo rojo

dibujarCirculo(200, 200, color(0, 255, 0)); // Círculo verde

 dibujarCirculo(300, 300, color(0, 0, 255)); // Círculo azul

// Función personalizada para dibujar un círculo

void dibujarCirculo(float x, float y, color c) {

fill(c); // Usar el color especificado

ellipse(x, y, 50, 50); // Dibujar un círculo

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo gris claro.

// - Tres círculos de 50 píxeles de diámetro:

// - Uno rojo en la posición (100, 100).

// - Uno verde en la posición (200, 200).

// - Uno azul en la posición (300, 300).

6.2 Funciones con valores de retorno

Las funciones pueden devolver valores usando la palabra clave return.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: gris claro.

// 2. Crear una función personalizada:

// - Nombre: calcularArea.

// - Parámetros: radio.

// - Tarea: calcular el área de un círculo.

// 3. Dibujar en el canvas:

// - Llamar a la función calcularArea y mostrar el resultado.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(200); // Fondo gris claro

}
void draw() {

float radio = 50; // Radio del círculo

float area = calcularArea(radio); // Calcular el área

// Mostrar el resultado en el canvas

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

text("Área: " + area, 100, 200); // Mostrar el área

// Función personalizada para calcular el área de un círculo

float calcularArea(float r) {

return PI * r * r; // Devolver el área

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo gris claro.

// - El texto "Área: 7853.98" en la posición (100, 200).

6.3 Ejemplo combinado: Funciones y bucles

Vamos a combinar funciones y bucles para crear un patrón interactivo.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: negro.

// 2. Crear una función personalizada:

// - Nombre: dibujarCuadrado.

// - Parámetros: posición X, posición Y, tamaño.

// - Tarea: dibujar un cuadrado en la posición dada con el tamaño especificado.

// 3. Dibujar en el canvas:

// - Usar un bucle `for` para dibujar una cuadrícula de cuadrados.

// - Cambiar el color de los cuadrados según la distancia al ratón.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(0); // Fondo negro

void draw() {

for (int i = 0; i < 10; i++) { // Bucle para filas

for (int j = 0; j < 10; j++) { // Bucle para columnas

float posX = 40 + i * 40; // Posición X del cuadrado

float posY = 40 + j * 40; // Posición Y del cuadrado

// Calcular la distancia al ratón

float distancia = dist(posX, posY, mouseX, mouseY);

// Cambiar el color según la distancia

if (distancia < 50) {

dibujarCuadrado(posX, posY, 30, color(255, 0, 0)); // Cuadrado rojo

} else {

dibujarCuadrado(posX, posY, 30, color(0, 0, 255)); // Cuadrado azul

// Función personalizada para dibujar un cuadrado

void dibujarCuadrado(float x, float y, float tam, color c) {

fill(c); // Usar el color especificado

rect(x, y, tam, tam); // Dibujar un cuadrado

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo negro.

// - Una cuadrícula de 10x10 cuadrados azules.

// - Cuando el ratón se acerca a un cuadrado, este cambia a **rojo**.

7. Ciclos anidados
Los ciclos anidados son bucles dentro de otros bucles. Son útiles para trabajar con estructuras
bidimensionales, como matrices o cuadrículas.

7.1 Dibujar una cuadrícula con ciclos anidados

Podemos usar ciclos anidados para dibujar una cuadrícula de formas en el canvas.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: blanco.

// 2. Dibujar en el canvas:

// - Usar dos bucles `for` anidados para dibujar una cuadrícula de círculos.

// - Espaciar los círculos uniformemente.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(255); // Fondo blanco

void draw() {

for (int i = 0; i < 10; i++) { // Bucle para filas

for (int j = 0; j < 10; j++) { // Bucle para columnas

float posX = 40 + i * 40; // Posición X del círculo

float posY = 40 + j * 40; // Posición Y del círculo

fill(0, 0, 255); // Color de relleno (azul)

ellipse(posX, posY, 30, 30); // Dibujar un círculo

}
// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo blanco.

// - Una cuadrícula de 10x10 círculos azules, espaciados uniformemente.

7.2 Cambiar el color de la cuadrícula dinámicamente

Podemos modificar el color de los círculos en función de su posición en la cuadrícula.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: negro.

// 2. Dibujar en el canvas:

// - Usar dos bucles `for` anidados para dibujar una cuadrícula de círculos.

// - Cambiar el color de los círculos según su posición en la cuadrícula.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(0); // Fondo negro

void draw() {

for (int i = 0; i < 10; i++) { // Bucle para filas

for (int j = 0; j < 10; j++) { // Bucle para columnas

float posX = 40 + i * 40; // Posición X del círculo

float posY = 40 + j * 40; // Posición Y del círculo

// Cambiar el color según la posición

fill(i * 25, j * 25, 255); // Color de relleno (gradiente)

ellipse(posX, posY, 30, 30); // Dibujar un círculo

}
}

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo negro.

// - Una cuadrícula de 10x10 círculos con colores que cambian en un gradiente:

// - Los círculos de la izquierda son más rojos.

// - Los círculos de arriba son más verdes.

// - Todos tienen un componente azul.

7.3 Crear un patrón interactivo con ciclos anidados

Vamos a combinar ciclos anidados con interacción del ratón para crear un patrón dinámico.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: gris claro.

// 2. Dibujar en el canvas:

// - Usar dos bucles `for` anidados para dibujar una cuadrícula de cuadrados.

// - Cambiar el tamaño de los cuadrados según la distancia al ratón.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(200); // Fondo gris claro

void draw() {

for (int i = 0; i < 10; i++) { // Bucle para filas

for (int j = 0; j < 10; j++) { // Bucle para columnas

float posX = 40 + i * 40; // Posición X del cuadrado

float posY = 40 + j * 40; // Posición Y del cuadrado

// Calcular la distancia al ratón

float distancia = dist(posX, posY, mouseX, mouseY);

 // Cambiar el tamaño según la distancia

float tam = map(distancia, 0, 200, 40, 10); // Mapear la distancia a un tamaño

fill(0, 0, 255); // Color de relleno (azul)

rect(posX, posY, tam, tam); // Dibujar un cuadrado

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo gris claro.

// - Una cuadrícula de 10x10 cuadrados azules.

// - Cuando el ratón se acerca a un cuadrado, este aumenta de tamaño.

// - Cuando el ratón se aleja, el cuadrado disminuye de tamaño.

7.4 Ejemplo avanzado: Espiral con ciclos anidados

Vamos a crear una espiral usando ciclos anidados y funciones trigonométricas.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: negro.

// 2. Dibujar en el canvas:

// - Usar un bucle `for` para dibujar una espiral.

// - Calcular las posiciones usando seno y coseno.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(0); // Fondo negro

void draw() {

translate(width / 2, height / 2); // Mover el origen al centro

noFill(); // Sin relleno

 stroke(255); // Color del borde (blanco)

for (int i = 0; i < 360 * 5; i += 10) { // Bucle para la espiral

float angulo = radians(i); // Convertir grados a radianes

float radio = i * 0.1; // Aumentar el radio gradualmente

float x = radio * cos(angulo); // Posición X

float y = radio * sin(angulo); // Posición Y

ellipse(x, y, 10, 10); // Dibujar un círculo

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo negro.

// - Una espiral blanca compuesta por círculos pequeños.

// - La espiral comienza en el centro y se expande hacia afuera.

8. Arreglos (Arrays)
Un arreglo (o array) es una estructura de datos que permite almacenar múltiples valores del mismo tipo en
una sola variable. En Processing, los arreglos son muy útiles para trabajar con listas de números,
coordenadas, colores, etc.

// Pseudocódigo:
// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: blanco.

// 2. Declarar e inicializar un arreglo de números.

// 3. Mostrar los valores del arreglo en el canvas.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(255); // Fondo blanco

 // Declarar e inicializar un arreglo de números

int[] numeros = {10, 20, 30, 40, 50};

// Mostrar los valores del arreglo en el canvas

for (int i = 0; i < numeros.length; i++) {

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

text("Elemento " + i + ": " + numeros[i], 50, 50 + i * 30); // Mostrar el valor

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo blanco.

// - Los valores del arreglo [10, 20, 30, 40, 50] se muestran en el canvas:

// - Elemento 0: 10

// - Elemento 1: 20

// - Elemento 2: 30

// - Elemento 3: 40

// - Elemento 4: 50

8.2 Modificación de arreglos

Los valores de un arreglo se pueden modificar accediendo a sus índices.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: blanco.

// 2. Declarar e inicializar un arreglo de números.

// 3. Modificar algunos valores del arreglo.

// 4. Mostrar los valores modificados en el canvas.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(255); // Fondo blanco

 // Declarar e inicializar un arreglo de números

int[] numeros = {10, 20, 30, 40, 50};

// Modificar algunos valores del arreglo

numeros[1] = 25; // Cambiar el segundo elemento a 25

numeros[3] = 45; // Cambiar el cuarto elemento a 45

// Mostrar los valores modificados en el canvas

for (int i = 0; i < numeros.length; i++) {

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

text("Elemento " + i + ": " + numeros[i], 50, 50 + i * 30); // Mostrar el valor

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo blanco.

// - Los valores del arreglo [10, 25, 30, 45, 50] se muestran en el canvas:

// - Elemento 0: 10

// - Elemento 1: 25

// - Elemento 2: 30

// - Elemento 3: 45

// - Elemento 4: 50

8.3 Arreglos y bucles

Los arreglos se pueden recorrer fácilmente usando bucles, lo que permite manipular o visualizar todos sus
elementos.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: blanco.

// 2. Declarar e inicializar un arreglo de números.

// 3. Usar un bucle `for` para mostrar los valores del arreglo en el canvas.
// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(255); // Fondo blanco

// Declarar e inicializar un arreglo de números

int[] numeros = {5, 15, 25, 35, 45};

// Usar un bucle `for` para mostrar los valores del arreglo

for (int i = 0; i < numeros.length; i++) {

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

text("Elemento " + i + ": " + numeros[i], 50, 50 + i * 30); // Mostrar el valor

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo blanco.

// - Los valores del arreglo [5, 15, 25, 35, 45] se muestran en el canvas:

// - Elemento 0: 5

// - Elemento 1: 15

// - Elemento 2: 25

// - Elemento 3: 35

// - Elemento 4: 45

8.4 Arreglos y funciones

Los arreglos se pueden pasar como parámetros a funciones, lo que permite modularizar el código.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: blanco.

// 2. Declarar e inicializar un arreglo de números.

// 3. Crear una función para mostrar los valores del arreglo.

// 4. Llamar a la función para mostrar los valores en el canvas.

// Código de Processing:

void setup() {

size(400, 400); // Canvas de 400x400

background(255); // Fondo blanco

// Declarar e inicializar un arreglo de números

int[] numeros = {7, 14, 21, 28, 35};

// Llamar a la función para mostrar los valores del arreglo

mostrarArreglo(numeros);

// Función para mostrar los valores del arreglo

void mostrarArreglo(int[] arr) {

for (int i = 0; i < arr.length; i++) {

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

text("Elemento " + i + ": " + arr[i], 50, 50 + i * 30); // Mostrar el valor

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo blanco.

// - Los valores del arreglo [7, 14, 21, 28, 35] se muestran en el canvas:

// - Elemento 0: 7

// - Elemento 1: 14

// - Elemento 2: 21

// - Elemento 3: 28

// - Elemento 4: 35
9. Algoritmos de ordenamiento
Los algoritmos de ordenamiento son métodos para organizar datos en un orden específico (ascendente o
descendente). Vamos a implementar y visualizar dos algoritmos clásicos.

9.1 Bubble Sort

El algoritmo Bubble Sort compara elementos adyacentes y los intercambia si están en el orden incorrecto.
Repite este proceso hasta que todos los elementos estén ordenados.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: blanco.

// 2. Crear un arreglo de números desordenados.

// 3. Implementar el algoritmo Bubble Sort:

// - Comparar elementos adyacentes.

// - Intercambiarlos si están en el orden incorrecto.

// - Repetir hasta que el arreglo esté ordenado.

// 4. Visualizar el arreglo en el canvas.

// Código de Processing:

int[] arreglo = {5, 3, 8, 4, 6}; // Arreglo desordenado

int i = 0; // Índice para el bucle

void setup() {

size(400, 400); // Canvas de 400x400

background(255); // Fondo blanco

frameRate(1); // Velocidad de actualización (1 fotograma por segundo)

void draw() {

background(255); // Limpiar el canvas en cada fotograma

// Dibujar el arreglo

for (int j = 0; j < arreglo.length; j++) {

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

 text(arreglo[j], 50 + j * 70, 200); // Mostrar el número

// Aplicar Bubble Sort

if (i < arreglo.length - 1) {

for (int j = 0; j < arreglo.length - i - 1; j++) {

if (arreglo[j] > arreglo[j + 1]) {

// Intercambiar elementos

int temp = arreglo[j];

arreglo[j] = arreglo[j + 1];

arreglo[j + 1] = temp;

i++;

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo blanco.

// - Los números del arreglo [5, 3, 8, 4, 6] se muestran en el canvas.

// - En cada fotograma, los números se ordenan gradualmente:

// - Primera iteración: [3, 5, 4, 6, 8]

// - Segunda iteración: [3, 4, 5, 6, 8]

// - Tercera iteración: [3, 4, 5, 6, 8] (ya ordenado)

9.2 Selection Sort

El algoritmo Selection Sort busca el elemento más pequeño (o más grande) en cada iteración y lo coloca en
su posición correcta

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: blanco.

// 2. Crear un arreglo de números desordenados.

// 3. Implementar el algoritmo Selection Sort:

// - Buscar el elemento más pequeño en cada iteración.

// - Colocarlo en su posición correcta.

// - Repetir hasta que el arreglo esté ordenado.

// 4. Visualizar el arreglo en el canvas.

// Código de Processing:

int[] arreglo = {5, 3, 8, 4, 6}; // Arreglo desordenado

int i = 0; // Índice para el bucle

void setup() {

size(400, 400); // Canvas de 400x400

background(255); // Fondo blanco

frameRate(1); // Velocidad de actualización (1 fotograma por segundo)

void draw() {

background(255); // Limpiar el canvas en cada fotograma

// Dibujar el arreglo

for (int j = 0; j < arreglo.length; j++) {

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

text(arreglo[j], 50 + j * 70, 200); // Mostrar el número

// Aplicar Selection Sort

if (i < arreglo.length - 1) {

int minIndex = i; // Índice del elemento más pequeño

for (int j = i + 1; j < arreglo.length; j++) {

if (arreglo[j] < arreglo[minIndex]) {

minIndex = j; // Actualizar el índice del elemento más pequeño

// Intercambiar elementos
 int temp = arreglo[i];

arreglo[i] = arreglo[minIndex];

arreglo[minIndex] = temp;

i++;

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo blanco.

// - Los números del arreglo [5, 3, 8, 4, 6] se muestran en el canvas.

// - En cada fotograma, los números se ordenan gradualmente:

// - Primera iteración: [3, 5, 8, 4, 6]

// - Segunda iteración: [3, 4, 8, 5, 6]

// - Tercera iteración: [3, 4, 5, 8, 6]

// - Cuarta iteración: [3, 4, 5, 6, 8] (ya ordenado)

9.3 Visualización gráfica de los algoritmos

Podemos mejorar la visualización representando los números como barras de diferentes alturas.

// Pseudocódigo:

// 1. Iniciar el sketch:

// - Tamaño del canvas: 400x400 píxeles.

// - Color de fondo: blanco.

// 2. Crear un arreglo de números desordenados.

// 3. Implementar el algoritmo Bubble Sort o Selection Sort.

// 4. Visualizar el arreglo como barras en el canvas.

// Código de Processing (Bubble Sort con barras):

int[] arreglo = {5, 3, 8, 4, 6}; // Arreglo desordenado

int i = 0; // Índice para el bucle

void setup() {

size(400, 400); // Canvas de 400x400

background(255); // Fondo blanco

frameRate(1); // Velocidad de actualización (1 fotograma por segundo)

}
void draw() {

background(255); // Limpiar el canvas en cada fotograma

// Dibujar el arreglo como barras

for (int j = 0; j < arreglo.length; j++) {

fill(0, 0, 255); // Color de relleno (azul)

rect(j * 80, height - arreglo[j] * 40, 50, arreglo[j] * 40); // Dibujar barra

// Aplicar Bubble Sort

if (i < arreglo.length - 1) {

for (int j = 0; j < arreglo.length - i - 1; j++) {

if (arreglo[j] > arreglo[j + 1]) {

// Intercambiar elementos

int temp = arreglo[j];

arreglo[j] = arreglo[j + 1];

arreglo[j + 1] = temp;

i++;

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo blanco.

// - Los números del arreglo [5, 3, 8, 4, 6] se representan como barras azules.

// - En cada fotograma, las barras se ordenan gradualmente:

// - Primera iteración: [3, 5, 4, 6, 8]

// - Segunda iteración: [3, 4, 5, 6, 8]

// - Tercera iteración: [3, 4, 5, 6, 8] (ya ordenado)

10. Ejemplos típicos
10.1 Cálculo de números primos
Un número primo es aquel que solo es divisible por 1 y por sí mismo. Vamos a crear un programa que
determine si un número es primo.

Descripción conceptual
Un número primo solo tiene dos divisores: 1 y él mismo.
Para verificar si un número es primo, se comprueba si es divisible por algún número entre 2 y la raíz
cuadrada del número.
// Programa para verificar si un número es primo

void setup() {

int numero = 29; // Número a verificar

boolean esPrimo = true; // Suponemos que es primo inicialmente

// Verificar si el número es primo

for (int i = 2; i <= sqrt(numero); i++) {

if (numero % i == 0) {

esPrimo = false; // Si es divisible, no es primo

break;

// Mostrar el resultado en el canvas

size(400, 200); // Tamaño del canvas

background(255); // Fondo blanco

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

if (esPrimo) {

text(numero + " es un número primo.", 50, 100); // Mostrar mensaje

} else {

text(numero + " no es un número primo.", 50, 100); // Mostrar mensaje

// Salida esperada:

// - Una ventana de 400x200 píxeles con fondo blanco.

// - El texto "29 es un número primo." en el centro del canvas.

10.2 Cálculo de números pares e impares

Un número es par si es divisible por 2; de lo contrario, es impar. Vamos a crear un programa que clasifique
números en pares e impares.

Descripción conceptual
Un número es par si el residuo de su división entre 2 es 0.
Un número es impar si el residuo de su división entre 2 es 1.
// Programa para clasificar números en pares e impares

void setup() {

int numero = 7; // Número a verificar

// Verificar si el número es par o impar

size(400, 200); // Tamaño del canvas

background(255); // Fondo blanco

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

if (numero % 2 == 0) {

text(numero + " es un número par.", 50, 100); // Mostrar mensaje

} else {

text(numero + " es un número impar.", 50, 100); // Mostrar mensaje

// Salida esperada:

// - Una ventana de 400x200 píxeles con fondo blanco.

// - El texto "7 es un número impar." en el centro del canvas.

10.3 Serie Fibonacci

La serie Fibonacci es una secuencia de números donde cada número es la suma de los dos anteriores (0, 1,
1, 2, 3, 5, 8, ...). Vamos a generar los primeros 10 números de la serie.

Descripción conceptual
La serie comienza con 0 y 1.
Cada número siguiente es la suma de los dos anteriores.
// Programa para generar la serie Fibonacci

void setup() {

int n = 10; // Número de términos a generar

int a = 0, b = 1; // Primeros dos términos de la serie

// Mostrar la serie Fibonacci en el canvas

size(400, 400); // Tamaño del canvas

background(255); // Fondo blanco

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

text("Serie Fibonacci:", 50, 50); // Título

text("0", 50, 100); // Primer término

text("1", 50, 130); // Segundo término

int y = 160; // Posición vertical inicial

for (int i = 2; i < n; i++) {

int c = a + b; // Calcular el siguiente término

text(c, 50, y); // Mostrar el término

a = b; // Actualizar valores

b = c;

y += 30; // Ajustar posición vertical

// Salida esperada:

// - Una ventana de 400x400 píxeles con fondo blanco.

// - Los primeros 10 términos de la serie Fibonacci:

// 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

10.4 Factorial de un número

El factorial de un número es el producto de todos los enteros positivos desde 1 hasta ese número. Por
ejemplo, el factorial de 5 es 120 (5! = 5 × 4 × 3 × 2 × 1).
Descripción conceptual
El factorial de 0 y 1 es 1.
Para números mayores, se multiplican todos los enteros desde 1 hasta el número.
// Programa para calcular el factorial de un número

void setup() {

int numero = 5; // Número para calcular el factorial

int factorial = 1; // Inicializar el factorial

// Calcular el factorial

for (int i = 1; i <= numero; i++) {

factorial *= i; // Multiplicar los valores

// Mostrar el resultado en el canvas

size(400, 200); // Tamaño del canvas

background(255); // Fondo blanco

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

text("Factorial de " + numero + " es: " + factorial, 50, 100); // Mostrar mensaje

// Salida esperada:

// - Una ventana de 400x200 píxeles con fondo blanco.

// - El texto "Factorial de 5 es: 120" en el centro del canvas.

10.5 Suma de los primeros N números naturales

La suma de los primeros N números naturales se calcula como:

// Programa para calcular la suma de los primeros N números naturales

void setup() {

int N = 10; // Número de términos a sumar

int suma = N * (N + 1) / 2; // Calcular la suma

// Mostrar el resultado en el canvas

 size(400, 200); // Tamaño del canvas

background(255); // Fondo blanco

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

text("Suma de los primeros " + N + " números: " + suma, 50, 100); // Mostrar mensaje

// Salida esperada:

// - Una ventana de 400x200 píxeles con fondo blanco.

// - El texto "Suma de los primeros 10 números: 55" en el centro del canvas.

10.6 Conversión de grados Celsius a Fahrenheit

La fórmula para convertir grados Celsius a Fahrenheit es

// Programa para convertir grados Celsius a Fahrenheit

void setup() {

float celsius = 25; // Grados Celsius a convertir

float fahrenheit = (9.0 / 5) * celsius + 32; // Calcular Fahrenheit

// Mostrar el resultado en el canvas

size(400, 200); // Tamaño del canvas

background(255); // Fondo blanco

fill(0); // Color de texto (negro)

textSize(20); // Tamaño del texto

text(celsius + "°C = " + fahrenheit + "°F", 50, 100); // Mostrar mensaje

// Salida esperada:

// - Una ventana de 400x200 píxeles con fondo blanco.

// - El texto "25.0°C = 77.0°F" en el centro del canvas.