Ellipse Loop + Animation (raining color lines)

Processing Coding Questions
21

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

22

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

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

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.

24

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

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

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

26

When you are unsure about any of this

see Arrays / Processing.org

27

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)

28

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
scrn496×511 12.6 KB

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;
    }
  }
}
1 Like
29

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

30

Hello @humano,

Something to try…

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

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.

:)