Introducción a la programación con p5.js (Parte 1)
Introducción
En los últimos 20 años han surgido varios proyectos de acceso libre y gratuito con el objetivo de facilitar el aprendizaje de los elementos esenciales de los lenguajes de programación de manera sencilla. Esto se debe a la gran demanda de programadores que se ha generado como consecuencia del desarrollo acelerado de la tecnología computacional y digital.
Uno de estos proyectos es el de Casey Reas y Ben Fry quienes, en 2001, empezaron a trabajar en una nueva plataforma para hacer más fácil la programación de gráficas interactivas; la cual nombraron Processing. En McCarthy, Reas, y Fry (2018) se narra que Reas y Fry se encontraban frustrados con lo difícil que era escribir software con los lenguajes de programación que se usaban en ese entonces (como C++ y Java) y fueron inspirados por lo simple que era escribir programas interesantes con los lenguajes que habían aprendido en su niñez (Logo y BASIC).
Esencialmente Processing es un lenguaje de programación construido para enseñar programación a estudiantes de diseño y de arte y ofrecerles a estudiantes más avanzados una manera más fácil de trabajar con gráficas digitales. Esta combinación es una aproximación diferente a la manera en que usualmente se enseña programación. Con Processing los nuevos usuarios comienzan concentrándose en gráficos e interacción en vez de estructuras de datos y resultados en forma de texto en la consola.
Con el paso del tiempo, Processing se ha transformado en una gran comunidad. De hecho, es usado actualmente en salones de clases a lo largo del mundo, en planes de estudios de artes, humanidades y ciencias de la computación y de forma profesional. Debido su gran popularidad y al desarrollo de nuevos navegadores web, en 2013 Lauren McCarthy creó p5.js una librería de JavaScript (uno de los 5 lenguajes de programación más populares a la fecha de acuerdo con Carbonnelle 2019) que sigue la sintaxis y las convenciones de Processing con la finalidad de facilitar la transición a la web de los usuarios de la comunidad existente de Processing. Asimismo, p5.js tiene como objetivo facilitar lo más posible a los principiantes a aprender a programar aplicaciones gráficas interactivas (al tiempo que proporciona herramientas poderosas para expertos).
¿Qué es p5.js?
p5.js es una librería y un conjunto de herramientas que facilitan el uso del lenguaje de programación JavaScript para la programación creativa (creative coding). La ventaja de usar JavaScript es su amplia disponibilidad y su soporte en casi cualquier sistema operativo: cada navegador web tiene incorporado un intérprete de JavaScript, lo que significa que los programas p5.js pueden (en general) ejecutarse en cualquier navegador web. Además, el lenguaje JavaScript está definido por un estándar internacional y la mayoría de los intérpretes de este lenguaje (incluidos los que se ejecutan dentro de los navegadores web), son de código abierto y están disponibles gratuitamente. En otras palabras, JavaScript es de acceso libre y cualquier persona puede usarlo de forma gratuita.
¿Para qué sirve p5.js?
Como sugieren McCarthy, Reas, y Fry (2018), p5.js sirve para escribir software que produce imágenes, animaciones e interacciones. La motivación es escribir una línea de código y que, por ejemplo, un círculo aparezca en la pantalla. Después, añade unas pocas líneas de código, y ahora el círculo se hace más grande o más pequeño. Una línea más de código, y el círculo cambia de color cuando presionas un botón con el ratón. A esto lo llamamos bosquejar con código. Escribes una línea, luego añades otra, luego otra, y así sucesivamente. El resultado es un programa creado parte por parte. Por esta razón, los programas de p5.js (y Processing) generalmente se denominan "sketches" (bocetos), cuya nomenclatura usaremos de aquí en adelante.
¿Cómo comenzamos a escribir un programa de p5.js?
Hay varias formas de escribir sketches de p5.js. Debido a que p5.js es solo una biblioteca de JavaScript, podemos incluirla en cualquier página web normal e incluso usarla junto con otras bibliotecas de JavaScript. El tutorial oficial (https://p5js.org/es/get-started/) sugiere descargar un editor de texto separado (como Brackets o Atom) y trabajar con su código fuente p5.js como cualquier otro lenguaje de programación. En este artículo, sin embargo, vamos a utilizar el editor web (https://editor.p5js.org/), un entorno de programación basado en la web y creado específicamente para p5.js, el cual es muy sencillo de utilizar y debería funcionar en cualquier navegador web.
Anatomía del navegador web
Cuando se carga el editor web, podemos comenzar a escribir código de inmediato. Es recomendable crear una cuenta, lo cual nos permitirá guardar nuestro trabajo y compartirlo con otras personas. Así es como se ve el editor web y una explicación de las partes más importantes.
- El panel de "código". Aquí es donde escribes tu código p5.js.
- El panel de "consola". Aquí es donde aparecen los mensajes de error de tu código. También puedes usar la función console.log() para hacer que el texto aparezca aquí mientras tu programa se está ejecutando. (Esto es útil para fines de depuración, y lo discutiremos más adelante)
- El panel de "vista previa". Tu sketch aparecerá aquí
- Controles: Presiona el botón "Reproducir" ( ▶ ) para "ejecutar" tu sketch. Presiona "Stop" ( ⬛ ) para detener el sketch.
- El nombre de tu sketch. Haz clic en el pequeño ícono de lápiz a la derecha del nombre para editarlo. (Cuando creas un nuevo sketch, se genera un nombre aleatorio).
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
Todavía no sabemos para qué sirve, pero pronto lo descubriremos. Si oprimimos el botón "Reproducir" para ejecutarlo, observaremos que a la derecha se dibuja un cuadrado gris.
La primera pregunta que aquí surge es: ¿Qué está pasando aquí? Para entender un poco lo que sucede primero podemos traducir cada palabra que aparece en el código:
- function: función
- setup: preparar
- createCanvas: crear lienzo
- draw: dibujar
- background: fondo
En este caso, la instrucción function indica las dos funciones principales que necesitamos para crear un sketch. (Cabe aclarar que, en este contexto, el término "función" denotará un comando de JavaScript o p5.js que realiza una tarea específica y que en algunos casos puede requerir un número parámetros como input.) Si unimos estos dos términos podemos deducir que tenemos dos funciones:
- setup(): la cual prepara el programa y crea un lienzo
- draw(): la cual dibuja o pinta un fondo en el lienzo
La librería p5.js es muy intuitiva y con un poco de conocimiento de idioma inglés podemos hacernos una idea de lo que hacen todas las instrucciones. En este caso podemos inferir que se ha preparado un espacio para dibujar, un lienzo, en el cual hemos dibujado el fondo con un color (gris).
Aquí surgen un par de preguntas más: ¿Qué hacen exactamente las instrucciones createCanvas() y background()? y ¿Qué significan los números que aparecen entre paréntesis? Esencialmente, estas son funciones integradas en p5.js, las cuales siempre van seguidas de un par de paréntesis, dentro de estos paréntesis por lo general hay una lista de valores separados por comas. Estos valores se llaman parámetros de la función. Cada función usa sus parámetros de una manera ligeramente diferente, y parte del aprendizaje de una función es comprender lo que significan sus parámetros.
- createCanvas(ancho, alto): Esta función crea un lienzo en el documento y define sus dimensiones los parámetros "ancho" y "alto".
- background(valor): Esta función define el color usado como fondo del lienzo. El color se determina con el parámetro "valor" que puede ser un número entre 0 y 255.
Podemos colocar tantas funciones como deseemos dentro de las llaves {...} en la función draw(). No hablaremos sobre lo que significa la función draw() por ahora, o lo que significan las llaves. Solo es necesario saber que podemos poner más cosas entre esas llaves si deseamos que sucedan más cosas.
Los creadores de esta librería han dedicado mucho tiempo y esfuerzo para desarrollar instrucciones que se pueden utilizar de forma intuitiva. Si bien p5.js contiene varias docenas de funciones integradas que realizan diversas tareas, como dibujar figuras en la pantalla o calcular valores utilizando fórmulas matemáticas, aprender a programar en p5.js se trata principalmente de aprender estas funciones y lo que hacen. Se pueden encontrar una gran lista de funciones de p5.js en la página oficial https://p5js.org/es/, en la sección de referencia, la cual contiene descripciones en español. Por ahora, nos centraremos solo en las funciones más simples para dibujar figuras geométricas en la pantalla.
A continuación Parte 2:
Figuras geométricas y colores
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.
Comentarios
Publicar un comentario