Skip to content

Language Settings

The p5.js community stands in solidarity with Black Lives Matter.

Chillin'

Project Info

A screenshot of a poster with red and yellow circles of letters from the word chillin against a blue tile background that changes perspective on a mobile device. 
        At the top, there is a text input box to enter a message and download your own poster.

Q&A

What are you up to?

I am a graphic designer and a faculty member at Maryland Institute College of Art, where I mainly teach coding (with p5.js and Processing, of course) and motion graphics.

How did you get started with p5.js?

I have been using Processing for some time, and when p5.js came along, I started using it without a second thought because it was easy to convert existing Processing code and share projects online.

How did you use p5.js in this project?

This summer, I gave myself a challenge of making typographic posters with coding, and this is one of the posters I made. I didn’t know until very recently that I could use motion sensor data with p5.js. I was also watching Dan Shiffman’s matter.js tutorial videos, so I thought why not combine the two and practice what I was learning?

What's your favorite p5.js feature?

There are many things I love about p5.js such as the online community and beginner friendliness. What I really like right now is the online editor, with which I can not only work online for myself but also share URLs quickly in the present mode. For this project in particular, I had to do a lot of testing on my phone, and it was much easier and quicker than committing to GitHub.

Did you face any challenges working on this project? If so, how did you overcome them?

I had some troubles with handling font, alpha channel and z-depth in WebGL mode. I am still not happy with all my decisions. But in general, it was helpful to search the forum and not to forget to break down problems into smaller ones and iterate little by little. Also, I had issues with rendering out video files directly out of p5.js. Screen recording was not an option because of intermittent frame rate drops (my laptop is pretty slow). After doing some research, I decided to learn some basics of Electron and build a tool for myself.

What's a cool thing we should check out?

As mentioned above, if you want to render out frames and video files out of p5.js sketches, check out my Canvas Saver boilerplate and let me know what you think.

Where can people learn more about you?

@cdaein (Instagram)