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!


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(){

    // draw the shape here

    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:


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


void ofApp::setup(){
    vidWidth = vidPlayer.getWidth();
    vidHeight = vidPlayer.getHeight();
    fbo.allocate(vidWidth, vidHeight);
    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));


void ofApp::draw(){
        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);
    img.draw(0, 0);

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