Miguel V. Espada New Media Specialist, Professor and Consultant miguel.valero.espada@gmail.com

Processing to Modul8 via Syphon [Tutorial]

The first stop you need to do is to allow Modul8 to run a Quartz Composer Syphon Client. The last version of Modul8 (2.6.4 supports native syphon server but not clients). In other words, you can send frames to another applications like Mad Mapper, but you cannot receive frames from Max, OF or Processing.

The unofficial way of getting Syphon Clients into Modul8 is explained in the next video. You can skip the video and follow the steps below.

First, you need to install:

(1) QCRehab.plugin in /Library/Graphics/Quartz Composer Patches/

I got it from here: http://kineme.net/release/OfficialAPISubpatchSupport/03

I have put it here:

(2) You have to install the Syphon.plugin in /Library/Graphics/Quartz Composer Plug-Ins

I have downloaded this version: “Syphon For Quartz Composer Public Beta 2.dmg”, from here: http://code.google.com/p/syphon-implementations/downloads/list

and installed it here:

(3) Finally you start Modul8 and put the “Syphon Client QC.qtz” in your  Media set. You find the Syphon Client in the examples folder in the “Syphon For Quartz Composer.dmg”. Then you just run it on a layer.

To test if everything went fine, you can run the quartz composer server “Syphon Server QC.qtz” that you just have downloaded together with the client.

I’ve got this running like this image:

When this is done you can close Quartz Composer Syphon Server and go to the Processing part.

I’m using version Processing 1.5.1. Things will change for Processing 2.x because of the integration with OPENGL2, but so far this is working for me.

I’ve got all the information from this post: http://forum.processing.org/topic/syphon-integration-with-processing#25080000000858073

First, you have to install the Syphon library in your Processing Libraries folder. I’ve got it from here:http://interfaze.info/files/syphon/Syphon-0.0.1.zip

To install the library in Processing you  Ctrl-Click on the application icon and then navigate to the library folder, and copy all the zip content.

Then you start Processing and create a new sketch. I’ve done a simple code that you can just copy and paste in your file:

import javax.media.opengl.*;
import processing.opengl.*;
import jsyphon.*; // Syphon

JSyphonServer mySyphon;
PGraphicsOpenGL pgl;
GL gl;
int[] texID;

void setup() {
  size(640, 480, OPENGL);
  pgl = (PGraphicsOpenGL) g;
  gl = pgl.gl;
  initSyphon(gl,"processing");

  strokeWeight(0.5);
  stroke(255, 50);
  background(0);

}

void draw() {
  line(width/2, height/2, random(0, width), random(0, height));
  renderTexture(pgl.gl);
}

void initSyphon(GL gl, String theName) {
    if(mySyphon!=null) {
      mySyphon.stop();
    }
    mySyphon = new JSyphonServer();
    mySyphon.test();
    mySyphon.initWithName(theName);

    // copy to texture, to send to Syphon.
    texID = new int[1];
    gl.glGenTextures(1, texID, 0);
    gl.glBindTexture(gl.GL_TEXTURE_RECTANGLE_EXT, texID[0]);
    gl.glTexImage2D(gl.GL_TEXTURE_RECTANGLE_EXT, 0, gl.GL_RGBA8, width, height, 0, gl.GL_RGBA, gl.GL_UNSIGNED_BYTE, null);
} 

void renderTexture(GL gl) {
  gl.glBindTexture(gl.GL_TEXTURE_RECTANGLE_EXT, texID[0]);
  gl.glCopyTexSubImage2D(gl.GL_TEXTURE_RECTANGLE_EXT, 0, 0, 0, 0, 0, width, height);
  mySyphon.publishFrameTexture(texID[0], gl.GL_TEXTURE_RECTANGLE_EXT, 0, 0, width, height, width, height, false);
}

public void stop() {
  dispose();
}

void dispose() {
  println("\n\nabout to stop sketch ...");
  println("deleting textures");
  gl.glDeleteTextures(1, texID, 0);
  if(mySyphon!=null) {
    println("stopping the syphon server");
    mySyphon.stop();
  }
  println("sketch stopped, done.");
}

Now, if you run the application together with Modul8 you should get something like that :

Of course you can skip the Modul8 part and use Processing directly with MadMapper, like this example in which I used a slightly more complex particle system than the previous example.

For the example I’ve use controlP5 library to control some variables of the system. The library is available here:  http://www.sojamo.de/libraries/controlP5/

Here’s the integration with the MSAFluid library from Memo.tv. You can download the code (which is basically merging the example with the syphon template). Thanks Memo for the library! Download the file here: MSAFluid to Syphon (864)

And here, you see it working:

Help doing more tutorials!

 

15 Responses to Processing to Modul8 via Syphon [Tutorial]

  1. Orion says:

    Mr. Espada, thanks a ton for this! I just spent the last couple hours on the Processing forum reading Vade and Andres go back and forth and your tutorial was the missing lynch pin….sort of.

    I’m wondering what the basic minimum code processing needs to make a sketch syphon ‘enabled’? Basically i’m trying to do the same thing you have done here but with meme’s MSAfluid demos (http://msavisuals.com/msafluid).

    I’d like to just stick in the syphon code and run that through modul8. Is this possible? Any help would be much appreciated. Saludos desde Tejas!

  2. Orion says:

    Awesome!!! Thank you so much Mr. Espada! You rock!

  3. Pingback: Miguel V. Espada » Archive » Simple Mapping with Processing [Tutorial]

  4. Pingback: Processing to Modul8 via Syphon | interactive design

  5. Racko says:

    Hi! I think it’s amazing the work you have been doing, I have been making visuals with modul8 a while ago and I’m just entering the fantastic world of processing. So i was wondering if you could help me understand a little bit more about by letting me know what is the lines i have to add to another library?

  6. admin says:

    Hi Racko;
    I don’t really understand what you ask me… :(
    Have you tried the example (c&p from above)??? Is it working?
    If so, you can just use the example as a template. So, you copy everything in a new sketch and then you replace the following lines with your stuff:
    - [SETUP]
    strokeWeight(0.5);
    stroke(255, 50);
    background(0);

    - [DRAW]
    line(width/2, height/2, random(0, width), random(0, height));

    Leave the rest unchanged… an do not reorder instructions!

    Hope it helps

  7. Cornelius says:

    I thought this was a cool idea and built upon it, adding TUIO support so the Kinect can be added to the pipeline: demo here: http://www.youtube.com/watch?v=LLBzoFoqNy8&feature=youtu.be

  8. admin says:

    Cool… Thanks for sharing.

  9. Nathan says:

    Hi, thanks for the tutorials.

    I’m very new to this and i’ve run into a problem…any help is appreciated.

    I’ve installed QCRehab and the Syphon plugin, but i’m having trouble with the next bit of the tutorial…

    Downloaded the Syphon library from:

    http://interfaze.info/files/syphon/Syphon-0.0.1.zip

    and installed it in the Processing libraries folder but when i copy and paste the code you gave into Processing i get the error message:

    UnsatisfiedLinkError: no JSyphon in Java.library.path

    Any ideas?
    Many thanks

  10. Nathan says:

    Hi,

    Once again great tutorials!

    Still trying to get my head around this, I got another question:

    when i copy and paste the code above into Processing and run the sketch i get the message:

    The function test() does not exist

    What does this mean? How do I fix it?

    Thanks
    Nathan

  11. Pingback: MSAFluid, Cinder and Datamoshing | Dj Orión

  12. Tomás says:

    Hola Miguel, tengo un problema con processing y syphon. He instalado la librería de syphon correctamente pero cuando intento ejecutar un ejemplo me dice que me falta OpenGL2 y esa no encuentro donde descargarla, en el ejemplo de tu tutorial he visto que no usas OpenGL2 pero tampoco me funciona, me dice: “gl.GL_TEXTURE_RECTANGLE_EXT cannot be resolved or is not a field”.

    Estoy usando Processing 2.0a4

    • admin says:

      Hola Tomás, en la versión 2.0a4 Syphon funciona diferente porque ha cambiado el render de OPENGL. El tutorial funciona para 1.5.
      En la nueva versión de P5 es más fácil instalar syphon, ya que han creado una librería especial. Investiga en la página de syphon a ver si encuentras como.
      Más adelante haré otro tutorial para P5 2.x.

  13. ramiro says:

    Sr Espada… saludos… tengo una consulta cual seria el codigo base necesario para enviar cualquier creacion de processing via syphon.. si pudiera facilitarme esa informacion seria de mucha ayuda.. desde ya muchas gracias.. y felicitaciones por su trabajo.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>