Short · Fase 3 — Tema 1: Coordenadas y gráficos

El lienzo no es una hoja de papel

Piloto de formato "Short" (inspirado en CS50: un video corto sobre una sola idea). Esto es el storyboard + guion de locución para grabarlo, más la versión leíble — no reemplaza la clase completa del Tema 1.

~1:30 min de video 1 sola idea Antes de tocar código

La idea en una frase

En el lienzo, (0,0) está arriba a la izquierda — y a diferencia de la matemática de colegio, bajar en la pantalla significa sumar en Y, no restar.

Persona jugando con el control, confundida porque en la pantalla la flecha hacia arriba termina apuntando hacia abajo

10:00 – 0:19

El gancho: "¿por qué salió al revés?"

Arranca con el error que casi todos cometen la primera vez: alguien intenta dibujar un punto "arriba" y termina apareciendo abajo del todo.

Guion de locución "¿Alguna vez activaste sin querer la opción de invertir el eje Y en un videojuego y terminaste mirando para todos lados menos donde querías? Así se siente programar en Processing la primera vez. Tranqui, no estás roto: está al revés el lienzo. Te lo explico."

Diagrama del origen (0,0) en la esquina superior izquierda, ejes X e Y, contraste con la hoja de cuaderno

20:19 – 0:47

La revelación: el origen está arriba-izquierda

Se dibuja el eje en vivo: (0,0) en la esquina superior izquierda, X crece a la derecha, Y crece hacia abajo.

Guion de locución "Antes de mostrarte la respuesta... pausa un segundo y piensa: ¿dónde crees que está el (0,0) en la pantalla? ¿Ya tienes una idea? Bien, te cuento: el punto de partida vive en la esquina superior izquierda, como ese compañero que siempre llega primero y se sienta adelante. El eje X crece hacia la derecha, normal. Pero el eje Y crece hacia ABAJO, al revés de tu cuaderno del colegio."

Edificio al revés: el penthouse iluminado arriba y el sótano abajo

30:47 – 1:10

El truco mental: "Y chico = arriba, Y grande = abajo"

Comparación lado a lado: un punto en y=30 (arriba) contra uno en y=110 (abajo), en el mismo lienzo.

Guion de locución "Truco para no volver a equivocarte: imagina un edificio rarísimo donde el piso uno es el penthouse y el piso cien es el sótano. Así es Y en Processing: Y chiquito es arriba, Y grande es abajo. Olvídate de 'sumar es subir' y quédate con la imagen del edificio al revés."

Lienzo con origen (0,0) arriba a la izquierda: un rectángulo con esquina en x=70, y=20 y un círculo con centro en x=90, y=90

41:10 – 1:27

Aplicado: dos formas, mismo sistema

Se ubican un rect() arriba y un ellipse() abajo usando las coordenadas ya explicadas — cierra el círculo entre la idea y el código real.

Guion de locución "Mira esto: el rectángulo vive en y=20, arriba del todo, como penthouse. El círculo está en y=90, varios pisos más abajo. Mismo edificio al revés que acabamos de ver, ahora con código de verdad."

Practica esto (30 seg)

Antes de pasar al siguiente Tema: dibuja dos puntos, uno que se vea arriba y otro abajo, sin mirar la respuesta.

point(?, ?) # arriba
point(?, ?) # abajo