Using 'for' to loop a loop

I am finally starting to get a hang of this stuff but I am stuck on this one.

I have a series of statements that create a array of balls that grow and shrink depending upon the mouse position. See code:

    for ( a = 0; a < 100 ; a++){
    ax1[a] = 5 + a * 30;
    ay1[a] = 35;
    ax2[a] = (abs(curserx)/30 - a);
    ofSetColor(abs(curserx-300),abs(cursery - 300),180);
    ofSetLineWidth(2);
    ofCircle(ax1[a],ay1[a],ax2[a]);
}
for ( a = 0; a < 100 ; a++){
    ax1[a] = 5 + a * 30;
    ay1[a] = 65;
    ax2[a] = (abs(curserx)/30 - a);
    ofSetColor(abs(curserx-300),abs(cursery - 300),180);
    ofSetLineWidth(2);
    ofCircle(ax1[a],ay1[a],ax2[a]);
}
for ( a = 0; a < 100 ; a++){
    ax1[a] = 5 + a * 30;
    ay1[a] = 95;
    ax2[a] = (abs(curserx)/30 - a);
    ofSetColor(abs(curserx-300),abs(cursery - 300),180);
    ofSetLineWidth(2);
    ofCircle(ax1[a],ay1[a],ax2[a]);
}
for ( a = 0; a < 100 ; a++){
    ax1[a] = 5 + a * 30;
    ay1[a] = 125;
    ax2[a] = (abs(curserx)/30 - a);
    ofSetColor(abs(curserx-300),abs(cursery - 300),180);
    ofSetLineWidth(2);
    ofCircle(ax1[a],ay1[a],ax2[a]);
}
for ( a = 0; a < 100 ; a++){
    ax1[a] = 5 + a * 30;
    ay1[a] = 155;
    ax2[a] = (abs(curserx)/30 - a);
    ofSetColor(abs(curserx-300),abs(cursery - 300),180);
    ofSetLineWidth(2);
    ofCircle(ax1[a],ay1[a],ax2[a]);
}

The problem is of course this is very long and repedative to get every line of circles. The next thing I tried is this:

for ( b = 5; b < 610 ; b + 30){
for ( a = 0; a < 100 ; a++){
    ax1[a] = 5 + a * 30;
    ay1[a] = 5+ax0[b];
    ax2[a] = (abs(curserx)/30 - a);
    ofSetColor(abs(curserx-300),abs(cursery - 300),180);
    ofSetLineWidth(2);
    ofCircle(ax1[a],ay1[a],ax2[a]);
}
}

But this just crashes the program immediately.

So basically my question is. Is there any way to define two variables within one loop? In this case ‘a’ and ‘b’ or can I define one variable in one loop then use another loop inside of that with the other variable?

if you post the full code i might be able to help.
maybe it’s as simple as not having defined your arrays like ax1 with enough places.

int ax1[200];
    #include "ofApp.h"
int curserx = 0;
int cursery = 0;

//Shapes a
int ax1[500], ax2[500], ay1[500], ay2[500],ax0[500],ay0[500],ax3[500],ay3[500];
int a;
int b;

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

ofSetBackgroundAuto(true);



}

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

}

//--------------------------------------------------------------
void ofApp::draw(){
//Draw Shape A

ofSetColor(abs(curserx-300),abs(curserx-300),abs(cursery-300));
ofRect(0,0,600,600);
for ( b = 5; b < 610 ; b + 30){
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 5+ax0[b];
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
}


    /*
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 35;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 65;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 95;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 125;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 155;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 185;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 215;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 245;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 275;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 305;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 335;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 365;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 395;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 425;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 455;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 485;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 515;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 545;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 575;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[a] = 605;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }





    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 35;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 65;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 95;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 125;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 155;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 185;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 215;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 245;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 275;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 305;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 335;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 365;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 395;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 425;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 455;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 485;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 515;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 545;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 575;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 605;
        ay1[a] = 5 + a * 30;
        ax2[a] = (abs(cursery)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }*/
}

//--------------------------------------------------------------
void ofApp::keyPressed(int key){

}

//--------------------------------------------------------------
void ofApp::keyReleased(int key){

}

//--------------------------------------------------------------
void ofApp::mouseMoved(int x, int y){
    curserx = x;
    cursery = y;

}

//--------------------------------------------------------------
void ofApp::mouseDragged(int x, int y, int button){

}

//--------------------------------------------------------------
void ofApp::mousePressed(int x, int y, int button){

}

//--------------------------------------------------------------
void ofApp::mouseReleased(int x, int y, int button){

}

//--------------------------------------------------------------
void ofApp::windowResized(int w, int h){

}

//--------------------------------------------------------------
void ofApp::gotMessage(ofMessage msg){

}

//--------------------------------------------------------------
void ofApp::dragEvent(ofDragInfo dragInfo){

}

I commented out most of it to try and just mess with the stuff at the beginning

So, what you are trying to achieve is called nested loops. Although you could start b with 5 and end before 610, I think it’s easier and simpler to understand if you do something else. For example:

// By doing so, it's easy to know how many times you are going to run the second for loop.
for (int i = 0; i < 20 ; ++i) {

     for (int j = 0; j < 100 ; ++j) {

     ax1[j] = 5 + j * 30;
     /* This is where it matters.
         You can use a bit of math to simplify your code, like so: */
     ay1[j] = 5+ax0[5 + i  * 30];
     /* In the first time you go around this second loop you have 5, then 35, then 65, then 95 and so on.
       And it's easier to draw more. */

     ax2[j] = (abs(curserx)/30 - j);
     ofSetColor(abs(curserx-300),abs(cursery - 300),180);
     ofSetLineWidth(2);
     ofCircle(ax1[j],ay1[j],ax2[j]);
     }
}

In your previous example, you also had an infinite loop. You can’t do:

for ( b = 5; b < 610 ; b + 30)

You’ll have to do:

for ( b = 5; b < 610 ; b += 30)

Also, you just need to use arrays/vectors if you are playing around with them in update(). Otherwise, you just need to call the drawing function you want with a local variable.

Okay I am still missing something. I think I follow what you are doing in your example. But it caused the program to crash so for now if I just stick with the less efficient and probably more confusing method.

I have changed my code a little.

ofSetColor(abs(curserx-300),abs(curserx-300),abs(cursery-300));
ofRect(0,0,600,600);
for ( b = 5; b < 610 ; b += 30){
    for ( a = 0; a < 100 ; a++){
        ax1[a] = 5 + a * 30;
        ay1[b] = a;
        ax2[a] = (abs(curserx)/30 - a);
        ofSetColor(abs(curserx-300),abs(cursery - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1[a],ay1[a],ax2[a]);
    }
}

The result from this code is the image below:

I am more than confused what exactly I have done to now make the 6th circle offset down twice but nothing else…

What part of my code is causing this and can you explain why?

Sorry, I had made a quick reply by copy pasting your code and did not change all the variables. Now it’s fixed, can you please try it.

That makes a lot more sense… But it still runs only one line of dots

Not sure how you only get one line. Isn’t this what you intend?

You probably didn’t do a correct assignment of the array, like stephanschulz. So just change that to local variables. That’s only what you need.

I still seem to be missing something.

As far as assignment of arrays goes why does it have any effect on the program? Also how do you determine the correct assignment?

I had them assigned like this:

int ax1[200], ax2[200], ay1[200], ay2[200],ax0[200],ay0[200],ax3[200],ay3[200];

which from everything I have learned is the correct way to assign arrays. Unless I was trying to assign the hard values such as:

int ax1[3] = {1,2,3}

What do you mean by change to local variables? I did try moving my array declaration to a local position rather than the golbal position I had it in.

But I guess my main question is. I was under the impression that as long as you have enough numbers in your array you cant really have to many. therefore:

int x[10];

and

int y[300];

Should be equally valid as long as i only need to use 10 numbers from the array?

Can you give me an example of how you assigned them?

If you just want to draw to the screen, you just need to call the drawing functions, you don’t need to store that in arrays. It automatically draws, it’s not pilling up.

That’s why you don’t need global arrays/variable (a variable declared outside of that for block), just local (a variable declared inside that block). That’s called scope.

You can read more introductory/general topics in the ofBook or the Processing Handbook. The reason this books are great for a beginner, instead of the common books/web resources, is that they always give you a visual feedback on how stuff works.

Regarding your code, you just need something like so in the draw function:

ofSetColor(abs(mouseX-300),abs(mouseX-300),abs(mouseY-300));
ofRect(0,0,600,600);

for (int i = 0; i < 20 ; ++i) {
    
    for (int j = 0; j < 100 ; ++j) {
        
        int ax1 = 5 + j * 30;
        /* This is where it matters.
         You can use a bit of math to simplify your code, like so: */
        int ay1 = 5 + i  * 30;
        /* In the first time you go around this second loop you have 5, then 35, then 65, then 95 and so on.
         And it's easier to draw more. */
        
        int ax2 = (abs(mouseX)/30 - j);
        ofSetColor(abs(mouseX-300),abs(mouseY - 300),180);
        ofSetLineWidth(2);
        ofCircle(ax1,ay1,ax2);
    }
}

I don’t know what your curserx and cursery are. But if they are the cursor coordinates, you have two built-in variables mouseX and mouseY.

The reason why you where only getting one line was this one:

ay1[j] = 5+ax0[5 + i  * 30];

I thought you where accessing something in the array ax0. But apparently not.

For example, in Java, if you don’t assign something to an int, you get 0 (zero). In c++, you may get any value, something related to memory of that variable.

1 Like

Okay I got it figured out. Which is good and bad. I understand what you are saying I think and it’s without a doubt a way better way of doing it. But I clearly don’t understand the use of arrays as well as I thought I did. I guess I will be playing around with arrays and sequences a lot more this weekend.

I really recommend you to the read the references above, they are great! But I can give you a fun example.

So, arrays (and vectors, and other types of containers) are a way of storing information (numbers, characters, etc) for latter use.

In your previous example, you were assigning and using it right way. So a array wasn’t exactly necessary. In this example, you’ll store the latest 20 positions of the mouse, and use them to draw. Like a snake draw.

in ofApp.h

static const int numberOfCircles = 50;
ofVec2f mousePositions[numberOfCircles]; 

in setup()

ofBackground(0);

// Pump up the circle resolution for a smoother curve.
ofSetCircleResolution(44);

// Assign a starting value.
for (int i = 0; i < numberOfCircles ; ++i) {
    mousePositions[i] = ofVec2f(0,0);
}

At this point any position of the array returns a (0, 0) 2D vector. So, if you do something like:

 ofVec2f newVec = mousePositions[5];
 cout << newVec;

It would print '0, 0 ’ to the console.


in update()

for (int i = 0; i < numberOfCircles - 1 ; ++i) {
        mousePositions[i] = mousePositions[i + 1];
}
mousePositions[numberOfCircles - 1] = ofVec2f(mouseX, mouseY);

Every cycle, you move the value of the array from one position to another. In this case, you move it down.
Note that I don’t access the last element. That’s why I did " i < numberOfCircle - 1 ".

So the value in the position 1, gets assigned to the position 0. The one from 2, gets assign to 1. And so on.

As an example, with you had a smaller array with {3, 6, 9, 2, 5, 1}.
Now you would have an array with {6, 9, 2, 5, 1, 1}.
The number 3 gets discarded.

If you noticed, you didn’t touched the last position. That’s because you want a new element on the last position: a new mouse position. So, after the loop, you assign a new mouse position to the last element.


in draw()

ofSetColor(255, 10);
    
// I added this nested loop to draw it 5 times, so that I can make a simple blur effect.
for (int i = 0; i < 5 ; ++i) {
    
    // Here I go through my array and draw the last 20 positions.
    for (int j = 0; j < numberOfCircles ; ++j) {
        ofCircle(mousePositions[j], 5 + j + i * 2);
    }
}

5 + j + i * 2 — this math is the trick.

First, I guarantee a minimum size of 5.
Then, by using the first iterator (i) multiplied by two, I can draw some bigger circles.
This, combined with the fact that I’m drawing with transparency (ofSetColor(255, 10)), I can do a simple blur fx.

At last, by also adding the second iterator (j), the older the mouse position, the smaller the circle.

I hope this enlightens you how containers work. Please, do mess around and have fun. Any questions, feel free to ask.

1 Like

That’s an awesome example. I’ve been playing around with it for a while now.

And this actually explains a couple of the things I was wondering about. How to create a simple blur effect and how to create transparency.

thanks I am sure this will not be the last time I post a question.

1 Like