For the last few years, I've been running into presentation after presentation on generative art, meaning art created with code. Two talks at the Strange Loop 2018 conference in September were the last pushes I needed to dig into it. When I did, though, I stumbled on a few setup issues that left me scratching my head and slowed me down. Below, I'll briefly describe what P5.js is, what some of the initial roadblocks were, and how you can jump right into making some art using P5.js and ES6. Next week, we'll look at some of the API basics and attempt to make a watercolor effect. But first, a note on creativity.
Are you creative? When talking with others about making art or music, you will often hear someone say, “I’m just not creative.” To me, this is like me saying, “I'm just not a basketball player.” Technically this is true, but I could certainly learn and enjoy pickup games if I started playing. It might be uncomfortable initially, but it will become more comfortable if I keep doing it, just like anything else in life.
When I hear people say they aren’t creative, I take it as a reason they give to not participate in creative endeavors. For those of you who truly believe you aren't creative or you couldn’t create art, I would very much recommend a talk by John Cleese on creativity, in which he says: "Creativity is not a talent. It is a way of operating."
What is P5.js?
To answer this, we'll first talk about Processing. Processing is a language designed to promote an interchange of literacy between visual arts and programming. Processing helps visual artists learn how to program in order to create art and helps programmers learn how to make art in a medium they're comfortable with. It’s like a sketchbook in code that can be used to make still images or animations. P5.js is a JavaScript library based on Processing that extends the visual paradigm to include dynamic interactions and sound.
What is generative art?
I learned from a talk by Benjamin Kovach that Jason Bailey defines generative art as "art programmed using a computer that intentionally introduces randomness as a part of its creation process." If you want a quick primer on what generative art can look like, along with some ways of thinking about it, I'd recommend Benjamin's talk, “A Box of Chaos: The Generative Artist's Toolkit.”
P5.js pitfalls for programmers
My first impressions of P5.js were tainted by a few “shortcomings” in the documentation. I should note that these (perceived) drawbacks have everything to do with my background in programming. They are undoubtedly “features” when you think about them in the context of catering to newcomers.
No clear setup steps for NPM. I know this is usually a no-brainer, but I'm so used to seeing simple npm install instructions at the top of a readme that I was a bit disoriented when I couldn't find them anywhere. Instead, there is just a download link to the packaged JavaScript file. To someone new to programming, having to set up a package installation tool and Node.js is a huge barrier to entry, so a simple download is ideal. To me, though, it's a departure from the most common approach to handling dependencies.
No examples using ES6 syntax. All of the examples use ES5 syntax, which feels kludgy after working with better language ergonomics for years. You can, of course, code your heart out in ES6, but if you're looking to copy example code from the documentation, be prepared to rewrite it. ES6 is a priority in the roadmap to P5.js 1.0, but in the meantime you'll have to do the conversion yourself. For someone new to programming, using ES6 means having to bootstrap Webpack and Babel, which can feel like voodoo even to seasoned front-end developers. To me, relying on ES5 feels like a step back to the "dark ages" of JavaScript development.
Global scope pollution. All of the examples in the learning section leverage the global mode of using P5.js, wherein you define methods in the global context in which P5.js is expecting them. There is an instance mode of P5 where you can use the library in a more modular way without having to pollute the global scope, but it's not easy to find unless you know what you're looking for already.
Bootstrap your P5.js project
The last thing I want to do when I'm in an artistic mood (also known as an open mode) is configure Webpack and Babel. To slingshot you into a creative place where you can experiment and learn, I created a GitHub project that you can clone and start using immediately:
https://github.com/freethejazz/p5js-es6-starter
Check in next week for a hands-on look at creating a watercolor effect using P5.js.