Ahh…so much cleaner than the mess I had before. Modifying the Java code to Javascript was trivial, here’s the code for sketch0.js:

outlets = 0;

// global vars
var offset = 20.0;
var radius = 50.0;
var centerX = 50.0;
var centerY = 50.0;
var x = 0.0;
var y = 0.0;
var angle = 0.0;
var frequency = 2.0;
var counter = 0;
var coordsX = new Array(180);
var coordsY = new Array(180);

function bang()
{
    draw();
}

function radians(angle)
{
    return angle * Math.PI / 180;
}

function draw()
{
    outlet(0, "clear");

    // calculate point
    x = centerX + Math.cos(radians(angle)) * radius;
    y = centerY + Math.sin(radians(angle)) * radius;

    // draw black circle
    outlet(0, "paintoval", offset, offset, radius*2+offset, radius*2+offset, 0, 0, 0);

    // draw red circle (10 pixels in diameter)
    outlet(0, "paintoval", x+offset-5, y+offset-5, x+offset+5, y+offset+5, 255, 0, 0);

    // draw green circle
    outlet(0,
              "paintoval",
              centerX+radius+counter+offset-5,
              y+offset-5,
              centerX+radius+counter+offset+5,
              y+offset+5,
              0, 255, 0);

    // draw prev point
    for(var i = 0; i < counter; ++i)
        outlet(0, "setpixel", coordsX[i], coordsY[i], 0, 0, 0);

    // cache prev point
    coordsX[counter] = centerX + radius + counter + offset;
    coordsY[counter] = y + offset;

    // adjust counter and angle
    ++counter;
    angle -= frequency;
    if(angle <= -360)
    {
        angle = 0;
        counter = 0;
    }
}

Another possiblity is to swap the lcd object out in favour of jsui, but let’s not get carried away.

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!

As a little experiment, I thought I would try and implement sketch 0 in Max. I eventually got it working, but I also made a mess of things in the process. A wire cleanup is certainly in order, but Max also allows another type of organizational structure: the subpatcher. With a subpatcher, you can divvy your patch up into reusable blocks, each with its own I/O. Here’s a screenshot of the cleaned up patch using a few subpatchers:

In programming, it’s never a good idea to hard code anything, but to reduce wire crossings I put in a few constants for circle radius, center, etc. I also noticed in Max Tutorial 11 that there is a cartopol (cartesian to polar) and poltocar object! Doh! Oh well, I’m still learning the basics and it was a good exercise to build things from “scratch”.

This patch took approximately 10x longer to build than sketch 0. Naturally, in comparison, patch building feels clunky and slow – it feels more like an expensive toy than a productive tool. Of course, I’m not blaming Max yet, but rather my beginner status and inexperience with the Max methodology.  I’m not familiar with all the objects in the Max toolbox or best practice in their usage.

Here’s the source:

----------begin_max5_patcher----------
3265.3oc6c08jiZbD+489qfRNOYu2l4af35dHUdOUdLob45JVI18HFApjXOu
Wb4+2CL8fVXEHMyvmRG9JuRCRH59G8WS28L7Ge3tUOl9Z3gUN+Mmew4t69iO
b2cxCUbf6Tiua01fWWGGbP90VkD96oO9eWcO7QYgulIOrfUdnjW1l9RVbXl7
6iUGcWP15uDk77m2GtNCtdbA6Az8NDtewKTxC77AnGPN+p5bfelrusKDNgUQ
I4mZ4m9TZR1gn+m7yvj7eB3vQajzSNM9QQERJJojhHUN+jfsxye0eeeTP7ph
O3O+vGJ9y8iOb3IgCJRLPvAe5fCFxb3fHwAFwaffC+oCNhSC17XPxyFCJDW2
Bz.ikuHPR8myBJxKiAnhainBdLPknmb9KQXmO8IGrS1WBSbpBQwQIgqSeIIq
5MIswMAEfMokFAWJQwNGrYBjQPSGlwMVDBywCqdElbEpXIPRIDp6foXgwSmT
h81antCLrP8tBgE1fKsPGC6vaCObH34vSvETdLYbGjsRKJSKfcFrWeYlkNgg
ysyYy9fe+ekFGr+eDsecbn0lc4xnZvH9kkYLxGTypQr1AmpjZ3dEjnvj7SHJ
N7qg6ODklTgwta0aLjGRJ1igvzDL4HlWENJGqeNNc8uEJIST4A2D9jY+Jo6B
Sd6LjeiZ+o92LJY29vCgIYAYJhu5UN3k3rO2LbV+yeJXcXqmbiP4cqddezlz
jBhn1YVb3xKWgffjg4Uoa42HIXWCmbVZZ7iA6+ZzgnGiCqcuHWRNHIZaPVXV
DPODzwyKZ6t8QPzRGO11vrfMAYA.gT41T04.VQJnl1RsieNsl5ZN+T0i1n1R
6ZLRyHXU3ZmDnxkCV4L5Nm3cFIdGgdhElyYk4tRKMvatu+wwOZMN5gGSXjeq
BiLx3Ai9dyaTrCJ0DzHBityaX7kjcAq+MGTw+ZGQomGQIXHKZH4bac8eebEs
in2W6Eaz1a2lIdzvW40zZ4QE5I.XiW92yCd0wpFxv1o3QUDbc51sgfq472Gm
tuOgCfXaGOP53rfQYmAOpvvLsD.pxv6BxE1R+ZPrS4rOlMxBp.NLSV3o7IQl
0p.A0bAh72Dt++LiPEvhsYnxIFTpNUEKwj+87ASfIw0ePB1XHYevlnWNLR9o
dyKU4+5XvnTH+IXnTGW1akMNmHsKm4NGb9mOK0745sw4nAwthop7sLnXJtGc
3+17OKxseKy+TxtEedyf8gzW1utjiTFWbpy3aBOjEkbLY.+RkIp7tu4Wh1ro
9ruk2Oi1rKM+VzgRyg9EwrhYRX1GcbfyupkbioLDUSFpXJCVwOBWfEvpb1UN
Xf3ml.9l4HBwNNZfH7BYesna1rhrKhQ2gnKbKLmtIdT4j37fr035dbzPxQXc
4HtEbDWwQPl5fZGJGMjbj1pDLK3Hhhi.WDLuiiFHNRWc7F37IUGWW2GMXLXJ
o6FL9eFAHr4zM3WPMY4xhWfYCl7SQlazmgHV6Fm.kppnw.JGMX98LRImZsmb
BChsVME9hQSbnIMw5SpVttgT4Nu7jaDbagRtfKC9CAsXjxWQwnIlgj2Grmev
PFmUpEXzjyOPHvcfgTVggWFPqvXSl6g07iu3slxxusIRoNXNWAks9PvWC274
7Kd9rf+bPV19nGeIClDY0xXqQQauTQgarXvs8keNN8wfXUM0OdAWoUAlaaVy
.JLBsXm18x.sVWHpRPX+0KCX9z0RPcuQOn.pLXM5g6RidrznGKM5wRidrznG
KM5wRidrznGKM5w0PidrziGK83wsUOdbdTYoKOV5xikt7XoKOFjt7XFkXxkz
FujW+qsBubkV.rq05MdCV52au5yey0BEWq8xxUZqCc60CW2n8Y2MUuPds1Tp
WqMA7sV2XOyZW9kt7ne1.OjaeGVrAdn1WSFnMvCxDtAdvstONFr8IIBdDfi1
2hWrQ9PTS9f51uxGX+qpMntx8hMNefDPnrodCuwxVfhy3UZAJ.l5uNfhhmnN
fhR48PGPc1ekkNf5JtCn5kp7i88g42wWpxuEExDPOHxkuuqxu.19Tw9eWVke
WyECNWoauEpwOl1uXxMPE9Acj9CR99oB+.xUlnqkJ72GU3GvTJUbcUg+YUy6
pjKUgZOrccJAc617tjwCFONs+9.FGlMUjks9glK2g.JBkKT1YA43nq1RRQUb
DprHaH0nq1xFh.NBLLhoziiVpeasaD9CbGMLKna57YQ3itR2FfPCbehrzNHV
07cx6KV.2tPu2Ay9yCx8FgO88RnemXG0JyFRhnbzDW.4FTazr9wxfJvtROwJ
ty0a52SS7ss.+BfE.IMJ93nkBhOba6A6b1IWQ+oo62bn4xYQOSg9TKkQ34yU
QHTWrdVvZi49JuwnJC2XAtnCWAtbUF9fk9psE3RmekkBbcEWfKfJrsfD9dPQ
gIkO8sZHmBWQEp5L3j8oUUk0ObaOC.62DufmA4upiU4hB6mHTepdk4BiLtNW
TAxY82VGG5jezc4e6YTgtJYeTeUACWyqfQtA5rYz57FJ8W+gHrYPMc5nRB1G
YjRB0XcjuAAXkqgjGg0LhyYtFw3DiY7WGJFuaZAJ9lXhRPsGQccuxlE+bNOk
t2II2sX+iOkWpl7+9MqkWJ2iMfGIwkUAwpfTXnYPPJmCkd0ZTR0UR8.HQ8l2
QxIehyFt2AmOW+OlGHP6PFSGERLUBYPjvZ2UWk+u0g40deLwmCf7OlOwO6iX
FZAAJ1nRU1vdWgdfoGcdWy2NgkJuFiDTJPyenDgcY7NhmDrr+hDD8T5sFO4y
A77bNbJhKNH4fymbxCMHe5T+nytn+J1CYebsJu0..ioht3t1ed6I5PTRWsQV
5vVLvBhDwb2o9gtpRqPR+gFI4y9chErt06milWKybsqiK+Jktsr+J3BXqj.J
1gu6wQCUED0sCX7nyqFAPWAew7RvmYBYisoov.AHeXAr.4gye3pnNyDwmtvO
9Uh0PNZfXHg1Z3yJ4JOcKc97RMFbfg0ZMvaGg6Qdvil+ehhRH6VtD.4pQCDa
o69yC1xt8QwB9pMeqiCFr6RZyO7YUatYFc2WpEKsMR+rJ4WGGFr23k+b4JBG
Vnu88pjm6Mgaa.adY6NiwCUF5fYKw54MUB9DtoRbxx8UeLA7C.HiPzuKPdN0
z9Gp+fj0owwMCFrK.FLPcg6e48QgpIE2HfgX5CVlJ1OUW6e3eVbUA1zY0O+1
kWSargaeT0CU8dWtErStPz5f.IG1a4gsXr9SfjwlvGnOpkm2gvrcQuFFaGvv
bkYu02umAF5zALlKhPgl1Z.2vSHSmsbK1LbfXeAIig.MPSGZ7SE6SvVrkIch
i9dEQvSnu9xJAWXc8sBAanONhqDT7Y5AMsT6WcjcZDn3iinif8fsalRDLDqn
mtsXsAXhGYJ0mrBTTOY8FPPwcL1ioxRe9YK1FoDdprKTx2FYNopcilel4g6u
6uaCy1m5X9lLm.Rfha08ghyxh0ZRKchvXBmrncydVAIkoJqmm8LkNB.R75M1
4ef6BOjhTK3DxYY63nCRWDkuV5wnQMfKp.HOq5UFDX02mwKECeZZqql+p1R8
KtZtVOMAWMmbqSPecIIlFjTcx9hTjKRsdzfMSGW5wQcjVqmgy11VYMiXEXIw
xfG4CbHksxQcjX8HZPrEOoReagReYpk3IKzBEZTFZtw+hzlyXpC0QRt1pwss
RDQLCeGCTrHYN1fhJSHLUubUaDDqkPJ6JGLJhCdcQbffckhCDu9Sb3RTrKaT
EGb0wbE0LRhndLJ.KJBr33ftBeHcnUznheXWcjBMjlD9RSnP+93d78cjToZP
oXC8LA2bovRRjgNNnqnpPWiTimecpV3mUN14U0T38flB0SGZ0PGODlj9XkOi
UQGG0061ZaIeD0q0IxHr+7yVS8R5pssFHuhTv8mnGhrjqisZCk.UjmZe8mxn
uai82d8Esj.MKThw3l83Fq.Aqa.3iGMQw8uUYNmAFhoUsJ2ccBha+SqEqE2B
xi4UgVYdcmVE5dulNdpD95Nae5rZ19T53plVyNUKwNYn2Tks1xozIXGG0Qhk
qSjJbhoQkJoOFV7lRgbvHDAM2tHnQR8WnwmkC5JtJF.bEHOFr3KUvJo6SKlq
i2W13pDQ0cBHiGIwoCvsztZ9i0+tz5JIoCLwF2HmnHMyxx343hJzcRWiGMQ7
5eoI07T4rpAyw5dvbTsR7iXbEyzA+niLMoENY3MUlpFCkKZXwwQckZYZNQP7
7ZhflFOW4r98pDNmn6QcnK5YQsuf.jToVF2CQHoUluItlcuVQeTn3WTN+ArP
H3B0g5JIqi5835YCqsaDCPQUhjUYE0yWBhtD0g5HEq8jHQypIQx6RIiEH0yF
1piHPOOv8gcma+t6SjqKzZaZzxG7me3+CaXG+hB
-----------end_max5_patcher-----------

Sketch 0 echos the code found in this nice tutorial, which (for me) was a great first experience with Processing.

Here’s the OS X app and here’s the patch:

----------begin_max5_patcher----------
893.3oc0YssaaBDD8Y7WwJZeqtorWA2p7P+A5OPUUD1rwgTtXAKsoIJ+6kc.
eI1Xf0jfikkAMKqWNygYNyr3mlXYOO8AYtM5qnehrrdZhkELjd.qZaK6X+GV
D4mCSyNQ92z42aOs5RJ4CJX3vaQeLDit9ZDFotSlfVDI8yVOsnvD4hzhDXtj
5AW4qVbWXxxaxjKTUP.KXW4LEQnX8IgPejVND5W0+ljh3vjHoBvBtdvv..Bk
v5ytt1amYZgZ+oVMj5eqjU2Pa6MK8soIpD+X3B1eOKzOxdmqjG9HbEL4JG8n
OOYh9vzgwZeBgsagMbv6vFTxU7RCmiwFjFXCggrQn9Iz4jPJxRPrYcyIXWt9
DCNZFmvZlSHswISQ1y8SVdd4lGiP4oYpVHmprGFwENQMmanFxMZhYrHkh34x
rNc95jEhW6NeSRGjK3.ikYoEqPhNoG5LPSUXdrAm89M1HVlm6uTd.w7hZPMv
ITGMM3BoKT3H1yDJw4hpXyAknCJhWgjQ4xVJVSON6QXjCJVy7LHiiItn3uUY
kY7HwWZs9TsDLGzeDXiUgX7l4DmyYdTtTgbZwoINzAkHwnWTABPxgLC4T9oM
IWrvqpWEHlvqifAdC7BtYdg0QIo0eO6sysxewu0zT2ks8fN43BiqKQtzhchh
5tJckXJeV6c72f7AwwvHlcCWNElod3b++rdE+vOzqUkehr+11EUOmfaJQYo2
diuRkENuPUs4SqMjnksrrOOvg.Vuh1Mk7KWXUZRO1FAgsNfyPhFOyvvt51DO
AmQktbYjrGNC+T8E2SZahudIEwRUVJxi1sOVUhg6YrLAlcZOuFhTA7qg1o16
Mr.9md7WRU4oEYKVe+Wq+iHa.QfLWEl3qBKCs2NI8q7.skHtKLHPlraKCwgA
qRKejUChi7fquXZua2QvDyLLgcofTmnp2AVUV4Ksb.KO2CLvtUg+XG8Z.VCz
G0M1+p6iCDSZAm2aXZua2QvjXbwjnGXR2zP4tfFKLw5ElbFUdpWZKLw3ioNi
mHlps3BZKXnmpZgFswPSH6Sv+ddT2fsVDCW+VNc2XMTz1GYa89vFSIs9fIL6
8Gl3iapZuhz1q9vatLKsOwS7QES7dUNZbiw2SspkxQiGlH8o8F93l2wnuApo
DL7elgK2H8NpoZqwnAQSKnSgs6S4js0o.ig9zl9V27QowyS9OLQYdeI
-----------end_max5_patcher-----------

And here are some winning numbers

And here’s the patch:

----------begin_max5_patcher----------
722.3ocyXssiaBCD8YxWAhWa1HrwPf9V+KZU0pJB3l3VvFAl1zc09uWaykPS
.BPR8FEIPdLd3bNiGOC40UFV6XGwEVlez7qlFFutxvPYRZvndrgUZ3wnjvB0
iYkhKJB2isVWMGGejqrGkfCyarRKSYk7DLWsFPs0rPdzABc+2xwQ7p2oiu8F
60lPO0Mmsxq.+M1lOWulJ2v+SFtZAVVsS8cFkWPdQMA.JVYkYRrBOrc+3IGm
N.hPavCriCngoJGX8obRXhkbh2VsRdY8DEjhDRLtk4Y4LNSB2VGefkSdQ7lD
degpCxQIKnJoxdZpifuJua2mv.b6UXZfRqpZKV8BjjHVZJlxuXORdXLorneY
vdDYvw6jLf7tPEt9FAXvn789rQXWImynyNHC78kLx2ogWWKFuKjt+TbtKKQ8
yxEvEJ92BOdQ.LKL5ml1U+VJQgPYHxbq2b1MOgPLrWxitqg3gjkbrHgO1LKj
P4resfL8Fso5bPf88Vb.ZX++.hySKUL.9.UQA3F2qoEBYeVxgsFpKLfb7gYK
GPD5+qb.BzgbTltCOPCBvwHuqh7PkF3NgiGkje84mRxEvltOA2sRyDDFuQSa
DlHokoRSdnGAwpIw48QrPuSh0PcaDILhy+xra2.FDzUEQKneCfNNucbd+4Yy
afC7V4sNZyJIJtepgtZhgCnNx52da3TiDRgJ2n4dcpRucdAtZiWpUI7E87u1
RgVo8+kxErx7nFnzjdYdBtw3BNgFxILZmGRVXqyCcfDGiocC6oj3LlfI0fv7
4dC.SFSdS.SxpK5DStS.SxOLTiX5rW2.5z7fjiefrQ.mpVEAAaaGoCADhVDZ
251ArxA5.qpMffYiUfmaUK4U+oDdZBspT3EfVWELg.UShpQ2JZClBZEe0kIT
eI2SFSNZCSmcl6HXx9ADS.8gooT.6rJJOFXBoWLAt+EKtUHAmx1oaAShAus5
unBufPC
-----------end_max5_patcher-----------

And couldn’t get the button to trigger. That’s because it requires a bang:

Add a bang message and it works:

However, it keeps on working in Edit mode and refuses to stop. Checked the docs; the nopoll message reverts mousestate to its initial state.

Added a nopoll message but no luck. The only way I could get mousestate to stop working was to delete the mousestate object and re-add it. Perhaps, nopoll is paired to a poll message? When bang is replaced with poll, it works as expected.

Next time, I’ll look for message pairs first.

The right inlet specifies the range, in this example random numbers will be generated from 0-9.

You can also feed it a seed value, in which case you’ll be able to reproduce the “random” output.

With a seed of 42, you’ll get the following output: 1, 2, 9, 1, 2, 4, …

Now, the counter object. Have a look at the help file for this object:

It may look a little complex but play around with it, read the comments, and before long, it’s understandable. The function of the counter object is simple, but the I/O makes its usage flexible.

One thing I noticed, these message objects have no connectors!

Hmm…what happens if I drop into Edit mode:

The connectors are definitely there, messing up the joint. That’s a handy cleanup feature, now how do I turn it on in my patches? After a little hunting, I discovered that, once you select a connector, you can go to the Object menu and “Hide on Lock”.

And the seed connector is now hidden:

Here’s another discovery, if you’re on a reference page and you click the “Contents” button at the bottom, it displays this monster menu:

Which could prove useful for systematically going through the entire reference docs. However, you can’t open the above window from the home page, you have to be on a reference page, otherwise, it just displays:

That’s one way to get to the reference pages, but what about the .maxhelp files? How can I see a list of all the .maxhelp object files? You can find them in the following directories:

• Max5/Cycling ‘74/max-help
• Max5/Cycling ‘74/msp-help

Great. Maybe I’ll painstakingly read each and every one in alphabetical order after I finish the tutorials. Why on earth would you do such a thing? As G.I. Joe says, “Knowing is half the battle.” Eventually, after I begin building patches in earnest, knowing of an object’s existence is…half the battle!

Spent the rest of the day surfing the Cycling ‘74 forum (about 7 months worth of postings) and watching youtube vids on max/msp. I probably spent one to many hours browsing the forum but I did pick up a few tidbits of info. For example, the ability to cut ‘n paste a patch as text. Simply copy the patch text from the forum post and inside max select File->New From Clipboard. Yay!

As for youtube vids, I found these the most interesting:

• http://www.youtube.com/watch?v=vRjqZg5Vx2o&feature=related
• http://www.youtube.com/watch?v=grdSaHUkofE&feature=related
• http://www.youtube.com/watch?v=VUwvyNvihd8&feature=related
• http://www.youtube.com/watch?v=LR8YrFyIQzM&feature=related
• http://www.youtube.com/watch?v=dM1eYNGZYHY&feature=related
• http://www.youtube.com/watch?v=f1Vyyz93wwY&feature=related
• http://www.youtube.com/watch?v=80P8xAXpbuM&feature=related
• http://www.youtube.com/watch?v=z5sV9ESjSyE&feature=related

Well, it’s about time to digg into the tutorials after poking around haphazardly. I’ll be back when I finish them. Later!

I checked out every link on the interesting work page, but if you really want to get a sense of the max/msp community at large and what’s possible check out the C74 Perspectives channel on youtube.

I’ll definitely want to come back and read these articles and interviews, once I have a deeper understanding of max/msp itself. For now, I think I’ll check out some more videos before returning to the help docs. It’s a chance to discover what’s new in Max 5, although I don’t even know what’s old! Of course, I’m going to continue documenting my trivial discoveries because it’s fun and keeps me motivated.

patching and workflow

Right off the bat, keyboard shortcuts. “Type n and get an object box at the current cursor position, m for message box, and so on.”. Trying out the “and so on” part:

• b for button
• c for comment
• f for flonum
• i for number
• t for toggle button

There’s a Presentation mode to which you can add objects:

Here, I’ve added 3 objects to presentation mode:

The object’s size or location in Presentation mode doesn’t have to correspond to its size or position in Edit mode:

debugging

I’m interested to see what kind of debugging capabilities max/msp has. I don’t imagine we’ll be stepping thru lines of code, but something more robust than console output would be great.

First, simple error messaging. Trying to send a “foo” string to a number input results in an error – which is correct. And our initial suspicion of the Max window being a console output is verified.

Wow. Max/msp supports watches and breakpoints, what a nice surprise. Now, let’s see if we can get a demo of watchpoints up and running. The first thing, would be to bring up the watchpoints window…

But what to do isn’t clear to me yet. Time to drop into the help docs and do a search for “watchpoints”, which turns up this promising looking result:

So, a watchpoint monitors messages being passed thru patch cords. In that case, lets attach a slider to a number and then a watch var between them.

The newly added watchpoint:

While running the patch, you can see the value traced to the window:

I’ll cover signal probes, and breakpoints later on. I’m not ready to utilize all the debugging facilities just yet, but knowing of their existence is half the battle.

integrated documentation

Ah…integrated docs, probably the number 1 reason I chose to pickup max 5. It looks as if the integrated help system has even more functionality, starting with the Clue window.

You know, before we get into the Clue window, one of the things I hate about Mac is the mess of floating windows.

Flash CS3 has a great panel docking/flyout mechanism. I wish max/msp had something similar. Imagine it, a toolbar of objects on the left side, with zoom and pan (hand icon) tools. A maximized patcher surface, where multiple patch windows appear in tabs across the top. On the right and bottom sides, docked panels for the max window, clue window, etc.

And while I’m thinking about UI, I’ve got to say, the single worse UI design choice in max is the placement of the forward/back buttons for the help docs. Every single browser has these buttons located at the top left – it’s called spatial memory people! I always find myself instinctively moving the mouse up and to the left, before I remember, damn…it’s at the friggin bottom. </rant>

Back to the Clue window. Hovering your mouse over the item in question reveals only a title.

Only when drop into edit the object text, does a description appear.

I’m not sure if this was intended or is a bug. Either way, the Clue window doesn’t appear to be useful, we’ll see.

Clicking on the left inlet of an object reveals a reference menu. Below, I’ve clicked on the left inlet of a Number object:

The listing of attributes, messages, and actions is quite nice. Clicking on the top-most attribute bgcolor inserts a message object and connects it to the number’s inlet.

I replace the args with a red color and test it out.

The quick ref panel might be handy.

The last thing to note is given a selected object, it will then appear in the Help menu.

Until next time!

Last time, I had this <sarcasm>awesome</sarcasm> patch:

Now, what I’d like to do is change the range of the slider from its default 0-127. Option click the slider and the .maxhelp has an example.

Now I’m wondering what type of object the “size $1″ button is. So, lets quickly drop into Edit mode and Option click it and quickly jump back out, so as not to disturb things. If you do mess things up, not to worry, it’ll prompt you to save the changes to which you should obviously say no.

Ok, so “size $1″ button is actually a Message object. So, ’size’ is the message and $1 is a placeholder for an argument, received from the number box. I have a feeling the Message object is going to be quite common and very useful. If you open up the Slider reference doc and scroll down a bit, you can see that ’size’ is an attribute of the Slider object with a well written description. Size is a float to indicate the number of steps (range) and the default value is 128 or 0-127.

Even with such a trivial patch, I noticed a couple of UI usability issues. First, when I toggled the bang, the button didn’t flicker because the slider was set to 0. Second, if I want the range 0-500, I have to remember to set the Number box to 501. I wonder if it’s possible to add a +1 object…

Nice, you can have objects that do basic arithmetic. Another problem is preventing users from selecting a negative number. How do I do that? Wait a minute…the Number box in the Slider .maxhelp has a 30-90 range. How did they do that?If you drop into Edit mode and mouse over the left hand side of the object, a little “i” icon appears.

Clicking it opens the following window, where the ‘Value’ tab reveals what we’re looking for! Is it me or is this UI fairly intuitive?

I guess the “i” stands for Inspector. I also discovered you can open this window by using a keyboard shortcut (Command-I) or right clicking on the object.

My original goal was to change the slider range and the objects above the slider accomplish that goal in an indirect, clunky way. However, now that I’m aware of the Inspector, I can now simplify things by delete the objects and setting the range directly. I would like the range to go from 250 to 1000 ms.

The ‘Output Minimum’ is 250 and the ‘Range’ is 751. Remember, range indicates the number of steps inclusive. For example, a minimum of 0 with 4 steps would give you what range?

Finally, the patch I initially had in mind:

I wonder if I could hook this up to a MIDI slider on my controller? Woah.

First, I’ll need to install the latest M-audio drivers for my midi interface and then configure it using the ‘Audio MIDI Setup’ util that comes with OS X, which is kind of like a patcher window itself:

A good post about the ‘Audio MIDI Setup’ util can be found here. As you can see, I’ve added a device for my Radium 49 midi controller. This is optional, but allows  programs to display the controller as “Radium 49″ instead of “MIDISPORT 8×8/s Port 1″.

Back to max/msp. Now, I imagine the first thing I would need to do is configure MIDI.

And would you look at that…everything looks to be in order already!

And now, if I just start typing “midi” in a new object…

Intellisense is awesome.

Hmm…the sliders move during testing, but they’re acting a little crazy, why? It’s almost as if their range is very small within the 751 units available. Oh yeah, it’s MIDI…duh. 7 out of 8 bits are used for payload, and 2^7 = 128 or 0-127. If you don’t believe me, type 2^7 into Google. So, I need to revert the range settings to the sliders default values:

And voila! The patch works nicely.

That was ridiculously easy. Glancing at the midiin object help docs, I can see there’s a lot more to learn and I’ll certainly revisit it. For now, I’m still in the exploration stage – it’s about pushing buttons and trying things out, without fear, to see what happens.

Until next time!