BBVA API Market
Designers, developers and researchers around the world use computational design languages and tools (development frameworks) to create 2D and 3D images and animations for projects. Processing.js and Toxiclibs.js are two examples of JavaScript libraries used for designing in the Canvas element of HTML5. They are both open source libraries, free to use and freely accessible.
One of the first questions that arise when someone has not yet used these two libraries is, what is the Canvas element of HTML5? Canvas is one of the latest components of the new HTML5 standard for developing dynamic images in digital projects. HTML5’s Canvas element enables users to delimit a space on a web page that can be used as a canvas to draw and render images with scripts. What used to be done in Flash is replaced with JavaScript libraries.
– Processing.js
Processing. js is a JavaScript library that enables designers and developers to create high-quality data visualizations, digital art, interactive animations or video games in the Canvas element of HTML5. The problem is that these small canvases on which to paint with JS have some major limitations: libraries such as Processing.js are needed to be able to provide greater complexity to the graphic art. The main limitations are movement and interactivity.
Processing was conceived as an open source programming language based on Java for enhancing the possibilities of digital design, and was developed by Ben Fry and Casey Reas. It can even be considered a simplified Java syntax with its own API in Java. The functionality in Processing.js and be adapted to its execution within a browser compatible with HTML5 (Explorer, Firefox, Google Chrome, Safari and Opera).
Steps for a JavaScript developer to start using Processing.js:
– Create a Processing file. .pde extension.
– Create a web page that includes the Processing.js library. In this step the user needs to configure a canvas element to paint the dynamic images. Example of HTML code for installing Processing and designing the 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>
The following lines of code, which must be included within the <body>, define the function that enables the developer to create the small sketch in Canvas and paint in JavaScript the visualizations that are run on the browser and contain an object where the library’s commands can be displayed. Within this function we can define variables such as setup (to start the canvas and the different variables) and draw (which runs all the movement and interactivity features on the browser).
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);
Another interesting feature of Processing.js is that it transforms the Processing code in JavaScript. This enables a developer who is aware of the first syntax, but not the second, to run dynamic images directly on the browser without having any knowledge of JavaScript and using only the integrated development environment of Processing. Thus, animations can be designed on the client side using this language only.
Some key questions about Processing.js:
– It has no data directory: while Processing does have a data directory where the images and the design elements for front-end design are kept, Processing.js has no such directory. This means that the developer has to provide file pages, for example, the images, that belong to a web page.
– Processing.js implements Processing, but not Java in its entirety: Processing.js is fully compatible with the Processing syntax, but the same is not true for Java. If an animation works with functions or classes external to Processing, it is difficult for them to be compatible with this JavaScript library. Moreover, libraries written in Java for Processing will very likely not work with Processing.js.
– Processing.js only has two rendering modes: the use of the HTML5 Canvas element by Processing.js provides a context based on WebGL, an OpenGL version for web pages.
– Like JavaScript, Processing.js uses no char data.
– In Processing.js, the developer needs to pay attention to the name of the variables. They can cause problems in the functions that have a similar name. This should be avoided.
– Using color in Processing.js is a complex process: it is advisable to use hexadecimal (#RRGGBB), RGB (r, g, b) or RGBA (r, g, b, a) colors.
– Toxiclibs.js
Toxiclibs.js is an open source library for designing in JavaScript. It was originally a library written for Java and Processing by Karsten Schmidt and was later adapted to JavaScript by Kyle Phillips. After several years of development, the library consists of more than 270 classes, 18 packages grouped into seven libraries, and more than 25,000 lines of code.
Toxiclibs.js classes are generic. This enables the code to be reused to create images for applications such as data visualization, animation, user interface design, etc. This flexibility for developers is possible because this library has no dependencies with respect to other libraries or tools, not even Processing.
Toxiclibs.js can be used in three different ways:
– Installing the library itself on the web page.
<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>
– Through 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);
});
– Using 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);
Some of the packages available in Toxiclibs.js are:
– toxi.audio. Spatial 3D audio based on the JOAL (Java OpenAL) sound library, which enables efficient rendering of positional and multichannel 3D audio. It is extensively used in video games.
– toxi.color. This package includes RGB, HSV and CMYK color models.
– toxi.geom. This enables objects to be exported in OBJ and STL format, for example.
– toxi.math. Interpolation methods for image processing.
– toxi.image.util: Grayscale image filters.
Follow us on @BBVAAPIMarket
In the dynamic world of payments, a new star has emerged in recent years: Buy Now Pay Later (BNPL), i.e. short-term financing that allows you to buy now and pay later. This model allows businesses to purchase goods or services and pay for them in installments, often interest-free, making it an attractive alternative to credit […]
BBVA and Vecttor, Cabify’s subsidiary engaged in managing vehicles with drivers, have entered into an alliance that saves time and provides security to the company and its drivers. The collaboration allows drivers to deposit cash collections at any BBVA ATM and Vecttor to automatically reconcile this activity from their accounts with those in the company’s […]
BBVA has been recognized by Global Finance as the bank with the best global open banking offer for companies. This award comes on top of 12 other recognitions the magazine has bestowed on the company, such as the best bank for corporate clients and the one recognizing its AI factory as one of the best […]
