El mundo processing, un mágico espectro de opciones. Conforme ha ido evolucionando hemos visto diferentes «port» que se han desarrollado en paralelo. El padre processing y lo hijos que trabajaban a la par para leer y armar paquetes. Hace unos días se presentó en redes sociales algo distinto y original. Se llama P5JS que a simple vista la mayoría pensaba que era la abreviatura de Processing.js

Como su propia página lo indica, P5JS proviene de la idea original de processing pero no tiene límites respecto a la creación de dibujos en canvas o procesos creativos. Ahora podrás crear desde el sketch y pensar para web sin obstáculos pues permite agregar addons, librerías y fusionar con elementos y códigos web de HTML5 (video, imagen, webcam y sonido). Suena genial y es genial! Los límites del port processing era un proceso que obstruía el trabajo muchas veces. Ahora tenemos la libertad de armar y formar desarrollo más complejo e importante. Desde mi punto de vista era necesario para que Processing siga un rumbo más multiplataforma. Imagínate trabajar como editor de texto cualquier (Sublime Text) y armar tu web sin preocuparse de otros tipos de lenguaje. Totalmente interactivo, intuitivo y poderoso.

Para muestra podemos visitar su ejemplos interactivo. En él aparece Lauren McCarthy la encargada principal y la propulsora del proyecto. Además aparece el maestro Jedi Dan Shiffman.

El proyecto aún está en proceso, por lo que necesitan de nuestra ayuda para poder contribuir y generar la documentación necesaria para armar una solida comunidad. Ah! Y si desean crear librería sientate en la libertad de hacerlo. Yo estoy tratando de crear una librería básica para aportar mi granito de arena.

p5js_VIDEO

 

Los archivos P5JS comprende el core p5.js, p5.dom.js, el archivo librería que realiza demasiadas funciones como video, audio y dibujo; también está p5.sound.js que como su nomenclatura lo dice permite la reproducción e interacción y ejemplos.

var capture;

function setup() {
createCanvas(390, 240);
capture = createCapture(VIDEO);
capture.size(320, 240);
//capture.hide();
}

function draw() {
background(255);
image(capture, 0, 0, 320, 240);

}

Este ejemplo junto a la base del dom y código de inicio hace posible activar la cámara web. Puedes ver el código de ejemplo aquí o darle clic en la imagen

video_p5js_example

 

Si deseas recibir más información puedes entrar a la página del proyecto!

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.