How to create infinite rectangles that grow out of the screen?

Hi,
I’d like to create an infinite loop, where little rectangles grow every two seconds or so from the center of the screen, rotate and grow until they reach the borders of the screen and then disappear.

I’m stuck with scaling - it makes the shapes go back and forth. The solution is probably simple, as always, and help would be appreciated!

(When I get the mechanics right, I’m planning to change the rectangles to a photo :slight_smile:)

Love,
A

 #include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
    ofBackground(255);
    noOfDoors = 8;
}

//--------------------------------------------------------------
void ofApp::update(){
    phase++;
}

//--------------------------------------------------------------
void ofApp::draw(){
  
    float phaseDiff = 90/noOfDoors; 
    
    for (int i=0; i<ofGetWidth; i++){
         door(phase +  i * phaseDiff);
    }
}

//--------------------------------------------------------------
void ofApp::door(float phase){

    ofPushMatrix();
    ofTranslate(ofGetWidth()/2, ofGetHeight()/2);
    ofRotateZDeg(phase);
    float s = abs(sin(ofDegToRad(phase)));
    s =ofMap(s, 0, 1, 0, 3);
    ofScale(s);
    ofSetRectMode(OF_RECTMODE_CENTER);
    
    ofColor c1 = ofColor (255,0,0);
    ofColor c2 = ofColor (0,0,255);
    ofColor c3 = c1.getLerped(c2, s);
                              
    ofSetLineWidth(3);
    ofNoFill();
    ofSetColor(c3);
    ofDrawRectangle(0, 0, 100, 100);
    ofPopMatrix();
}

this was bugging me so I got sidetracked and wrote this, (which may or may not be what you meant) probably not the best or nicest way to do it but have written in flexibility by making the door a class and then making a vector of all your doors. Each door knows where it should be and what size and then shuffles itself in the z order when drawing itself. just put as many images as you want called ‘door1.jpg’ ‘door2.jpg’ etc into the data folder in the bin folder of your project…

ofapp.h

#pragma once

#include "ofMain.h"

class door {
public:
    ofImage image;
    float scale;
    float rotation;
    
    door();
    ~door();
    void draw();
    void load(string imagePath);
    void update();
    
    float getScale();
    void setScale(float scale);
    
    float getRotation();
    void setRotation(float rotation);
};

class ofApp : public ofBaseApp{

	public:
		void setup();
		void update();
		void draw();
    
    vector<door> doors;

};

and then

ofapp.cpp

#include "ofApp.h"
#define maxScale 4
#define noOfDoors 5

//--------------------------------------------------------------
void ofApp::setup(){
    ofBackground(255);
    
    for (int i = 0; i<noOfDoors; i++){
        door newDoor;
        string imagePath = ("door" + ofToString(i) + ".jpg");
        newDoor.load(imagePath);
        newDoor.setScale(ofMap( i, 0, noOfDoors,0, maxScale));
        newDoor.setRotation(ofMap( i, 0, noOfDoors,0, 360));
        doors.push_back(newDoor);
    }
     ofSetDepthTest(true);
}

//--------------------------------------------------------------
void ofApp::update(){
    for (int i=0; i<doors.size(); i++ ){
        doors[i].update();
    }
}

//--------------------------------------------------------------
void ofApp::draw(){
   
    for (int i=0; i<doors.size(); i++ ){
        doors[i].draw();
    }
}

//--------------------------------------------------------------
door::door(){
    // constructor

}

//--------------------------------------------------------------
door::~door(){
    // destructor
}

//--------------------------------------------------------------
void door::draw(){
    ofPushMatrix();
    ofTranslate(ofGetWidth()/2, ofGetHeight()/2);
    ofRotateZDeg(getRotation());
    float z = ofMap(scale, 0, noOfDoors, 0, maxScale); // swap z depth to change drawing order based on scale
    image.draw( - image.getWidth() * scale / 2, -image.getHeight() * scale / 2, - z,
               image.getWidth() * scale, image.getHeight() * scale);
    ofPopMatrix();
}

//--------------------------------------------------------------
void door::load( string imagePath){
    image.load(imagePath);
}

//--------------------------------------------------------------
float door::getScale(){
    return scale;
}

//--------------------------------------------------------------
void door::setScale(float newScale){
    scale = newScale;
}

//--------------------------------------------------------------
float door::getRotation(){
    return rotation;
}

//--------------------------------------------------------------
void door::setRotation(float newRotation){
    rotation = newRotation;
}

//--------------------------------------------------------------
void door::update(){
    if (scale> maxScale){
        scale = 0;
    } else {
        scale+=0.01;
    }
    
    if (rotation < 360){
        rotation ++;
    } else {
        rotation = 0;
    }
}


2 Likes

Wow, thank you so much! I will try this right away! :heart_eyes: