# Animation with 5 balls

**URL:** <https://discourse.processing.org/t/animation-with-5-balls/13413>\
**Category:** Coding Questions\
**Created:** [August 16, 2019, 11:58am UTC](https://discourse.processing.org/t/animation-with-5-balls/13413 "2019-08-16T11:58:57Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Francisco](https://avatars.discourse-cdn.com/v4/letter/f/eb9ed0/32.png) [@Francisco](https://discourse.processing.org/u/Francisco)\
**Post date:** [August 16, 2019, 11:58am UTC](https://discourse.processing.org/t/animation-with-5-balls/13413/1 "2019-08-16T11:58:57Z")

</div>

I have tried this code to iterate an array in a circular way and assign the y values to five circles. But I suspect it is not the most efficient way. Are there other ways to do it?

```auto
int[] secuencia = {0, 5, 10, 15, 20, 25, 20, 15, 10, 5};
int contador = 0;

void setup(){
  size(200, 100);
  frameRate(30);
}

void draw(){
  background(200);
  fill(255, 0, 128);
  noStroke();
  for(int i = 0; i < 5; i++){
    if((contador-i)<0)
      ellipse(40+i*30, 50 - secuencia[contador - i + secuencia.length], 10, 10);
    else
      ellipse(40+i*30, 50 - secuencia[contador - i], 10, 10);
  }
  if(contador == (secuencia.length - 1))
    contador = 0;
  else
    contador++;
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 16, 2019, 12:44pm UTC](https://discourse.processing.org/t/animation-with-5-balls/13413/2 "2019-08-16T12:44:21Z")

</div>

other yes, efficient ? BUT MORE FUN

```auto
int k=0,km = 5;

void setup() {
  size(300, 100);
  frameRate(5);
  println("use: mouseX and mouseY");
}

void draw() {
  background(200);
  fill(255, 0, 128);
  noStroke();
  for (int i = 0; i < 10; i++) circle(40+i*25,50+make_k(),10);
}

int make_k() {
  k += km;
  if ( k > mouseX/6) km= -mouseY/10;
  if ( k <-mouseX/6 ) km = mouseY/10;
  return k;
}

```

---

<div class="post-metadata">

**Author:** ![Francisco](https://avatars.discourse-cdn.com/v4/letter/f/eb9ed0/32.png) [@Francisco](https://discourse.processing.org/u/Francisco)\
**Post date:** [August 16, 2019, 10:31pm UTC](https://discourse.processing.org/t/animation-with-5-balls/13413/3 "2019-08-16T22:31:45Z")

</div>

I needed a spreadsheet to understand what was happening. Converts continuous values given by mouseX and mouseY into discrete values, and change sign periodically. Amazing! I liked it a lot! I did not understand why sometimes the balls stopped, but it seems that it is because the series of data of a cycle coincides with the number of balls, therefore it reassigns the same values to the same balls.

Fantastic!

I’ll keep it. Thank you.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 17, 2019, 12:06am UTC](https://discourse.processing.org/t/animation-with-5-balls/13413/4 "2019-08-17T00:06:28Z")

</div>

sorry, should have been more user friendly  
( i like you used a spread sheet BUT try)

```auto
int k=0,km = 5;
boolean diagp = true;

void setup() {
  size(300, 100);
  frameRate(5);
  println("use: mouseX and mouseY");
}

void draw() {
  background(200);
  fill(255, 0, 128);
  noStroke();
  for (int i = 0; i < 10; i++) circle(40+i*25,50+make_k(i),10);
  if ( diagp ) println("");
}

int make_k(int i) {
  k += km;
  if ( diagp ) println("i "+i+" k "+k+" km "+km+" mouseX "+mouseX+" mouseY "+mouseY);
  if ( k > mouseX/6) km= -mouseY/10;
  if ( k <-mouseX/6 ) km = mouseY/10;
  return k;
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 17, 2019, 6:35pm UTC](https://discourse.processing.org/t/animation-with-5-balls/13413/5 "2019-08-17T18:35:29Z")

</div>

> [@Francisco](#):
>
> iterate an array in a circular way

Use %.

> **[% (modulo) / Reference](https://processing.org/reference/modulo.html)**
>
> Calculates the remainder when one number is divided by another. For example, when 52.1 is divided by 10, the divisor (10) goes into the dividend (52.1) five times (5 \* 10 == 50), and there is a remain…

In two places:

1. to wrap your counter around every time it gets longer than the sequence length.
2. to wrap your values counter+1, counter+2, counter+3… around any time they get longer than the sequence length.

This gets rid of both of your if/else blocks – you don’t need to check if the numbers are longer than secuencia.length; they never are.

```auto
int[] secuencia = {0, 5, 10, 15, 20, 25, 20, 15, 10, 5};
int contador = 0;

void setup(){
  size(200, 100);
  frameRate(30);
}

void draw(){
  background(200);
  fill(255, 0, 128);
  noStroke();
  for(int i = 0; i < 5; i++){
    ellipse(40+i*30, 50 - secuencia[(contador+i)%secuencia.length], 10, 10);
  }
  contador = (contador+1)%secuencia.length;
}

```

---

<div class="post-metadata">

**Author:** ![Francisco](https://avatars.discourse-cdn.com/v4/letter/f/eb9ed0/32.png) [@Francisco](https://discourse.processing.org/u/Francisco)\
**Post date:** [August 20, 2019, 4:09pm UTC](https://discourse.processing.org/t/animation-with-5-balls/13413/6 "2019-08-20T16:09:55Z")

</div>

Very ingenious and more efficient than using conditionals.

Thank you.