Guía para docentes sobre la versión 2 de p5.js

p5.js v2 Guía de Transición para Educadores de Secundaria y Preparatoria

Siendo profesor de secundaria, entiendo que una nueva versión de una herramienta en la que confías se puede sentir como un gran ajuste, sobre todo cuando tienes una serie de clases y actividades que conoces y disfrutas.

Si sientes cierta incomodidad sobre lo que implica la transición hacia la versión 2 de p5.js, esta guía va a servir para que puedas entender las diferencias con mayor tranquilidad. La mayoría de las acciones que tus estudiantes realizan funcionan de la misma manera que en versiones anteriores.

Después de revisar múltiples programas de escuelas secundarias y escuelas preparatorias (CS4All Creative Web, CS4All Introduction to Computational Media, CodeHS Digital Art with p5.js, CSinSF Creative Computing, Processing Foundation Art + Code) solamente dos áreas requieren actualizarse al ir de p5.js v1 hacia v2.

• Eventos de Input
• Carga de Recursos

Aunque existen otras actualizaciones en v2 (así como cambios a formas curvas, medición de texto, y funciones utilitarias), éstas no aparecen generalmente en los programas de las escuelas secundarias y preparatorias, y es poco probable que impacten en tu trabajo con estudiantes.

Esta guía te explica los cambios más comunes que encontrarás en un aula de secundaria o preparatoria. Aprenderás cómo actualizar tu código para la versión 2 de p5.js, y cuándo los complementos de compatibilidad puedan ser útiles para sketches antiguos.

He tratado de incluir solo lo que necesitas y nada más, para que puedas ponerte al día fácilmente y estar seguro de enseñar con la versión 2 de p5.js.

Versiones en el Editor Web

La mayoría del tiempo, tus estudiantes y tú pueden usar la versión 2 de p5.js sin hacer cambios.

Sin embargo, si abres un sketch viejo (por ejemplo, algo que un estudiante creó en años anteriores o un ejemplo desde un curriculum diseñado para la versión 1 de p5.js), y su comportamiento no es el mismo, tienes estas opciones:

• Actualizar el sketch usando el ejemplo de esta guía
• Activar el complemento de compatibilidad
• Volver al sketch para la versión 1 de p5.js en el Editor Web

Pantallazo de la selección de versiones de p5.js en el Editor Web.

Eventos de Input

Es probable que los eventos de Input sean el primer lugar donde notes diferencias en la versión 2 de p5.js. Los estudiantes pueden usar eventos de input para:

• Seleccionar o alternar botones
• Dibujar con el ratón mientras se mantiene pulsado
• Cambiar variables al pulsar una tecla
• Borrar o guardar el lienzo
• Mover un personaje de un juego con las teclas de flecha

Esta sección abarca el código de eventos de input que probablemente verás en las aulas de secundaria o preparatoria y los cambios introducidos en la versión 2 de p5.js.

Clicks del Mouse

En la versión 1 de p5.js, verificar por un botón específico del mouse se veía así:

if (mouseButton === RIGHT) {
  // haz algo (p5.js v1)
}

En la versión 2 de p5.js, se ve así:

if (mouseButton.right) {
  // haz algo (p5.js v2)
}

Referencia: mouseButton

Entrada de Teclado

En la versión 1 de p5.js, la mayoría del curriculum de secundaria y preparatoria verificaban el uso de teclas en código como:

if (keyIsPressed) {
  if (key === UP_ARROW){
    // haz algo (p5.js v1)
  }
}

A menudo keyIsPressed se enseñá inicialmente como una variable simple de tipo booleano y key === encaja con la estructura de comparación que los estudiantes ya están usando.

En la versión 2 de p5.js, la manera recomendada de verificar por teclas es:

if (keyIsDown(UP_ARROW)) {
  // haz algo (p5.js v2)
}

keyIsDown() es el enfoque recomendado actual ya que funciona consistentemente a través de ambas versiones v1 y v2, y soporta verificaciones de múltiples teclas a la vez.

Referencia: keyIsDown

Referencia Rápida de Eventos de Entrada

Complementos de Compatibilidad (Opcional)

Para la nueva enseñanza, sigue el código de versión 2 que se muestra arriba.

Si tienes sketches antiguos que quieres seguir usando sin actualizar el código, el complemento de compatibilidad Datos y Eventos restaura el comportamiento de la versión 1.

Consulta la sección Complementos de compatibilidad a continuación para obtener más detalles.

Carga de Recursos

A medida que los estudiantes avanzan en el curriculum, podrían querer personalizar sus sketches añadiendo imágenes, sonidos, fuentes tipográficas, u otros recursos.

En la versión 1 de p5.js, esto se hacía usando preload(). En la versión 2 de p5.js, usamos async y await dentro de setup().

preload() en p5.js v1

En la versión 1 de p5.js, preload() detenía el sketch de ejecutarse hasta que todo lo que contenía terminara de cargarse:

let img;

function preload(){
  // usada en p5.js v1, pero no en v2
  img = loadImage("cat.jpg");
}

function setup(){
  createCanvas(100, 100);
  image(img, 0, 0);
}

async y await en p5.js v2

En la versión 2 de p5.js, preload() ya no se usa, y los recursos son cargados usando await dentro de async setup(). Esto funciona para imágenes, sonidos, fuentes tipográficas, y otros archivos:

let img;

async function setup() {
  createCanvas(100, 100);
  
  // espera a que los recursos se carguen
  img = await loadImage("cat.jpg");
  
  image (img, 0, 0);
}

Referencia Rápida de Carga de Recursos

function preload(){   
  img = loadImage(
    "cat.jpg"
  );
}

async function setup() {
  createCanvas(100, 100);
  img = await loadImage(
    "cat.jpg"
  ); 
}

Referencia: async_await

Complementos de Compatibilidad (Opcional)

Para la nueva enseñanza, sigue el código de versión 2 que se muestra arriba.

Si tienes sketches antiguos que quieres seguir usando sin actualizar el código, el complemento de compatibilidad Preload restaura el comportamiento de la versión 1.

Consulta la sección Complementos de compatibilidad a continuación para obtener más detalles.

Complementos de Compatibilidad

Los complementos de compatibilidad son archivos auxiliares opcionales que puedes activar en el editor de p5.js para que los sketches antiguos de la versión 1 de p5.js se comporten de la misma manera en la versión 2 de p5.js, sin actualizar el código.

Estos complementos son necesarios si tú o tus estudiantes abren sketches antiguos desde la web o de material didáctico que usen patrones de la versión 1 de p5.js y aún no estás listo para actualizar el código a la versión 2 de p5.js.

Al generar nuevos ejercicios, es mejor usar la sintaxis de la versión 2 para escribir código, de esta manera los estudiantes aprenden con la versión que tendrá soporte de aquí en adelante.

• Para Eventos de Inputs, usa los Complementos de Compatibilidad Datos y Eventos
• Para Carga de Recursos, usa los Complementos de Compatibilidad Preload

Captura de pantalla de la pestaña de administración de librerías en el Editor p5.js, donde el usuario puede activar o desactivar librerías complementarias compatibles con las versiones 1.x

También verás un Complemento de Compatibilidad para Formas - los cambios en la API de Formas afecta solamente a formas personalizadas más avanzadas que no suelen aparecer en el curriculum de secundaria y preparatoria, así que la mayoría de estos educadores no necesitarán este complemento de compatibilidad

Referencia Rápida para Educadores

function preload(){   
  img = loadImage("cat.jpg");
}

async function setup() {
  createCanvas(100, 100);
  img = await loadImage("cat.jpg"); 
}