Introducción a la programación con p5.js (Parte 2)

Parte 1: Introducción

Figuras geométricas y colores

Es momento de dibujar algunas figuras geométricas con p5.js. El código predefinido en el editor puede resultar un poco aburrido, así que ahora dibujaremos algunas figuras geométricas para darle un poco de vida a nuestro sketch. Para esto escribiremos las siguientes dos líneas dentro de nuestra función draw():

• ellipse(80, 190, 180, 100);
• rect(130, 130, 200, 200);

No es difícil deducir que estas funciones dibujarán una elipse y un rectángulo, respectivamente:

Los parámetros de la función elipse tienen los siguientes significados:

• Parámetro 1: la posición X de la esquina superior izquierda del rectángulo
• Parámetro 2: la posición Y de la esquina superior izquierda del rectángulo
• Parámetro 3: el ancho de la elipse
• Parámetro 4: la altura de la elipse

Para el caso de la función rectángulo tenemos que:

• Parámetro 1: la posición X de la esquina superior izquierda del rectángulo
• Parámetro 2: la posición Y de la esquina superior izquierda del rectángulo
• Parámetro 3: el ancho del rectángulo
• Parámetro 4: la altura del rectángulo

Observa que las funciones se ejecutan en el mismo orden en que se dibujan. Esto significa que el rectángulo se dibuja encima de la elipse. Si inviertes el orden de las funciones, la elipse se dibujara en la parte superior:

Ahora veamos qué sucede cuando modificamos los parámetros de la función background(). Como ya mencioné anteriormente, esta función define el color de fondo del lienzo con un parámetro. El valor de dicho parámetro determina el tono de gris que aparecerá el fondo. 0 significa negro y 255 significa blanco; otros valores se refieren a todos los tonos intermedios de gris. En realidad podemos introducir tres parámetros en esta función, lo cual nos permitirá definir el color de fondo de nuestra elección, no solamente gris. Los tres parámetros corresponden a las componentes Rojo, Verde y Azul del esquema de coloración definido en los ordenadores (comúnmente llamado esquema RGB, las siglas del inglés Red, Green, Blue). Por ejemplo, los valores (128, 191, 255), definen un color azul:

Coordenadas en p5.js

Hemos visto en la sección anterior que los números en las funciones ellipse() y rect() especifican posiciones y dimensiones. ¿Pero cuáles son las unidades? Si 50 es la posición X de alguna figura, ¿cuál es la unidad? En este caso, las distancias en el procesamiento se miden en píxeles.

Casi todas las pantallas digitales se dividen en pequeños cuadrados llamados píxeles. Normalmente, cada píxel es en realidad un pequeño dispositivo físico puede muestra un color. La pantalla de nuestro dispositivo (ordenador, tableta o teléfono móvil) en este momento probablemente tenga cientos de miles, quizá millones, de estos pequeños dispositivos. Cada uno tiene exactamente el mismo tamaño, y juntos forman una "cuadrícula".

Cada sketch de p5.js tiene un tamaño en píxeles: el número de píxeles de ancho y el número de píxeles de alto. Por defecto, el sketch del editor web es de 400 píxeles por 400 píxeles. El píxel en la esquina superior izquierda se designa como el píxel en la coordenada 0, 0. A medida que se mueve más a la izquierda, la coordenada X aumenta. A medida que avanza, la coordenada Y aumenta, de modo que la coordenada del punto medio del sketch es 200, 200 y la coordenada en la esquina inferior derecha es 400, 400. Si estás familiarizado con las coordenadas cartesianas, esto parece extraño, ya que normalmente el valor Y disminuye a medida que avanza hacia abajo. Afortunadamente no cuesta mucho tiempo acostumbrarse a las coordenadas que se emplean en p5.js.

Relleno y trazo

p5.js nos permite controlar no solo las formas que dibujas, sino también dos aspectos críticos de la apariencia de esas formas: de qué color son y de qué color es su contorno. Para lograr esto podemos usar las funciones

• fill(): Define el color usado para el relleno de figuras geométricas.
• stroke(): Define el color usado para dibujar líneas y bordes de figuras geométricas.

Al igual que con background(), podemos usar fill() y stroke() con un solo parámetro para establecer su color de escala de grises, o tres parámetros para establecer un color usando valores RGB.

También hay una función llamada strokeWeight() que nos permite establecer el ancho del trazo. El ancho se mide en píxeles y, al igual que fill() y stroke(), se aplica a todas las funciones que se encuentran después. La siguiente imagen muestra un ejemplo usando estas funciones:

Por supuesto, podemos crear muchas otras figuras geométricas en p5.js como puntos, líneas, arcos, triángulos con las funciones:

• point()
• line()
• arc()
• triangle()

Cada una de ellas funciona un poco diferente, así que te recomiendo que consultes la página de referencia (https://p5js.org/es/reference/) para obtener más información e instrucciones.

Actividad 1: Usa las funciones hasta aquí mencionadas para crear tu propio diseño geométrico. Experimenta con diferentes parámetros para posicionarlas en distintos lugares del lienzo. Prueba cambiar las dimensiones de las figuras y los colores.

Errores al programar: Cuando algo sale mal

La programación puede ser un trabajo perspicaz y es fácil equivocarse en la sintaxis. (Especialmente para los principiantes, porque todavía no han aprendido exactamente cómo funciona la sintaxis). Pero no te preocupes, si algo sale mal, recibirás un mensaje de error. El mensaje de error aparecerá en ese pequeño cuadrado debajo del área de edición del código fuente, llamada "consola".

Si no puedes encontrar el problema, ¡no te preocupes! El mensaje de error te dará algunas pistas, pero es posible que algunas veces te diga exactamente donde se encuentra el error. El número al final del error indica el número de la línea en donde p5.js ha detectado el problema o error. (A veces habrá más de dos líneas, por lo que tendrás que buscar.) El mensaje te dará una idea de cuál es el problema, aunque la descripción se filtra a través del lenguaje extraño de los analizadores de lenguaje de programación, pero no entraremos mucho en detalles técnicos aquí. 

Veamos el siguiente ejemplo, usando el editor de esta entrada:

Al correr el sketch anterior, en la parte inferior se muestra un mensaje de error indicando que hay un problema en la línea 7: deliberadamente escribí ellise en lugar de ellipse, y JavaScript nos informa que no tiene la menor idea de qué es ellise. Cuando JavaScript dice que algo como "is not defined" (no está definido), eso es lo que significa. JavaScript solo sabe acerca de los objetos integrados, las variables y las funciones definidas en este lenguaje, y las variables y funciones en las bibliotecas que está utilizando, como la de p5.js.

Con las funciones hasta aquí mencionadas, es posible realizar una variedad de coloridos diseños geométricos. Pero esto es tan solo el comienzo para aprender a programar con p5.js. Después de familiarizarse con los elementos básicos, podemos entonces estudiar otros conceptos matemáticos y métodos más avanzados de programación (como variables -numéricas o boolean-, arreglos -conjuntos de datos u objetos-, loops, condicionales, funciones recursivas, clases de objetos, entre muchas otras cosas más). En la siguiente sección mostraremos algunos ejemplos sencillos que pueden servir como actividades para explorar transformaciones básicas en el plano.

A continuación Parte 3:

Traslación, rotación y escala de figuras geométricas en el plano

---

Gracias por llegar al final de este artículo. Si deseas puedes apoyarme en Patreon usando el siguiente enlace:

Become a Patron!

Con tu apoyo podré seguir escribiendo y compartiendo artículos y applets de matemáticas.