phetsims / blackbody-spectrum

"Blackbody Spectrum" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
1 stars 3 forks source link

Thermometer slider laggy when console is open #88

Closed chrisklus closed 5 years ago

chrisklus commented 5 years ago

I've been noticing that when the console is open, the temperature slider on the thermometer is quite laggy:

Kapture 2019-05-16 at 14 14 38

@samreid suggested that maybe the code is just fast enough to not lag when the console is closed, but then when the dev tools are open and running, it sends the sim over a performance threshold and starts to lag.

@samreid and I did some investigating, and found that the whole shape was being replaced each time to update the clip area, instead of just updating the clip area of the shape.

The following patch eliminates the lagginess for me when the console is open:

Index: js/blackbody-spectrum/view/GraphDrawingNode.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- js/blackbody-spectrum/view/GraphDrawingNode.js  (revision be0ad34dc537828c6bac817b20d642f69434088e)
+++ js/blackbody-spectrum/view/GraphDrawingNode.js  (date 1558136644000)
@@ -218,7 +218,8 @@
       // Clips the paths to the axes bounds, pushed shape down 1 pixel to prevent performance degradation when clipping
       // at low temperatures
       const clipShape = Shape.rectangle( 0, 1, this.axes.horizontalAxisLength, -this.axes.verticalAxisLength );
-      this.mainGraph.shape = this.mainGraph.shape.shapeClip( clipShape );
+      // this.mainGraph.shape = this.mainGraph.shape.shapeClip( clipShape );
+      this.mainGraph.clipArea = clipShape;

       // Updates the saved graph(s)
       const numberOfSavedBodies = this.model.savedBodies.length;

A similar pattern would have to be applied to the saved graph, as the lagginess returns after I save a curve.

@arnabp do you see the same symptoms, and would you like to investigate this further?

arnabp commented 5 years ago

While I haven't seen these symptoms to the same extent you have, the fact that the lagginess is directly correlated with the clipshape means it's likely to cause performance issues on other platforms. I'll go ahead and implement this fix and monitor it in the future.

arnabp commented 5 years ago

Modified the respective update functions to no longer re-generate the shapes for shape clipping. @chrisklus tested it on his machine and he's no longer experiencing lag. Will keep this open for testing.

KatieWoe commented 5 years ago

Didn't see any problems on Win 10 chrome. Will check a few other platforms before closing.

KatieWoe commented 5 years ago

Seems good