Curvy videograbber shape

Hi there,

good to be here. =)

I recently started playing around with openframeworks and i am facing a problem on an idea i work on.

I have a video playing and i would like draw it in a dynamic way so it’s not a rectangle but a more curvy/liquidy shape that will slowly change/move.

My initial idea was that i can draw the video as it is and then overlay it with a blob/mesh/whatever that will have a transparent fill but will be coloured on the outside to match the background.
I read also that it might be easy to make a curvy mesh and apply the video texture on it but i don’t know if the texture will be moving/stretching while the mesh will change it’s shape.
Maybe it’s possible to do it with shaders in an easy way like color displacement or something.

I don’t know.
I am lost.
Any lead?

Thank you!

Hi,

You can draw the shape into an ofFbo, than use it as a mask:

// .h //////////
ofFbo mask;

// .cpp ////////

mask.allocate( videoPlayer.getWidth(), videoPlayer.getHeight() );
videoPlayer.getTexture().setAlphaMask( mask.getTexture() );

void draw(){

    fbo.begin();
    ofClear(0,0,0,0);
    // draw the shape here
    fbo.end();

    videoPlayer.draw( 0, 0 );
}

To draw the mask you can use ofPath.
Another idea may be to use metaballs: draw some disks into the fbo, blur it, then threshold the result:

1 Like

Thank you very much for the guidance!!
Unfortunately we decided to leave the video as a rectangle cause we didn’t have much time to play around.
Nevertheless i tried your idea and drew some circles and moved em with some perlin noise and i got an idea of how it works.

When i have time i will look on how to blur the discs and try to threshold the result.

This result seems already interesting to me.

For later then:

  • There is a blur shader exemple in OF/examples/shader, or also some blur addons.
  • Take care if you search for the threshold: you may find that opencv allow to do it, but I think this is not appropriate in your case, you can use a very simple shader to do that.

(If you need more help you can post the code of this last try and I will add the blur+threshold shader part).

1 Like

Thanks for the reply.
I have finally time to play around with the idea again.
Here is the code i played around with so far:

ofApp.h

ofFbo fbo;
    ofImage img;
    ofVideoPlayer vidPlayer;
    ofPath path;
    int vidWidth;
    int vidHeight;
    
    // Gui
    ofxPanel gui;
    
    ofParameter<float> positionX;
    ofParameter<float> positionY;
    ofParameter<float> speed;

ofApp.cpp

void ofApp::setup(){
    ofBackground(0,0,0);
    img.load("noodle.jpg");
    
    vidPlayer.load("Master_Draft3.mp4");
    vidWidth = vidPlayer.getWidth();
    vidHeight = vidPlayer.getHeight();
    
    fbo.allocate(vidWidth, vidHeight);
    img.getTexture().setAlphaMask(fbo.getTexture());
    
    gui.setup();
    gui.add(positionX.set("X", 0.15 , 0, 2));
    gui.add(positionY.set("Y", 0.41 , 0, 2));
    gui.add(speed.set("Speed", 0.03 , 0, 1));
    ofSetCircleResolution(100);

}

void ofApp::draw(){
    fbo.begin();
        ofClear(0,0,0,0);
        float time = ofGetElapsedTimef();
        for (int i = 0; i<20; i++) {
            float width = img.getWidth();
            float height = img.getHeight();
            float posX = i*positionX;
            float posY = i*positionY;

            float x = width * ofNoise(time*speed + posX);
            float y = height * ofNoise(time*speed + posY);
            ofDrawCircle(x, y, 150);
        }
    fbo.end();
    img.draw(0, 0);
    gui.draw();

}
1 Like

Hi wasabis,
I proposed to add the shader part but sadly I have no time to play with you right now ! But continue to share if you’re stuck, or to show the result :slight_smile:

1 Like