#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Draw an amount of rectangles based on a variable

edited October 2016

Hi all,

I have a problem with drawing an amount of rectangles on the screen.

I have a variable where i declare the amount of rectangles Processing should draw on the screen, for now it is set to 3. If i change it to 4 i would like the program to draw 4 rectangles, every rectangle should have the same margin in between. If i change it to 5, it should draw 5 and so on.

I might be able to do this with an if-else-if construction but than i have to declare all new positions every time for all amounts.

So my question is if there is a simpler way to do this? Can i let Processing calculate the space in between and width of the rectangles?

Any help will be appreciated :) ``````int amountOfRects = 3;
int rectWidth = 100;

void setup(){
size(500,300);
}

void draw(){
rect(rectWidth/2, 50, rectWidth, 200);
rect(rectWidth+100, 50, rectWidth, 200);
rect(rectWidth*3+50, 50, rectWidth, 200);
}
``````
Tagged:

• You could use a `for` loop.

Shameless self-promotion: I wrote a tutorial on `for` loops in Processing available here.

You could also check out the reference or do a google search for a ton of resources.

• with n rectangles you have n * rectWidth plus n + 1 gaps.

so your gap size is (width - (n * rectWidth)) / (n + 1)

your 0th rectangle starts at gapSize and ends at gapSize + rectWidth

your 1st rectangle starts at gapSize + rectWidth + gapSize

in general your nth rectangle starts at gapsize + n * (rectWidth + gapSize)

(i've assumed the gap is equally spread between rectangles and before and after)

NB numbering starts at 0, like a for loop should.

I'm sure there's a cleaner way but this works:

``````int rectNum = 4;
int space = 10;

void setup() {
size(800, 400);
rectMode(CENTER);
}

void draw() {
background(255);
int rectSize = ((width-((rectNum+1)*space))/rectNum);

for (int i = 0; i < rectNum; i++) {
rect((rectSize+space)*i+(rectSize/2+space), height/2, rectSize, height/3);
}
}
``````
• @KevinWorkman Thanks for your tutorial, you wrote it very well and pointed me in the right direction. I spend some time practising and i got it working.