Unleash Your Inner Jackson Pollock with P5.js – InApps 2022

Most programmers learn to program by studying syntax and data structures. Write code, the code does stuff, results returned in console. You might, however, need to write quite a lot of code before finally getting something good in the console. P5.js turns this approach upside down: write one line of code to get instant — and often gorgeous — results on the screen.

Yes, yes, we are all creative coders. We may even occasionally like to think of ourselves as artists working in the medium of code — the Cezanne of C#, or the Picasso of Python. P5.js, however, uses Javascript to render literal works of art.

P5.js is a client-side JavaScript library for creating graphic and interactive works, a fully open source project that just celebrated its third birthday. P5’s approach is based on Processing, a Java-based “software sketchbook” platform that’s been around since 2001. Both are intended to make learning to code less intimidating for artists, designers, educators, and anyone else who can’t conceive of themselves as a potential programmer. Processing’s output, however, is limited to a virtual drawing board (and for a long time relied on Java applets, which are no longer widely supported). P5.js was built as a native JavaScript platform that makes use of the entire browser, including HTML5 objects like interactive webcam, video, sounds, and interactive user input.

“For a beginning CS student, getting a program to print out some numbers feels pretty exciting. But for an art student learning to code, it’s less so,” said P5.js creator Lauren McCarthy. “With P5 you write ‘10 10 10 ellipse’ and you’ve immediately got something graphic on the screen. It hooks them, and before they realize it they’re coding!”

Indeed, the platform is straightforward and intuitive to use. P5.js has a library of around 200 easily understandable commands: triangle() draws a triangle, fill() fills in a shape with a color(). Events like deviceShaken() or keyPressed() trigger corresponding reactions in the DOM, and once your masterpiece is created there are a variety of export options that include saveJSON().

McCarthy first encountered Processing while at the Massachusetts Institute of Technology, where she earned bachelor degrees in both art and computer science. “I kind of fell into it,” she said. “The metaphor of sketching felt comfortable for me, the way it feels familiar and accessible for a lot of people who might not otherwise feel comfortable with code.” She used it extensively as a creative tool while a graduate student, and then in her professional work after graduation.

That was when McCarthy got interested in the open source aspect of Processing. “I started thinking, ‘It’s so cool these tools are free and open source, and here I am in my professional job using them to make money. I bet my company would pay me to spend some time working on and contributing back to them.’”

A still, with section of source code, from the interactive P5.js project “Depths” by Ale González, 2013.

Initially, however, McCarthy struggled to find her way into the open source ecosystem. “Coming in, I was non-traditional in so many ways, it was honestly pretty hard to be taken seriously when I approached projects I was interested in working on,” she said. Fortunately, McCarthy knew Casey Reas, who had been one of her teachers while she was in grad school at UCLA. Reas had co-created Processing with Ben Frey and, McCarthy said, “He told me, ‘I have a project you can work on!’”

McCarthy’s assignment: to conceptualize, theoretically, what Processing could look like in JavaScript.  “At first I worked almost like doodling. I had very little idea of what I was doing because I barely understood things and had little confidence in my ability to build it out,” she recalled. “I just kind of sketched things out. But if you are curious and want to learn you can jump in and learn as you go if you have the support of people around you.” Her first P5.js GitHub commit was February 13, 2011. By August of 2014, she had a working beta version of the platform.

P5.js is truly a community effort. The project’s GitHub repo lists 160 contributors who have made a total of 4,174 commits. “People have contributed core features, bug fixes, examples, documentation, design, thoughts, and discussion,” said McCarthy. She credits the project’s extensive support to “the vision and the spirit of the Processing community, which is very invested in transitioning to the web.”

P5.js is meant to be a learning resource — particularly for people who might not think they’re able to learn to code. “Inclusivity and access are first and foremost, and we have built from that priority,” she explained. To this end, a soon-to-be-released web editor should increase P5.js’ accessibility even more, particularly among those uncomfortable with the command line or for whom installing software is problematic. For example, students using school-issued computers are typically prohibited from downloading programs onto their borrowed machines.

Nevertheless, the current version of P5.js is now in use in classrooms worldwide, though primarily college level. And not only in arts and humanities curriculums. “University CS and engineering programs have found this is a friendly way to get people sketching very quickly, without the overhead of having to learn a complex system or language,” she said.

However, McCarthy stressed, P5.js is not some cute new learn-to-code gambit. It’s also a legitimate artistic tool for people doing serious and cutting-edge work in digital media. (For a look at some of McCarthy’s own creations using the platform, visit her home page).

“You don’t have to be an artist proper to use this,” she said. “Because this project is so web native, we are also making it for web devs who have coding background but aren’t so comfortable with the art-making part.” Using standard browser features in completely new ways — native mobile functions like touch screen and accelerometer, for example — could unleash creativity and ideas for their professional work, suggested McCarthy.

“There are just so many ways to explore and engage with technology inherent in this tool,” said McCarthy. Future directions she would like to see the platform grow include harnessing WebGL (Web Graphics Library, a JavaScript API for rendering interactive 3D graphics). “All the interest in VR right now — exploring how P5 would function in that space,” she mused. “Students working with Raspberry Pi controllers, for example, and how those could work together to break beyond graphics and drawing images on a screen…”

“The web changes so fast, and the ultimate thing we are trying to teach is feeling comfortable with experimentation,” McCarthy concluded. “Because on the web, there’s no one giant textbook you can read and feel like, ‘I am all set to master this.’”

Feature image: “Colorful Faces” by artist Koi Koi from the P5.js open source online gallery.