diff --git a/js/trig-tour/model/TrigTourModel.js b/js/trig-tour/model/TrigTourModel.js index 34eb083..7f6603a 100644 --- a/js/trig-tour/model/TrigTourModel.js +++ b/js/trig-tour/model/TrigTourModel.js @@ -1,7 +1,8 @@ -// Copyright 2002-2015, University of Colorado Boulder +// Copyright 2002-2015, University of Colorad5o Boulder /** * Main model for Trig Tour Sim + * * @author Michael Dubson (PhET) */ define( function( require ) { @@ -13,34 +14,53 @@ define( function( require ) { var Util = require( 'DOT/Util' ); /** + * Constructor for TrigTourModel. + * * @constructor - * No parameter */ function TrigTourModel() { + // @public PropertySet.call( this, { - angle: 0, // @public, total angle in radians, can be greater than 2*pi, or less than -2*pi - singularity: false // @public, indicates singularity in tan function at theta = +/- 90 degrees + angle: 0, // total angle in radians, can be greater than 2*pi, or less than -2*pi + singularity: false // indicates singularity in tan function at theta = +/- 90 degrees // true if angle is close to +/-90 degrees } ); - this.smallAngle = 0; // @private, smallAngle = angle modulo 2*pi with 180 offset, is between -pi and +pi + + this.smallAngle = 0; // @private, angle modulo 2*pi with 180 offset, is between -pi and +pi this.previousAngle = 0; // @private, smallAngle in previous step, needed to compute total angle from smallAngle - this.rotationNumberFromPi = 0; //@private, nbr of turns around the unit circle, incremented at +/-180 deg, + this.rotationNumberFromPi = 0; //@private, number of turns around the unit circle, incremented at +/-180 deg, //needed to compute (full) angle from smallAngle - this.fullTurnCount = 0; // @public, nbr of turns around unit circle, incremented at angle = 0 deg - this.halfTurnCount = 0; // @public, nbr of half turns around unit circle, incremented at small angle = 0 and 180 + this.fullTurnCount = 0; // @public, number of turns around unit circle, incremented at angle = 0 deg + this.halfTurnCount = 0; // @public, number of half turns around unit circle, incremented at small angle = 0 and 180 } return inherit( PropertySet, TrigTourModel, { + + /** + * Returns cos of the total model angle in radians. + * + * @returns {number} + */ cos: function() { return Math.cos( this.angle ); }, + + /** + * Returns sin of the total model angle in radians. + * + * @returns {number} + */ sin: function() { return Math.sin( this.angle ); }, - //Returns tangent of current angle. But when near +/-90 degrees, cuts off tan value at +/- maxValue. - //Must cut off value at +/- maxValue or else Safari Browser won't display properly. + /** + * Returns tangent of current model angle in radians. When near +/-90 degrees, cuts off tan value at +/- maxValue. + * Must cut off value at +/- maxValue or else Safari Browser won't display properly. + * + * @returns {number} + */ tan: function() { var tanValue = Math.tan( this.angle ); var maxValue = 350; @@ -60,37 +80,65 @@ define( function( require ) { return returnValue; }, + /** + * Get the current model angle in radians. + * + * @returns {number} + */ getAngleInRadians: function() { return this.angle; }, + + /** + * Get the current model angle in degress. + * + * @returns {number} + */ getAngleInDegrees: function() { - return this.angle * 180 / Math.PI; + return Util.toDegrees( this.angle ); }, - //small angle in rads, between -pi and +pi + /** + * Returns the small angle in radians, between -pi and +pi + * + * @returns {number} + */ getSmallAngleInRadians: function() { return this.smallAngle; }, - //small angle in degrees between -180 and +180 + /** + * Return the small angle in degrees between -180 and +180. + * + * @returns {number} + */ getSmallAngleInDegrees: function() { - return this.smallAngle * 180 / Math.PI; + return Util.toDegrees( this.smallAngle ); }, - //small angle in degrees 0 to +360 + /** + * Convenience function, return the small angle in degrees bound by 0 to +360 + * + * @returns {number} + */ getSmallAngle0To360: function() { if ( this.smallAngle > 0 ) { - return this.smallAngle * 180 / Math.PI; + return Util.toDegrees( this.smallAngle ); } else { - return 360 + this.smallAngle * 180 / Math.PI; + return 360 + Util.toDegrees( this.smallAngle ); } }, - //set the full angle, the small angle and various turns counts, given the current full angle - setFullAngleInRadians: function( angleInRads ) { //argument is total angle, not small angle + /** + * Set the full angle, small angle, and various turns counts. + * + * @param {number} angleInRads - a new angle for the full model angle + */ + setFullAngleInRadians: function( angleInRads ) { var remainderAngle = angleInRads % ( 2 * Math.PI ); - this.fullTurnCount = Util.roundSymmetric( ( angleInRads - remainderAngle ) / (2 * Math.PI ) ); + this.fullTurnCount = Util.roundSymmetric( ( angleInRads - remainderAngle ) / ( 2 * Math.PI ) ); + if ( Math.abs( remainderAngle ) <= Math.PI ) { this.rotationNumberFromPi = this.fullTurnCount; } @@ -108,10 +156,16 @@ define( function( require ) { this.angle = angleInRads; }, - //set the full angle, and various turns counts, given the current small angle - setAngle: function( smallAngle ) { //smallAngle in rads + /** + * Set the full angle, and various turn counts, given the current small angle. + * + * @param {number} smallAngle + */ + setAngle: function( smallAngle ) { this.smallAngle = smallAngle; - var comparisonAngle = 149 * Math.PI / 180; //must be less than (180-30)deg in order to handle special angle correctly + + //must be less than (180-30)deg in order to handle special angle correctly + var comparisonAngle = 149 * Math.PI / 180; if ( ( this.smallAngle < 0 ) && (this.previousAngle > comparisonAngle) ) { this.rotationNumberFromPi += 1; } @@ -119,7 +173,8 @@ define( function( require ) { this.rotationNumberFromPi -= 1; } - var targetAngle = this.rotationNumberFromPi * 2 * Math.PI + this.smallAngle; //don't want to trigger angle update yet + //don't want to trigger angle update yet + var targetAngle = this.rotationNumberFromPi * 2 * Math.PI + this.smallAngle; //round to nearest half-degree; to do this, must convert to degrees and then back to rads var roundedTargetAngle = targetAngle * 180 / Math.PI; @@ -128,6 +183,8 @@ define( function( require ) { roundedTargetAngle = Util.roundSymmetric( roundedTargetAngle * roundFactor ) / roundFactor; targetAngle = roundedTargetAngle * Math.PI / 180; var remainderAngle = targetAngle % ( 2 * Math.PI ); + + // set turn counts and angles this.fullTurnCount = Util.roundSymmetric( ( targetAngle - remainderAngle ) / ( 2 * Math.PI ) ); remainderAngle = targetAngle % ( Math.PI ); this.halfTurnCount = Util.roundSymmetric( ( targetAngle - remainderAngle ) / ( Math.PI ) ); @@ -135,8 +192,12 @@ define( function( require ) { this.previousAngle = smallAngle; }, - //given the small angle in rads, sets current angle to nearest special angle in rads; called from UnitCircleView - setSpecialAngleWithSmallAngle: function( smallAngle ) { //smallAngle in rads + /** + * Given the small angle in radians, set the current angle to nearest special angle in radians. + * + * @param {number} smallAngle - small angle in radians + */ + setSpecialAngleWithSmallAngle: function( smallAngle ) { var smallAngleInDegs = smallAngle * 180 / Math.PI; var nearestSpecialAngleInRads = 0; var specialAngles = [ -150, -135, -120, -90, -60, -45, -30, 0, 30, 45, 60, 90, 120, 135, 150, 180 ]; @@ -155,9 +216,12 @@ define( function( require ) { this.setAngle( nearestSpecialAngleInRads ); }, - - //Given the full angle, set angle to the nearest special angle; called from GraphView - setSpecialAngleWithFullAngle: function( fullAngle ) { //full angle in radians + /** + * Given the full angle, set angle to the nearest special angle. + * + * @param {number} fullAngle - full angle in radians + */ + setSpecialAngleWithFullAngle: function( fullAngle ) { var remainderAngle = fullAngle % ( 2 * Math.PI ); var fullTurnsAngle = fullAngle - remainderAngle; var remainderInDegrees = remainderAngle * 180 / Math.PI; @@ -171,12 +235,13 @@ define( function( require ) { for ( var i = 0; i <= specialAngles.length - 1; i++ ) { if ( remainderInDegrees >= borders[ i ] && remainderInDegrees < borders[ i + 1 ] ) { - nearestSpecialAngleInDegrees = specialAngles[ i + 1 ];// * Math.PI / 180; + nearestSpecialAngleInDegrees = specialAngles[ i + 1 ]; } if ( remainderInDegrees <= -borders[ i ] && remainderInDegrees > -borders[ i + 1 ] ) { - nearestSpecialAngleInDegrees = -specialAngles[ i + 1 ];// * Math.PI / 180; + nearestSpecialAngleInDegrees = -specialAngles[ i + 1 ]; } } + //Must handle 0 and +/-360 deg angles as special cases. if ( remainderInDegrees < 15 && remainderInDegrees >= -15 ) { nearestSpecialAngleInDegrees = 0; @@ -187,6 +252,7 @@ define( function( require ) { else if ( remainderInDegrees < -345 ) { nearestSpecialAngleInDegrees = -360; } + var nearestSpecialAngleInRadians = nearestSpecialAngleInDegrees * Math.PI / 180; var nearestFullAngle = fullTurnsAngle + nearestSpecialAngleInRadians; this.setFullAngleInRadians( nearestFullAngle ); diff --git a/js/trig-tour/view/ArrowLine.js b/js/trig-tour/view/ArrowLine.js index a04f0e4..acd798c 100644 --- a/js/trig-tour/view/ArrowLine.js +++ b/js/trig-tour/view/ArrowLine.js @@ -1,12 +1,10 @@ // Copyright 2002-2015, University of Colorado Boulder /** - * Vertical or horizontal arrow, - * consisting of a line and a triangular arrow-head, - * used in UnitCircleView and GraphView - * Created by Michael Dubson (PhET developer) on 6/16/2015. + * Vertical or horizontal arrow, consisting of a line and a triangular arrow-head. + * + * @author Michael Dubson (PhET developer) on 6/16/2015. */ - define( function( require ) { 'use strict'; @@ -20,16 +18,18 @@ define( function( require ) { var Util = require( 'DOT/Util' ); /** - * Constructor for ArrowLine which renders rotor as a scenery node. - * @param {Number} defaultLength of arrow in pixels - * @param {String} orientation = 'v' or 'h' for vertical or horizontal - * @param {Object} options passed to Line, plus extra options + * Constructor for ArrowLine which is an arrow node with a head that dynamically resizes to a fraction of the tail + * length. + * + * @param {number} defaultLength of arrow in pixels + * @param {string} orientation = 'v' or 'h' for vertical or horizontal + * @param {object} options passed to Line, plus extra options * @constructor */ function ArrowLine( defaultLength, orientation, options ) { var arrowLine = this; - this.vertical = ( orientation === 'v' ); + this.vertical = ( orientation === 'v' ); // @private options = _.extend( { //if arrow length shorter than criticalFactor times arrow head length, then start scaling arrowLine criticalFactor: 2, diff --git a/js/trig-tour/view/ControlPanel.js b/js/trig-tour/view/ControlPanel.js index 88cd960..75d2a30 100644 --- a/js/trig-tour/view/ControlPanel.js +++ b/js/trig-tour/view/ControlPanel.js @@ -1,9 +1,9 @@ // Copyright 2002-2015, University of Colorado Boulder /** - * Control Panel for Trig Tour sim - * on right side of stage - * Created by Michael Dubson (PhET developer) on 6/4/2015. + * Control Panel for Trig Tour sim, on right side of screenView + * + * @author Michael Dubson (PhET developer) on 6/4/2015. */ define( function( require ) { 'use strict'; @@ -17,6 +17,12 @@ define( function( require ) { var PhetFont = require( 'SCENERY_PHET/PhetFont' ); var Text = require( 'SCENERY/nodes/Text' ); var VBox = require( 'SCENERY/nodes/VBox' ); + var TrigTourColors = require( 'TRIG_TOUR/trig-tour/view/TrigTourColors' ); + + // constants + var DISPLAY_FONT = new PhetFont( 20 ); + var TEXT_COLOR = TrigTourColors.TEXT_COLOR; + var PANEL_COLOR = TrigTourColors.PANEL_COLOR; //strings var cosStr = require( 'string!TRIG_TOUR/cos' ); @@ -25,12 +31,6 @@ define( function( require ) { var labelsStr = require( 'string!TRIG_TOUR/labels' ); var gridStr = require( 'string!TRIG_TOUR/grid' ); var specialAnglesStr = require( 'string!TRIG_TOUR/specialAngles' ); - var TrigTourColors = require( 'TRIG_TOUR/trig-tour/view/TrigTourColors' ); - - // constants - var DISPLAY_FONT = new PhetFont( 20 ); - var TEXT_COLOR = TrigTourColors.TEXT_COLOR; - var PANEL_COLOR = TrigTourColors.PANEL_COLOR; // Text nodes var fontInfo = { font: DISPLAY_FONT, fill: TEXT_COLOR }; @@ -41,30 +41,30 @@ define( function( require ) { var gridText = new Text( gridStr, fontInfo ); var specialAnglesText = new Text( specialAnglesStr, fontInfo ); - /** * Constructor for the control panel - * @param {Object} properties + * + * @param {ViewProperties} viewProperties * @constructor */ - function ControlPanel( properties ) { + function ControlPanel( viewProperties ) { - this.properties = properties; + this.viewProperties = viewProperties; //A cluster of 3 radio buttons for displaying either cos, sin or tan - //properties.graph = 'cos'|'sin'|'tan' + //viewProperties.graph = 'cos'|'sin'|'tan' var myRadioButtonOptions = { radius: 10, fontSize: 15, deselectedColor: 'white' }; - var cosRadioButton = new AquaRadioButton( properties.graphProperty, 'cos', cosText, myRadioButtonOptions ); - var sinRadioButton = new AquaRadioButton( properties.graphProperty, 'sin', sinText, myRadioButtonOptions ); - var tanRadioButton = new AquaRadioButton( properties.graphProperty, 'tan', tanText, myRadioButtonOptions ); + var cosRadioButton = new AquaRadioButton( viewProperties.graphProperty, 'cos', cosText, myRadioButtonOptions ); + var sinRadioButton = new AquaRadioButton( viewProperties.graphProperty, 'sin', sinText, myRadioButtonOptions ); + var tanRadioButton = new AquaRadioButton( viewProperties.graphProperty, 'tan', tanText, myRadioButtonOptions ); //3 checkboxes: Labels, Grid, Special Angles var checkBoxOptions = { checkBoxColorBackground: 'white' }; - var labelsCheckBox = new CheckBox( labelsText, properties.labelsVisibleProperty, checkBoxOptions ); - var gridCheckBox = new CheckBox( gridText, properties.gridVisibleProperty, checkBoxOptions ); + var labelsCheckBox = new CheckBox( labelsText, viewProperties.labelsVisibleProperty, checkBoxOptions ); + var gridCheckBox = new CheckBox( gridText, viewProperties.gridVisibleProperty, checkBoxOptions ); var specialAnglesCheckBox = new CheckBox( specialAnglesText, - properties.specialAnglesVisibleProperty, + viewProperties.specialAnglesVisibleProperty, checkBoxOptions ); diff --git a/js/trig-tour/view/FractionNode.js b/js/trig-tour/view/FractionNode.js index 8ab3adf..aafd06c 100644 --- a/js/trig-tour/view/FractionNode.js +++ b/js/trig-tour/view/FractionNode.js @@ -2,9 +2,9 @@ /** * Displays a built-up fraction - * Created by Michael Dubson (PhET developer) on 6/10/2015. + * + * @author Michael Dubson (PhET developer) on 6/10/2015. */ - define( function( require ) { 'use strict'; @@ -24,13 +24,12 @@ define( function( require ) { * If either A or B (but not both) is negative, a minus sign is displayed at the same level as the divider bar * If numerator includes the string 'q' , then a square root symbol is placed on the numerator * If the denominator is '' (empty string), then the numerator is displayed as an ordinary number (not a fraction). - * @param {string} numerator - * @param {string} denominator + * @param {string|number} numerator + * @param {string|number} denominator * @param {Object} options * @constructor */ - - function FractionNode( numerator, denominator, options ) { //numerator and denominator can be Numbers or Strings + function FractionNode( numerator, denominator, options ) { this.options = options; this.fractionNode = this; @@ -49,12 +48,22 @@ define( function( require ) { } return inherit( Node, FractionNode, { + + /** + * Set the numerator and denominator of this fractionNode. + * + * @param {string|number} numerator + * @param {string|number} denominator + */ setValues: function( numerator, denominator ) { this.numerator = numerator; this.denominator = denominator; this.setFraction(); }, + /** + * Set the fraction node and draw its various parts. + */ setFraction: function() { var minusSign; //short horizontal line for minus sign, in front of divisor bar var numeratorNegative = false; //true if numerator is negative diff --git a/js/trig-tour/view/GraphView.js b/js/trig-tour/view/GraphView.js index 76488ef..6afc892 100644 --- a/js/trig-tour/view/GraphView.js +++ b/js/trig-tour/view/GraphView.js @@ -2,8 +2,9 @@ /** * View of Graph of sin, cos, or tan vs. theta, at bottom of stage, below unit circle - * Grabbable pointer indicates current value of theta and the function - * Created by Michael Dubson (PhET developer) on 6/3/2015. + * Grabbable pointer indicates current value of theta and the function. + * + * @author Michael Dubson (PhET developer) on 6/3/2015. */ define( function( require ) { 'use strict'; @@ -58,21 +59,21 @@ define( function( require ) { var DISPLAY_FONT_SMALL_ITALIC = new PhetFont( { size: 18, family: 'Arial', style: 'italic' } ); /** - * Constructor for view of Graph, which displays sin, cos, or tan vs angle theta in either degrees or radians, - * has a draggable handle for changing the angle + * Constructor for view of Graph, which displays sin, cos, or tan vs angle theta in either degrees or radians, and + * has a draggable handle for changing the angle. + * * @param {TrigTourModel} model of the sim - * @param {Number} height of y-axis on graph - * @param {Number} width of x-axis on graph + * @param {number} height of y-axis on graph + * @param {number} width of x-axis on graph * @param {Property} specialAnglesVisibleProperty * @constructor */ - function GraphView( model, height, width, specialAnglesVisibleProperty ) { var graphView = this; this.model = model; - this.trigFunction = 'cos'; //{string} 'cos'|'sin'|'tan' set by Control Panel - this.expandedProperty = new Property( true ); //Graph can be hidden with expandCollapse button + this.trigFunction = 'cos'; // @public, {string} 'cos'|'sin'|'tan' set by Control Panel + this.expandedProperty = new Property( true ); // @private, Graph can be hidden with expandCollapse button // Call the super constructor Node.call( graphView ); @@ -478,46 +479,53 @@ define( function( require ) { } } } ); - } return inherit( Node, GraphView, { - //indicator Line is a draggable vertical arrow, indicating current location on graph - setIndicatorLine: function() { - var cosNow = this.model.cos(); - var sinNow = this.model.sin(); - var tanNow = this.model.tan(); - if ( this.trigFunction === 'cos' ) { - this.indicatorLine.setEndPoint( cosNow * this.amplitude ); - this.indicatorLine.setColor( COS_COLOR ); - this.redDotHandle.y = -cosNow * this.amplitude; - } - else if ( this.trigFunction === 'sin' ) { - this.indicatorLine.setEndPoint( sinNow * this.amplitude ); - this.indicatorLine.setColor( SIN_COLOR ); - this.redDotHandle.y = -sinNow * this.amplitude; - } - else if ( this.trigFunction === 'tan' ) { - this.indicatorLine.setEndPoint( tanNow * this.amplitude ); - this.indicatorLine.setColor( TAN_COLOR ); - this.redDotHandle.y = -tanNow * this.amplitude; - } - else { - //Do nothing, following line for debugging only - console.error( 'ERROR in GraphView.setIndicatorLine()' ); - } - }, - setTitleBar: function( trigString ) { - if ( trigString === 'cos' ) { - this.graphTitle.text = this.cosThetaVsThetaText; - } - else if ( trigString === 'sin' ) { - this.graphTitle.text = this.sinThetaVsThetaText; - } - else if ( trigString === 'tan' ) { - this.graphTitle.text = this.tanThetaVsThetaText; - } + + /** + * Set the indicator line, which is a draggable, vertical arrow indicating current location on graph. + */ + setIndicatorLine: function() { + var cosNow = this.model.cos(); + var sinNow = this.model.sin(); + var tanNow = this.model.tan(); + if ( this.trigFunction === 'cos' ) { + this.indicatorLine.setEndPoint( cosNow * this.amplitude ); + this.indicatorLine.setColor( COS_COLOR ); + this.redDotHandle.y = -cosNow * this.amplitude; + } + else if ( this.trigFunction === 'sin' ) { + this.indicatorLine.setEndPoint( sinNow * this.amplitude ); + this.indicatorLine.setColor( SIN_COLOR ); + this.redDotHandle.y = -sinNow * this.amplitude; + } + else if ( this.trigFunction === 'tan' ) { + this.indicatorLine.setEndPoint( tanNow * this.amplitude ); + this.indicatorLine.setColor( TAN_COLOR ); + this.redDotHandle.y = -tanNow * this.amplitude; + } + else { + //Do nothing, following line for debugging only + console.error( 'ERROR in GraphView.setIndicatorLine()' ); + } + }, + + /** + * Set the title bar text. + * + * @param {string} trigString + */ + setTitleBar: function( trigString ) { + if ( trigString === 'cos' ) { + this.graphTitle.text = this.cosThetaVsThetaText; + } + else if ( trigString === 'sin' ) { + this.graphTitle.text = this.sinThetaVsThetaText; + } + else if ( trigString === 'tan' ) { + this.graphTitle.text = this.tanThetaVsThetaText; } } - ); + } ); } ); \ No newline at end of file diff --git a/js/trig-tour/view/ReadoutDisplay.js b/js/trig-tour/view/ReadoutDisplay.js index 4a22da6..4fc10dc 100644 --- a/js/trig-tour/view/ReadoutDisplay.js +++ b/js/trig-tour/view/ReadoutDisplay.js @@ -3,7 +3,8 @@ /** * AccordionBox container of ReadoutNode, * ReadoutNode contains all the user-viewed content. - * Created by Michael Dubson on 6/10/2015. + * + * @author Michael Dubson on 6/10/2015. */ define( function( require ) { 'use strict'; @@ -27,16 +28,15 @@ define( function( require ) { /** * Constructor for * @param {TrigTourModel} model is the main model of the sim + * @param {ViewProperties} viewProperties * @constructor */ - function ReadoutDisplay( model, properties ) { + function ReadoutDisplay( model, viewProperties ) { - //var readoutDisplay = this; this.model = model; - this.properties = properties; + this.viewProperties = viewProperties; - - this.readoutNode = new ReadoutNode( model, properties ); + this.readoutNode = new ReadoutNode( model, viewProperties ); this.expandedProperty = new Property( true ); @@ -55,7 +55,6 @@ define( function( require ) { contentYSpacing: 8, expandedProperty: this.expandedProperty } ); - } return inherit( AccordionBox, ReadoutDisplay ); diff --git a/js/trig-tour/view/ReadoutNode.js b/js/trig-tour/view/ReadoutNode.js index c40cee0..11e45b2 100644 --- a/js/trig-tour/view/ReadoutNode.js +++ b/js/trig-tour/view/ReadoutNode.js @@ -50,6 +50,7 @@ define( function( require ) { /** * Constructor for ReadoutNode which displays live values of angle, sin, cos, and tan * This node is the content of AccordionBox ReadoutDisplay + * * @param {TrigTourModel} model is the main model of the sim * @param {ViewProperties} viewProperties * @constructor @@ -60,8 +61,6 @@ define( function( require ) { this.model = model; this.viewProperties = viewProperties; this.nbrDecimalPlaces = 1; //number of decimal places for display of angle, = 0 for special angles - //this.radiansDisplayed = false; //{boolean} set by ControlPanel - //this.specialAnglesOnly = false; //{boolean} set by ControlPanel this.units = 'degrees'; //{string} 'degrees'|'radians' set by radio buttons on ReadoutNode // Call the super constructor @@ -71,7 +70,7 @@ define( function( require ) { var row2 = new Node(); //angle readout: angle = value in degrees or radians //row 3 is this.trigRow3 declared below, 'sin'|'cos'|'tan'= trig value - var angleValue = Util.toFixed( model.angle, 1 ); //read from model + var angleValue = Util.toFixed( model.angle, 1 ); var sinValue = Util.toFixed( model.sin(), 3 ); var cosValue = Util.toFixed( model.cos(), 3 ); var tanValue = Util.toFixed( model.tan(), 3 ); @@ -80,9 +79,9 @@ define( function( require ) { var largeFontInfo = { font: DISPLAY_FONT_LARGE, fill: TEXT_COLOR }; var fontBoldInfo = { font: DISPLAY_FONT, fill: TEXT_COLOR, fontWeight: 'bold' }; - //Row 1: Coordinates readout (x, y) = ( cos value, sin value ) - //cos and sin values are either decimal numbers ( this.coordinatesReadout ) - //or, in Special Angle mode, they are built-up fractions of number of rads ( this.coordinatesHBox ) + // Row 1: Coordinates readout (x, y) = ( cos value, sin value ) + // cos and sin values are either decimal numbers ( this.coordinatesReadout ) + // or, in Special Angle mode, they are built-up fractions of number of rads ( this.coordinatesHBox ) var coordinatesLabel = new Text( xyEqualsStr, fontBoldInfo ); this.sinReadoutFraction = new FractionNode( '-A', 'B', fontInfo ); //dummy arguments to set bounds this.cosReadoutFraction = new FractionNode( '-c', 'd', fontInfo ); @@ -108,6 +107,7 @@ define( function( require ) { align: 'center', spacing: 0 } ); + //coordinatesHBox is visible in Special Angles mode, coordinatesReadout visible otherwise row1.children = [ coordinatesLabel, this.coordinatesReadout, this.coordinatesHBox ]; this.coordinatesReadout.left = coordinatesLabel.right; @@ -339,12 +339,15 @@ define( function( require ) { if ( !readoutNode.viewProperties.specialAnglesVisible ) { readoutNode.tanReadoutText.visible = !singularity; } - } ); } return inherit( Node, ReadoutNode, { - //set readout units to either degrees or radians + /** + * Set readout units to either degrees or radians. + * + * @param {string} units one of 'degrees' || 'radians' + */ setUnits: function( units ) { this.units = units; if ( units === 'radians' ) { @@ -356,52 +359,74 @@ define( function( require ) { } }, - //Trig Row is row 3 of the readout panel, displays value of either sin, cos, or tan + /** + * Set which type of trig display is visible. Trig row is row 3 of the readout panel. Displays value of either + * sin, cos, or tan. + * + * @param {string} graph + */ setTrigRowVisibility: function( graph ) { this.trigRow3.children[ 0 ].visible = ( graph === 'sin' ); this.trigRow3.children[ 1 ].visible = ( graph === 'cos' ); this.trigRow3.children[ 2 ].visible = ( graph === 'tan' ); }, - setAngleReadoutPrecision: function( nbrDecimalPlaces ) { - this.nbrDecimalPlaces = nbrDecimalPlaces; + + /** + * Set the angle readout precision. + * + * @param {number} decimalPrecision + */ + setAngleReadoutPrecision: function( decimalPrecision ) { + this.nbrDecimalPlaces = decimalPrecision; }, - //sets format of angle readout (row 2) of readout panel: degrees, radians, or special angles + /** + * Sets the unit format of angle readout of readout panel in degrees, radians, or special angles. + */ setAngleReadout: function() { var radiansDisplayed = this.viewProperties.angleUnits === 'radians'; var specialAnglesVisible = this.viewProperties.specialAnglesVisible === true; if ( !radiansDisplayed ) { this.angleReadoutDecimal.text = Util.toFixed( this.model.getAngleInDegrees(), this.nbrDecimalPlaces ) + 'o'; } - if ( radiansDisplayed && !specialAnglesOnly ) { + if ( radiansDisplayed && !specialAnglesVisible ) { this.angleReadoutDecimal.text = Util.toFixed( this.model.angle, 3 ) + ' ' + radsStr; } - if ( radiansDisplayed && specialAnglesOnly ) { + if ( radiansDisplayed && specialAnglesVisible ) { this.setSpecialAngleReadout(); } }, + + /** + * Set the special angle readout. + */ setSpecialAngleReadout: function() { this.angleReadoutFraction.visible = true; + //need integer value of angle, since internal arithmetic often not-quite integer var angleInDegs = Util.roundSymmetric( this.model.getAngleInDegrees() ); //need integer value of angle, internal arithmetic often not-quite integer if ( Math.abs( angleInDegs ) > 360 ) { angleInDegs = angleInDegs % 360; } + //number of full turns around unit circle, incremented at theta = 0 var fullTurnCount = this.model.fullTurnCount; - var piRadsCount = 2 * fullTurnCount; //number of half turns around unit circle; half-turn = pi radians - var fullTurnStr = ''; //angle readout has format theta = 4pi + (1/2)pi = fullTurnStr + small angle + var piRadsCount = 2 * fullTurnCount; // number of half turns around unit circle; half-turn = pi radians + var fullTurnStr = ''; // angle readout has format theta = 4pi + (1/2)pi = fullTurnStr + small angle if ( piRadsCount !== 0 ) { - if ( fullTurnCount > 0 ) { //if angle positive + if ( fullTurnCount > 0 ) { + // if angle positive fullTurnStr = piRadsCount + pi + ' + '; } - else { //if angle negative, minus sign is constructed in FractionNode + else { + // if angle negative, minus sign is constructed in FractionNode fullTurnStr = piRadsCount + pi + ' '; } } else { //if zero turns fullTurnStr = ''; } + this.nbrFullTurnsNode.setValues( fullTurnStr, '' ); this.angleReadoutFraction.left = this.nbrFullTurnsNode.right; //this.nbrFullTurnsText.right; for ( var i = 0; i < this.angleFractions.length; i++ ) { @@ -414,6 +439,7 @@ define( function( require ) { this.angleReadoutFraction.setValues( '-' + this.angleFractions[ i ][ 0 ], this.angleFractions[ i ][ 1 ] ); } } + //Must handle smallAngle = 0 or pi as special cases var roundedAngle = Util.roundSymmetric( this.model.getSmallAngleInDegrees() ); if ( roundedAngle === 0 || roundedAngle === 180 ) { @@ -435,6 +461,10 @@ define( function( require ) { this.angleReadoutFraction.visible = false; } }, + + /** + * Set the trig readout display. + */ setTrigReadout: function() { var sinText = Util.toFixed( this.model.sin(), 3 ); var cosText = Util.toFixed( this.model.cos(), 3 ); @@ -448,6 +478,10 @@ define( function( require ) { this.tanReadoutText.text = tanText; } }, + + /** + * Set the special angle readout display. + */ setSpecialAngleTrigReadout: function() { var smallAngleInDegrees = Util.roundSymmetric( this.model.getSmallAngle0To360() ); for ( var i = 0; i < this.angles.length; i++ ) { diff --git a/js/trig-tour/view/TriangleNode.js b/js/trig-tour/view/TriangleNode.js index 09c7bee..78eb430 100644 --- a/js/trig-tour/view/TriangleNode.js +++ b/js/trig-tour/view/TriangleNode.js @@ -3,9 +3,9 @@ /** * Simple triangle graphic * Used as arrow heads on curves in GraphView - * Created by Michael Dubson (PhET developer) on 6/23/2015. + * + * @author Michael Dubson (PhET developer) on 6/23/2015. */ - define( function( require ) { 'use strict'; @@ -18,10 +18,11 @@ define( function( require ) { /** * Constructor for TriangleNode, which draws a simple triangle with center of base at (0, 0) * Used as arrow heads on ends of curves in GraphView - * @param {Number} length of triangle in pixels - * @param {Number} width of triangle in pixels - * @param {String} color string, e.g. '#0F0' - * @param {Number} rotationInDegrees = rotation of node about (0,0) + * + * @param {number} length of triangle in pixels + * @param {number} width of triangle in pixels + * @param {string} color string, e.g. '#0F0' + * @param {number} rotationInDegrees = rotation of node about (0,0) * @constructor */ function TriangleNode( length, width, color, rotationInDegrees ) { @@ -39,10 +40,9 @@ define( function( require ) { triangleShape.moveTo( 0, 0 ).lineTo( 0, width / 2 ).lineTo( length, 0 ).lineTo( 0, -width / 2 ).close(); var trianglePath = new Path( triangleShape, { lineWidth: 1, fill: this.color } ); this.addChild( trianglePath ); - trianglePath.x = -1;//reference point is 1 pixel inside the arrow head, to guarantee connection with adjacent line + trianglePath.x = -1; //reference point is 1 pixel inside the arrow head, to guarantee connection with adjacent line } - return inherit( Node, TriangleNode ); } ); \ No newline at end of file diff --git a/js/trig-tour/view/TrigTourScreenView.js b/js/trig-tour/view/TrigTourScreenView.js index 14391d2..5da0b4c 100644 --- a/js/trig-tour/view/TrigTourScreenView.js +++ b/js/trig-tour/view/TrigTourScreenView.js @@ -2,6 +2,7 @@ /** * Main screen view, master layout of view on stage + * * @author Michael Dubson (PhET) */ define( function( require ) { @@ -23,7 +24,9 @@ define( function( require ) { var dizzyPhetGirlImage = require( 'mipmap!TRIG_TOUR/dizzy-phet-girl.png' ); /** - * @param {TrigTourModel} model for sim + * Constructor for TrigTourScreenView. + * + * @param {TrigTourModel} trigTourModel - main model for sim * @constructor */ function TrigTourScreenView( trigTourModel ) { diff --git a/js/trig-tour/view/UnitCircleView.js b/js/trig-tour/view/UnitCircleView.js index 17da94a..0a1cfbb 100644 --- a/js/trig-tour/view/UnitCircleView.js +++ b/js/trig-tour/view/UnitCircleView.js @@ -1,8 +1,9 @@ // Copyright 2002-2015, University of Colorado Boulder /** - * Unit Circle View - * Created by Michael Dubson (PhET developer) on 6/2/2015. + * Unit Circle View. Has a grabbable radial arm called a rotor. + * + * @author Michael Dubson (PhET developer) on 6/2/2015. */ define( function( require ) { 'use strict'; @@ -12,7 +13,6 @@ define( function( require ) { var ArrowNode = require( 'SCENERY_PHET/ArrowNode' ); var Bounds2 = require( 'DOT/Bounds2' ); var Circle = require( 'SCENERY/nodes/Circle' ); - //var Image = require( 'SCENERY/nodes/Image'); var inherit = require( 'PHET_CORE/inherit' ); var Line = require( 'SCENERY/nodes/Line' ); var Node = require( 'SCENERY/nodes/Node' ); @@ -46,15 +46,13 @@ define( function( require ) { var SIN_COLOR = TrigTourColors.SIN_COLOR; var VIEW_BACKGROUND_COLOR = TrigTourColors.VIEW_BACKGROUND_COLOR; - /** - * View of the unit circle with grabbable radial arm, called the rotor arm + * Constructor for the UnitCircleView. * * @param {TrigTourModel} model - the main model of the sim - * @param {Property} specialAnglesVisibleProperty - property tracking visiblity of special angles. + * @param {Property} specialAnglesVisibleProperty - property tracking visibility of special angles. * @constructor */ - function UnitCircleView( model, specialAnglesVisibleProperty ) { var unitCircleView = this; @@ -289,7 +287,6 @@ define( function( require ) { } }; - //visibility of x,y, and '1' labels on xyR triangle this.setLabelVisibility = function( isVisible ) { positionLabels(); diff --git a/js/trig-tour/view/ViewProperties.js b/js/trig-tour/view/ViewProperties.js index e6c05fa..86d102b 100644 --- a/js/trig-tour/view/ViewProperties.js +++ b/js/trig-tour/view/ViewProperties.js @@ -1,8 +1,9 @@ // Copyright 2002-2015, University of Colorado Boulder /** - * View property set, passed to control panel - * Created by Michael Dubson (PhET developer) on 6/5/2015. + * View property set, passed to control panel. + * + * @author Michael Dubson (PhET developer) on 6/5/2015. */ define( function( require ) { @@ -13,14 +14,15 @@ define( function( require ) { var PropertySet = require( 'AXON/PropertySet' ); /** + * Constructor for trig-tour ViewProperties. * @constructor */ function ViewProperties() { this.viewProperties = this; PropertySet.call( this, { - graph: 'cos', //{string} which graph is visible, 'cos'|'sin' |'tan' - angleUnits: 'degrees', //{string} which angle units, 'degrees'|'radians' + graph: 'cos', // {string} which graph is visible, 'cos'|'sin' |'tan' + angleUnits: 'degrees', // {string} which angle units, 'degrees'|'radians' labelsVisible: false, gridVisible: false, specialAnglesVisible: false