How do I make it fall line by line?

import processing.sound.*;

SoundFile song;
int n;
Square[] rect;
float x2 = 0;
//float noiseScale = 0.0002;

void setup() {
size(400, 400);

song = new SoundFile(this, “kgf.mp3”);
song.loop();

n = 30;
rect = new Square[n];

for (int i=0; i<n; i++) {
rect[i] = new Square(i);
}
}

void draw() {
background(0);

for (int i=0; i<n; i++) {
rect[i].display();
}
}

class Square {

Square(int index) {
}

void display() {

float x1 = 0;
float x = 0, y = 0;
fill(random(255), random(255), random(255));

for (int i = 0; i < width; i++) {
//stroke(random(255));
//strokeWeight(1);

rect(i*30, noise(x1, x2)*300, 10, 10);
x1 += map(i, 0, width, 0, 200);

frameRate(10);
}
for (int j = 0; j < 20; j++) {
x2 += map(j, 0, height, 0, 9);
}
}
}

it would be great if you can help do some desginning like more creative work? Thanks

I know nothing of processing but from perusing the docs …

The draw() function is called every fraction of a second. To move your squares, you want to change their position in the draw() function.

E.g. something like:

void draw() {
background(0);

for (int i=0; i<n; i++) {
rect[i].display();
rect[i].movedown();
}

where “movedown()” is a function you write to move the square’s position. So the next time draw() is called, the rect[].display() will draw them at the new position.

You might read/view some tutorials on animation in processing for more ideas.