Design+Sound: P5js and Max/MSP Together

As a part of my undergraduate, music studies I would observe music professors demonstrate early visualization techniques and processes that complimented their compositions. It was often splashes of shapes, color shifting video, and imagery inspired by psychedelia. The syneasthetic language seemed specific and clearly within the lineage of video art of the 1980s.

A few years later when I attended a graduate program in design at UCLA, the inverse was true. Designers there had a more thorough understanding of practices, history, and reference points. As expected, there was a clear way to analyze and discuss visual communication. One of the tools of choice was Processing, the grandfather technology before P5js. Processing was a technology co-created by Casey Reas, one of my professors at that time.

My studies and research of visual and auditory communication often bring me to this interesting interstice: Why would a musician be _too_ concerned with color theory and why would a designer be particularly concerned with synthesis or any type of music theory?

The answer is simple: we may seek creative exploration and new ways to communicate.

Two Separate Communities

As someone with reasonable experience with both technologies and communities, I can see how the compartmentalization is reducing the creative possibilities. You rarely see persons in the Processing/P5js community engaging in sonic or musical projects (it does support MIDI and synthesis) and the topic of "design" is not often top of mind for the Max community.

What's lost is an opportunity to create experiences that speak to more of your senses. What's lost is discovery.

What is possible?

P5js provides default settings optimized for 2D form. This means it creates two dimensional representations of shapes and flat images. Through 2D form, we have many ways to communicate such as through color contrast, visual hierarchy, typography, and the motion of the elements. This of course is possible already in Max/MSP. You can communicate this way using JSUI or any approach involving mgraphics or sketch. P5js is effectively the same thing except it's a Javascript library with functions optimized for designers.

With P5js implemented into Max, you can communicate to it via Max messages. You can control animations in P5js with Max. Using the immense design related resources available for P5js, you can design things into Max projects that communicate with your patches, VSTs, MIDI, hardware, etc.

Friends Coming Together

The Processing community was always about teaching design and interaction through code. If you follow Casey Reas, he considers the artfulness to be the code itself. As the project nears 20 years of development it has created a very strong visual communication focused community. Max/MSP, in my opinion, has fostered experimentation, bespoke solutions, and performance all through the lens of musicking. My discussion of combining the two technologies is not just about the experimentation. It's about the minds, knowledge, and expertise we gain from these communities coming together. If we can manage to get more and more designer and visual artists to speak with Max folks, we will discover new methods of communication and exciting projects.

Just the start

As I begin this process of creating curriculum and project examples, I can see many untapped ideas on the horizon. I've taught data visualization through P5js. I still need to create a data viz project built within this collaboratory tech stack. There are performance limitations that still have to be addressed by honestly, I see this easily confronted as Apple's M4 chips are soon to enter our purview.

As I build this hybrid community, I want to bring attention to my first (and probably first of its kind) workshop for P5js x Max/MSP.