 # How to repeat a shape?

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

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);
``````

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

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.

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