Animation with nested loops

delphinia

Hello guys! I am a doing an interesting task. I have to make an animation. Only one circle out of 3 should be visible at a time in each frame. When I run the program, I can see only one frame. What is the matter?

int num = 3;
float radius = 10.0;

void setup() {
  size(256,256);
  background(255);
  frameRate(2);
}       

void draw() { 
  translate(width/2, height/2);
  rotate(PI/num);
  float angle = 0.0;
  float x = 0.0;
  float y = 0.0;

  for(int j=0; j<num; j++) { 
    for(int i=0; i<num; i++) {
      if(i == j) {stroke(0); background(255);}
      else {stroke(255);}
      x = cos(angle)*radius;
      y = sin(angle)*radius;
      strokeWeight(10);
      point(10*x,10*y);
      angle += TWO_PI/num;
    }
  } 
}

Chrisir

hello,

• with a nested loop you'll get 9 (3x3) circles

• instead of point better use ellipse (use fill then)

as for only one circle is ON: draw() in itself loops, so you can have a var activeCircle (or your j) and increase it (maybe only every 5th loop of draw(), if (framerate%5==0) ) at the end of draw() --- only paint the circle when i == activeCircle /// frameCount here!

I understand that you have the outer for-loop as the control var that tells you which circle is on. but it doesn't work that way. draw() is updating the screen only once at the very end of draw(). so what you see is the added result of all that happened in draw(). so when you use background() inbetween (line 19), you can't see it. so better use my approach that uses the fact that draw() loops automatically (60 times per second).

• get rid of the for-loop with j

;-)

delphinia

Hello, Chrisir! Thank you for your suggestions. But I still do not understand this moment "if (framerate%5==0) ) at the end of draw() --- only paint the circle when i == activeCircle"
I think frameRate is always a constant. And how and where should I increase this activeCircle variable?

Chrisir

oups I meant frameCount of course

increase it at the end of draw()

the line just means do it every 5th frame, when modulo 5 is zero

delphinia

Thank you very much! :) I've implemented your options. It looks better, but still not the effect that I need. When I run my new version, one circle appears in the first frame and the other two (the circle in the 1st frame does not fade!) in the second! Do not know what else I could do.

int activeCircle =0;

 `for(int i=0; i<num; i++) {`
   `x = cos(angle)*radius;`
   `y = sin(angle)*radius;`
   `if(i == activeCircle) {ellipse(10*x,10*y,radius,radius); fill(0);}`
   `else { }`
   `angle += TWO_PI/num;`
   `if(frameCount % 5 == 0) activeCircle += 1;`
`}`  

Chrisir

post your entire code pls

Chrisir

you need to set activeCircle to 0 when it's >2

also you mustn't set activeCircle to 0 at the beginning of draw() - better define it before setup()

remember that draw() runs in a loop (60 times per second)

delphinia

   `if(frameCount % 1 == 0) activeCircle += 1;`
  `if(activeCircle > 2) activeCircle = 0;`

delphinia

OK, you write "you need to set activeCircle to 0 when it's >2". What do you mean with 'it'?

Chrisir

activeCircle

Chrisir

fill must come before ellipse

Chrisir

define angle before setup() otherwise you reset it to 0 every time....

Chrisir

pls say background(255); at the beginning of draw to delete everything

delphinia

It works! Thank you so much for your help! =;

Chrisir

Great!

;-)

Chrisir

pls post again solution