# 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:** 10\
**Page:** 2

<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:10pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/21 "2023-11-10T16:10:44Z")

</div>

You need the color array still

Define it like the other array before setup

Fill it like the other array in setup

USE it with fill() in draw

---

<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, 4:18pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/22 "2023-11-10T16:18:37Z")

</div>

I really don’t understand what I have to do in setup about the array color, sorry

```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:** ![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, 5:23pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/23 "2023-11-10T17:23:39Z")

</div>

> [@humano](#):
>
> ```auto
> color[] cols = color(random(72,330),100,100);
> 
> ```

**Before** setup just say

`color[] cols = new color[25];`

Lile you did with circleY

**In setup** say cols[i]= color(random(255),  
random(255),  
random(255)); // Lile you did with circleY

So you define the array and  
fill it with data (store data)

You know separation of preparing the data and using it

the actual fill() command only works when you draw something, not anywhere else

So in draw() say fill(cols[i]);

That’s the basic concept, **write and understand this first**

Then you can return to setup and improve the color selection there.  
Instead of random you could use a predefined  
color list and then add a small random value to it - see gotoloops post.

---

<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, 6:23pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/24 "2023-11-10T18:23:07Z")

</div>

like that? But why i cannot be resolved to a variable?

```auto
float[] circleY = new float[55];
color[] cols = new color[25];

void setup() {
  colorMode(HSB,360,100,100);
  cols[i]= color(random(72,330),100,100);
  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]);
    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, 6:29pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/25 "2023-11-10T18:29:35Z")

</div>

Before setup both arrays must be of the same  
size. They are parallel and each slot with the same  
index is for the same circle

**In setup():**  
Also the line with i belongs into the for loop  
because we want to set each slot, we need  
it inside the for loop

---

<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, 6:30pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/26 "2023-11-10T18:30:45Z")

</div>

When you are unsure about any of this

see [Arrays / Processing.org](https://processing.org/tutorials/arrays)

---

<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, 6:42pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/27 "2023-11-10T18:42:15Z")

</div>

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

In draw this belongs before the ellipse command

- not after it

When you reset circleY instead of using 0, you can say  
random(-300,0)

---

<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, 8:38pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/28 "2023-11-10T20:38:26Z")

</div>

oook! Let’s keep it simple, maybe this version is more than enough for my level. But I can see that some ellipses are on top of the animation of the adjacent ellipse, as you can see on the picture. So I guess that I could avoid that if there was a distance of 25 px between ellipses. How could I do that having this random positions?

> ```
> circleY[i] = random(-500,0);
> 
> ```

 ![scrn](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/c/9c7bffbeb5334abe67703a38f5443792c7ecdc96.png)

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

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 )};

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%6]);
    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 11, 2023, 12:39am UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/29 "2023-11-11T00:39:54Z")

</div>

> [@humano](#):
>
> `float circleX = width * i / circleY.length;`

Here you define the X

Change this code to

`floath circleX = width * i / (circleY.length*3);`

Or whatever, then some of the lines will be outside the screen I guess

---

<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 11, 2023, 1:03pm UTC](https://discourse.processing.org/t/ellipse-loop-animation-raining-color-lines/43174/30 "2023-11-11T13:03:41Z")

</div>

Hello @humano,

Something to try…

Scrutinize this code before running it (added to your code) and understand what it is doing:

```auto
void draw() {
  //background(0); // Try with and without this!
  //noStroke();
    for (int i = 0; i < circleY.length; i++) {
    float circleX = width * i / circleY.length;
    
    //ellipse(circleX, circleY[i], 25, 25);
    //fill(cols[i%6]);
    
    stroke(cols[i%6]);
    strokeWeight(20);
    line(circleX, 0, circleX, circleY[i]);  
    
    circleY[i]++;

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

```

Try it:

- with and without the `background()`.
- a different `strokeWidth()`
- Anything else that comes to mind… `:)`

Also consider:

- initializing an array of colors for each line.
- change the color of that line (array above) in the same `if()` statement that resets `circleY[i]` to 0;

All these steps (forward, backwards, sideways) in the learning process will give you options and help you progress to you final vision.

`:)`

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