ranges for energy plot, see #101

phetsims · May 1, 2020 · 0c66c54 · 0c66c54
1 parent f0f6267
commit 0c66c54
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 35 deletions.
diff --git a/js/energy-skate-park/graphs/GraphsConstants.js b/js/energy-skate-park/graphs/GraphsConstants.js
@@ -7,6 +7,7 @@
  */
 
 import energySkatePark from '../../energySkatePark.js';
+import Range from '../../../../dot/js/Range.js';
 
 // constants
 const TIME_PER_SAMPLE = 1 / 60; // in seconds (assuming 60 fps, one sample per frame)
@@ -23,6 +24,33 @@ const GraphsConstants = {
   // above this will be off of the graph
   MAX_PLOTTED_ENERGY: 3000,
 
+  // ranges for the energy plot, when scale changes
+  PLOT_RANGES: [
+    new Range( -25, 25 ),
+    new Range( -50, 50 ),
+    new Range( -100, 100 ),
+    new Range( -200, 200 ),
+    new Range( -500, 500 ),
+    new Range( -1000, 1000 ),
+    new Range( -1500, 1500 ),
+    new Range( -2000, 2000 ),
+    new Range( -2500, 2500 ), // default
+    new Range( -3000, 3000 ),
+    new Range( -4000, 4000 ),
+    new Range( -5000, 5000 ),
+    new Range( -6000, 6000 ),
+    new Range( -7000, 7000 ),
+    new Range( -8000, 8000 ),
+    new Range( -9000, 9000 ),
+    new Range( -10000, 10000 ),
+    new Range( -12500, 12500 ),
+    new Range( -15000, 15000 ),
+    new Range( -17500, 17500 ),
+    new Range( -20000, 20000 ),
+    new Range( -22500, 22500 ),
+    new Range( -25000, 25000 )
+  ],
+
   // dimensions for the tracks in the graphs screen, reused and referenced by many components in this screen
   // in model coordinates (meters)
   TRACK_WIDTH: 10,

diff --git a/js/energy-skate-park/graphs/model/GraphsModel.js b/js/energy-skate-park/graphs/model/GraphsModel.js
@@ -59,9 +59,9 @@ class GraphsModel extends EnergySkateParkTrackSetModel {
     this.thermalEnergyDataVisibleProperty = new BooleanProperty( true );
     this.totalEnergyDataVisibleProperty = new BooleanProperty( true );
 
-    // @public - scale for the graph
-    this.lineGraphScaleProperty = new NumberProperty( 3, {
-      range: new Range( 1, 5 )
+    // @private - index pointing to the range plotted on the energy plot, see GraphsConstants.PLOT_RANGES
+    this.energyPlotScaleIndexProperty = new NumberProperty( 8, {
+      range: new Range( 1, GraphsConstants.PLOT_RANGES.length - 1 )
     } );
 
     // @public - sets the independent variable for the graph display
@@ -145,7 +145,7 @@ class GraphsModel extends EnergySkateParkTrackSetModel {
     this.thermalEnergyDataVisibleProperty.reset();
     this.totalEnergyDataVisibleProperty.reset();
 
-    this.lineGraphScaleProperty.reset();
+    this.energyPlotScaleIndexProperty.reset();
     this.independentVariableProperty.reset();
 
     this.clearEnergyData();

diff --git a/js/energy-skate-park/graphs/view/EnergyGraphAccordionBox.js b/js/energy-skate-park/graphs/view/EnergyGraphAccordionBox.js
@@ -115,11 +115,11 @@ class EnergyGraphAccordionBox extends AccordionBox {
 
     // zoom buttons
     const touchAreaShift = 3;
-    const zoomInButton = new EnergyGraphZoomButton( model.lineGraphScaleProperty, {
+    const zoomInButton = new EnergyGraphZoomButton( model.energyPlotScaleIndexProperty, {
       touchAreaYShift: -touchAreaShift,
       tandem: tandem.createTandem( 'zoomInButton' )
     } );
-    const zoomOutButton = new EnergyGraphZoomButton( model.lineGraphScaleProperty, {
+    const zoomOutButton = new EnergyGraphZoomButton( model.energyPlotScaleIndexProperty, {
       in: false,
       touchAreaYShift: touchAreaShift,
       tandem: tandem.createTandem( 'zoomOutButton' )
@@ -199,11 +199,11 @@ class EnergyGraphAccordionBox extends AccordionBox {
       this.clearEnergyData();
     } );
 
-    model.lineGraphScaleProperty.link( scale => {
-      const range = model.lineGraphScaleProperty.range;
-      assert && assert( model.lineGraphScaleProperty.range, 'please define a range for lineGraphScaleProperty' );
-      zoomInButton.enabled = scale > range.min;
-      zoomOutButton.enabled = scale < range.max;
+    model.energyPlotScaleIndexProperty.link( scaleIndex => {
+      const range = model.energyPlotScaleIndexProperty.range;
+      assert && assert( model.energyPlotScaleIndexProperty.range, 'please define a range for energyPlotScaleIndexProperty' );
+      zoomInButton.enabled = scaleIndex > range.min;
+      zoomOutButton.enabled = scaleIndex < range.max;
     } );
   }
 

diff --git a/js/energy-skate-park/graphs/view/EnergyPlot.js b/js/energy-skate-park/graphs/view/EnergyPlot.js
@@ -19,18 +19,10 @@ import merge from '../../../../../phet-core/js/merge.js';
 import PhetFont from '../../../../../scenery-phet/js/PhetFont.js';
 import energySkatePark from '../../../energySkatePark.js';
 import EnergySkateParkColorScheme from '../../common/view/EnergySkateParkColorScheme.js';
+import GraphsConstants from '../GraphsConstants.js';
 import GraphsModel from '../model/GraphsModel.js';
 
 // constants
-// determines a range for the energy plot as a function of the scale
-const Y_OFFSET = 500;
-const Y_SLOPE = 500;
-
-// when the plot range is larger than this threshold, a larger step is used for vertical grid lines on the plot
-const LARGE_RANGE_THRESHOLD = 5000;
-const LARGE_STEP = 1000;
-const SMALL_STEP = 500;
-
 // determines properties of the plot that may depend on the independent variable
 const TIME_MAX_X = 20; // in seconds
 const TIME_STEP_X = 2; // in seconds
@@ -58,7 +50,7 @@ class EnergyPlot extends XYCursorPlot {
     // sim play when dragging ends
     let pausedOnDragStart = false;
 
-    const plotRange = calculateRange( model.lineGraphScaleProperty.get() );
+    const plotRange = GraphsConstants.PLOT_RANGES[ model.energyPlotScaleIndexProperty.get() ];
 
     super( {
 
@@ -70,7 +62,6 @@ class EnergyPlot extends XYCursorPlot {
       maxX: TIME_MAX_X,
       minY: plotRange.min,
       maxY: plotRange.max,
-      stepY: SMALL_STEP,
 
       // no arrows along x and y
       showAxis: false,
@@ -141,11 +132,11 @@ class EnergyPlot extends XYCursorPlot {
     } );
 
     // calculate new range of plot when zooming in or out
-    model.lineGraphScaleProperty.link( scale => {
-      const newRange = calculateRange( scale );
+    model.energyPlotScaleIndexProperty.link( scaleIndex => {
+      const newRange = GraphsConstants.PLOT_RANGES[ scaleIndex ];
       const newMaxY = newRange.max;
       const newMinY = newRange.min;
-      const newStepY = ( newMaxY - newMinY ) >= LARGE_RANGE_THRESHOLD ? LARGE_STEP : SMALL_STEP;
+      const newStepY = ( newMaxY - newMinY ) / 4;
 
       this.setMinY( newMinY );
       this.setMaxY( newMaxY );
@@ -233,16 +224,6 @@ class EnergyPlot extends XYCursorPlot {
 //--------------------------------------------------------------------------
 // helper functions
 //-------------------------------------------------------------------------
-/**
- * Calculates the range of the plot as a function of scale.
- * @param {number} scale
- * @returns {Range}
- */
-const calculateRange = scale => {
-  const max = Y_OFFSET + scale * Y_SLOPE;
-  return new Range( -max, max );
-};
-
 /**
  * Calculates the domain of the plot as a function of the independent variable.
  * @param {GraphsModel.IndependentVariable} independentVariable