Ellipse Loop + Animation (raining color lines)

[humano]

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?

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

[Chrisir]

@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

[Chrisir]

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

[humano]

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!

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

[Chrisir]

@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

[humano]

but if I write that line before does not work anyway

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

[Chrisir]

The line belongs into draw() before the circle command

fill(cols[i]);

Dont draw in setup () please

[humano]

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

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

[glv]

Hello @humano ,

This may be of interest to you:

Creative Coding for Beginners - Full Course!

:)

[humano]

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?

[glv]

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.

:)

[humano]

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?

[Chrisir]

Always show your entire code so we can check it

[Chrisir]

@glv

i%6

Do you have this?

This makes the color index start over with 0

[Chrisir]

And try to get rid of the
for loop

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

[glv]

Hello @humano,

@humano

I see three colors now, how could I see six?

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

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:

fill(cols[i%6]);

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

Have fun!

:)

[humano]

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?

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

[Chrisir]

@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

[humano]

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

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

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

[GoToLoop]

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

% (modulo) / Reference