diff --git a/js/common/view/OptionsPanel.js b/js/common/view/OptionsPanel.js index 82ba6ea..5c45c4d 100644 --- a/js/common/view/OptionsPanel.js +++ b/js/common/view/OptionsPanel.js @@ -47,11 +47,11 @@ define( require => { class OptionsPanel extends Panel { /** - * @param {Object} [panelOptions] * @param {OneDimensionModel|TwoDimensionsModel} model * @param {boolean} doShowPhases + * @param {Object} [options] */ - constructor( panelOptions, model, doShowPhases = false ) { + constructor( model, doShowPhases, options ) { /* Model properties used: @@ -288,7 +288,7 @@ define( require => { ] } ); - super( contentNode, panelOptions ); + super( contentNode, options ); } /** diff --git a/js/one-dimension/view/ModeGraphCanvasNode.js b/js/one-dimension/view/ModeGraphCanvasNode.js index 371c277..afc5716 100644 --- a/js/one-dimension/view/ModeGraphCanvasNode.js +++ b/js/one-dimension/view/ModeGraphCanvasNode.js @@ -11,40 +11,50 @@ define( require => { // modules const Bounds2 = require( 'DOT/Bounds2' ); const CanvasNode = require( 'SCENERY/nodes/CanvasNode' ); + const Dimension2 = require( 'DOT/Dimension2' ); const inherit = require( 'PHET_CORE/inherit' ); + const merge = require( 'PHET_CORE/merge' ); const normalModes = require( 'NORMAL_MODES/normalModes' ); const OneDimensionConstants = require( 'NORMAL_MODES/one-dimension/OneDimensionConstants' ); - // constants - const RIGHT_WALL_PADDING = 25; - const X_LEN = 50; - // TODO - this should be a class /** * @param {OneDimensionModel} model + * @param {number} normalNodeNumber * @param {Object} [options] * @constructor */ - function ModeGraphCanvasNode( model, options ) { - - options.canvasBounds = new Bounds2( 0, 0, ( options.wallHeight ) ? options.graphSize.width + RIGHT_WALL_PADDING : options.graphSize.width, options.graphSize.height ); + function ModeGraphCanvasNode( model, normalNodeNumber, options ) { + + options = merge( { + graphSize: new Dimension2( 133, 22 ), + graphStartX: 25, + wallHeight: 8, + strokeColor: 'blue', + wallColor: 'black', + textColor: 'black', + fontStyle: '16px sans-serif', + xResolution: 50 + }, options ); + + options.canvasBounds = new Bounds2( 0, 0, options.graphSize.width + options.graphStartX, options.graphSize.height ); CanvasNode.call( this, options ); + this.normalModeNumber = normalNodeNumber; // @private {Number} - 0 to 9 (representing 1 to 10) + this.graphSize = options.graphSize; // @private this.graphStart = { x: options.graphStartX, y: this.graphSize.height / 2 }; // @private this.wallHeight = options.wallHeight; // @private + this.xResolution = options.xResolution; - this.xStep = this.graphSize.width / X_LEN; // @private - this.normalModeNum = options.normalModeNum; // @private {Number} - 0 to 9 (representing 1 to 10) - this.curveYPositions = new Array( X_LEN ); // @private - - this.strokeColor = options.strokeColor || 'blue'; // @private - this.wallColor = options.wallColor || 'black'; // @private + this.xStep = this.graphSize.width / this.xResolution; // @private + this.curveYPositions = new Array( this.xResolution ); // @private - this.textColor = options.textColor || 'black'; // @private - this.fontStyle = options.fontStyle || '16px sans-serif'; // @private + this.strokeColor = options.strokeColor; // @private + this.wallColor = options.wallColor; // @private - this.xRatio = options.graphSize.width; // @private + this.textColor = options.textColor; // @private + this.fontStyle = options.fontStyle; // @private this.model = model; // @private } @@ -63,7 +73,7 @@ define( require => { // draw text (normal mode number) context.fillStyle = this.textColor; context.font = this.fontStyle; - context.fillText( ( this.normalModeNum + 1 ).toString(), 0, this.graphStart.y + 5.5 ); + context.fillText( ( this.normalModeNumber + 1 ).toString(), 0, this.graphStart.y + 5.5 ); // draw left wall context.beginPath(); @@ -96,14 +106,14 @@ define( require => { update: function() { - const n = this.normalModeNum; + const n = this.normalModeNumber; const amp = this.model.modeAmplitudeProperty[ n ].get(); const phase = this.model.modePhaseProperty[ n ].get(); const freq = this.model.modeFrequencyProperty[ n ].get(); const time = this.model.timeProperty.get(); for ( let i = 0; i < this.curveYPositions.length; i++ ) { - const x = i / X_LEN; + const x = i / this.xResolution; // put a negative sign in front of it because of y coordinate stuff this.curveYPositions[ i ] = -( 2 * this.graphSize.height / 3 ) * ( amp * Math.sin( x * ( n + 1 ) * Math.PI ) * Math.cos( freq * time - phase ) ) / OneDimensionConstants.MAX_MODE_AMPLITUDE; diff --git a/js/one-dimension/view/NormalModeSpectrumAccordionBox.js b/js/one-dimension/view/NormalModeSpectrumAccordionBox.js index 91196d9..faaf85b 100644 --- a/js/one-dimension/view/NormalModeSpectrumAccordionBox.js +++ b/js/one-dimension/view/NormalModeSpectrumAccordionBox.js @@ -40,10 +40,10 @@ define( require => { // TODO - comment code /** - * @param {Object} [options] * @param {OneDimensionModel} model + * @param {Object} [options] */ - constructor( options, model ) { + constructor( model, options ) { /* Model properties used: @@ -78,10 +78,8 @@ define( require => { touchAreaXDilation: 6, touchAreaYDilation: 6 }, - titleNode: new Text( normalModeSpectrumString, { font: NormalModesConstants.CONTROL_FONT } ), showTitleWhenExpanded: false - }, options ); const ampSliders = new Array( NormalModesConstants.MAX_MASSES_ROW_LEN ); @@ -136,11 +134,7 @@ define( require => { { font: NormalModesConstants.SMALL_FONT, maxWidth: 60 } ); - modeGraphs[ i ] = new StaticModeGraphCanvasNode( model, { - normalModeNum: i, - graphSize: { width: 40, height: 25 }, - graphStartX: 0 - } ); + modeGraphs[ i ] = new StaticModeGraphCanvasNode( model, i ); } const panelColumns = new Array( NormalModesConstants.MAX_MASSES_ROW_LEN + 1 ); diff --git a/js/one-dimension/view/NormalModesAccordionBox.js b/js/one-dimension/view/NormalModesAccordionBox.js index ecd96e8..8df8056 100644 --- a/js/one-dimension/view/NormalModesAccordionBox.js +++ b/js/one-dimension/view/NormalModesAccordionBox.js @@ -25,10 +25,10 @@ define( require => { class NormalModesAccordionBox extends AccordionBox { /** - * @param {Object} [options] * @param {OneDimensionModel} model + * @param {Object} [options] */ - constructor( options, model ) { + constructor( model, options ) { /* Model properties used: @@ -74,12 +74,7 @@ define( require => { // TODO - separate the mode number and right align it for ( let i = 0; i < normalModeGraphs.length; i++ ) { - normalModeGraphs[ i ] = new ModeGraphCanvasNode( model, { - normalModeNum: i, - graphSize: { width: 133, height: 22 }, - graphStartX: 25, - wallHeight: 8 - } ); + normalModeGraphs[ i ] = new ModeGraphCanvasNode( model, i ); Property.multilink( [ model.timeProperty, model.modeAmplitudeProperty[ i ], model.modePhaseProperty[ i ] ], function( time, amp, phase ) { normalModeGraphs[ i ].update(); diff --git a/js/one-dimension/view/OneDimensionScreenView.js b/js/one-dimension/view/OneDimensionScreenView.js index 9269759..a085c16 100644 --- a/js/one-dimension/view/OneDimensionScreenView.js +++ b/js/one-dimension/view/OneDimensionScreenView.js @@ -67,9 +67,9 @@ define( require => { }; const optionsPanel = new OptionsPanel( - optionsPanelOptions, model, - true /* showPhases checkbox */ + true, /* show showPhases checkbox */ + optionsPanelOptions ); const normalModeSpectrumAccordionBoxOptions = { @@ -79,10 +79,8 @@ define( require => { stroke: NormalModesConstants.PANEL_COLORS.stroke, centerX: viewOrigin.x }; - // maxWidth: VIEWBOX_WIDTH - // maxWidth: this.layoutBounds.maxX - 2 * OneDimensionConstants.SCREEN_VIEW_X_MARGIN - 240, - const normalModeSpectrumAccordionBox = new NormalModeSpectrumAccordionBox( normalModeSpectrumAccordionBoxOptions, model ); + const normalModeSpectrumAccordionBox = new NormalModeSpectrumAccordionBox( model, normalModeSpectrumAccordionBoxOptions ); this.addChild( normalModeSpectrumAccordionBox ); this.addChild( optionsPanel ); @@ -110,12 +108,12 @@ define( require => { this.addChild( this.massNodes[ this.massNodes.length - 1 ] ); } - this.normalModesAccordionBox = new NormalModesAccordionBox( { + this.normalModesAccordionBox = new NormalModesAccordionBox( model, { top: optionsPanel.bottom + 8, right: this.layoutBounds.maxX - OneDimensionConstants.SCREEN_VIEW_X_MARGIN - resetAllButton.width - 10, fill: NormalModesConstants.PANEL_COLORS.fill, stroke: NormalModesConstants.PANEL_COLORS.stroke - }, model ); + } ); this.addChild( this.normalModesAccordionBox ); } diff --git a/js/one-dimension/view/StaticModeGraphCanvasNode.js b/js/one-dimension/view/StaticModeGraphCanvasNode.js index df93620..f6f4cd5 100644 --- a/js/one-dimension/view/StaticModeGraphCanvasNode.js +++ b/js/one-dimension/view/StaticModeGraphCanvasNode.js @@ -1,7 +1,8 @@ // Copyright 2020, University of Colorado Boulder /** - * This node draws a normal mode graph. It is based on States of Matter's InteractionPotentialCanvasNode. + * This node draws a static normal mode graph with a fixed amplitude to represent the normal mode. + * It is based on States of Matter's InteractionPotentialCanvasNode. * * @author Franco Barpp Gomes (UTFPR) */ @@ -11,35 +12,43 @@ define( require => { // modules const Bounds2 = require( 'DOT/Bounds2' ); const CanvasNode = require( 'SCENERY/nodes/CanvasNode' ); + const Dimension2 = require( 'DOT/Dimension2' ); const inherit = require( 'PHET_CORE/inherit' ); + const merge = require( 'PHET_CORE/merge' ); const normalModes = require( 'NORMAL_MODES/normalModes' ); const OneDimensionConstants = require( 'NORMAL_MODES/one-dimension/OneDimensionConstants' ); - // constants - const X_LEN = 100; - // TODO - this should be a class /** * @param {OneDimensionModel} model + * @param {number} normalModeNumber * @param {Object} [options] * @constructor */ - function StaticModeGraphCanvasNode( model, options ) { + function StaticModeGraphCanvasNode( model, normalModeNumber, options ) { + + options = merge( { + graphSize: new Dimension2( 40, 25 ), + graphStartX: 0, + strokeColor: 'blue', + referenceLineStrokeColor: 'black', + xResolution: 100 + }, options ); options.canvasBounds = new Bounds2( 0, 0, options.graphSize.width, options.graphSize.height ); CanvasNode.call( this, options ); + this.normalModeNumber = normalModeNumber; // @private {Number} - 0 to 9 (representing 1 to 10) + this.xResolution = options.xResolution; + this.graphSize = options.graphSize; // @private this.graphStart = { x: options.graphStartX, y: this.graphSize.height / 2 }; // @private - this.xStep = this.graphSize.width / X_LEN; // @private - this.normalModeNum = options.normalModeNum; // @private {Number} - 0 to 9 (representing 1 to 10) - this.curveYPositions = new Array( X_LEN ); // @private - - this.strokeColor = options.strokeColor || 'blue'; // @private - this.refLineStrokeColor = options.refLineStrokeColor || 'black'; // @private + this.xStep = this.graphSize.width / this.xResolution; // @private + this.curveYPositions = new Array( this.xResolution ); // @private - this.xRatio = options.graphSize.width; // @private + this.strokeColor = options.strokeColor; // @private + this.referenceLineStrokeColor = options.referenceLineStrokeColor; // @private this.model = model; // @private } @@ -57,7 +66,7 @@ define( require => { // draw reference line context.beginPath(); - context.strokeStyle = this.refLineStrokeColor; + context.strokeStyle = this.referenceLineStrokeColor; context.lineWidth = 2; context.moveTo( this.graphStart.x, this.graphStart.y ); context.lineTo( this.graphStart.x + this.graphSize.width, this.graphStart.y ); @@ -78,14 +87,14 @@ define( require => { update: function() { - const n = this.normalModeNum; + const n = this.normalModeNumber; const amp = 0.15; const phase = 0; const freq = this.model.modeFrequencyProperty[ n ].get(); const time = 0; for ( let i = 0; i < this.curveYPositions.length; i++ ) { - const x = i / X_LEN; + const x = i / this.xResolution; // put a negative sign in front of it because of y coordinate stuff this.curveYPositions[ i ] = -( 2 * this.graphSize.height / 3 ) * ( amp * Math.sin( x * ( n + 1 ) * Math.PI ) * Math.cos( freq * time - phase ) ) / OneDimensionConstants.MAX_MODE_AMPLITUDE; diff --git a/js/two-dimensions/view/AmplitudeSelectorRectangle.js b/js/two-dimensions/view/AmplitudeSelectorRectangle.js index f147a22..e4076cb 100644 --- a/js/two-dimensions/view/AmplitudeSelectorRectangle.js +++ b/js/two-dimensions/view/AmplitudeSelectorRectangle.js @@ -21,15 +21,15 @@ define( require => { class AmplitudeSelectorRectangle extends Rectangle { /** - * @param {Object} [options] * @param {TwoDimensionsModel} model * @param {number} row * @param {number} col * @param {DerivedProperty.[][]>} axisAmplitudesProperty * @param {DerivedProperty.} maxAmpProperty * @param {DerivedProperty.} gridSizeProperty + * @param {Object} [options] */ - constructor( options, model, row, col, axisAmplitudesProperty, maxAmpProperty, gridSizeProperty ) { + constructor( model, row, col, axisAmplitudesProperty, maxAmpProperty, gridSizeProperty, options ) { options = merge( { boundsMethod: 'none', diff --git a/js/two-dimensions/view/NormalModeAmplitudesAccordionBox.js b/js/two-dimensions/view/NormalModeAmplitudesAccordionBox.js index 045ed3f..11bb2b2 100644 --- a/js/two-dimensions/view/NormalModeAmplitudesAccordionBox.js +++ b/js/two-dimensions/view/NormalModeAmplitudesAccordionBox.js @@ -94,17 +94,20 @@ define( require => { const selectorRectanglesLength = NormalModesConstants.MAX_MASSES_ROW_LEN ** 2; const selectorRectangles = new Array( selectorRectanglesLength ); + const selectorRectangleOptions = { + rectGridSize: RECT_GRID_UNITS, + paddingGridSize: PADDING_GRID_UNITS, + backgroundRect: { + fill: Color.toColor( options.fill ).colorUtilsBrighter( 0.6 ) + } + }; + for ( let i = 0; i < selectorRectanglesLength; i++ ) { const row = Math.trunc( i / NormalModesConstants.MAX_MASSES_ROW_LEN ); const col = i % NormalModesConstants.MAX_MASSES_ROW_LEN; - selectorRectangles[ i ] = new AmplitudeSelectorRectangle( { - rectGridSize: RECT_GRID_UNITS, - paddingGridSize: PADDING_GRID_UNITS, - backgroundRect: { - fill: Color.toColor( options.fill ).colorUtilsBrighter( 0.6 ) - } - }, model, row, col, axisAmplitudesProperty, maxAmpProperty, gridSizeProperty ); + selectorRectangles[ i ] = new AmplitudeSelectorRectangle( model, row, col, axisAmplitudesProperty, + maxAmpProperty, gridSizeProperty, selectorRectangleOptions ); } const selectorBox = new Rectangle( { diff --git a/js/two-dimensions/view/TwoDimensionsScreenView.js b/js/two-dimensions/view/TwoDimensionsScreenView.js index d8deedb..d8ef1c4 100644 --- a/js/two-dimensions/view/TwoDimensionsScreenView.js +++ b/js/two-dimensions/view/TwoDimensionsScreenView.js @@ -66,9 +66,9 @@ define( require => { }; const optionsPanel = new OptionsPanel( - optionsPanelOptions, model, - false /* showPhases checkbox */ + false, /* no showPhases checkbox */ + optionsPanelOptions, ); this.addChild( optionsPanel );