Draw partly overlapping paths

[dabreegster]

In the LTN route planning tool, we display 4 routes at a time: Zooming in a bit, you can see some of the routes overlap, but then split off and maybe rejoin:

I find this visually confusing. An idea is to draw one thick line, but divide it into pieces per color when needed. Something like: So at first, red, blue, and green share the road. Red splits off and takes the full road. Green and blue continue and split by half, then they each branch out and take the full width. I swear I've seen this kind of wayfinding either in a large train station or maybe even a videogame.

It could be tricky to implement, but possibly fun. Not sure how, but maybe one thing to start with is splitting a Path into pieces based on overlap with a second Path. Maybe this would return something like:

path1: [(subset of path, shared or exclusive), (subset of path, shared or exclusive), ...] path2: [(subset of path, shared or exclusive), (subset of path, shared or exclusive), ...]

Maybe this operation should directly work off multiple inputs (3 or 4 paths), or maybe we could build it off pairs at a time. Then we could draw each path subset using trace and pick appropriate widths. When multiple paths overlap, I guess maybe we have to shift the polyline left or right and adjust the width. Not sure this approach is the most sensible, just an idea.

@jamesneb in case it's interesting

[jamesneb]

🥂 will take a crack at this over the weekend when I have free time away from my 9-5. Very interesting challenge :smile:

[BudgieInWA]

Check out this awe-inspiring visualisation by YUMBLtv in Cities Skylines. A comment tipped me off that he's using bus routes to create the coloured paths.

He also draws those intersection markings by hand using some mod. (You can see that the other intersections are handled much like abstreet).

[dabreegster]

Indeed very legible! https://youtu.be/BFuvKtYZ2YM?t=130 to avoid scrolling through the video.

[dabreegster]

I added imperfect support for intersections. We could make the connecting shape nicer, handle contraflow walking movements, and try to minimize cases when colors cross. But unless you look closely, I think this gets most of the job done.

[BudgieInWA]

Joining the ends together seems like the right thing to do! Draw each one with round endcaps, onto one layer, then make the result transparent?

[dabreegster]

Round endcaps could work... I think we can do better in the general case though, by making a polygon with 4 points that joins up the left and right endpoint of the thick road lines. Bit more state to stash in https://github.com/a-b-street/abstreet/blob/4f0b150d68754706f62f7d44300027c4dbea3492/map_gui/src/tools/draw_overlapping_paths.rs#L39. I just ran out of time to try this, but maybe I'll squeeze it in before the release today!

[dabreegster]

New changes -- some look great, others are a bit broken.

Biggest TODOs on this:

• don't draw the full road segment for the first/last segment; trim to the specific driveway we start or end at
• fix walking path connectivity, there's something funny happening with the contraflow movements probably

I'm out of time to iterate further on this, but help always welcome!

[dabreegster]

In poundbury, figure out this mess