Add Gamut Comparison app

[jamesnw]

This provides a tool for comparing the gamut mapping algorithms.

It also adds rec2020 variations of the Edge Seeker, Raytrace, and Björn GMAs. These are in the Playground, but not the gradient tool.

https://deploy-preview-22--color-apps.netlify.app/gamut-mapping/compare/

[netlify]

✅ Deploy Preview for color-apps ready!

Name	Link
🔨 Latest commit	f8707d7
🔍 Latest deploy log	https://app.netlify.com/projects/color-apps/deploys/6849bee64e42030008ac409a
😎 Deploy Preview	https://deploy-preview-22--color-apps.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[svgeesus]

These are in the Playground, but not the gradient tool.

Not a blocker but it would be good to have those in the gradient tool as well. It is useful both for timing and also to compare small visual differences.

[jamesnw]

These are in the Playground, but not the gradient tool.

Not a blocker but it would be good to have those in the gradient tool as well. It is useful both for timing and also to compare small visual differences.

I added these to the Gradient tool, and added the ability to select which algorithms to include. By default, the enabled algorithms are ["clip", "css-rec2020", "raytraceRec2020", "bjornRec2020", "edge-seeker-rec2020", "chromium"], but this can be adjusted if a different set is preferred.

[facelessuser]

For the parts I'm interested in, this seems good.

[svgeesus]

@jamesnw could you rebase to deal with the conflicts?

[jamesnw]

@svgeesus Is this still useful? It measures a map-then-clip approach, and I'm not sure we're needing to do that. It also added method variants for p3 and rec2020 destinations, and I think more recent changes have removed that need.

[jamesnw]

For historical purposes, here's the results-

{
  "results": {
    "edgeToP3": {
      "L": 2.1287702641838293,
      "C": 0.2847519389043105,
      "H": 2.9206431962931583,
      "delta2000": 16.128638739553047
    },
    "edgeToSrgb": {
      "L": 3.511343637369053,
      "C": 0.3100712861580674,
      "H": 5.217291069916749,
      "delta2000": 18.518192708288446
    },
    "chromiumToP3": {
      "L": 2.3287731041342976,
      "C": 0.2793626195768413,
      "H": 3.302117273119641,
      "delta2000": 15.687675533118027
    },
    "chromiumToSrgb": {
      "L": 3.5058591762557634,
      "C": 0.30681319392247125,
      "H": 5.651658953304251,
      "delta2000": 18.223814710242067
    },
    "bjornToP3": {
      "L": 2.1316986743912514,
      "C": 0.2846791318195822,
      "H": 2.924528042780835,
      "delta2000": 16.119911281300084
    },
    "bjornToSrgb": {
      "L": 3.5143873327058386,
      "C": 0.31000283069595946,
      "H": 5.220806465507009,
      "delta2000": 18.509613001663222
    },
    "clipToP3": {
      "L": 7.02967696768644,
      "C": 0.23711502514828509,
      "H": 8.583357396793353,
      "delta2000": 16.256578380453917
    },
    "raytraceToP3": {
      "L": 2.1323116389301733,
      "C": 0.2846550948817263,
      "H": 2.9286557929572195,
      "delta2000": 16.119089262073565
    },
    "raytraceToSrgb": {
      "L": 3.514907803876242,
      "C": 0.30997775578721554,
      "H": 5.224038422775815,
      "delta2000": 18.509088955055102
    },
    "delta": 0.01
  },
  "count": 999999
}