# Centered dot not centered?!

**URL:** <https://discourse.processing.org/t/centered-dot-not-centered/5077>\
**Category:** Processing for Android\
**Created:** [November 1, 2018, 2:12am UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077 "2018-11-01T02:12:05Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![dtmr](https://avatars.discourse-cdn.com/v4/letter/d/4da419/32.png) [@dtmr](https://discourse.processing.org/u/dtmr)\
**Post date:** [November 1, 2018, 2:12am UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077/1 "2018-11-01T02:12:05Z")

</div>

The code below renders rectangular checkboxes: Dots centered in frames. I think the code should produce a symmetrical result (prefectly centered dot; equal distance between frame and dot on all sides) but it doesn’t:

![example](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/dae17162e143d0414f722b5968d637fb98b87286.png)

This happens under Windows with Processing 3/Java 8 (it seems ok on my Android device, which has higher pixel density). Is this my mistake or an issue of Processing?

```auto
// distance between frame and dot (on all sides of dot), here 1/5 of font height

int dot_spacing = Font_H / 5;  

// calculate position and width of dot (height == width)

int dot_x = X_Checkbox + dot_spacing;
int dot_w = H_Checkbox - dot_spacing - dot_spacing;

// checkbox frame

stroke(...);
noFill();
rect (X_Checkbox, y, H_Checkbox, H_Checkbox);

// checkbox dot

noStroke();
fill (Palette_ARGB[Palette][Legend_PenFG]);
rect (dot_x, y + dot_spacing, dot_w, dot_w);

```

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 1, 2018, 2:22am UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077/2 "2018-11-01T02:22:53Z")

</div>

Numbers would help a bit, but i’ll just make them up.  
Lets say the fontH is 10, x\_Checkbox = 10, H\_Checkbox = 10 and y = 10:

dot\_x = 10 + 2 = 12;  
dot\_w = 10 - 2 - 2 = 6;  
then :  
rect(10, 10, 10, 10);  
rect(12, 12, 6, 6);  
which results in the dot being 2 dist from the left and top, but 4 from right and bottom.

Just remove one from the 2 - dot\_spacings s and it should be fine.

---

<div class="post-metadata">

**Author:** ![Eeyorelife](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@Eeyorelife](https://discourse.processing.org/u/Eeyorelife)\
**Post date:** [November 1, 2018, 2:25am UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077/3 "2018-11-01T02:25:14Z")

</div>

Please provide a runnable sketch.  
It is impossible for us to know why your checkmarks and checkboxes are not lining up when we don’t know the value of a single variable.

But if you use rectMode(CENTER), they should be lining up perfectly.

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 1, 2018, 2:36am UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077/4 "2018-11-01T02:36:03Z")

</div>

They don’t line up because the math wasn’t right 😅

---

<div class="post-metadata">

**Author:** ![dtmr](https://avatars.discourse-cdn.com/v4/letter/d/4da419/32.png) [@dtmr](https://discourse.processing.org/u/dtmr)\
**Post date:** [November 1, 2018, 2:44am UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077/5 "2018-11-01T02:44:04Z")

</div>

> rect(10, 10, 10, 10) … rect(12, 12, 6, 6) … which results in the dot being 2 dist from the left and top, but 4 from right and bottom

I don’t get the explanation. The values seem correct to me. The frame is 10x10 and the dot is 6x6. That means there should be 2 pixels on all sides of the dot (including the outer frame), hence 2 pixel offset to coordinates of outer frame (10 + 2)?!

> if you use rectMode(CENTER),

I use the default mode, CORNER (there is more stuff in my app to render near those boxes).

> Please provide a runnable sketch

Okay…

```auto
void setup() { }

void
draw()
{
    int dot_spacing = 2; // distance between frame and dot (on all sides of dot)
    int X_Checkbox = 10;
    int Y_Checkbox = 10;
    int H_Checkbox = 10; // width = height
    
    // calculate position and width of dot (height == width)
    
    int dot_x = X_Checkbox + dot_spacing;
    int dot_w = H_Checkbox - dot_spacing - dot_spacing;
    
    // checkbox frame
    
    stroke(0);
    noFill();
    rect (X_Checkbox, Y_Checkbox, H_Checkbox, H_Checkbox);
    
    // checkbox dot
    
    noStroke();
    fill (0);
    rect (dot_x, Y_Checkbox + dot_spacing, dot_w, dot_w);
}

```

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 1, 2018, 2:53am UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077/6 "2018-11-01T02:53:20Z")

</div>

Yeah, you’re right… I just don’t seem to get used to rect taking x,y,w,h, but think its formX, fromY, toX, toY… sorry 😅

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 1, 2018, 2:57am UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077/7 "2018-11-01T02:57:48Z")

</div>

Well, to solve your problem, just add +1 to dot\_w.  
The code is right and it executes right. The problem lies in how the pixels are displayed from left to right.

---

<div class="post-metadata">

**Author:** ![vincedovy](https://avatars.discourse-cdn.com/v4/letter/v/7feea3/32.png) [@vincedovy](https://discourse.processing.org/u/vincedovy)\
**Post date:** [November 1, 2018, 3:28am UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077/8 "2018-11-01T03:28:31Z")

</div>

You either need to stroke both rectangles or stroke neither. The stroke changes the size of the rectangle.

Try the following:

```auto
    strokeWeight(5);
    stroke(0);
    noFill();
    rect (X_Checkbox, Y_Checkbox, H_Checkbox, H_Checkbox);
        
    fill(255);
    noStroke();
    rect (X_Checkbox, Y_Checkbox, H_Checkbox, H_Checkbox);

```

You’ll see that the 2nd rectangle does not completely cover the 1st rectangle, even though they are the same size.

So in your code, it will work correctly if you comment out the noStroke(); line.

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 1, 2018, 3:47am UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077/9 "2018-11-01T03:47:14Z")

</div>

Or if you need stroke you’ll have to add the stroke size to dot\_x. Note that stroke(0) still is one pixel in size. So you’ll have to add strokeWeight + 1 to dot\_x to get the right size.

---

<div class="post-metadata">

**Author:** ![dtmr](https://avatars.discourse-cdn.com/v4/letter/d/4da419/32.png) [@dtmr](https://discourse.processing.org/u/dtmr)\
**Post date:** [November 1, 2018, 11:10am UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077/10 "2018-11-01T11:10:06Z")

</div>

> will work correctly if you comment out the noStroke(); line.

This centers the dot. Unfortunately the dot gets a weird 3D effect if noStroke() is omitted (and if rendering with alpha is used). Enlarged example:

![example](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/dcc27b85d318ff8137e35d584b0deadad0d1680e.png)

```auto
void setup() {}

void
draw()
{
    int dot_spacing = 3; // distance between frame and dot (on all sides of dot)
    int X_Checkbox = 10;
    int Y_Checkbox = 16;
    int H_Checkbox = 16; // width = height

    background(255);
    
    // calculate position and width of dot (height == width)
    
    int dot_x = X_Checkbox + dot_spacing;
    int dot_w = H_Checkbox - dot_spacing - dot_spacing;
    
    strokeWeight(1.1);
    
    // checkbox frame
    
    stroke(0, 64);
    noFill();
    rect (X_Checkbox, Y_Checkbox, H_Checkbox, H_Checkbox);
    
    // render dot
   
    stroke(0, 64);
    fill (0, 64);
    rect (dot_x, Y_Checkbox + dot_spacing, dot_w, dot_w);
}

```

I thought I could fix this with a fully transparent stroke for the dot’s rect but then the dot is off-center again.

> you’ll have to add the stroke size to

If I fiddle with the coordinates and widths until it’s right under Windows, it’s wrong under Android. Under Android, my original code leads to a perfect result. I guess I’ll have to use platform-specific kludges.

---

<div class="post-metadata">

**Author:** ![vincedovy](https://avatars.discourse-cdn.com/v4/letter/v/7feea3/32.png) [@vincedovy](https://discourse.processing.org/u/vincedovy)\
**Post date:** [November 1, 2018, 4:13pm UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077/11 "2018-11-01T16:13:34Z")

</div>

I guess I am more concerned that it operates differently under Android versus Windows, even though both are Java. I wonder then about p5js and python as well. This is undoubtedly due to differences in the underlying graphics packages the implementations use. I would recommend filing a bug report.

---

<div class="post-metadata">

**Author:** ![dtmr](https://avatars.discourse-cdn.com/v4/letter/d/4da419/32.png) [@dtmr](https://discourse.processing.org/u/dtmr)\
**Post date:** [November 1, 2018, 8:37pm UTC](https://discourse.processing.org/t/centered-dot-not-centered/5077/12 "2018-11-01T20:37:11Z")

</div>

If a grey rectangle is rendered on a white background, some edges stay sharp but some get smoothed - they do not get rendered equally (as one would expect?):  
 ![smoothing](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5aa803e94eede5a124db58fba98baf0c001c08a4.jpeg)  
With this kind of asymmetry in the filled rect() (but not in the frame), it seems impossible to achieve pixel-perfect alignment. I’ll try to use an image for the checkbox and scale it to the desired size.