Animation with nested loops

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() {

void draw() { 
  translate(width/2, height/2);
  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;
      angle += TWO_PI/num;


  • edited December 2014 Answer ✓


    • 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


  • 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?

  • 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

  • edited December 2014

    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;`
  • post your entire code pls

  • edited December 2014

    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)

  • edited January 2015
       `if(frameCount % 1 == 0) activeCircle += 1;`
      `if(activeCircle > 2) activeCircle = 0;`
  • edited January 2015

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

  • activeCircle

  • fill must come before ellipse

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

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

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

  • Great!


  • pls post again solution

Sign In or Register to comment.