How to replicate this Processing example with OF?


#1

Hi, I’m trying to replicate this Processing example.
https://processing.org/examples/pattern.html

And here’s the code I wrote in OF.

//--------------------------------------------------------------
void ofApp::setup(){
    
    ofSetBackgroundColor(102);
    ofSetCircleResolution(50);
    ofSetLineWidth(2);
    
    fbo.allocate(ofGetWidth(), ofGetHeight(), GL_RGB);
    fbo.begin();
    ofClear(102,102,102);
    fbo.end();
}

//--------------------------------------------------------------
void ofApp::update(){

    fbo.begin();
    variableEllipse(mouseX, mouseY, pmouseX, pmouseY);
    fbo.end();
}

//--------------------------------------------------------------
void ofApp::draw(){
    
    fbo.draw(0, 0);
}

void ofApp::variableEllipse(int x, int y, int px, int py) {
    
    float speed = abs(x-px) + abs(y-py);
    
    ofSetColor(0);
    ofNoFill();
    ofDrawEllipse(x, y, speed, speed);
    ofSetColor(255);
    ofFill();
    ofDrawEllipse(x, y, speed, speed);
    pmouseX = mouseX;
    pmouseY = mouseY;
}

But currently, there are 2 problems with my code.

  1. A huge circle is drawn in the beginning when I start to move the mouse on OF window.
  2. The stroke is not as soft/clean as Processing’s.

I would appreciate if any advice to fix the issues and also would like to hear if there’s any better/simpler way to replicate the Processing example.


#2
  1. You don’t seem to be initializing pmouseX and pmouseY, which means the first time it will have a random value.

You need to add this in setup:

pmouseX = 0;
pmouseY = 0;

(I’m not sure about 0, it might be mouseX and mouseY…)

  1. This I’m not so sure, but I think you need to increase the value of ofSetCircleResolution for the stroke to become neater.

#3

Hi, Thanks, I tried your suggestion but it still draws a big circle in the beginning. And the circle resolution is already set to 50 which I think is enough amount.


#4

I think you should put a higher value. See http://openframeworks.cc/documentation/graphics/ofGraphics/#show_ofSetCircleResolution. And checkout the guiExample in examples/gui, to try out some values for ofSetCircleResolution.

Could you add your ofApp.h as well?

My idea was that since the circle was big it meant that mouse and pmouse value were sufficiently apart to create a big circle.

Maybe print out the values of mouse and pmouse to see what values they get at the beginning?


#5

Thanks, here’s my ofApp.h

void variableEllipse(int x, int y, int px, int py);
ofFbo fbo;
int pmouseX, pmouseY;
bool bFirstMouseMoved;

I fixed the first problem with the following code.

//--------------------------------------------------------------
void ofApp::setup(){
    
    ofSetBackgroundColor(102);
    ofSetCircleResolution(50);
    ofSetLineWidth(2);
    
    fbo.allocate(ofGetWidth(), ofGetHeight(), GL_RGB);
    fbo.begin();
    ofClear(102,102,102);
    fbo.end();
    
    bFirstMouseMoved = false;
}

//--------------------------------------------------------------
void ofApp::update(){
    
    fbo.begin();
    
    if (!bFirstMouseMoved) {
        
        if (mouseX != 0 && mouseY != 0) {
            
            pmouseX = mouseX;
            pmouseY = mouseY;
            bFirstMouseMoved = true;
        }
    }
    variableEllipse(mouseX, mouseY, pmouseX, pmouseY);
    fbo.end();
}

//--------------------------------------------------------------
void ofApp::draw(){
    
    fbo.draw(0, 0);
}

void ofApp::variableEllipse(int x, int y, int px, int py) {
    
    float speed = abs(x-px) + abs(y-py);
    
    ofSetColor(0);
    ofNoFill();
    ofDrawEllipse(x, y, speed, speed);
    ofSetColor(255);
    ofFill();
    ofDrawEllipse(x, y, speed, speed);
    pmouseX = mouseX;
    pmouseY = mouseY;
}

And almost fixed the second problem by enabling the “High Resolution Capable” on plist file.

I think I have to draw 2 filled circles to make the stroke look really clean.

Thanks a lot for your help!


#6

Glad it works!

Your bFirstMouseMoved could be moved to the setup so it is run only once (and not every loop which is unnecessary).
You would just need this part I think:

    if (mouseX != 0 && mouseY != 0) {
        
        pmouseX = mouseX;
        pmouseY = mouseY;
        bFirstMouseMoved = true;
    }

I still think your should increase the value of ofSetCircleResolution, but the important thing is that it works and that you are satisfied with the result^^


#7

That should be in update() to prevent the first huge circle.
If you run the code, you will see why.
I tried increasing the circle resolution to 100 but I could hardly notice any difference. I think for such small sized circles, 50 is already big enough.