Scaling problem : newbie ahead :)

Processing Coding Questions
1

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 :slight_smile:
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);

image
image630×604 3.52 KB

2

Hi @galleon

Welcome to the community! :slight_smile:

Check the following link

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! :smiley:

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 :slight_smile:

Best regards

3

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.

4

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:

image
image601×608 2.36 KB

Best regards!

5

Thanks a ton. That’s cristal clear.
Kind Regards
G.