2. 📖 Funciones Gráficas

Introducción al uso de Funciones Gráficas

En p5.js para dibujar figuras y formas, debemos llamar a funciones. Cada forma que ves en pantalla se crea usando una función gráfica que ya viene preparada. Tú solo tienes que decirle qué dibujar y dónde. Todas estas funciones trabajan sobre el canvas y usan un sistema de coordenadas:

El punto (0, 0) está arriba a la izquierda.
El eje X crece hacia la derecha.
El eje Y crece hacia abajo.

A partir de aquí, todo lo que hagas será combinar números y lógica para crear gráficos.

Punto

El punto es la forma más básica. Sirve para entender el sistema de coordenadas.

function setup() {
  createCanvas(400, 300);
  point(200, 150);
}

📌 Dibuja un punto en el centro del canvas.

Línea

Una línea se define con dos puntos: inicio y final.

function setup() {
  createCanvas(400, 300);
  line(50, 50, 350, 250);
}

📌 Muy útil para ejes, trayectorias o dibujos a mano alzada.

Triángulo

Un triángulo se forma con tres puntos.

function setup() {
  createCanvas(400, 300);
  triangle(200, 50, 50, 250, 350, 250);
}

📌 La base de muchas figuras más complejas.

Cuadrado

El cuadrado se define indicando:

Posición (x, y)
Tamaño del lado

function setup() {
  createCanvas(400, 300);
  square(150, 100, 100);
}

📌 Es un caso especial del rectángulo, con todos los lados iguales.

Rectángulo

Muy usado en interfaces, juegos y estructuras.

function setup() {
  createCanvas(400, 300);
  rect(100, 80, 200, 120);
}

📌 Se define con posición, ancho y alto.

Círculo

El círculo se define por:

Centro (x, y)
Diámetro

function setup() {
  createCanvas(400, 300);
  circle(200, 150, 100);
}

📌 Ideal para personajes, pelotas o indicadores.

Elipse

Es como un círculo, pero puedes cambiar ancho y alto.

function setup() {
  createCanvas(400, 300);
  ellipse(200, 150, 150, 80);
}

📌 Muy usada para ojos, sombras y efectos visuales.

Sectores y Arcos

Los arcos permiten dibujar partes de un círculo.
Se usan ángulos en radianes (de momento no hace falta dominarlos).

function setup() {
  createCanvas(400, 300);
  arc(200, 150, 150, 150, 0, PI);
}

📌 Este ejemplo dibuja medio círculo.

Si más adelante combinas varios arcos, puedes crear sectores, relojes, gráficos circulares o efectos visuales muy potentes.

Ideas Clave

Todas estas figuras:

Son funciones
Usan números y coordenadas
Se pueden controlar con variables, condicionales y bucles

A partir de aquí, el código empieza a convertirse en dibujo, y eso abre la puerta a animaciones, juegos y arte generativo. En los siguientes pasos, empezaremos a darles vida usando color, movimiento y eventos 🎨🚀

Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0