How to repeat a shape?

beginners
1

Hello I have just started to learn OF (3 days) and I would like to create a pattern with these shapes (screenshot)

Capture d’écran 2021-08-09 à 16.38.27
Capture d’écran 2021-08-09 à 16.38.272272×1816 120 KB

is there a solution to fill a format without repeating the code and to change the site ?

here is the code of the form that I would like to repeat

ofDrawRectangle(100, 200, 200, 200);
    ofDrawRectangle(150, 250, 100, 100);
    ofDrawRectangle(175, 275, 50, 50);
    ofDrawRectangle(187.5, 287.5, 25, 25);
    
    ofTranslate(200, 200);
    
        ofRotateZDeg(45);
        ofDrawRectangle(0, 0, 140, 140);
    ofDrawRectangle(35, 35, 70, 70);
    ofDrawRectangle(53, 53, 35, 35);

Thank you for your reply

2

You can make a function like this:


//--------------------------------------------------------------
void ofApp::drawMyShape(int x, int y) {
    ofPushMatrix();
    ofTranslate(x, y);
    //ofScale(2.0f, 2.0f);

    ofDrawRectangle(100, 200, 200, 200);
    ofDrawRectangle(150, 250, 100, 100);
    ofDrawRectangle(175, 275, 50, 50);
    ofDrawRectangle(187.5, 287.5, 25, 25);

    ofTranslate(200, 200);
    ofRotateZDeg(45);
    ofDrawRectangle(0, 0, 140, 140);
    ofDrawRectangle(35, 35, 70, 70);
    ofDrawRectangle(53, 53, 35, 35);

    ofPopMatrix();
}

And you can draw into the ofApp::Draw():

drawMyShape(10, 10);
drawMyShape(100, 200);
drawMyShape(500, 1400);

You could add some scaling (ofScale(scale)) too between the Push/Pop matrix methods.
You could add another variable for the width/height shape, and then to fill a surface with aligned shapes…(using a for loop maybe)

1 Like
3

And adding a bit to the post by moebiussurfing, this particular shape could be drawn by a loop which uses the pythagorean theorem to calculate the side of a square from the previous one, and which also uses ofRotateRad() to rotate the frame so that either a square or a diamond shape is drawn.

Sometimes its easier (math wise) to draw a shape around the origin (0, 0), and then use ofTranslate() to move the frame so that the shape ends up at the correct position on the screen. oF also has 2 rectangle modes (corner and center), with OF_RECTMODE_CORNER as default. Sometimes setting the mode to the center can be helpful.

4

thank you for your answers it helps me a lot, I will continue to play a bit with it :slight_smile: