BBVA API Market
Diseñadores, desarrolladores e investigadores de todo el mundo utilizan los lenguajes y las herramientas (marcos de desarrollo) propios del diseño computacional, con las que crear imágenes y animaciones en 2D y 3D, para hacer proyectos cada día. Processing.js y Toxiclibs.js son dos ejemplos de librerías JavaScript para diseñar en el elemento canvas de HTML5. En ambos casos son bibliotecas de código abierto, uso gratuito y acceso libre.
Una de las primeras preguntas que surgen cuando alguien no ha tenido ya un contacto con estas dos librerías es ¿qué es el elemento canvas de HTML5? Canvas es uno de los últimos componentes del nuevo estándar HTML5 para el desarrollo de imágenes dinámicas en proyectos digitales. El elemento canvas de HTML5 lo que nos permite es delimitar en una web un espacio que se puede usar como un lienzo para dibujar y renderizar imágenes con scripts. Se sustituye lo que antes se hacía en Flash con librerías de JavaScript.
– Processing.js
Processing. js es una biblioteca de JavaScript que facilita a diseñadores y desarrolladores la creación de visualizaciones de datos, arte digital, animaciones interactivas o videojuegos de alta calidad en el elemento Canvas de HTML5. El problema es que esos pequeños lienzos donde pintar con JS ofrecen algunas limitaciones importantes: es necesario recurrir a librerías como Processing.js para poder darle mayor complejidad al grafismo. Las limitaciones más importantes son el movimiento y la interactividad.
Processing nació como un lenguaje de programación de código abierto y basado en Java para mejorar las posibilidades del diseño digital, desarrollado por Ben Fry y Casey Reas. Se puede considerar incluso una sintaxis Java simplificada con su propia API en Java. Lo que permite Processing.js es adaptar sus funcionalidades a su ejecución dentro de un navegador compatible con HTML5 (Explorer, Firefox, Google Chrome, Safari y Opera).
Pasos a seguir por un desarrollador de JavaScript para usar Processing.js:
– Creación de un archivo Processing. Extensión .pde.
– Creación de una página web que incluya la librería Processing.js. En este paso es necesario configurar un elemento canvas para pintar las imágenes dinámicas. Ejemplo del código HTML para instalar Processing y diseñar el canvas:
<!DOCTYPE html>
<html>
<head>
<title>Hello Web – Processing.js Test</title>
<script src=”processing-1.3.6.min.js”></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based sketch:</p>
<canvas data-processing-sources=”hello-web.pde”></canvas>
</body>
</html>
Las siguientes líneas de código, que deben ir incluidas dentro del <body>, son las que definen la función que permite al desarrollador crear el pequeño lienzo en canvas donde pintar en JavaScript las visualizaciones que se ejecutan en el navegador y contener un objeto donde visualizar los comandos de la librería. Dentro de esta función podemos ir definiendo variables como setup (sirve para iniciar el lienzo y las distintas variables) y draw (es la que ejecuta en el navegador todas las funcionalidades de movimiento e interactividad).
function sketchProc(processing) {
// Override draw function, by default it will be called 60 times per second
processing.draw = function() {
// determine center and max clock arm length
var centerX = processing.width / 2, centerY = processing.height / 2;
var maxArmLength = Math.min(centerX, centerY);
function drawArm(position, lengthScale, weight) {
processing.strokeWeight(weight);
processing.line(centerX, centerY,
centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
centerY – Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
}
// erase background
processing.background(224);
var now = new Date();
// Moving hours arm by small increments
var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
drawArm(hoursPosition, 0.5, 5);
// Moving minutes arm by small increments
var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
drawArm(minutesPosition, 0.80, 3);
// Moving hour arm by second increments
var secondsPosition = now.getSeconds() / 60;
drawArm(secondsPosition, 0.90, 1);
Otra característica interesante de Processing.js es que transforma el código de Processing en JavaScript. Esto permite que un desarrollador que sabe la primera de las sintaxis pero no la segunda, pueda ejecutar imágenes dinámicas directamente en el navegador sin saber JavaScript y utilizando únicamente el Entorno de Desarrollo Integrado de Processing. Por tanto, se pueden diseñar animaciones por el lado del cliente solo con este lenguaje.
Algunas cuestiones importantes sobre Processing.js:
– No tiene directorio de datos: mientras que Processing sí dispone de un directorio de datos donde se encuentran las imágenes y los recursos para el diseño front-end, hay que decir que Processing.js no tiene ese directorio. Esto obliga al desarrollador a proporcionar páginas de archivos, por ejemplo las imágenes, que pertenecen a una web.
– Processing.js implementa Processing, pero no todo el Java: Processing.js es totalmente compatible con la sintaxis Processing, pero no sucede lo mismo con Java. Si una animación trabaja con funciones o clases ajenas a Processing, es complicado que sean compatibles con esta librería JavaScript. Además, las bibliotecas escritas en Java para Processing, lo más probable es que no funcionen con Processing.js.
– Processing.js solo tiene dos modos de renderizado: el uso del elemento canvas de HTML5 por parte de Processing.js proporciona un contexto basado en WebGL, una versión de OpenGL para páginas web.
– Processing.js, al igual que JavaScript, no usa datos char.
– Processing.js exige tener cuidado con el nombre de las variables. Los nombres de variables pueden provocar problemas en las funciones que tiene una designación similar. Es recomendable evitar este extremo.
– El uso del color en Processing.js es complejo: lo recomendable es utilizar colores hexadecimales (#RRGGBB), RGB (r, g, b) o RGBA (r,g,b,a).
– Toxiclibs.js
Toxiclibs.js es una biblioteca de código abierto para el diseño en JavaScript. Originalmente es una librería escrita para Java y Processing por Karsten Schmidt y adaptada posteriormente a JavaScript por Kyle Phillips. La librería está formada, después de varios años de desarrollo, por más de 270 clases, 18 paquetes agrupadas en siete bibliotecas y más de 25.000 líneas de código.
Las clases en Toxiclibs.js son genéricas. Eso permite la reutilización de código para facilitar la creación de imágenes para disciplinas como la visualización de datos, la animación, el diseño de interfaz de usuario… Esa flexibilidad para los desarrolladores se potencia gracias a que esta librería no tiene dependencias de otras bibliotecas o herramientas, ni siquiera Processing.
Toxiclibs.js se puede utilizar de tres maneras distintas:
– Instalando la propia biblioteca en la página web.
<script type=”text/javascript” src=”js/toxiclibs.min.js”></script>
<script type=”text/javascript”>
var myVector = new toxi.geom.Vec2D( 2, 3 ).scaleSelf(0.5);
var myColor = toxi.color.TColor.newRGB(128/255,64/255,32/255);
</script>
– A través de RequireJS.
require([
‘toxi/geom/Vec2D’,
‘toxi/color/TColor’
],function( Vec2D, TColor ){
var myVector = new Vec2D( 2, 3 ).scaleSelf(0.5);
var myColor = TColor.newRGB(128/255,64/255,32/255);
});
– Mediante el uso de Node.js.
npm install toxiclibsjs
var toxi = require(‘toxiclibsjs’),
myVector = new toxi.geom.Vec2D(0.5,0.5),
myColor = toxi.color.TColor.newRGB(128/255,64/255,32/255);
Algunos de los paquetes que están disponibles dentro de Toxiclibs.js son:
– toxi.audio. Audio espacial 3D basado en la librería de sonido JOAL (Java OpenAL), que permite renderizar de forma eficiente audio posicional y multicanal en tres dimensiones. Es muy utilizada en videojuegos.
– toxi.color. Este paquete incluye modelos de color RGB, HSV y CMYK.
– toxi.geom. Permite exportar objetos en formato OBJ y STL, por ejemplo.
– toxi.math. Métodos de interpolación para el tratamiento de imágenes.
– toxi.image.util. filtros de imágenes en escala de grises.
Síguenos en @BBVAAPIMarket
Llevar a un cliente por todo el proceso de compra hasta que este se formaliza es un viaje arduo y que se enfrenta a la posibilidad constante de abandono. Sin embargo, hay formas de lograr que la decisión de compra se haga realidad si se le dan facilidades como una financiación ágil, segura y adaptada a lo que necesita.
En un mundo conectado, las APIs son el pegamento que une todas las piezas que forman nuestra vida diaria. Y de la misma forma que un pegamento solo es potente si sabemos en qué material utilizarlo y conocemos sus propiedades, las APIs son tan útiles como su documentación permita.
Existen diferentes soluciones para monitorizar el rendimiento de una API, tanto en términos de tráfico como de calidad y rapidez de las respuestas que proporciona. Detectar fallos en el código o cuantificar los ingresos que genera también son algunas de las opciones que ofrecen estas útiles herramientas.
