Make squares automatically

General Discussion Other

matiszz

in General Discussion • Other • 6 months ago

Hi!

I want to make a program which do squares automatically separated uniformly, but I want the squares have an animation (on the Y axis) and they appear on the X axis random.

I know how to make the animation and the random appear, but I don't know how to do they draw automatically (I could make lots of variables and lots of rect(), but it will be very tedious)

Thank you,

Matiszz

Replies(6)

v.k.

Re: Make squares automatically

6 months ago

Hi I think you need for loops...

something like:

int howManySquares = 10;// choose here
void setup() {
size(200, 200);
makeRects(0, 0, 200, 200, howManySquares);
}
void makeRects( int x, int y, int w, int h, int number) {
int h_size = w/number;
int v_size = h/number;
for (int i = 0; i < number; i++) {
for (int j = 0; j < number; j++) {
int pos_x = x + i*h_size;
int pos_y = y + j * v_size;
rect(pos_x, pos_y, h_size, v_size);
}
}
}

Re: Make squares automatically

6 months ago

I don't know what kind of animation you had in mind, but a typical beginner's animation is bouncing. This is a bounce example using an array and a for loop so that it makes rect()s bounce.

int numSquares = 200;
PVector[] position = new PVector[numSquares];
boolean[] goingDown = new boolean[numSquares];
void setup() {
size(600, 600);
fill(0, 64);
noStroke();
for (int i = 0; i < numSquares; i++) {
// Random position
position[i] = new PVector((int)random(width-50), (int)random(height-50));
// Randomly decide if going up or down
goingDown[i] = (random(1) > 0.5);
}
}
void draw() {
background(255);
for (int i = 0; i < numSquares; i++) {
// Move based on goingDown[]
if (goingDown[i]) position[i].y++;
else position[i].y--;
// Bounce when necessary
if (position[i].y == 0 || position[i].y == height-50) goingDown[i] = !goingDown[i];
rect(position[i].x, position[i].y, 50, 50);
}
}

matiszz

Re: Re: Make squares automatically

6 months ago

Wow!! Tanks!

But how can I do to make that the squares are equidistant on the Y axis? (For example, that they are separated 100 pixels?)

asimes

Re: Re: Make squares automatically

6 months ago

I gave them random values, the line that did that was here:

position[i] = new PVector((int)random(width-50), (int)random(height-50));

Because they all move at the same speed, giving them non-random values will preserve their relative distances if you assign it there. Here's an example with non-random values:

int numSquares;
PVector[] position;
boolean[] goingDown;
void setup() {
size(600, 600);
fill(0, 64);
noStroke();
numSquares = width/50;
position = new PVector[numSquares];
goingDown = new boolean[numSquares];
for (int i = 0; i < numSquares; i++) {
position[i] = new PVector(i*50, (i*50)%(height-50));
goingDown[i] = (random(1) > 0.5);
// Don't let the square escape the screen
if (position[i].y == 0) goingDown[i] = true;
if (position[i].y == height-50) goingDown[i] = false;
}
}
void draw() {
background(255);
for (int i = 0; i < numSquares; i++) {
if (goingDown[i]) position[i].y++;
else position[i].y--;
if (position[i].y == 0 || position[i].y == height-50) goingDown[i] = !goingDown[i];
rect(position[i].x, position[i].y, 50, 50);
}
}

v.k.

Re: Make squares automatically

6 months ago

in wich case?

matiszz

Re: Make squares automatically

6 months ago

Sorry, I think I'm not explained well. W hat I want is something like this:

float Xaxis = 200;
int Yaxis = 30;
void setup() {
size (400, 800);
}
void draw() {
background(255);
fill(0, 150, 0);
rect(Xaxis, Yaxis++, 190, 20);
}

But with lots (infinite) squares of the same size, that the only random variable is "Xaxis", that they are separated equidistantly one of each other and that they can put up to 5 squares in the x axis.

If you can make this, I will be infinitely grateful to you

Thanks,

Matiszz

(Sorry for my bad English)

Top Reply