# The center of a rect() stroke

**URL:** <https://discourse.processing.org/t/the-center-of-a-rect-stroke/907>\
**Category:** Coding Questions\
**Created:** [June 12, 2018, 9:42pm UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907 "2018-06-12T21:42:32Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [June 12, 2018, 9:42pm UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/1 "2018-06-12T21:42:32Z")

</div>

Hi.  
Amplifying the image drawn with the code below, you will see a rectangle drawn with two ‘one-pixel-lines’ more, on the left and upper side of the rectangle, shown with the white lines, but just one-pixel-line on the right and lower side.  
When I use an not even strokeWeight like 5, it will draw three more pixels on the left side out of the rectangle and one pixel within, and on the right side I see drawn three inner pixels and one outside the rectangle.The upper and down side have exactly two pixel on inner and outside.  
Shouldn’t the rect() function be designed so that there is always the same number of pixels drawn outside and inside the rectangle on all sides? At the moment I have to do this manually to work in the exact boundary. Mutch more work!

```auto
void setup() {
  size(200, 200, P2D);
  strokeWeight(4);
  rect(50, 50, 50, 50);
  strokeWeight(1);
  stroke(255);
  line(50, 0, 50, 200);
  line(100, 0, 100, 200);
  line(0, 50, 200, 50);
  line(0, 100, 200, 100);
}

```

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [June 12, 2018, 9:47pm UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/2 "2018-06-12T21:47:30Z")

</div>

I believe this is renderer specific. What you’re seeing is a result of how Java2D implements stroke and fill.

For example change the `P2D` to `P3D` to see a different behavior.

It’s debatable whether the `rect()` function should have been designed a certain way. But my guess is you’re probably going to have to stick with your custom implementation. Maybe make your life a little easier by extracting the behavior into a class or function so you only have to do it once?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [June 12, 2018, 9:54pm UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/3 "2018-06-12T21:54:42Z")

</div>

I see no difference between none, P2D, or P3D.  
Coding has to be logic I think, and I do not see this in this function.

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [June 12, 2018, 9:56pm UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/4 "2018-06-12T21:56:53Z")

</div>

P2D:

![P2D](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/5ee12243cc86bc24694b6ce790534f05af62889c.png)

P3D:

![P3D](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/f143a910628a259943056216b8e7dd606dc0f16b.png)

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [June 12, 2018, 10:05pm UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/5 "2018-06-12T22:05:14Z")

</div>

P3D seems to be right. On my device in Android mode it isn’t! Could you try this in Android mode? I don’t have a PC near right now.

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [June 12, 2018, 10:12pm UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/6 "2018-06-12T22:12:30Z")

</div>

I don’t have a phone setup to do that, but I think it’s a bit moot. The point is that I believe this depends on your device and your renderer. It’s not Processing specifically doing anything. It’s up to the underlying renderer.

Processing could spend time and energy on making sure the stroke is the exact same on all renderers and devices, but in the grand scheme of things there are probably higher priority things for the (very small) team to focus on.

The nice thing is that Processing is open source, so if you think this is worth fixing, you can do that!

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [June 12, 2018, 11:20pm UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/7 "2018-06-12T23:20:59Z")

</div>

If I had the capability I would try this, but unfortunately I just started to learn some Java. But as you are saying it also depends on the device, then it is worst then I tought it was. Even if I write my own Class I have to find out wich type of devices will react differently.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [June 13, 2018, 12:55am UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/8 "2018-06-13T00:55:07Z")

</div>

I have fiddled around with the hint() function, and there  
parameter  
ENABLE\_OPTIMIZED\_STROKE  
ENABLE\_STROKE\_PERRSPECTIVE  
ENABLE\_STROKE\_PURE  
But I also do not see any differences

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 20, 2018, 8:00pm UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/9 "2018-06-20T20:00:18Z")

</div>

An even simpler way of understanding this is to look at this simple default behavior of `rect()` in JAVA2D with a one-line sketch:

```
rect(0, 0, width-1, height-1);

```

Notice how the way JAVA2D works relates to the frame of the sketch, and how it changes when strokeWeight changes. For example, with a different definition of the stroke location, a full-canvas rect would have an invisible stroke (it would appear outside the frame) – or it would have a hairline stroke, but changing the strokeWeight would have no effect (it would grow out, never in).

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 20, 2018, 8:16pm UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/10 "2018-06-20T20:16:24Z")

</div>

Hmm. Actually, this P3D stroke join behavior looks like a bug…?

```auto
void setup() {
  size(200, 200, P3D);
  strokeWeight(20);
  rect(50, 50, 50, 50);
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [June 21, 2018, 10:32am UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/11 "2018-06-21T10:32:40Z")

</div>

@jeremydouglass  
When you compare this with a 1 round border

> void setup() {  
> size(150, 200, P3D);  
> strokeWeight(20);  
> rect(50, 30, 50, 50);  
> rect(50, 120, 50, 50, 1);  
> }

you get this on my device:

 ![ImageRect](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/9d0e6166c5cc7a872d0d6af6c9a3a603443824ab.png)

Coming back to the first code; my fear is that it is also, like @Kevin said, device related.  
I need to ‘highlight’ cells in a grid with a 3 Weight stroke exactly within the cell without overdrawing the 1 Weight gridcell.  
I really would like see others testing this.  
Kevin’s code does not give a ‘correct’ dividing on my device.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 21, 2018, 4:26pm UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/12 "2018-06-21T16:26:24Z")

</div>

Here is what I see on Processing 3.3.6 (macOS 10.12.6):

```auto
void setup() {
  size(200, 200, P3D);
  strokeWeight(20);
  rect(50, 50, 50, 50);
}

```

 ![28%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/70792b59c40e222153cfe520631ca153ff98c141.jpg)

That lower right corner looks like a bug. I’ll update to 3.3.7 first, then report it if it isn’t already in issues.

**EDIT: I updated to 3.3.7, and there is no missing corner issue – everything looks good.**

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [June 21, 2018, 5:27pm UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/13 "2018-06-21T17:27:00Z")

</div>

@jeremydouglass  
I tried you code on my Windows 10 desktop now, instead of on my android tablet, and something weird happened, The rectangle is gray and flickering when using P2D or P3D.!! However I don not see that notch of your image but the same shape of my last image. The default mode works normal.  
I tested the first code also on my desktop in java mode and now it divides correctly,.  
PS Using P 3.3.7

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [June 22, 2018, 8:58am UTC](https://discourse.processing.org/t/the-center-of-a-rect-stroke/907/14 "2018-06-22T08:58:26Z")

</div>

> [@noel](#):
>
> The rectangle is gray and flickering when using P2D or P3D

The flickering can be stop by either calling noLoop() in setup or explicitly calling `draw()`. It is enough to have an empty body.

Related to the rect in P3D and Java mode, I get the same as what you reported. I am running on Win10 OS and P3.3.7. For Java2D I have a square with well defined corners. In P3D, I get all four corners trimmed. I do not observe the bug reported by jeremy.

Kf