The graphic language development team for Processing presented the official JavaScript library p5.js

Java based processing language was written in 2001 to create graphics and animations. To use this language on the Internet in 2008, John Resig wrote the Library Processing.js . The library quickly gained popularity and actively developed within a few years after the release. The clock on the Bezier curves , which were written about on Habré a few days ago, was created precisely with the help of Processing.js.

Last year, the Processing team announced plans to create its own JavaScript library. In August, the beta version of p5.js was presented to the general public. The p5.js library is very different from Processing.js in architecture. The main differences are the lack of need to learn Processing language and closer integration with HTML. Processing.js is the Processing translator in JavaScript. The main purpose of this library is to render PDE files with Processing source code. When using this library, the programmer may not know JavaScript at all. Perhaps in 2008 it was a very good idea, but now, after several years of rapid development of JavaScript and the emergence of many graphic libraries, a generation of programmers and designers has emerged, for which JavaScript is much more “native” and more understandable to Java-like Processing.


An example of animation created using the language Processing

p5.js provides a set of functions, objects, and constants for drawing arbitrary shapes, converting them, and interacting with the user. The p5.js capabilities can be found by looking at the library directory . p5.js uses the canvas element for rendering, but is able to interact with other HTML elements, supports work with sound and video. Live to assess the capabilities of the library can be on the presentation on the project site and for numerous examples there.
')
For those who know the language Processing, the developers have compiled a detailed description of the main differences . In addition, several examples of comparing the Processing and p5 code are in this article . You can connect the library from your own server or from a CDN:

<script src="../p5.min.js"></script> 

or

 <script src="//cdn.jsdelivr.net/p5.js/0.0.0/p5.min.js"></script> 

Each individual graphic work in p5.js is called a “sketch”. By default, all p5 functions are available directly in the global namespace (this is, at first glance, a decision, apparently due to the fact that Processing’s main target audience is designers and artists who find it difficult to explain why it’s bad to litter the global space and what it generally is). Each sketch consists of at least two functions - setup and draw . Here is an example of a simple sketch that draws white circles on the canvas under the mouse pointer if the button is not pressed, and black ones if it is pressed:

 function setup() { createCanvas(640, 480); } function draw() { if (mouseIsPressed) { fill(0); } else { fill(255); } ellipse(mouseX, mouseY, 80, 80); } 

If p5 is used not to create a separate sketch, but as part of a large program containing other libraries or several p5 sketches, it is better to wrap each individual sketch into a function. In the terminology of p5.js, this is called “instance mode”:

 var sketch = function( s ) { s.setup = function() { s.createCanvas(640, 480); }; s.draw = function() { if (s.mouseIsPressed) { s.fill(0); } else { s.fill(255); }; s.ellipse(s.mouseX, s.mouseY, 80, 80); }; }; var myp5 = new p5(sketch); 

Judging by the activity with which the development is being carried out, the desire not only to write code, but also to create high-quality documentation and examples, as well as official origin from Processing, p5.js has every chance of becoming one of the most popular libraries for creating interactive graphics in the near future and animations on the Internet.