Why the rectMode(CENTER) doesn't work for me?

p5.js Coding Questions
1

please format code with </> button * homework policy * asking questions

Screen Shot 2021-07-02 at 1.37.49 PM
Screen Shot 2021-07-02 at 1.37.49 PM1064×431 21.6 KB

I followed the tutorial and try to have my rectangle in the center but why it’s still not in the center?

1 Like
2

The center of the rectangle is at (300,100).

To put it in the center of the screen, you need to draw it at the position (200,200).

Try changing your rect() call to rect(200,200,50,80); and you’ll see how it’s position changes.

1 Like
3

but I want to use the rectMode attribute, so that I wouldn’t need to do the calculation. Do u have any ideas why my code rectMode(CENTER) didn’t work?

4

It DID work. It just didn’t do what you think it should.

Normally rectangles are draw so their CORNER is at the position you specify.

The position you have specified is (300,100). Either the center of the rectangle will be there, or the corner of it will be. If you want it to be at some other position, you need to specify that position instead!

function setup(){
  createCanvas(400,400);
}

function draw() {
  background(220,100,30);

  rectMode(CORNER);
  fill(200,0,0);
  rect(300,100,50,80);

  rectMode(CENTER);
  fill(0,200,0);
  rect(300,100,50,80);
  
  fill(0,0,200);
  rect(200,200,50,80);

}
1 Like
5

Yeah, it’s about the Center of the rectangle itself not the screen

but for the screen just use
width/2, height/2

2 Likes
6

Hello,

Processing resources (tutorials, references, examples, etc.) are available here:
processing.org

For starters:

I changed your category to p5.js

You can look up the p5.js resources here:

:)

1 Like
7

Welcome to the Processing Forum, @jexilo!

That’s an excellent principle for your coding in general, having p5.js do the calculation for you.

Following up on that principle, also consider this advice:

Putting it all together, you can do this:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220, 100, 30);
  rectMode(CENTER);
  rect(width / 2, height / 2, 50, 80);
}

Then, if you revise your code later on to change the canvas size, everything else will fall into place automatically. You will not need to change all the other numbers yourself. This would be especially handy if you were drawing multiple shapes. You could have your code use the canvas width and height to calculate positions and sizes of the shapes. If you change the canvas size, the shapes would be repositioned and rescaled accordingly.

This was edited 2x on July 2, 2021 to refine the above paragraph, and then to add the following:

Here’s another example:

function setup() {
  // try various canvas sizes ...
  createCanvas(200, 200);
  // createCanvas(100, 100);
  // createCanvas(600, 50);
  rectMode(CENTER);
  ellipseMode(CENTER); // the default
}

function draw() {
  background(220, 100, 30);
  // position and scale shapes based on canvas size 
  rect(width / 4, height / 4, width / 8, height / 4);
  rect(width * 3 / 4, height * 3 / 4, width / 8, height / 4);
  ellipse(width / 4, height * 3 / 4, width / 8, height / 4);
  ellipse(width * 3 / 4, height / 4, width / 8, height / 4);
}

shapes1

shapes2

shapes3

2 Likes