Aliasing of curves

[pixelzoom]

In phetsims/qa#898 (comment), @liammulh reported aliasing on iPad. I'm not sure what we can do about this, since any diagonal line will always be somewhat more aliased. And I'm not clear about whether it's specific to iPad. Assigning to @veillette and myself for discussion.

---

These notes apply to:

Tester = LM
Device =
    (Seemingly has no name. Also has no cart sticker. Black with black case. Lion logo on the case.)
    iPad Model MR7F2LL/A
    iPadOS 16.3
    Safari 16.3 Mobile
Time = 1.5 hour

...
The circled line in the below screenshot is a bit "fuzzy". This happens to the curves/lines in this sim a lot on the iPad I was using to test.

...

[pixelzoom]

@liammulh Could you please comment on whether you see similar aliasing on other platforms? Or was this specific to iPad?

[liammulh]

I only saw it on the iPad.

[veillette]

CurveManipulationDisplayNode controls the display of the curve.

    const curve = new TransformedCurve( {
      numberOfPoints: 300,
      xRange: CalculusGrapherConstants.CURVE_X_RANGE,
      tandem: Tandem.OPT_OUT
    } );

I'll note that the number of points for this display is 300, which could be increased, without impacting performance much. However, since the curve shown above is linear, it may not address the problem, although it may be worth trying.

Also increasing the linewidth may reduce the aliasing.

[pixelzoom]

@veillette do you have an iPad to test the above hypotheses? If not, I can have a go at it.

[veillette]

@pixelzoom: No I dont. Yes, give it a go.

[pixelzoom]

Zooming in on the screenshot that @liammulh provided, it's easier to see the aliasing. I reproduced this on my iPad6.

[pixelzoom]

What's interesting is if I pinch-to-zoom on the iPad, the same curve looks nice and crisp:

[pixelzoom]

Adding more points does not improve things. With the default 300 points, I took a screenshot of the sim (macOS + Chrome), then zoomed in on that screenshot in macOS Preview:

Here's the same thing with 600 points, pretty much identical:

I seems unlikely that a larger lineWidth would improve things either.

[pixelzoom]

Using renderer: 'canvas' addressed the problem. I published 1.0.0-dev.19 with this fix.

Here's a screenshot from my iPad6:

Zooming in on that screenshot in macOS Preview:

Compared to zooming in on the screenshot that @liammulh provided:

And I confirmed that there's no noticeable difference (visual or performance) on other platforms.

Closing.