# Ellipse Loop + Animation (raining color lines)

**URL:** <https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174>\
**Category:** Coding Questions\
**Created:** [November 8, 2023, 5:46pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174 "2023-11-08T17:46:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 8, 2023, 5:46pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/1 "2023-11-08T17:46:53Z")

</div>

Hi there!

I am trying to draw a lot of drops falling across the screen, from diferents heights. I can draw a loop with many drops and I can animate one drop, but I can not mix both 😅 could you please help me?

![Sin título](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/a/5a715b7af6da5a47a938dae7e5273dd72a5ef583.jpeg)

```auto
// state
float circleY = random(-100,0);
float circleX = random(width);

void setup() {
  size(500, 500);
  background(0);

}

void draw() {
  noStroke();
  
  for (int i=0; i<500; i+=50){
 
  // draw current frame based on state
  ellipse(circleX, circleY, 50, 50);

  // modify state
  circleY = circleY + 1;
  
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 8, 2023, 11:38pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/2 "2023-11-08T23:38:12Z")

</div>

> [@humano](#):
>
> `background(0);`

You need to repeat the line at start of draw()  
to delete the screen.

Otherwise you see lines instead of drops.

For multiple drops use array for x and y and speed and  
color.

4 arrays hold the data for all drops.

The data for drop 1 is in all arrays  
At slot 0

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 8, 2023, 11:58pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/3 "2023-11-08T23:58:30Z")

</div>

Remember that an animation inside of a for loop won’t work

Because draw() does update the screen only once at its end you can’t see the animation

Instead use the fact that draw loops automatically 60 times per second

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 9, 2023, 1:12pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/4 "2023-11-09T13:12:28Z")

</div>

thank you so much! I think that array for multiple drops is working, but array for colors is not, because it is only using brown. Could you please help me with that? And could you please tell me how increase speed of animation? In addition, do you know why the right corner is empty? Thanks!

```auto
float[] circleY = new float[25];
color[] cols = { 
  color( 179, 100, 100 ), color( 68, 100, 100 ), color( 303, 100, 100 ),
  color( 299, 100, 100 ), color( 276, 100, 100 ), color( 193, 100, 100 )
};

void setup() {
  size(500, 500);
  background(0);
  for (int i = 0; i < circleY.length; i++) {
    circleY[i] = random(-200,0);
  }
}
  

void draw() {
  int k=0;
  noStroke();
  fill(cols[k]);
  for (int i = 0; i < circleY.length; i++) {
    float circleX = width * i / circleY.length;
    ellipse(circleX, circleY[i], 25, 25);

    circleY[i]++;

    if (circleY[i] > height) {
      circleY[i] = 0;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 9, 2023, 2:34pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/5 "2023-11-09T14:34:36Z")

</div>

> [@humano](#):
>
> `fill(cols[k]);`

In your code, this line belongs into the for loop  
and with i, not k

You need to set the color before drawing the circle

Besides, because of the for loop you won’t see an animation as I tried to explain

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 9, 2023, 5:19pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/6 "2023-11-09T17:19:29Z")

</div>

but if I write that line before does not work anyway

```auto
float[] circleY = new float[25];

color[] cols = { 
  color( 179, 100, 100 ), color( 68, 100, 100 ), color( 303, 100, 100 ),
  color( 299, 100, 100 ), color( 276, 100, 100 ), color( 193, 100, 100 )
};

int k=0;

void setup() {
  size(500,500);
  background(0);
  fill(cols[k]);
  for (int i = 0; i < circleY.length; i++) {
    circleY[i] = random(-200,0);
  }
 }
  

void draw() {
  noStroke();
    for (int i = 0; i < circleY.length; i++) {
    float circleX = width * i / circleY.length;
    ellipse(circleX, circleY[i], 25, 25);

    circleY[i]++;

    if (circleY[i] > height) {
      circleY[i] = 0;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 10, 2023, 12:15am UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/7 "2023-11-10T00:15:26Z")

</div>

The line belongs into draw() before the circle command

fill(cols[i]);

Dont draw in setup () please

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 10, 2023, 1:01am UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/8 "2023-11-10T01:01:06Z")

</div>

thanks my friend. and why I receive this message? _ArrayIndexOutOfBoundsException: Index 6 out of bounds for length 6_

```auto
float[] circleY = new float[25];

color[] cols = { 
  color( 179, 100, 100 ), color( 68, 100, 100 ), color( 303, 100, 100 ),
  color( 299, 100, 100 ), color( 276, 100, 100 ), color( 193, 100, 100 )
};

void setup() {
  size(500,500);
  background(0);
  for (int i = 0; i < circleY.length; i++) {
    circleY[i] = random(-200,0);
  }
 }
  

void draw() {
  noStroke();
    for (int i = 0; i < circleY.length; i++) {
    float circleX = width * i / circleY.length;
    ellipse(circleX, circleY[i], 25, 25);
    fill(cols[i]);
    circleY[i]++;

    if (circleY[i] > height) {
      circleY[i] = 0;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 10, 2023, 1:03am UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/9 "2023-11-10T01:03:05Z")

</div>

Hello @humano ,

This may be of interest to you:

[![](https://img.youtube.com/vi/4JzDttgdILQ/maxresdefault.jpg "Creative Coding for Beginners - Full Course!") ](https://www.youtube.com/watch?v=4JzDttgdILQ)

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 10, 2023, 1:28am UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/10 "2023-11-10T01:28:51Z")

</div>

Really subtle! hahaha! oh my god…

I understand one array has 25 elements and the other just 6, so I guess that is the problem. But this array with colors is just something new for me, so I don’t know how to improve it. Sorry for the persistence with this, do you have any specific tutorial for that?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 10, 2023, 1:36am UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/11 "2023-11-10T01:36:57Z")

</div>

Try:

`i%6` where you use `i`

That will keep `i` between 0 and 5 to access colors in array.

It will at least run the code to see what it is doing.

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 10, 2023, 1:53am UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/12 "2023-11-10T01:53:58Z")

</div>

Yeah! It runs! Thank u so much for your patiente, I will try to make better questions… in the future 😅 😅 😅  
I see three colors now, how could I see six?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 10, 2023, 3:51am UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/13 "2023-11-10T03:51:16Z")

</div>

Always show your entire code so we can check it

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 10, 2023, 3:59am UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/14 "2023-11-10T03:59:51Z")

</div>

> [@glv](#):
>
> `i%6`

Do you have this?

This makes the color index start over with 0

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 10, 2023, 4:15am UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/15 "2023-11-10T04:15:47Z")

</div>

And try to get rid of the  
for loop

just say i++;  
if(i\>25)  
i = 0;

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 10, 2023, 6:11am UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/16 "2023-11-10T06:11:26Z")

</div>

Hello @humano,

> [@humano](#):
>
> I see three colors now, how could I see six?

You will see a nice sharp contrast between these six colors:

```auto
color[] cols = {color( 255, 0, 00 ), color( 255, 255, 0 ), color( 0, 255, 0 ),
                color( 0, 255, 255 ), color( 0, 0, 255 ), color( 255, 0, 255 )};

```

My earlier suggestion _was only intended for the color selection_:

```auto
fill(cols[i%6]);

```

Trying it elsewhere may also yield interesting results… experiment away!

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/b/ab4cc36b76d328327621e7309de1e442392ae5f5.png)

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 10, 2023, 12:29pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/17 "2023-11-10T12:29:59Z")

</div>

Yeah! Now I have 4 colours, as I wanted. But actually I wanted many purples, many pinks, many blues and many greens, so my final code has intervals on colours. How could I get that?

```auto
float[] circleY = new float[55];

color[] cols = { 
  color( random(102,153),random(0,102),255 ), color(random(204,255),random(0,204),255), 
  color(random(0,102),random(0,255),255), color(random(0,204), random(153,255),0)
};

int k=0;

void setup() {
  size(500,500);
  background(0);
  for (int i = 0; i < circleY.length; i++) {
    circleY[i] = random(-500,0);
  }
 }
  

void draw() {
  noStroke();
    for (int i = 0; i < circleY.length; i++) {
    float circleX = width * i / circleY.length;
    ellipse(circleX, circleY[i], 25, 25);
    fill(cols[i%4]);
    circleY[i]++;

    if (circleY[i] > height) {
      circleY[i] = 0;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 10, 2023, 2:36pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/18 "2023-11-10T14:36:12Z")

</div>

> [@humano](#):
>
> `fill(cols[i%4]);`

Here it should be 6, not 4

The line must be before ellipse command

* * *

Instead of using a predefined set of colors you can make a longer array and fill it with random colors in setup

(Then don’t use % anymore)

Advanced idea

additionally you can use the set you are having in your old version and choose a random color from it and then change this using random (add a value) or lerpColor

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [November 10, 2023, 3:23pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/19 "2023-11-10T15:23:04Z")

</div>

well I am trying something different with HSB color mode but again I don’t know how to give one different color to every ellipse

```auto
float[] circleY = new float[55];

void setup() {
  size(500,500);
  background(0);
  colorMode(HSB,360,100,100);
  for (int i = 0; i < circleY.length; i++) {
  fill(random(72,300),100,100);  
  circleY[i] = random(-500,0);
  }
 }
  

void draw() {
  noStroke();
    for (int i = 0; i < circleY.length; i++) {
    float circleX = width * i / circleY.length;
    
    ellipse(circleX, circleY[i], 25, 25);
    circleY[i]++;

    if (circleY[i] > height) {
      circleY[i] = 0;
    }
  }
}

```

And this is not working either

```auto
float[] circleY = new float[55];
color[] cols = color(random(72,330),100,100);

void setup() {
  size(500,500);
  background(0);
  colorMode(HSB,360,100,100);
  for (int i = 0; i < circleY.length; i++) {
  circleY[i] = random(-500,0);
  }
 }
  

void draw() {
  noStroke();
    for (int i = 0; i < circleY.length; i++) {
    float circleX = width * i / circleY.length;
    ellipse(circleX, circleY[i], 25, 25);
    fill(cols[i]);
    circleY[i]++;

    if (circleY[i] > height) {
      circleY[i] = 0;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 10, 2023, 3:49pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/20 "2023-11-10T15:49:09Z")

</div>

An online example which picks a color out of a palette via operator `%` module:  
`fill(PALETTE[idx = abs((idx + 1) % PENTA)]);`

> **[Sierpinski Pentagon \[Java\] - GoToLoop - OpenProcessing](https://openprocessing.org/sketch/955443)**

> **[% (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…

[Next page](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174.md?page=2)