Same setup produces different results in Safari/Chrome

[etwa4650]

for https://github.com/phetsims/QA/issues/322 Test Device Jordan

Operating System MAC OS 10.14.5

Browser

Chrome/Safari

Problem Description

With the same exact inputs, the resulting image looks different in different browsers, and behaves differently when rotated.

Steps to Reproduce

1: On both Chrome and Safari, go to the "Diffraction" screen 2: Set Wavelength to 695nm 3: Set Height to 0.08 mm 4: Set the diffraction cutout as the girl logo 5: Set the rotation to 90 degrees 6: Rotate freely to view different behavior in each browser

Visuals

This is my view for Safari:

This is my view for Chrome:

And I linked a screen recording the of the different behavior during rotation below. The image seems to change more dramatically on Safari

https://drive.google.com/open?id=1vURGuvxAkxGQ3inKT30KM3LAe2UobDeZ

[KatieWoe]

I did a quick check on Win 10. Firefox and Edge both act more like safari.

[KatieWoe]

It looks like chrome is fading towards the edges more. Not sure which is correct behavior.

[samreid]

The fft is giving different results on chrome and safari. Here is the diagonal:

Index: js/diffraction/model/DiffractionModel.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- js/diffraction/model/DiffractionModel.js    (revision edab1c43150138e82715f99f4a6abc5e0a02af0e)
+++ js/diffraction/model/DiffractionModel.js    (date 1560808994000)
@@ -64,7 +64,7 @@
       ];

       // @public - selected aperture type, which is in essence the "scene" for this screen.
-      this.sceneProperty = new Property( this.ellipseScene, {
+      this.sceneProperty = new Property( this.wavingGirlScene, {
         validValues: this.scenes
       } );

@@ -146,6 +146,7 @@
     // which now contains frequency (ωx, ωy ) = (0, 0), moves to the center of the image. And you probably want to
     // display pixel values proportional to log(magnitude) of each complex number (this looks more interesting than just
     // magnitude). For color images, do the above to each of the three channels (R, G, and B) independently.
+    const diag = [];

     for ( let row = 0; row < MATRIX_DIMENSION; row++ ) {
       for ( let col = 0; col < MATRIX_DIMENSION; col++ ) {
@@ -155,8 +156,12 @@
           ( col + MATRIX_DIMENSION / 2 ) % MATRIX_DIMENSION
         );
         SHIFTED_MAGNITUDES[ destination ] = Math.sqrt( REAL_PART[ source ] * REAL_PART[ source ] + IMAGINARY_PART[ source ] * IMAGINARY_PART[ source ] );
+        if ( row === col ) {
+          diag.push( SHIFTED_MAGNITUDES[ destination ] );
+        }
       }
     }
+    console.log( diag.join( '\n' ) );

     // get the largest magnitude.  Spread operator Math.max( ...arr ) did not have good performance characteristics
     // so we compute this manually.

[samreid]

The bit reversal tables and cosine/sine tables are coming up the same on chrome and safari.

[samreid]

The inputs to the FFT are different:

[samreid]

If I use this code:

      context.mozImageSmoothingEnabled = false;
      context.webkitImageSmoothingEnabled = false;
      context.msImageSmoothingEnabled = false;
      context.imageSmoothingEnabled = false;

Then the number of differences goes from hundreds to just 3:

And chrome and safari look pretty much the same.

[samreid]

Note that disabling image smoothing may lead to more aliasing in the images in the aperture view, a problem we tried to address in https://github.com/phetsims/wave-interference/issues/368

[samreid]

In the above commit, I turn off smoothing for the FFT inputs, but leave on the smoothing for antialiasing in the view. Results now look similar in testing default values on chrome and safari. @KatieWoe or @etwa4650, can you please test? Close if all is well.

[KatieWoe]

Behavior seems to be the same now. Will do more thorough check in next test