Show a different shape in each frame (Processing)

Question

I have the code which, on a mouse press, will show a circle moving around a circle.

I would like this to happen automatically ie.

frame no. 1 shows circle no. 1 frame no. 2 shows circle no. 2 ... frame no. 8 shows circle no. 8 frame no. 9 shows circle no. 1

Many thanks.

Here is the code I have.

int value = 0;
void setup () {
  size (600, 600);
}

void draw () {
  if (value == 0) {
    background(255, 255, 255);
  } else if (value == 1) {
        background(255, 255, 255);
    fill (0);
    ellipse (300, 190, 20, 20);//1
  } else if (value == 2) {
        background(255, 255, 255);
    fill (0);
    ellipse (378, 222, 20, 20);
  } else if (value == 3) {
        background(255, 255, 255);
    fill (0);
    ellipse (410, 300, 20, 20);
  } else if (value == 4) {
        background(255, 255, 255);
    fill (0);
    ellipse (378, 378, 20, 20);
  } else if (value == 5) {
        background(255, 255, 255);
    fill (0);
    ellipse (300, 410, 20, 20);
  } else if (value == 6) {
        background(255, 255, 255);
    fill (0);
    ellipse (222, 378, 20, 20);
  } else if (value == 7) {
        background(255, 255, 255);
    fill (0);
      ellipse (190, 300, 20, 20);
  } else if (value == 8) {
        background(255, 255, 255);
    fill (0);
    ellipse (222, 222, 20, 20); //8 circles
  }
}



void mousePressed() {
  if (mouseButton == LEFT) {
    value = value + 1;
  } else if (mouseButton == RIGHT) {
    value = value - 1;
  } 

  if (value > 8) {
    value = 1;
  } 
  if (value < 1) {
    value = 8;
  }
}

Answer 1

This is how you can loop a number of different frames:

int loopLength = 8;
void setup () {
  size (600, 600);
}

void draw () {
  background(255, 255, 255);
  fill (0);
  switch (frameCount % loopLength) {
  case 0: 
    ellipse (300, 190, 20, 20); 
    break;
  case 1: 
    ellipse (378, 222, 20, 20); 
    break;
  case 2: 
    ellipse (410, 300, 20, 20); 
    break;
  case 3: 
    ellipse (378, 378, 20, 20); 
    break;
  case 4: 
    ellipse (300, 410, 20, 20); 
    break;
  case 5: 
    ellipse (222, 378, 20, 20); 
    break;
  case 6: 
    ellipse (190, 300, 20, 20); 
    break;
  case 7: 
    ellipse (222, 222, 20, 20); 
    break;
  }
}

The common code of each frame (calling background and fill) happens before the switch(). That way it runs is every frame.

You could use a lot of if() statements instead of switch, but this might look cleaner.

When using switch, you do not need to include every case. If you want blank frames, you can just remove one or more of the cases.

If your loop length is 8, and you use cases outside the 0 - 7 range (say 33), those cases will not run.

Each case must end in break. When break is missing, the code for the next case is also evaluated.