Fase 3 · Programación Visual y Creativa

Coordenadas y gráficos

Tema 1 — lo que necesitas tener a mano mientras programas, no la clase completa. Esto es un piloto de formato, no reemplaza la ficha del módulo.

8 h · 3T / 5P Google Colab + py5 Learn Python Visually — caps. 1, 2 y 3

1El lienzo como sistema cartesiano

El origen (0,0) está en la esquina superior izquierda, no en el centro ni abajo. El eje X crece hacia la derecha, el eje Y crece hacia abajo — al revés de lo que enseña la matemática de colegio. Este es el error mental más común del Tema 1.

size(width, height)

Define el tamaño del lienzo en píxeles. Se llama una sola vez, al principio del sketch.

size(400, 300) # lienzo de 400×300 px

width · height

Variables de solo lectura con el ancho/alto actual del lienzo — útiles para centrar o escalar sin hardcodear números.

point(width / 2, height / 2) # punto en el centro

2Primitivas 2D

point(x, y)

Un solo píxel visible en esa coordenada.

point(50, 50)

line(x1, y1, x2, y2)

Segmento recto entre dos puntos.

line(0, 0, 100, 100)

rect(x, y, w, h)

Rectángulo — (x,y) es la esquina superior izquierda por defecto.

rect(20, 20, 80, 40)

ellipse(x, y, w, h)

Elipse/círculo — (x,y) es el centro, no una esquina (distinto de rect).

ellipse(50, 50, 30, 30)

3Color y estilo

fill(r, g, b) · fill("#RRGGBB")

Color de relleno para lo que se dibuje después. RGB, HSB (según color_mode) o hexadecimal.

fill(255, 100, 0) # naranja

stroke(r, g, b) · no_stroke()

Color del borde/línea. no_stroke() lo saca — útil para formas planas sin contorno.

stroke(0) # negro

background(r, g, b)

Pinta todo el lienzo — normalmente la primera línea de draw() para limpiar el frame anterior.

background(245, 245, 245)

no_fill()

Formas sin relleno, solo contorno — snake_case, ver aviso abajo.

no_fill()

4Formas complejas

curve(...) · bezier(...)

Curvas suaves con puntos de control. Sintaxis idéntica a Processing.

bezier(10,10, 40,5, 60,80, 90,90)

begin_shape() / vertex(x,y) / end_shape()

Polígonos a medida, punto por punto.

begin_shape()
vertex(0,0)
end_shape()

⚠ beginShape() / endShape() del libro Learn Python Visually son begin_shape() / end_shape() en py5. vertex() queda igual (es una sola palabra). Ver tabla completa de equivalencias en #py5tabla.

5Texto como elemento gráfico

text(contenido, x, y)

Dibuja texto — es una forma gráfica más, no un elemento de UI.

text("Hola", 20, 30)

text_size(s) · text_align(a)

Tamaño y alineación — snake_case en py5 (textSize/textAlign en el libro).

text_size(24)

✓Idénticas en Processing y py5 — no hace falta traducir

Estas ya las usaste arriba tal cual — no tienen versión snake_case distinta:

size()point()line()rect()ellipse() fill()stroke()background()curve()bezier() vertex()text()