Creative coding with p5.js: Examples and project inspiration

0
1336
Creative coding with p5.js: Examples and project inspiration

We recently launched a new course — Learn p5.js. This course is a great place to start for anyone interested in creative coding and will introduce you to creating generative visualizations, interactive experiences, and multimedia graphics with code.

Creative coding is a type of programming in which the goal is to make something expressive, instead of something functional. Creative coding can be used to create visual art, data visualizations, immersive experiences, interactive films, games, and so much more.

There’s virtually no limit to what you can express with code! And to help you get inspired, we put together a few examples of how artists and programmers are using p5.js for creative coding.

What is p5.js?

p5.js is an open-source JavaScript library used for creative coding. It has pre-written code that makes it incredibly simple to program interactive visuals that run on your web browser.

With p5.js, you can build visualizations using shapes, text, images, videos, and sounds. You can add sophisticated animations and interactions to your programs. And it’s easy to get started, even with only a basic knowledge of web programming languages like HTML, CSS, and JavaScript.

In fact, p5.js was designed to make coding accessible to artists, designers, educators, beginners, and anyone else. It’s a great way to build a strong foundation in code, or to flex your coding muscles in a different way.

So whether you’re just starting out on your coding journey, or you’re looking to express your artistic side with code, we hope these examples will help you get inspired about what’s possible with p5.js.

p5.js examples

We’ve put together some p5.js examples from three different artists: Codecademy Content Contributors Mark Lam and Morgan Mueller and Codecademy Curriculum Developer Jiwon Shin. Mark, Morgan, and Jiwon all worked on our Learn p5.js course. You can check out their stories and p5.js creations below.

Mark Lam

Mark Lam is an artist and self-taught developer interested in exploring the ways networked technology mediates the relationship between the self and the other. He is currently a Content Contributor at Codecademy and Front-end developer at United Nations, working to improve data exchange.

Mark’s project, Down Up, morphs two opposite words into one another. He says it’s inspired by the themes of duality and transformation, and by curiosity about how type is rendered onto a screen.

Down Up by Mark Lam

To make this, Mark used p5.js as a drawing tool to sketch out each word. Using OpenType.js, he deconstructed the words into a collection of paths that could be modified. He programmed one set of paths to transform into another, animating the back-and-forth transformation with p5.js.

Mark’s second project, Asemics Writing, translates an audio recording into abstract writing. Mark says it was inspired by asemic writing, a style of writing that is wordless yet resembles written language.

“I think of it as kind of a naive interpretation of language, like a baby trying to write without having learned language yet. I took this form and applied it to a recording of Buckminster Fuller speaking about the possibilities of human imagination, and encoded his voice into the appearance of a written language using p5.js.”

To make this, Mark used the p5.js audio library to load the recording, and a Fast Fourier Transform (FFT) algorithm to analyze the recording. The FFT algorithm translates each spoken word into a set of waveforms, and a function draws the waveform onto the web page.

We asked Mark what he finds most exciting about creative coding. He tells us:

“What I like most about creative coding is its endless possibilities, and technology’s relatively new history as a creative medium. My background before coding was in studio art, and I became interested in coding as a way to incorporate interactivity into my art work.

As I grew in my development practice, I began to be exposed to different sub-topics around technology, such as the history of computing, open source software, and networking.

I really enjoy the aspect of learning and understanding technology at a deeper level, and a lot of the work that I do now is to take these technical topics and bring them to the forefront for people who aren’t well versed in these fields.”

Morgan Mueller

Morgan Mueller is an Artist and Researcher based in Brooklyn, New York. His artistic practice examines infrastructural systems in the context of labor, resource extraction and global trade.

Ever wonder what happens to nuclear waste? Morgan’s project, Nuclear Waste Futures, is a critical art piece that explores this question. Through a set of time-lapse videos, Morgan shows us how nuclear waste persists over decades, contributing to postnatural landscapes across the U.S.

It also raises questions about how we should store nuclear waste as we consider future generations.

Nuclear Waste Futures by Morgan Mueller

For this project, Morgan used p5.js as a prototyping tool. “Most of what I ended up doing with p5.js is using it for quick prototyping, testing, and designing interactions before I decide whether or not to incorporate them [onto the site].” He collected the images using the Google Earth API (for the years 1990–2019), and created the time-lapse videos using FFmpeg.

When asked what he likes about creative coding, Morgan says:

“I like that creative coding can help people with limited technical literacy feel more empowered to learn about and be excited to continue programming. I also like that it can help give new dimensions of interactivity and creativity to artworks that may otherwise be limited.”

Jiwon Shin

Jiwon Shin is an educator and a creative coder. She is a Curriculum Developer at Codecademy and Adjunct Professor at New York University where she teaches web development and creative coding. Her most recent works focus on building interactive experiences that combine live motion capture with dynamic visualizations.

Many things we do online—whether it’s checking the weather, or looking up directions to a local restaurant—is made possible by satellites that orbit the earth.

Jiwon’s project, Around Us, maps out this satellite infrastructure in a series of 3D visualizations. Once launched, the satellites are no longer visible to us. In response, the project aims to raise awareness of this satellite infrastructure, which makes digital communication and media distribution possible.

It also questions whether we truly know how many satellites are orbiting earth and what they’re used for.

To create the 3D visualization, Jiwon used p5.js and Three.js. The satellite cards were generated and exported as image files using Processing. And the satellite data was sourced from the Union of Concerned Scientists.

We asked Jiwon what she likes about creative coding. She shared:

“Creative coding makes programming more relatable and less intimidating. Looking at all the amazing creative coding works out there, it makes you realize that you don’t have to use programming to build tools. You can use programming to express your thoughts and feelings and to share messages that you think are important. The change in perspective invites a more diverse group of prospective coders.”

Getting started with p5.js

Interested in getting started with creative coding? Check out our Learn p5.js course, or check out these other courses related to creative coding:

You can also check out a list of Resources for Creative Coding in the Codecademy Forums.

Share with us what you create in the comments below!