Limiting draw() to run a limited amount of times!

Hello, i’m trying to make a application that works like this: We have a certain amount on “Main Circles” the black one, and “Secondary Circles” the white ones, what i want is to have a fixed number of Main Circles and a higher amount of Secondary, and after that to link the Secondary circles to the closest Main one.

But the main problem i’m facing at the moment is that the “while” “for” never work in the draw, i was trying to make 20 circles and to link they, i’m still in the beggining of the code still need to finish the idea, but i’m having that initial problem, if anyone could help me, i would appreciate it!!"

float quantCirculo = 20;
float x1,y1,x2,y2;
float t1 = 5, l1 = 5, t2 = 2, l2=2;
float count = 1;

void setup(){
  size(200,200);
  background(255);
}

void CirculoPrincipal(float x, float y, float l, float a){
  fill(0);
  ellipse(x,y,l,a);
}

void CirculoSecundario(float x, float y, float l, float a){
  fill(255);
  ellipse(x,y,l,a);
}

void Linhas(float x1, float y1, float x2, float y2){
  line(x1,y1,x2,y2);
}

void draw(){
  float x1=random(5,195),y1=random(5,195),x2 = random(1,199),y2 = random(1,199);
  noLoop();
  Linhas(x1,y1,x2,y2);
  CirculoPrincipal(x1,y1,t1,l1);
  CirculoSecundario(x2,y2,t2,l2);
  count+=1;
  }
}
1 Like

When you want the circles to appear in a visible animation, while or for loops won’t help you.

This is because draw updates the screen only once at the end of draw.

So no Animation.

Instead get rid of the while or for and use the fact that draw loops in itself automatically.

Hence just say i++; and spawn a new circle every time draw runs. It runs 60 times per second

2 Likes

Now, to think about the following steps:

To connect the circles you would need to store where they are. Use an ArrayList of PVector. During drawing them store the position you use. See reference.

before setup() :

ArrayList<PVector> list = new ArrayList();

in draw() :

float x1 = 3; 
float y1 = 13; 

list.add(new PVector(x1, y1));

Phases

You also need to know if you are in the phase where you draw

  • the first series of circles or
  • the second series of circles or
  • the lines.

To achieve this you could use a variable int phase or int state=0; and have an if … else if… clause in draw() :

if(state==0) {
      // draw series one, count, when done state = 1;
}
else if(state==1){
     // draw series 2, count and then state = 2;
}
else if(state==2){
      // lines, count and then state = 3
}
else if(state==3){
     // do nothing 
}

Chrisir

2 Likes

get rid of noLoop();

1 Like

Don’t know if i really understood it, but i’m gonna try to use the tips you gave me! Never used ArrayList and PVector, then i’m gonna need to search it! I’ll update here! Ty for the tips!

1 Like

Something like that? But i stil didn’t figured out how to make the amount of circles that i want i created the variables qc1 and qc2 to use it as a limiter of the quantity of circles, i managed to implement the states, but now i’m only creating 1 circle per state

PVector v1,v2;
//C = Comprimento, A = Altura
int qc1, qc2;
float c1 = 6, a1 = 6, c2 = 2, a2=2;
ArrayList<PVector> list = new ArrayList();
int fase = 0;

void setup(){
  size(200,200);
  background(255);
  //Quantidade de Circulos Principais
  qc1 = 5;
  //Quantidade de Circulos Secundarios
  qc2 = 10;
  v1 = new PVector(random(c1, width - c1), random(a1, height - a1));
  v2 = new PVector(random(c2, width - c2), random(a2, height - a2));
}

void draw(){
  
    if(fase==0) {
    ellipse(v1.x,v1.y,c1,a1);
    list.add(new PVector(v1.x,v1.y));
      fase++;
    }
      else if(fase==1){
        fill(255);
        ellipse(v2.x,v2.y,c2,a2);
        list.add(new PVector(v2.x,v2.y));
        fase++;
      }
        else if(fase==2){
          line(v1.x,v1.y,v2.x,v2.y);
          fase++;
        }
          else if(fase==3){
     int total = list.size();
      println("O numero total de circulos e: " + total);
          }
  }
1 Like

Well done! You need to repeat those in the fase section on draw() to get different positions!

i stil didn’t figured out how to make the amount of circles that i want

Also don’t say fase++ right away, instead use a counter counterFase1++ and then if(counterFase1>=qc1) fase++;

Draw runs 60 times per second. You can slow that down with frameRate. But he is doing only the fase he is in. That’s the trick.

Explanation You want a counter how many circles you have. Compare to qc1 only when counterFase1 reached qc1 go to next fase.

2 Likes

fase 2 where you draw the lines

You have to compare the distances of the primary circles to the secondary circles.

Draw line when you found the nearest. That’s not so easy

Go to fase 3 only when all comparisons are done

1 Like

All the math part another person is gonna do it, it’s a group study with a teacher, and the teacher already been working on the math part with that person, but he wanted a visualization of it, just a simple one, and since i knew of processing i thougth it would be simples, silly of me!

Gonna try implement the things you say, here we go again! Ty :3

Wow, you’re helping me a lot!!! Now the question how to i use the Arraylist do get the positions of the circles to set the line, the math right now does not matter, i know that the lines will be the same amount as the secondary circles, just need to know how to acess that information, did a little google here, but did not find a answer.

PVector v1,v2;
//C = Comprimento, A = Altura
int qc1, qc2;
float c1 = 6, a1 = 6, c2 = 2, a2=2;
ArrayList<PVector> list = new ArrayList();
int fase = 0, cfase1 = 0,cfase2 = 0,cfase3 = 0;

void setup(){
  size(200,200);
  background(255);
  //Quantidade de Circulos Principais
  qc1 = 5;
  //Quantidade de Circulos Secundarios
  qc2 = 10;
}

void draw(){
  
  //Desenhar os Circulos Principais  
  if(fase==0) {
    v1 = new PVector(random(c1, width - c1), random(a1, height - a1));
    ellipse(v1.x,v1.y,c1,a1);
    list.add(new PVector(v1.x,v1.y));
    if(cfase1 >= qc1){
      fase++;
    }
      cfase1++;
    }
  //Desenhar os Circulos Secundarios
      else if(fase==1){
        fill(255);
        v2 = new PVector(random(c2, width - c2), random(a2, height - a2));
        ellipse(v2.x,v2.y,c2,a2);
        list.add(new PVector(v2.x,v2.y));
        if(cfase2 >= qc2){
            fase++;
          }
              cfase2++;
      }
  //Desenhar as Linhas
        else if(fase==2){
          line(v1.x,v1.y,v2.x,v2.y);
          if(cfase3 >= qc2){
      fase++;
    }
      cfase3++;
    }
        
  //Calcular a menor distancia
          else if(fase==3){
     int total = list.size();
      println("O numero total de circulos e: " + total);
          }
  }

Ok we are talking about fase==2 here

Please note that you put both types of circles in the same list, which is absolutely okay. You could also choose to work with two lists.

Let’s work with one list.

You want a nested for-loop:

float minDist= 100000000; // the minimal distance - EDITED: I had falsely -100 here.......
int lineFrom, lineTo;  // two indexes for the ArrayList to draw the line 

for(int i = ..... <qc1....  ) {

   // search nearest other circle
   for (int j = qc + 1 .... ) {

      PVector v1 = list.get(i);
      PVector vj = list.get(j);
      if(v1.dist(vj) < minDist){
          minDist= v1.dist(vj) ;  // store 
          lineFrom= i;
          lineTo = j; 
       }//if
    }//for

    // after the for-loop lineFrom and lineTo should have the best pair
    PVector v1 = list.get(lineFrom);
    PVector vj = list.get(lineTo);
    line (v1.x,v1.y,
          vj.x,vj.y);

} //for

Not tested since I am not at home.

But you for-loop over all primary circles and search in the secondary circles. After the inner for loop you draw the line. And then you proceed with the next primary circle.

Chrisir

2 Likes

I tried doing your method, i also created another array for the secondary circles, i thought it was way better, i didn’t thought of that, ty :3 Also, trying the new way you showed i’m getting a error: “IndexOutOfBoundsException: Index: 11, Size: 11” i don’t get what that means…

PVector v1,v2;
//C = Comprimento, A = Altura
int qc1, qc2;
float c1 = 6, a1 = 6, c2 = 2, a2=2;
ArrayList<PVector> listc1 = new ArrayList();
ArrayList<PVector> listc2 = new ArrayList();
int fase = 0, cfase1 = 0,cfase2 = 0,cfase3 = 0;
float minDist = -100;
int linhaI, linhaF;

void setup(){
  size(200,200);
  background(255);
  //Quantidade de Circulos Principais
  qc1 = 5;
  //Quantidade de Circulos Secundarios
  qc2 = 10;
}

void draw(){
  
  //Desenhar os Circulos Principais  
  if(fase==0) {
    v1 = new PVector(random(c1, width - c1), random(a1, height - a1));
    ellipse(v1.x,v1.y,c1,a1);
    listc1.add(new PVector(v1.x,v1.y));
    if(cfase1 >= qc1){
      fase++;
    }
      cfase1++;
    }
  //Desenhar os Circulos Secundarios
      else if(fase==1){
        fill(255);
        v2 = new PVector(random(c2, width - c2), random(a2, height - a2));
        ellipse(v2.x,v2.y,c2,a2);
        listc2.add(new PVector(v2.x,v2.y));
        if(cfase2 >= qc2){
            fase++;
          }
              cfase2++;
      }
  //Desenhar as Linhas
        else if(fase==2){
          for(int i = 0; i < qc1 ; i++){
            for(int j = 0; i < qc2; j++){
              PVector vi = listc1.get(i);
              PVector vj = listc2.get(j);
                if(vi.dist(vj) < minDist){
                  linhaI = i;
                  linhaF = j;
                }
            }
          
          PVector vi = listc1.get(linhaI);
          PVector vj = listc2.get(linhaF);
          line(vi.x,vi.y,vj.x,vj.y);
          }
          if(cfase3 >= qc2){
      fase++;
    }
      cfase3++;
    }
        
  //Calcular a menor distancia
          else if(fase==3){
     int total1 = listc1.size();
     int total2 = listc2.size();
      println("O numero total de circulos em c1: " + total1);
      println("O numero total de circulos em c2: " + total2);
          }
  }

I found the error on the top one, i put a “i” where it should be “j” i corrected that, but it still only drawing 1 line

PVector v1,v2;
//C = Comprimento, A = Altura
int qc1, qc2;
float c1 = 6, a1 = 6, c2 = 2, a2=2;
ArrayList<PVector> listc1 = new ArrayList();
ArrayList<PVector> listc2 = new ArrayList();
int fase = 0, cfase1 = 0,cfase2 = 0,cfase3 = 0;
float minDist = -100;
int linhaI, linhaF;

void setup(){
  size(200,200);
  background(255);
  //Quantidade de Circulos Principais
  qc1 = 5;
  //Quantidade de Circulos Secundarios
  qc2 = 10;
}

void draw(){
  
  //Desenhar os Circulos Principais  
  if(fase==0) {
    v1 = new PVector(random(c1, width - c1), random(a1, height - a1));
    ellipse(v1.x,v1.y,c1,a1);
    listc1.add(new PVector(v1.x,v1.y));
    if(cfase1 >= qc1){
      fase++;
    }
      cfase1++;
    }
  //Desenhar os Circulos Secundarios
      else if(fase==1){
        fill(255);
        v2 = new PVector(random(c2, width - c2), random(a2, height - a2));
        ellipse(v2.x,v2.y,c2,a2);
        listc2.add(new PVector(v2.x,v2.y));
        if(cfase2 >= qc2){
            fase++;
          }
              cfase2++;
      }
  //Desenhar as Linhas
        else if(fase==2){
          for(int i = 0; i < qc1 ; i++){
            for(int j = 0; j < qc2; j++){
              PVector vi = listc1.get(i);
              PVector vj = listc2.get(j);
                if(vi.dist(vj) < minDist){
                  minDist = vi.dist(vj);
                  linhaI = i;
                  linhaF = j;
                }
            }
          
          PVector vi = listc1.get(linhaI);
          PVector vj = listc2.get(linhaF);
          line(vi.x,vi.y,vj.x,vj.y);
          }
          if(cfase3 >= qc2){
      fase++;
    }
      cfase3++;
    }
        
  //Calcular a menor distancia
          else if(fase==3){
     int total1 = listc1.size();
     int total2 = listc2.size();
      println("O numero total de circulos em c1: " + total1);
      println("O numero total de circulos em c2: " + total2);
          }
  }
1 Like

thanks for posting your entire code

I made changes and marked them with !!!

//Desenhar as Linhas
  else if (fase==2) {
    // Calcular a menor distancia
    for (int i = 0; i < listc1.size(); i++) {         // using size !!!!!
      minDist = 100000000;                            // you missed this line and you need a big number here !!!!!
      for (int j = 0; j < listc2.size(); j++) {       // using size !!!!!
        PVector vi = listc1.get(i);
        PVector vj = listc2.get(j);
        if (vi.dist(vj) < minDist) {     
          minDist = vi.dist(vj);         // you missed this line !!!!!!!!!!!!!!
          linhaI = i;
          linhaF = j;
        }
      }
      PVector vi = listc1.get(linhaI);
      PVector vj = listc2.get(linhaF);
      stroke(0);
      line(vi.x, vi.y, vj.x, vj.y);
    }
    fase++; // no if needed here !!!!!!!!!!!!!!!!!!!!!!!
  }
  //
2 Likes

Yeah i forgot about that. I didn’t get why in the begging i need to put minDist = -100 but on the first for on fase==2 it need that high number, when i tried to put the high number in the begginng it didn’t work out.

Now the problem i’m seeing is that it’s only making a “listc1.size()” amount of lines, some secondary circles the lines is not showing, since there’s only 6 principal circles it’s only making 6 lines

PVector v1,v2;
//C = Comprimento, A = Altura
int qc1, qc2;
float c1 = 6, a1 = 6, c2 = 2, a2=2;
ArrayList<PVector> listc1 = new ArrayList();
ArrayList<PVector> listc2 = new ArrayList();
int fase = 0, cfase1 = 0,cfase2 = 0,cfase3 = 0;
float minDist = -100;
int linhaI, linhaF;

void setup(){
  size(200,200);
  background(255);
  //Quantidade de Circulos Principais
  qc1 = 5;
  //Quantidade de Circulos Secundarios
  qc2 = 10;
}

void draw(){
  
  //Desenhar os Circulos Principais  
  if(fase==0) {
    v1 = new PVector(random(c1, width - c1), random(a1, height - a1));
    ellipse(v1.x,v1.y,c1,a1);
    listc1.add(new PVector(v1.x,v1.y));
    if(cfase1 >= qc1){
      fase++;
    }
      cfase1++;
    }
  //Desenhar os Circulos Secundarios
      else if(fase==1){
        fill(255);
        v2 = new PVector(random(c2, width - c2), random(a2, height - a2));
        ellipse(v2.x,v2.y,c2,a2);
        listc2.add(new PVector(v2.x,v2.y));
        if(cfase2 >= qc2){
            fase++;
          }
              cfase2++;
      }
  //Desenhar as Linhas
        else if(fase==2){
          for(int i = 0; i < listc1.size(); i++){
            minDist = 10000000;
            for(int j = 0; j < listc2.size(); j++){
              PVector vi = listc1.get(i);
              PVector vj = listc2.get(j);
                if(vi.dist(vj) < minDist){
                  minDist = vi.dist(vj);
                  linhaI = i;
                  linhaF = j;
                }
            }
          
          PVector vi = listc1.get(linhaI);
          PVector vj = listc2.get(linhaF);
          stroke(0);
          line(vi.x,vi.y,vj.x,vj.y);
          }
      fase++;
      cfase3++;
    }
        
  //Calcular a menor distancia
          else if(fase==3){
     int total1 = listc1.size();
     int total2 = listc2.size();
      println("O numero total de circulos em c1: " + total1);
      println("O numero total de circulos em c2: " + total2);
          }
  }

yeah, how would you solve that?

:wink:

It’s easy when you think how the code works

1 Like

haha tried doing a crazy thing “listc1.size() + listc2.size()” the processing just froze, let me try, it’s gonna take a little probably

Just changed i and j place haha Don’t know if it’s the best solution, but hey, it works!

Edit: Did the auto-format thing :3

PVector v1, v2;
//C = Comprimento, A = Altura
int qc1, qc2;
float c1 = 6, a1 = 6, c2 = 2, a2=2;
ArrayList<PVector> listc1 = new ArrayList();
ArrayList<PVector> listc2 = new ArrayList();
int fase = 0, cfase1 = 0, cfase2 = 0, cfase3 = 0;
float minDist = -100;
int linhaI, linhaF;

void setup() {
  size(200, 200);
  background(255);
  //Quantidade de Circulos Principais
  qc1 = 5;
  //Quantidade de Circulos Secundarios
  qc2 = 10;
}

void draw() {

  //Desenhar os Circulos Principais  
  if (fase==0) {
    v1 = new PVector(random(c1, width - c1), random(a1, height - a1));
    ellipse(v1.x, v1.y, c1, a1);
    listc1.add(new PVector(v1.x, v1.y));
    if (cfase1 >= qc1) {
      fase++;
    }
    cfase1++;
  }
  //Desenhar os Circulos Secundarios
  else if (fase==1) {
    fill(255);
    v2 = new PVector(random(c2, width - c2), random(a2, height - a2));
    ellipse(v2.x, v2.y, c2, a2);
    listc2.add(new PVector(v2.x, v2.y));
    if (cfase2 >= qc2) {
      fase++;
    }
    cfase2++;
  }
  //Desenhar as Linhas
  else if (fase==2) {
    for (int j = 0; j < listc2.size(); j++) {
      minDist = 10000000;
      for (int i = 0; i < listc1.size(); i++) {
        PVector vi = listc1.get(i);
        PVector vj = listc2.get(j);
        if (vi.dist(vj) < minDist) {
          minDist = vi.dist(vj);
          linhaI = i;
          linhaF = j;
        }
      }

      PVector vi = listc1.get(linhaI);
      PVector vj = listc2.get(linhaF);
      stroke(0);
      line(vi.x, vi.y, vj.x, vj.y);
    }
    fase++;
    cfase3++;
  }

  //Calcular a menor distancia
  else if (fase==3) {
    int total1 = listc1.size();
    int total2 = listc2.size();
    println("O numero total de circulos em c1: " + total1);
    println("O numero total de circulos em c2: " + total2);
  }
}

2 Likes

remember to hit Ctrl-t in processing to auto-format prior to posting

1 Like

Well done.

:wink:

Chrisir