Lauren McCarthy has released the first public beta of p5.js, a JavaScript library that wants to make coding accessible for artists, designers, educators, and beginners.
Developed by McCarthy in collaboration with the p5.js working group at NYU ITP and other contributors, p5.js is an offshoot of the Processing visual programming language, enabling non-programmers to write JavaScript code and create visual projects.
Describing the library on GitHub in p5.js overview, McCarthy says:
Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you're not limited to your drawing canvas, you can think of your whole browser page as your sketch. For this, p5.js has addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.
While p5.js is in some ways similar to Processing, there are also key differences. McCarthy outlines many of these in Processing transition:
- Because you can think of your sketch as more than just the drawing canvas, size() has been replaced with createCanvas(), to suggest the possibility of creating other elements.
- frameRate(num) sets the frame rate, but the frameRate variable has been removed. To get the current frame rate, call frameRate() with no arguments.
- JavaScript doesn't always load things synchronously, there are a couple options to deal with this:
- All load methods take an optional callback argument. That is, a function that gets called after the file has been loaded.
- Alternatively, you can place load calls in a preload() method that happens before setup(). If a preload method exists, setup waits until everything inside is loaded, see this image example.
In the Hacker News discussion "P5.js: Processing for Today’s Web", Brad Greenwald, the lead UI engineer for Scrimmage, commented on the announcement:
I'm naïve. What makes this comparable to - or better than - D3.js, EaselJS, Three.js, Raphaël, KineticJS, Paper.js, Famo.us, or Impact? I realize they don't all share the same feature sets... but I'm not understanding what makes this new or exciting.
Gui Ambros, senior VP of marketing operations and tech tnnovation at Wunderman, responded:
Read "The Nature of Code", by Dan Shiffman, and you'll instantly understand the difference between Processing (and p5.js) and other languages/frameworks.
In the same way that Arduino brought hardware hacking and IoT for the masses, Processing does the same for creative coding. There's a ton of people out there that are not experienced hard core developers using Processing to create data visualization, interactive installations, games, and experiences mixing sound, vision and graphics.
p5.js basically unlocks the power of Processing by expanding its canvas, from a monolithic desktop app to the browser. And this is a great step forward. Besides, Lauren is doing a great job creating a community around the project.
The p5.js official site describes the library as being in active development, clarifies that it is a "new interpretation, not an emulation or port". Among the new features promised to be coming soon is "an official editing environment".
P5.js is released under a GNU GPL licence. As it is an open source and collaborative project, InfoQ readers are encouraged to get involved with p5.js in various ways, including by developing, creating documentation, or teaching. P5.js also welcomes designers, artists, writers, organisers, and "any other role you can think of". Anyone interested in either contributing or collaborating are encouraged to get in touch at hello@p5js.org.