wip: clip pipes to tile polygons

[gordonwoodhull]

This is a work-in-progress fix for #91 rendering glitches on iOS.

iOS does not draw line ends correctly for the purpose of drawing pipes, never mind when stroke-linejoin and/or transformations are involved.

There were some proposed extensions to SVG to fix all this, but the advice I have read is that you can do most of what you want to do with clipPath.

So here is a first attempt. We generate the clip polygon the same as the tile path, except without subtracting border_width from the radius. Right now it is also adding half a border width to the radius because I was still seeing 1px of grey on iOS without it.

We also extend the pipes by 1.2 - probably more than needed, but we need a little stretch because iOS does not always draw all the way.

Before/after 📷 🧵

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
hexapipes	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 12, 2023 5:27am

[gordonwoodhull]

Etrat before / after on Firefox iOS

There is still a very thin hairline edge drawn, especially on diagonals; sometimes it looks looks like an anti-aliasing glitch and sometimes (as here) it looks like there is still 1px and might benefit from greater radius.

[gordonwoodhull]

Cube grid before

After it's a little bit off, but much better than it was.

[gordonwoodhull]

Rendering is almost flawless in Firefox on Android, seems to have anti-aliasing edge though.

[gordonwoodhull]

Needless to say, I'm looking at this because I think it could help with uniform pipe widths for penrose. But it would be great to fix the iOS rendering issues too.

[gordonwoodhull]

Again almost flawless on Firefox/macOS, just the thinnest hair:

All displays are high-resolution; I haven't tested this in low res yet.

[gordonwoodhull]

Since the clip paths are relative to the tile coordinate, we don't really need one clipPath for every tile.

An easy way to share them is just to memoize the clip paths. It would be nicer for debugging if the grid labeled them so that the ids are meaningful.

[gordonwoodhull]

Not sure why in opened a PR for this so early, guess I was just excited that it worked.

Next week maybe I'll try putting it under a flag so it can be active only for iOS and for grids that need it.

Personally I prefer the hairline to the smudge but that's just my opinion.

[gordonwoodhull]

I'm closing this because it needs a lot more work, as described above. Hope to return to this later.