Tutorial: Using Syphon with Processing to stream video into MadMapper

Syphon allows the user to directly send the output of a Processing Sketch into MadMapper, or equivalent program. It only exists for Mac. Here’s how to get it working. Full Source code is at the bottom.

1) Download Syphon for Processing through this link: SyphonProcessing-1.0-RC1.zip

2) Extract the folder from the zip, and look inside. You should see an INSTALL.txt and a folder simply called Syphon.

3) Drag the folder called Syphon into your libraries folder in your Processing folder, which is typically located at /Users/your_name/Documents/Processing/libraries

4) Restart processing if it was running, and then go to Sketch>Import Library>Syphon. If it isn’t there, you messed up one of the previous steps :(. This should add an import command at the top of your source code.

5) Add the following both inside and outside your setup function to prepare to send the images:

import codeanticode.syphon.*;
PGraphics canvas;
SyphonServer server;

void setup() {
size(400,400, P3D);
canvas = createGraphics(400, 400, P3D);

// Create syhpon server to send frames out.
server = new SyphonServer(this, "Processing Syphon");
}

Things to note, after importing the syphon library from step 4, we create a variable “canvas” of type PGraphics. We have to do our drawing through this PGraphics instead of the typical method, but it really doesn’t change a whole lot in the end. More on that later. We also create a variable “server” of type SyphonServer which is what ultimately serves the images to MadMapper. In the setup function we declare the size of the screen with size, but add a third argument “P3D”, necessary for syphon to run correctly. We also instantiate the canvas in a similar manner, with a matching resolution. We also construct the server here as well.

6) Now move on to the draw function. Before doing anything we must let Processing know we want to draw to the canvas rather than in the typical manner. To do this, we use canvas.begingDraw(). The normal drawing functions work from here now, but also must be prefixed with “canvas.” (for example canvas.line, canvas.ellipse). Follow that with canvas.endDraw(); to finish writing to the canvas. Example code below:

void draw() {
canvas.beginDraw();
canvas.background(100);
canvas.stroke(255);
canvas.line(50, 50, mouseX, mouseY);
canvas.endDraw();
}

7) You’ll notice at this point that pressing play doesn’t show anything. That’s because we’re drawing to the canvas rather than the sketch itself. To fix this, add the following after canvas.endDraw();.

image(canvas, 0, 0);

The sketch will now show the drawing that is being done to the canvas.

8) Finally we need to tell the server to serve the canvas to MadMapper. Add the following to the end of your draw function and you’ll be set to move on to projecting.

server.sendImage(canvas);

9) Open up MadMapper now and you should be able to load in footage directy from your code, updated in realtime.

I hope that was all clear, feel free to comment below if you have an questions or comments.

Full Processing source with tons of comments: http://pastebin.com/5jLHPca8