Revisión de software elaborada por:
Rodrigo Santiago Suárez. rodromeosolito@gmail.com
DE QUÉ SE TRATA Basado en Processing, p5.js es un entorno de desarrollo gráfico útil para animación, audio, video, estadística y desarrollo multimedia, accesible para personas que no tienen conocimientos sólidos de programación como pueden ser diseñadores, artistas, profesores, niños y/o cualquier persona con interés en tecnologías multimedia.
1
p5.js es un framework, es decir, una librería de JavaScript (lenguaje de programación interpretado, utilizado para desarrollo web) que cuenta con su propio entorno de trabajo. Al ser una librería de JavaScript, es posible utilizar p5.js para crear páginas web interactivas y amigables con el usuario, insertando dentro del cuerpo del HTML el archivo sketch.js que se genera al terminar el desarrollo del objeto multimedia de la siguiente manera: <script language="javascript" type="text/javascript" scr="path/sketch.js"></script> El objetivo principal de p5.js es crear elementos multimedia que puedan interactuar con el usuario por medio de los dispositivos de entrada de la computadora, como pueden ser micrófono, webcam, teclado, ratón, etcétera.
2 Fig. 1 Pantalla de inicio de p5.js. Como se muestra en Fig. 1, al ingresar al editor de p5.js encontrarás el área de trabajo con las dos funciones principales: 1.
Setup ( )
Dentro de esta función deberás definir la dimensión que tendrá la ventana en la que se mostrará el objeto multimedia desarrollado, ingresando el número de pixeles de ancho y alto dentro de la función createCanvas ( ). Además, en esta función es necesario declarar las variables y funciones que vas a utilizar durante el proceso de la siguiente forma:
CÓMO LO PUEDES USAR
tipo_dato nombre_variable;
P5.js es de acceso libre y código abierto. Para descargar el editor y librerías principales se ingresa a la dirección electrónica www.p5js.org; sin embargo, si no cuenta con una computadora propia también es posible trabajar con el editor en línea desde cualquier dispositivo con acceso a internet ingresando a alpha.editor.p5js.org Si decides trabajar en línea, tienes la posibilidad de crear un perfil en el que podrás guardar los trabajos que realizas y acceder a ellos en cualquier lugar y momento.
Variables
Funciones function nombre_función (parámetros){ estructura; return variable; }
2.
Draw ( )
Dentro de esta función podrás decidir el color de fondo que quieres, ingresando dentro de la función background( ) el código de color en hexadecimal.
22 de mayo 2017
Aquí se realiza la creación del objeto multimedia mandando a llamar las funciones y variables definidas anteriormente. Con el botón detiene.
se inicia el proceso, y con el botón
se
EJEMPLO Generar la frecuencia de sonido por medio del micrófono.
En la sección de referencias (p5js.org/reference/) encontrarás todas las funciones con las que cuenta la librería, al seleccionar cualquier función obtendremos:
En la sección de ejemplos (p5js.org/examples/) encontrarás algunos ejemplos, al seleccionar cualquier ejemplo obtendremos:
Con el fin de ejemplificar la interacción que existe entre el framework y los diferentes dispositivos de entrada y salida que tiene la computadora, vamos a mostrar la frecuencia de algún sonido que sea captado por el micrófono. El desarrollo de este programa no es muy complicado, sólo utilizaremos siete funciones, todas éstas contenidas dentro de la biblioteca p5.sound. Dichas funciones son: 1. 2. 3. 4. 5. 6.
7.
p5.AudioIn( ): Obtiene un sonido de una fuente de entrada, normalmente un micrófono de computadora. start( ): Es la función que se encarga de activar el dispositivo de entrada que se desea utilizar. p5.FFT( ):Analiza la frecuencia del sonido. Devuelve los resultados del espectro de frecuencia o del dominio del tiempo (forma de onda). setInput( ):Asigna un parámetro a controlar analyze( ): Devuelve un array de valores de amplitud (entre 0 y 255) a través del espectro de frecuencia. beginShape( ), endShape( ): El uso de las funciones beginShape( ) y endShape( ) permite crear formularios más complejos. BeginShape( ) comienza a registrar vértices para una forma y endShape( ) detiene la grabación. Vertex(): Todas las formas se construyen conectando una serie de vértices. Vertex () se utiliza para especificar las coordenadas de vértice de puntos, líneas, triángulos, cuadrículas y polígonos
Estas funciones son utilizadas para inicializar, activar, analizar y dibujar el espectro obtenido del micrófono. El resultado obtenido puede verse en la Fig. 3.
Ejemplo Descripción del funcionamiento Sintaxis
Descripción del ejemplo Resultado de la codificación Codificación
DATOS GENERALES DEL SOFTWARE
Autor: Laurent McCarthy
País de origen: E.U.A
Sitio Principal: https://p5js.org/
Categoría: Software libre para desarrollo y objetos de aprendizaje.
Requerimientos: Cualquier sistema operativo.
Áreas que puede apoyar: Enseñanza en cualquier área del conocimiento.
PALABRAS CLAVE DE ESTE NÚMERO Objetos multimedia, JavaScript, animación, graficación, interacción. Trabajo desarrollado durante el semestre 2017-II, en la asignatura de Seminario de Investigación (grupo 2805) del programa de Matemáticas Aplicadas y Computación en la FES Acatlán, UNAM.
¿Y
ESTE BOLETÍN QUÉ ONDA?
Nuestro objetivo es difundir software e instrumentos digitales que puedan apoyar el aprendizaje. El boletín está abierto a colaboraciones de quien guste participar. Se prefieren las revisiones de software libre o de fácil acceso, así como de servicios digitales públicos. Encontrarás la Guía para los Autores en el ambiente virtual de aprendizaje http://www.inteligencianet.org. El Software Volandero se publica de manera aleatoria, con un tiraje aproximado de doscientos ejemplares impresos y en versión electrónica.
Fig. 3: Espectro obtenido del micrófono.
DÓNDE PUEDES ENCONTRAR MÁS INFORMACIÓN Una de las características de p5.js es la documentación, cuenta con una sección de referencias y ejemplos.