# Scaling problem : newbie ahead :)
**URL:** https://discourse.processing.org/t/scaling-problem-newbie-ahead/26367
**Category:** Coding Questions
**Created:** [December 18, 2020, 2:11pm UTC](https://discourse.processing.org/t/scaling-problem-newbie-ahead/26367 "2020-12-18T14:11:39Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@galleon](https://discourse.processing.org/u/galleon)
#### Post date: [December 18, 2020, 2:11pm UTC](https://discourse.processing.org/t/scaling-problem-newbie-ahead/26367/1 "2020-12-18T14:11:39Z")
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.
```auto
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
```auto
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);
```
---
### Author:  [@MiguelSanches](https://discourse.processing.org/u/MiguelSanches)
#### Post date: [December 18, 2020, 2:57pm UTC](https://discourse.processing.org/t/scaling-problem-newbie-ahead/26367/2 "2020-12-18T14:57:14Z")
Hi @galleon
Welcome to the community! 🙂
Check the following link
> **[rectMode() / Reference](https://processing.org/reference/rectMode_.html)**
>
> Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted. The default mode is rectMode(CORNER), which inte…
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:
> [@Creating a clickable dynamic grid](https://discourse.processing.org/t/creating-a-clickable-dynamic-grid/26259/2):
>
> Hi @Reynaert98, This is a simple example that I made for better understanding. The main idea is the following: A card class represents a card, which has determined position and dimensions. To draw a card, I used a rectangle centered in x and y using the dimensions below. So I draw the rectangle and consider the spacing for the margin [image] 3) - By knowing the dimensions of each card I can know if the mouse is on top of the card (hover() method). 4) - An ArrayList of cards has as…
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
---
### Author:  [@galleon](https://discourse.processing.org/u/galleon)
#### Post date: [December 18, 2020, 3:10pm UTC](https://discourse.processing.org/t/scaling-problem-newbie-ahead/26367/3 "2020-12-18T15:10:29Z")
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.
---
### Author:  [@MiguelSanches](https://discourse.processing.org/u/MiguelSanches)
#### Post date: [December 18, 2020, 3:42pm UTC](https://discourse.processing.org/t/scaling-problem-newbie-ahead/26367/4 "2020-12-18T15:42:41Z")
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:
```auto
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!
---
### Author:  [@galleon](https://discourse.processing.org/u/galleon)
#### Post date: [December 18, 2020, 5:05pm UTC](https://discourse.processing.org/t/scaling-problem-newbie-ahead/26367/5 "2020-12-18T17:05:06Z")
Thanks a ton. That’s cristal clear.
Kind Regards
G.