Path does not fade out smoothly when sim speed is slow

[KatieWoe]

Test device
Dell
Operating System
Win 10
Browser
Chrome
Problem description
For phetsims/qa#505. This does happen in published version.
When the sim speed is set to slow, the path of an orbiting object does not fade out smoothly. Instead there is a noticeable line between the non-faded and faded parts. It does not seem to happen when speed is normal or fast, and if the bug is happening and you switch to normal or fast, the fade will gradually fix itself after a rotation or so. Much easier to see with a grey, rather than pink, path line.
Steps to reproduce

1. Go to the first screen
2. Set speed to slow.
3. Turn on path
4. Press play and observe after a full rotation

Visuals

Troubleshooting information:

!!!!! DO NOT EDIT !!!!!
Name: ‪Gravity and Orbits‬
URL: https://phet-dev.colorado.edu/html/gravity-and-orbits/1.2.0-dev.10/phet/gravity-and-orbits_en_phet.html
Version: 1.2.0-dev.10 2020-05-26 17:36:54 UTC
Features missing: touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36
Language: en-US
Window: 1536x722
Pixel Ratio: 2.5/1
WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium)
GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Vendor: WebKit (WebKit WebGL)
Vertex: attribs: 16 varying: 30 uniform: 4096
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32)
Max viewport: 32767x32767
OES_texture_float: true
Dependencies JSON: {}

[KatieWoe]

Here is what the yellow path looks like with the bug:

[KatieWoe]

May show up in fast? Bit hard to tell.

[samreid]

In discussion with @arouinfar, we agreed that since this occurs in the published version it will not block dev releases, but it should be investigated before RC.

[samreid]

This was a tricky one. The proposed solution has 2 parts:

• I changed the sampling algorithm so the fast/normal/slow take data points at the same rate. After this change, the paths look the same independent of speed.
• The thin line caps were creating a feathered look for the faded part of the tail. I adjusted the line cap and stroke accordingly, and it looks good in my testing.

@arouinfar and @KatieWoe can you please review?

[KatieWoe]

Normal and Slow fading look the same now, but the fading behavior is different than it was before, and the "edge" where it starts can be seen in both cases. I'll leave it up to @arouinfar if she wants to address.

[samreid]

the "edge" where it starts can be seen in both cases.

Here's how it looks on my side, let me know if you are seeing something different:

[KatieWoe]

Looks similar to what I'm seeing.

[arouinfar]

I can see the discontinuity in the fading path, but I had to look for it.

I think this is a minor artifact, and the Path is otherwise looking good. Let's leave it as-is @samreid.

[samreid]

I was able to see the discontinuity a little better on Firefox. Using that, I adjusted the stroke thickness scaling factor up a little bit. I tested on Chrome and Firefox and it looks good on both. @arouinfar or @KatieWoe do you mind double-checking on your platform?

[KatieWoe]

I do think this looks better on master now.

[arouinfar]

I think it's looking much better in master @samreid.

Not sure if this issue should be verified in the next QA cycle or if we can go ahead and close, so back to @samreid.

[samreid]

This seems safe to close, thanks!