FeaturedIT topics

JavaScript tutorial: Get started with generative art and P5.js

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.

Related Articles

Back to top button