# Scaling problem : newbie ahead :)

Hello all,

I have started processing this morning even though I have a programming background.

I am trying to do a very simple thing a square in a square
This code is basically doing what I want.

``````  centerx = 250
centery = 250

noStroke();
// draw a (blue) rectangle which center is at centerx centery
w = 50;
h = 50;
tlx = centerx - w/2;
tly = centery - h/2;
fill('blue');
rect(tlx, tly, w, h, 10, 10, 10, 10);

// draw a second rectangle
w *= 0.75;
h *= 0.75;
tlx = centerx - w/2;
tly = centery - h/2;
noFill();
stroke('white');
strokeWeight(3);
rect(tlx, tly, w, h, 8, 8, 8, 8);
``````

but the round corner are not easy to scale so I decided to try an other approach and scale my rect.
I was expecting to see the second square in the middle of the other.
After banging my head on the wall I decided to ask for help â€¦ What am I missing here?
What would be the best way to repeat the same ensemble of shapes on a regular grid pattern ?

Thanks

``````  noStroke();
// draw a (blue) rectangle
w = 200;
h = 200;
fill('blue');
rect(0, 0, w, h, 10, 10, 10, 10);

// from now on - no Fill
noFill();

// draw a second smaller rectangle
// so let's assume s in ]0, 1[
s = 0.75;

stroke('white');
strokeWeight(3);
// w - s*s is the x-difference length between both rect
tx = (1-s)*w/2;
ty = (1-s)*h/2;
scale(s);
translate(tx, ty);
rect(0, 0, w, h, 10, 10, 10, 10);
``````

Hi @galleon

Welcome to the community!

If you define the rectMode to CENTER then all rectangles have their origin in the center, which allows you to draw the square within a square much easier!

Concerning the questions on

What would be the best way to repeat the same ensemble of shapes on a regular grid pattern ?

I would say to create a class of an object with this drawing and then repeat the pattern over a grid.
I wrote a similar code in this post on the forum:

Hope it helps! And let me know if you have any questions or doubts! I will try to explain or make a simpler example for you if needed

Best regards

Hi Miguel

Thanks for the tip about the rectMode to CENTER, it will get the job done.
I am nevertheless interested to understand where my flaw is in my very simple code - a simple translation should be able to do that simple job.

Cheers
G.

So letâ€™s go over the steps:

1. You draw a rectangle at corners (c1, c2), with dimensions (w1,h1) (width and height respectively)
2. The center of that same rectangle is the point (c1 + w1/2 , c2 + h1/2)
3. Letâ€™s say now that you want the inner rectangle to have dimensions w2, h2
4. To find the corner and maintain the same center you need to go -w2/2, -h2/2

Thus the corner of the rectangle would need to be
(c1 + w1/2 -w2/2 , c2 + h1/2-h2/2)

So the code became:

``````void setup() {
size(600, 600);
}
void draw() {
background(240);
noStroke();
// draw a (blue) rectangle
int w = 200;
int h = 200;
int c1 = 0;
int c2 = 0;

fill(0, 0, 255);
rect(c1, c2, w, h, 10, 10, 10, 10);

// from now on - no Fill
noFill();

// draw a second smaller rectangle
// so let's assume s in ]0, 1[
float s = 0.75;
//SO find the dimensions of width and height
float w2 = s * w;
float h2 = s * h;

stroke(255);
strokeWeight(3);
// w - s*s is the x-difference length between both rect
float tx = c1 + w/2 - w2/2;
float ty = c2 + h/2 - h2/2;
//scale(s);
translate(tx, ty);
rect(0, 0, w2, h2, 10, 10, 10, 10);
}
``````

Result:

Best regards!

Thanks a ton. Thatâ€™s cristal clear.
Kind Regards
G.