Drawing a circle with lots of lines

one of the students yuki at SFPC was trying to draw a circle in different ways – here’s a way I suggested to him that looks pretty cool and is simple in terms of the algorithm. I thought I’d try it out just now, I’m sure there’s ways to optimize it –

  • pick 2 random side of a rectangle
  • pick a random point somewhere along each side
  • if the line doesn’t intersect with the circle, draw it

here’s a screenshot of the result

and some code

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

    ofSetBackgroundAuto(false);
    ofBackground(0,0,0);
}

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

}

bool ofApp::bIntersects(ofPoint a, ofPoint b, ofPolyline poly){
    
    int res = 100;
    ofPoint step = (b-a) / res;
    bool bInside = false;
    for (int i = 0; i < res; i++){
        ofPoint temp = a + i * step;
        if (poly.inside(temp)){
            bInside = true;
            return true;
        }
    }
    return false;
    
    
}

ofPoint ofApp::randomPtForSize(ofRectangle rect, int side){
    
    ofPoint aa = ofPoint(rect.x, rect.y);
    ofPoint bb = ofPoint(rect.x + rect.width, rect.y);
    ofPoint cc = ofPoint(rect.x + rect.width, rect.y + rect.height);
    ofPoint dd = ofPoint(rect.x, rect.y + rect.height);
    
    if (side == 0){
        return aa + ofRandom(0,1) * (bb-aa);
    } else if (side == 1){
        return bb + ofRandom(0,1) * (cc-bb);
    } else if (side == 2){
        return cc + ofRandom(0,1) * (dd-cc);
    } else {
        return dd + ofRandom(0,1) * (aa-dd);
    }
    return ofPoint(0,0);
    
    
}

//--------------------------------------------------------------
void ofApp::draw(){
    
    ofSetColor(255,255,255,10);
    ofPolyline temp;
    for (int i = 0; i < 40; i++){
        float x = ofGetWidth()/2 + 200 * cos(i/40.0 * TWO_PI);
        float y = ofGetHeight()/2 + 200 * sin(i/40.0 * TWO_PI);
        temp.addVertex(ofPoint(x,y));
    }
    
    ofRectangle rect(0,0,ofGetWidth(), ofGetHeight());
    
    for (int i = 0; i < 100; i++){
        int side = ofRandom(0,4);
        int sideb = ofRandom(0,4);
        if (side != sideb){
            ofPoint a =randomPtForSize(rect, side);
            ofPoint b =randomPtForSize(rect, sideb);
            if (!bIntersects(a,b, temp)){
                ofLine(a,b);
            }
        }
    }
}

(as a side note, this is a cool javascript based ray tracer: http://scanlime.org/2013/04/zen-photon-garden/ – I like the idea of making drawings from lots of lines)

7 Likes

trying to write a word

and a : - )

and more relaxed (letting lines start not just from the edges but some random pct from one edge to another)

3 Likes

So cool! I found my code using ofxBox2d to render something similar, but yours is much simpler and generates a nice texture…

cool ! I think box2d could be used really smartly for this kind of thing.

Things get crazy when you are start bending the line on intersection and keep searching for new intersections, here’s some weird results that look sort of cool – there’s not really smart logic in at all about how to bend the line, here’s different angles / experiments… (trying to do something something more like scanlimes ray tracer down the line)




1 Like

Haha I was going to link to Micah’s ray tracer and then noticed your parenthesis…

So, as another comment have you thought about making it more dynamic, like for instance, akin to the pulsing dot of an oscilloscope or something along those lines ?
Probably hard to make something descent and real time, so maybe it could be an overlay that get progressively blended to the background ?

1 Like