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

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

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

1 Like

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

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?

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

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

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

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);
}
``````

2 Likes