[p5.js 2.0 Beta Bug Report]: Update image diff algorithm in snapshot tests to be less tolerant

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0 beta 1

Web browser and version

N/A

Operating system

N/A

Steps to reproduce this

I was just working on #7495, and found that the change I made to src/shape/custom_shapes.js line 398 did not cause existing visual tests to change:

- points.unshift(this.vertices.at(-1), prevVertex);
+ points.unshift(this.vertices.at(-1));

Snapshot tests should have low enough tolerance that this change would cause a test to fail. However, simply reducing the shiftThreshold or even switching to the mapbox pixelmatch package caused many false negative failures on CI. This is because rendering on different platforms is different enough that it's sometimes more than just what pixelmatch detects as an antialiasing difference (for example, sometimes rendered text is shifted a pixel down.) We want these to be acceptable differences.

I'm not sure what options we have here, but if anyone has other libraries they want to test, or updates to our custom diff code, I'd love to hear your ideas!