conceptual inertia

The goal: use the sliders on my MIDI keyboard to control corresponding sliders in Processing. Here’s a screenshot of the resulting demo that maps 3 sliders to variables used in Examples/Basics/Arrays/Array2D.

Processing doesn’t ship with a collection of standard GUI controls – nor was it meant to. For simple GUI controls, there are external libraries available. I’ll be using controlP5 which you can read about and download here.

To get the new lib working, create a “libraries” folder in your sketches directory. If you don’t know where your sketches directory is located, check the preferences in Processing. Unzip the download and drop the whole thing in the libraries directory. If Processing is already running, you will have to reboot the app before you can import the library. If everything is installed correctly, this example should work.

Messages will be sent to Processing using OpenSoundControl (OSC) – a communication protocol where packets are typically send using UDP sockets. Download the oscP5 lib and install it (don’t forget to restart Processing). Test the OSC lib using this example.

On the Max side, we’ll also need OSC support which will be provided by CNMAT’s collection of objects. I’ve chosen to download the complete package of objects here. Unzipping the file reveals a directory full of files and no instructions on what is to be done with them. I do recognize the .mxo extension as an external – a plugin you can write using the SDK. A search for .mxo in help returns one result:

It turns out that:

• .mxo or .mxe represent external objects
• .maxpat and .maxhelp are the new file formats for Max 5
• .pat, .mxb, and .help are old file formats

Looking under the Max/Cycling ’74 directory, I can see there are folders for: max-externals, msp-externals, and jitter-externals. However, I don’t really want to “pollute” the default installation with 3rd party externals. Fortunately, Max allows us to set additional search paths – allowing us to keep our files wherever we deem appropriate. Place the downloaded CNMAT folder wherever you want (I’ve chosen Max5/CNMAT). In Max, select “File Preferences…” under the Options menu and add the CNMAT path. Below, I’ve set a relative path:

I’m not sure if it’s required, but a restart would be prudent. However, typing “osc” doesn’t reveal anything during autocompletion. Looking in the CNMAT directory, I discover that the objects are uppercase. Typing “OSC” now reveals:

Shaweet. Of course, at this point, I’m still not sure if it actually works, how to use it, or if I should even be using OSC-route in the first place! Fortunately, I saw .help files in the CNMAT directory, so I know that Option clicking the object will bring up a working .help patch. It appears that OSC-route is similar to Max’s route object and not what I’m looking for right now. The CNMAT directory also contains an object named OpenSoundControl, which looks promising, and indeed it is. In Processing, we can test things out by creating a UDP socket to receive messages on port 8080 of localhost:

voidinitOsc()
{
  oscP5 = new OscP5(this, 8080);
  myRemoteLocation = new NetAddress("127.0.0.1", 8080);
  oscP5.plug(this, "foo", "/foo");
}

public void foo(int value)
{
  println("int received!!! = " + value);
}
 

“Plugs” in oscP5 are used to register callbacks when events are received. Values are parsed from the OSC message and passed in as params to the function – very handy. On the Max side, we can create a simple patch to send an OSC message out a UDP socket on the same port:

Click the “/foo 42″ message to add it to the OSC buffer, then bang to send all packets in the buffer. In Processing’s trace output, we see “int received!!! 42″.

Now that the fundamentals are in place and working, it’s easy to build upon.

On my machine, the controller numbers for sliders are 82, 83, and 28. To find out what controller number your slider is sending, open the ctlin .maxhelp patch and move the slider:

Here’s the Max patch with my controller settings that will generate OSC messages:

In the above patch, “/xDist 62″, “/yDist 68″, and “/circleDist 42″ are all OSC messages that were sent to Processing. All 3 messages will map to plugs in oscP5, triggering functions that adjust the GUI slider values. Here’s the Processing source:

import controlP5.*;
import oscP5.*;
import netP5.*;

ControlP5 controlP5;
Slider xDistSlider;
Slider yDistSlider;
Slider circleDistSlider;

OscP5 oscP5;
NetAddress myRemoteLocation;

float [][] distances;
float maxDistance;
int yDist = round(32 / 8.0f);
int xDist = round(32 / 8.0f);

void setup()
{
  size(500, 300);

  initDistances();
  createSliders();
  initOsc();
}

void initOsc()
{
  oscP5 = new OscP5(this,8080);

  myRemoteLocation = new NetAddress("127.0.0.1",8080);
  oscP5.plug(this,"onXDist","/xDist");
  oscP5.plug(this, "onYDist", "/yDist");
  oscP5.plug(this, "onCircleDist", "/circleDist");
}

void initDistances()
{
  // diagonal from center
  maxDistance = dist(width/2, height/2, width, height);
  distances = new float[width][height];

  for(int i = 0; i < width; ++i)
  {
    for(int j = 0; j < height; ++j)
    {
       float dist = dist(width/2, height/2, i, j);
       distances[i][j] = dist / 0.5f;
    }
  }
}

void createSliders()
{
  controlP5 = new ControlP5(this);

  xDistSlider = controlP5.addSlider("xDist",
                                    0, // min
                                    127, // max
                                    32, // default value
                                    20, // x
                                    20, // y
                                    100, // width
                                    10); // height

  yDistSlider = controlP5.addSlider("yDist", 0, 127, 32, 20, 40, 100, 10);
  circleDistSlider = controlP5.addSlider("circleDist", 0, 127, 64, 20, 60, 100, 10);
}

void draw()
{
  background(0x000000);

  for(int i = 0; i < width; i += xDist)
  {
    for(int j = 0; j < height; j += yDist)
    {
        stroke(distances[i][j]);
        point(i, j);
    }
  }  

  fill(128);
  rect(10, 10, 160, 70);
}

void onXDist(int value)
{
  xDistSlider.setValue(value);
}

void onYDist(int value)
{
  yDistSlider.setValue(value);
}

void onCircleDist(int value)
{
  circleDistSlider.setValue(value);
}

void circleDist(int value)
{
  float val = value / 127.0f;

  for(int i = 0; i < width; ++i)
  {
    for(int j = 0; j < height; ++j)
    {
       float dist = dist(width/2, height/2, i, j);
       distances[i][j] = dist / val;
    }
  }
}

void xDist(int value)
{
  xDist = round(value / 8.0f) + 1;
}

void yDist(int value)
{
  yDist = round(value / 8.0f) + 1;
}
 

And here’s the Max source:

----------begin_max5_patcher----------
794.3ocyX9zaaBCFF+L4SAxmyx7+HX1sot68P6sopIB305IBDADszU0u6CaC
oosowNMA6npRkof8i+4G+99heZR.XQ0FdCH7ag+LLH3oIAApaIuQPe6.vxzM
YEoMpGCTtd4BdMXp9esJsM6AQ48+plm0p6FRDaVzzvX1L3zvHn7Jt6Z3c8uR
WGTstsf2p5Ob+c+cUYaY5RtZL9dsHsXXHzOb6iq359GHJaASCAKRKuGrsWE4
p2rZwe9RDDrSm1H9m5EQnYQIQHV7KxPTNnBj7dOOYh7xTaAA+uci1vP0x2nl
+fr1BQYXZHlcHFgQRtP0LJdzXj7O6EQH2fHidEMGPvHuYVvWFj.SQ9cWCM9R
XWCibHFAodcWCkcg3Uzbvi6ZnI9zrrpluhWlG90LQcVA+GhlVywXHQ5PMHS3
Bc73ZuLBu+HK3tg2wgWIpA0KFELYrgPSgH2pbLQzgoeWCp40eKWko.W41ezf
QuOrPuQmwbjOGk3ce9vL2i9bn284CYEFIeNB3rkSDl52ZgPzKhZgvGfQrXuV
JDJ5xnTHMF7XkPn4NADK4MMo2yemWQoqOFOT8mYBIpviZVwF+LBniIXHdDRU
twPpRssw0YJG+BB2OVttCJ2TstL+ptwstpnatBglisP09EJw.dHeB7LU+602
b0shk7aS2+lqXOAr04qZj9HDtCAc+fBYPlEDiQ2lz8fDCZjX6.g4du7p9cK9
q5pHuWbUedlwo1JhwRqTuEnqrf2dVsJoJu+qmbMUqqyFFygC7K7E0lyaZEko
shpxceH7qdnGD447xc8qKE4qp5Vr5EQ3c6E0GklPlzDzoZRdDOF0j7nxbslL
s1IOQFWt1gsPSxuM1kbJwFMgbplj0IazOgntWSl3jrtVWpo4VnIhSkD1FKN5
HsSDBT9osjDXetzgFmJ+RFAwhQjQQrVQ13OEXoDUQJIy21vEfM9Sw0ytVwDa
B.51j7XnMFS2l75M4k9.N43nM1TfF1sECYicJxoJJ1BE43DWnye7gS0JMBoB
zAoN+YBN+vqWow6DaU03TK30lsmmvxbWimm7ePYddjC
-----------end_max5_patcher-----------

Until next time!