Práctica 1: Creación de Dibujos Básicos con Processing
- Duración:
- 00:30
- Agrupamiento:
- En parejas
En esta práctica vas a demostrar que con figuras simples y código se pueden crear dibujos con bastante detalle. No se trata de copiar un dibujo perfecto, sino de pensarlo como un programador: descomponer una idea en formas básicas y colocarlas con lógica.
🧩 Enunciado de la práctica
Debes crear un programa en p5.js que dibuje una figura reconocible usando únicamente formas básicas. Puedes elegir, por ejemplo:
- La cara de un animal
- Una flor
- Un personaje sencillo
- Un objeto cotidiano
Requisitos obligatorios
Tu programa debe cumplir lo siguiente:
✅ Usar al menos 5 tipos de formas diferentes
(por ejemplo: círculo, rectángulo, triángulo, línea, elipse…)
✅ Utilizar background, fill y stroke para que el dibujo se vea claramente
✅ El dibujo debe aparecer centrado y completo dentro del canvas
✅ Todo el dibujo debe crearse solo con código (nada de imágenes)
🛠️ Recomendaciones de trabajo
Antes de programar:
- Piensa qué quieres dibujar.
- Divide el dibujo en formas simples.
- Decide posiciones y tamaños aproximados.
Después, pásalo a código poco a poco, forma a forma.
💡 No intentes hacerlo todo de golpe. Un dibujo complejo se construye sumando cosas simples.
🐱 Ejemplo de dibujo con formas básicas (p5.js)
// Cara
fill(200, 150, 120);
stroke(0);
circle(200, 220, 200);

// Orejas
triangle(120, 140, 80, 60, 160, 100);
triangle(280, 140, 320, 60, 240, 100);

// Ojos
fill(255);
ellipse(160, 210, 40, 30);
ellipse(240, 210, 40, 30);
fill(0);
circle(160, 210, 15);
circle(240, 210, 15);

// Nariz
fill(255, 100, 100);
triangle(200, 235, 185, 255, 215, 255);

// Bigotes
stroke(0);
line(120, 250, 60, 240);
line(120, 260, 60, 260);
line(280, 250, 340, 240);
line(280, 260, 340, 260);
}

