Keep It Simple: From Ambitious Project to Simple Prototype as a p5js Newbie

I’m not a coder. I’m more of an ethnomusicologist, a technopedagogue, an ethnographer, and a Learning Experience Designer.

Really, not a coder.

Although I have dabbled in code for quite a while (from BASIC on a ViC-20 in the early 1980s and a bit of C in the mid-1990s all the way to Sonic Pi, PureData, SuperCollider, ChucK, Jupyter, Max, etc.).
In other words, I’m an eternal newbie. And I like it that way.

As a “testimonial”, I want to share that p5js has allowed me to get a working prototype of something very simple that I should be able to use in a broad project I have about “Inclusive Learning through Music Technology”.

Here’s the p5js project, at this point.

(I mean to share it as Public Domain Dedication though I’m not sure where to apply licenses through the site.)

It’s just a simple grid of buttons which play notes. The layout I’m using is rather common: Novation Launchpad, Linnstrument, GeoShred, Ableton Push, ROLI Lightpad, etc. It’s the same as the strings on a bass (and the first four strings on a guitar). Unlike a piano-style keyboard, a given pattern will play the same anywhere (so, it’s “isomorphic”). Once you’ve learnt the shape of a chord, for instance, you can play it on any note. In my experience as a saxophone player who’s taken piano lessons, I’ve learnt way more quickly with such a layout than with piano-style keyboards. (And, as an ethnomusicologist, I decry what I call “pianocentrism”.)

There are other layouts possible and exploring those is part of the overall project.

The buttons (pads) are highlighted based on the scale you choose. You can expand the number of rows and/or columns (though it doesn’t scale back, at this point). As simple as it sounds, I find this kind of thing really useful in helping diverse people learn a few simple concepts about music.

Keyword: simple.

I have “big plans” for it. Dreaming up diverse things. (In French, we say “caressing the project”, «caresser le projet»). Eventually, I’d like to build a set of interactive modules which help people understand some things about music… without relying on staff notation or the whole set of ideas which pass for “theory” in the music world.

(In ethnomusicology, we’ve expended a lot of energy getting out of these frames. Which doesn’t mean that we can’t address them. Just that we don’t accept the ethnocentric notion that they’re somehow “natural”, “universal” or, indeed, appropriate as a way to understand most musics.)

From that simplistic prototype I’ve created, I’d like to build the core module for some learning activities. That module is still based on the same simple idea of representing things in a grid. Readily acknowledging the limits of grid-based thinking while also recognizing that a lot of music, these days, is based on a grid concept (from drum patterns to clip launching).

For instance (some of these get into “feature creep” territory):

  • Bass version (as fretboard overlay, using bass samples) (4x12)
  • Guitar version (noticing difference in those two strings) (6x12)
  • Arbitrary tunings (noticing other patterns)
  • Drumpads (4x4)
  • Beat grid (4x16 up to 16x16)
  • Bass/guitar tabs (also start from 0)
  • Conversion from guitar/bass to grid tabs
  • PlayScale button
  • PlayChord button
  • PlayPattern button
  • MIDI input (through DjipCo’s WebMIDIjs, locally built)
  • “Clip launching” version (reversible, with simple loops, separate column/row for launching “scenes”)

Of course, there’s a number of considerations I have, which don’t appear in this prototype or in features. Supporting screenreader use. Providing more information for those who can’t hear the sounds. Limiting the use of jargon (including scale names) and making them work across languages. Providing a mix of ear-opening and recognizable examples. Finding ways to explain Just Intonation and other approaches to musical tuning through such a module (I’ve tuned samples in JI from A). And, again, the very notion that “grid” has become a negative word for many people (which could make for a lesson about quantize/humanize).

When I registered for this Discourse instance, I was hoping to get help to solve a simple issue I had (passing parameters to a function triggered by mousePressed). Instead of posting, I’ve used a wellknown bot which found an elegant solution. In fact, the “Cat Gepetto” helped me get over several hurdles so that, within hours, I had something usable.

As a learning experience, it was tremendous. I’ve learnt a whole lot in a matter of hours. Felt empowered. Enabled.

So, at this point, I might put that project aside for a while though I’m tempted to “keep at it”. Next steps would include solving some bugs (unable to scale back to fewer columns/rows), adding features I had tried to add (transposing), prettying it up a bit (for instance, scaling the display, making it responsive, adding a “HUD” to give more info about each pad…), and finding ways to make it work elsewhere (for instance, on iPadOS… or as H5P content).

Still, though, I wanted to share about this experience. I first tried my hand at p5js a few years ago, and enjoyed it. For this prototype, I came back to it after doing something similar in Tumult Hype and even in PowerPoint (those were like “paper prototypes”). At this point, I feel relatively confident that I might be able to create useful modules in p5js.

If you have criticism about the code, please bear in mind that it was meant as a simple prototype and that I’m really not a coder.
If, by any chance, someone is interested in collaborating/contributing, I’d be ecstatic.

And, it goes without saying, if you have thoughtful advice about my project, I’m here to learn.