BT

P5.js Brings Creative Coding to the Masses

| by James Chesters Follow 2 Followers on Aug 26, 2014. Estimated reading time: 2 minutes |

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 Wundermanresponded:

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.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss
BT