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.
“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.’”
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!’”
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.
“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.