Problem with seams between shapes

anon1342

When I make shapes of the same color closely adjacent to one another, there is a white seam between them. For example:

void setup(){ size(128, 92); background(255, 255, 255); noStroke(); fill(0); noLoop(); smooth(4); } void draw(){ int x = 20; int y = 20; int k = 32; triangle(x, y + (k * sqrt(3)), x + k, y, x + k * 2, y + (k * sqrt(3))); triangle(x + k, y, x + k * 3, y, x + k * 2, y + (k * sqrt(3))); }

produces two black triangles in which you should be able to see a seam between them unless it's a problem exclusive to my terrible computer. I noticed that if 'smooth(0)' then the seam is gone but, I don't want the jaggies on my triangles. The only possible solution I know of so far is to make my own shapes with PShape but, I wanted to see if anyone had an easier solution to this problem. Thanks.

GoToLoop

Gotta have at least 4 spaces to get auto-format.
I use CTRL+] within Processing's IDE for it:

// forum.processing.org/two/discussion/83/problem-with-seams-between-shapes

size(128, 92);
noLoop();
smooth(4);
noStroke();
fill(0);
background(-1);

final int x = 20, y = 20, k = 32;
final float kq = k*sqrt(3);

triangle(x,       y + kq,
         x + k,   y,
         x + k*2, y + kq);

triangle(x + k,   y,
         x + k*3, y,
         x + k*2, y + kq);

gregab

I'm seeing the same effect on my machine as well (a perfectly modern retina macbook pro). However it doesn't occur with rect() or ellipse(), just with triangle().

anon1342

background(-1) works just fine (white background) even though that seems to be artistic freedom added by GoToLoop, in my original code I used background(255, 255, 255). I tried your suggestion with no noticeable change. This was on java mode by the way, I haven't tested javascript mode yet. So far I have a hunch that this has something to do with antialiasing. I also got this same problem when I was doing some creative coding in python before I knew about processing if that's any help.

EDIT: I tried javascript mode and no difference either.

EDIT2: I just realized that adobe products also have this problem except they address it by "snapping" the shapes together to form a single shape. Looks like I'm going to have to write a snapping library. Alternatively I sort of solved my problem by just moving the triangles a pixel closer to one another but that just makes the triangle points stick out and the seam is still barely visible under high zoom.

GoToLoop

-1 or #FFFFFF is the actual true storage value of color white. (~~)

koogs

it's anti-aliasing the edges of the triangles, blending them with white to make them look smoother. but this causes a problem when triangles join - the line on the join is fainter than the rest.

you used to be able to get rid of this by turning off smooth() which, of course, made the outlines look rougher...