Syphon into Pixelflow Capture Fluid

Question

I'm a noob working on a Processing sketch that takes a webcam feed as input and applies optical flow and particle effects. The sketch is called OpticalFlow_CaptureFluid. It's from Thomas Diewald's PixelFlow library.

Basically, I want to modify the CaptureFluid sketch so that it takes a Syphon feed instead of a webcam feed.

I've looked at the Optical Flow sketch and the ReceiveFrames sketch for Syphon. I sort of understand what the different parts of each sketch are doing, but because I'm not much of a coder I have very little idea of how to combine them so that the optical flow sketch is receiving frames from syphon.

Here's the ReceiveFrames sketch:

import codeanticode.syphon.*;

PGraphics canvas;
SyphonClient client;

void settings() {
  size(640, 480, P3D);
  PJOGL.profile = 1;
}

public void setup() {
  // Create syhpon client to receive frames 
  // from the first available running server: 
  client = new SyphonClient(this);

  background(0);
}

public void draw() {    
  if (client.newFrame()) {
    canvas = client.getGraphics(canvas);
    image(canvas, 0, 0, width, height);    
  }  
}

The Optical Flow sketch is huge, so I've only included what I think are the most relevant bits here. The entire sketch is linked above. (Would have posted down here as well but I'm a newbie and they won't let me post more than two links!)

OpticalFlow_CaptureFluid (excerpt)

import processing.opengl.PGraphics2D;
import processing.video.Capture;

        // webcam capture
        cam = new Capture(this, cam_w, cam_h, 30);
        cam.start();
        
        // render buffers
        pg_cam_a = (PGraphics2D) createGraphics(cam_w, cam_h, P2D);
        pg_cam_a.noSmooth();
        pg_cam_a.beginDraw();
        pg_cam_a.background(0);
        pg_cam_a.endDraw();
        
        pg_cam_b = (PGraphics2D) createGraphics(cam_w, cam_h, P2D);
        pg_cam_b.noSmooth();
        
        pg_fluid = (PGraphics2D) createGraphics(view_w, view_h, P2D);
        pg_fluid.smooth(4);
    
    
      public void draw() {
        
        if( cam.available() ){
          cam.read();
          
          // render to offscreenbuffer
          pg_cam_b.beginDraw();
          pg_cam_b.background(0);
          pg_cam_b.image(cam, 0, 0);
          pg_cam_b.endDraw();
          swapCamBuffer(); // "pg_cam_a" has the image now
          
          if(APPLY_BILATERAL){
            filter.bilateral.apply(pg_cam_a, pg_cam_b, 5, 0.10f, 4);
            swapCamBuffer();
          }
          
          // update Optical Flow
          opticalflow.update(pg_cam_a);

I know I need to add "import codeanticode.syphon.*;" to the CaptureFluid sketch, get rid of the webcam capture bits, and replace that with a new syphon client. And I guess all the pg_cam_a and pg_cam_b variables need to be renamed or somehow modified. Tbh I don't even really understand what they're doing.

Okay last thing: I found this post by this guy who is sending frames in and out of a sketch with Syphon. He says this only works in P3D mode, but this CaptureFluid sketch uses P2D. The ReceiveFrames sketch I posted above uses P3D (see size under void settings), but I changed it to P2D and it seemed to work just fine, so I'm not sure if that's actually an issue.

Thanks in advance!

score 0 · Answer 1 · answered Jun 19 '17 at 17:12

Your question is a little broad, but I can try to help in a general sense.

First off, the stuff you probably don't want to hear: you're going to have a hard time trying to hammer code you find on the internet into doing what you want if you don't really understand how it works. You say you aren't really a coder, and that's okay! There are a ton of tutorials out there (shameless self-promotion: here are some I wrote) that help you understand the code better. Your goal should be to understand each individual sketch before trying to use them.

Now, to "combine" two programs, what you actually want to do is start over with a blank sketch. That might seem paradoxical, but it's much easier to add stuff to a blank sketch than it is to take stuff out of an existing sketch.

Then it's a matter of breaking your problem down into smaller steps and taking on those steps one at a time. Start small (smaller than you think is interesting) and work your way forward in very small steps.

For example, you say you want to use a Syphon feed. Get that working perfectly before you move on. I think you actually already have code that does this, but make sure you really understand exactly how it works: for example, you need to understand how the canvas and client variables are working together.

Then you need to work your way forward in small steps. Don't try to copy and paste the entire optical flow program. Isolate the simplest functionality you can find- just a few lines of code at a time. Get that working with your syphon feed. Try drawing a simple shape based on the syphon feed, for example.

Then keep working your way forward in small steps like that. Keep asking yourself, what's the smallest next thing I know I need to do? Do that. Get it working perfectly before moving on to the next thing.

If you get stuck on a specific step, then you can post a MCVE along with a specific technical question, and we'll go from there. Good luck.

Syphon into Pixelflow Capture Fluid

Here's the ReceiveFrames sketch:

OpticalFlow_CaptureFluid (excerpt)

1 Answers1