Custom UI Objects with Javascript
With the recent addition of v8ui in Max 9 (the Javascript V8 version of jsui), we thought it was time to look again at custom UI creation with Javascript. We invited four talented Max artists to each create a unique UI element using with Javascript. I hope these inspire you to try coding your own experiments.
Estevan Carlos Benson
"Haiku" combines Estevan's interests in writing, design and music. It's a generative poem with field recordings and music built in Max9, using the new v8ui object.
Follow @estevancarlos for more.
Rainbow Circuits
Bumps is an exploration of isometric projection and interface animation.
Developed by Takuma Matsui of Rainbow Circuit.
Follow @rainbow.circuit for more.
Ess Mattison
Drag, wiggle, click and listen. Music in the style of SND.
In this patch I wanted to "patch" as little as possible, shifting focus to how useful JavaScript is within Max.
As a frontend for Gen~, JSUI is here used to represent parameters of the sound and pattern generation.
Follow @ess_mtsn for more.
ringtone.tools
The patch is a MIDI sequencer built around two components, a system for the playback of notes (SPIN / SHAPE), and a system for selecting the notes to be played (NOTE / WINDOW).
SPIN / SHAPE is a shape that spins around. I wanted something that could produce interesting results but could still be understood intuitively, so I made a polygon and arranged the steps of the sequencer in a circle around it. The notes are triggered when the corners of the polygon pass by a step in the sequence, since the shape must have at least 3 (and up to 8) corners, we are always playing the sequence from 3 - 8 positions simultaneously.
The number of steps in the sequence is variable too, while the rate of rotation is constant, so changing either the number of steps or the number of corners will effect both the order of notes as well as the speed at which they are played. Playing an 8 step sequence with a 7 sided polygon for example, will cause the sequence to play in reverse, while the same polygon playing a 6 step sequence will play in the opposite direction at a proportionally slower speed. A square playing an 8 step sequence will alternate between two 4-note chords. Clicking on an individual step will mute it.
NOTE / WINDOW is even more simple, it is a sequence of 16 steps laid out in the normal way with one distinguishing feature, a rectangular window that highlights some or all of the notes. The size of the window corresponds to the number of steps used by the sequencer. Only the notes within the window will be played, and clicking another area will move the window, changing the notes. This allows you to make quick adjustments to the sequence, making it a bit closer to a thing that you play as opposed to a thing that you program. Incoming MIDI notes are recorded into the window, if a note already exists on that step it will be overwritten, notes outside the window will not be affected.
Basically you can record a bunch of notes then navigate around them, sending a smaller subset of notes to the sequencer, which will rearrange them into a wide variety of potentially serendipitous patterns. The process is hard to explain, but hopefully you never really have to think about it because it makes a kind of intuitive visual sense.
The javascript UI is completely separate from the process that actually triggers notes, which basically accomplishes the same thing using normal MSP objects. Both processes run in parallel from a single phasor~ output. Javascript could handle triggering too, but it runs everything in a single thread so Max objects still provide a lot more accuracy.
All of the sounds are created using one of the very handy new abl.dsp objects, you can also use an external VST instead. The menu should auto-populate with a list of VST3 instruments available on your machine. I tried to make the patch pretty extensible, so you should be able to use the sequencer, or parts of it, in your own patches.
Follow @ringtone.tools for more.
by Andrew Benson on November 13, 2024
