Visible spaces between squares

[TheEyeOfBrows]

Example:

Issue:

This affects all clocks whose numbers are drawn using squares (rect).

We're getting visible spaces between squares which are drawn side by side. The source examples have clean flat rectangles, so it would be nice to try and fix this.

Reference:

Aside:

There may be a trick in javascript/p5 to resolve this, maybe to do with anti-aliasing?
I've tried adding a stroke to the shapes, but then we loose the clean corners between shapes.

[Oripy]

I have the same issue with clock 3 using arcs. Did not find any reliable workaround.

[Merijn-DH]

noSmooth() can be used to disable anti-aliasing, but I tried doing adding this to the clock you mentioned but it had no effect.

[meiamsome]

One way you can fix this is to enlarge all of the shapes so that they actually overlap by a small amount so there's no possible gap to show through. The edges all line up nicely still but the corners will look a bit problematic. I guess it'll be a middleground between looking bad one way or another, if there's not a better fix.

You could also look at working out maximal rectangles you can draw to avoid this...
For instance, the 5 can be drawn as 6 rectangles - where the three bottom ones are obvious and the three top ones overlap one square with the other. Might be a pain to work out how to do that nicely - but there is only 12 characters.

[Merijn-DH]

See my solution for clock 5 in my pull request (#36).

[meiamsome]

Anyone want to implement this for the final couple of clocks with these issues (8, 12 and probably 7)?

[Merijn-DH]

Sure, as soon as I have time!

[meiamsome]

Sounds good, I just pushed in changes that let you view singular clocks, so it should be easier to check the clocks now (Click to enlarge)

https://codingtrain.github.io/12oclocks/#clock-07

[Merijn-DH]

I fixed 7 and 8. Clock 12 looks good in my browser.. maybe it is different for others?!

[meiamsome]

It's very subtle. Here's a picture on my screen:

This one's harder though, because they're partially transparent.

[Merijn-DH]

You're right, I can see in my browser as well. Since it's 2 am for me I'll fix it tomorrow unless someone else would be so kind to look into it :)

[waielal]

I might have a solution to this problem though I'm not sure if you'll like it or not.
I created a second font file that defines for every character the outline shapes.
This way we can use

// for each shape
beginShape();
for (...)
    vertex(v[i][0], v[i][1]);
endShape();

to draw the character gapless.
What do you think of this idea?

[meiamsome]

@waielal I had the same idea - but hadn't got around to implementing it - it should be great for the final clock, and maybe retrofitting some of the others if it's so desired, My idea was to just have the font defined as a function for each of the characters:

font2 = {
...
  "3": function(sketch) {
    // beginShape, vertex, endShape etc.
  }
...
}

And then use transformations and style changes to position it correctly. It's certainly workable, and would love seeing your take on it

[meiamsome]

I think that's all of them - or does 10 need fixing too?

[waielal]

10 also has some gaps. But less noticable than the others.

[meiamsome]

Fixed Via: #36, #42, #43. #45, #46
Thanks!