Setting an Image as Canvas's Background

beginners
#1

I came from processing and there we used to do

PImage bgd;

void setup(){
bgd = loadImage("picture.png");
image(bgd, 0,0);
};

void draw(){
ellipse(mouseX, mouseY, 10, 10);} //the image appears, and circles are drawing at canvas 
};

I’m trying do the same in openframeworks

void Canvas6::setup(){
    

    fundo.loadImage("of_data/omar/omar_bgd.png");
    fundo.draw(0, 0);
    
}
//--------------------------------------------------------------
void Canvas6::draw(){
    ofSetColor(255, 0, 0);
    ofCircle(ofGetMouseX(), ofGetMouseY(),10);
}

And the result is a black background, and everything is running fine with red circles.

Why I could’t draw over an image without the draw loop?

#2

This configuration worked to me. But does exist better solution for this?

class Canvas6 {
    
public:
    

    
    ofFbo fbo;
    ofFbo fbo2;
    ofImage fundo; //background
    Canvas6();
    void setup();
    void draw();

    
};

void Canvas6::setup(){
    

    ofSetBackgroundAuto(true);
    fundo.loadImage("of_data/background.png");
    
    
    fbo.allocate(ofGetWidth(), ofGetHeight(), GL_RGBA);
    fbo2.allocate(ofGetWidth(), ofGetHeight(), GL_RGBA);
    
    fbo2.begin();
        ofClear(255,255,255,0);
    fbo2.end();
    
    fbo.begin();
        ofClear(255,255,255,0);
    fbo.end();
    
}

//--------------------------------------------------------------

void Canvas6::draw(){
    fbo.begin();
        fundo.draw(0, 0,768,1024);
        ofPushStyle();
            ofSetColor(0);
            string message = "fps: "+ofToString(ofGetFrameRate());
            ofDrawBitmapString(message, 10, 20);
        ofPopStyle();
    
    fbo.end();
    
    
    fbo2.begin();
    
        ofPushStyle();
            ofFill();
            ofSetColor(255,255, 0);
            ofCircle(ofGetMouseX(), ofGetMouseY(),10);
        ofPopStyle();
    fbo2.end();
    
    fbo.draw(0,0);
    fbo2.draw(0, 0);
    
}
#3

Your fbo solution should be fine / fast. If you want to directly mimic the processing behavior, you should set ofSetBackgroundAuto(false) in setup.

1 Like