Change waterCup x, y position to Vector2, see: #77

js/intro/model/IntroModel.ts

@@ -19,6 +19,7 @@ import optionize from '../../../../phet-core/js/optionize.js';
 import EmptyObjectType from '../../../../phet-core/js/types/EmptyObjectType.js';
 import WaterCup from './WaterCup.js';
 import Utils from '../../../../dot/js/Utils.js';
+import Vector2 from '../../../../dot/js/Vector2.js';
 
 type SelfOptions = EmptyObjectType;
 
@@ -85,19 +86,18 @@ export default class IntroModel extends MeanShareAndBalanceModel {
 
     for ( let i = 0; i < MeanShareAndBalanceConstants.MAXIMUM_NUMBER_OF_CUPS; i++ ) {
       const x = i * ( MeanShareAndBalanceConstants.CUP_WIDTH + MeanShareAndBalanceConstants.PIPE_LENGTH );
-
+      const position3D = new Vector2( x, MeanShareAndBalanceConstants.CUPS_3D_CENTER_Y );
       const isActive = i === 0;
       this.waterCup3DArray.push( new WaterCup( {
         tandem: options.tandem.createTandem( `waterCup3D${i}` ),
-        x: x,
-        y: MeanShareAndBalanceConstants.CUPS_3D_CENTER_Y,
+        position: position3D,
         isActive: isActive
       } ) );
 
+      const position2D = new Vector2( x, MeanShareAndBalanceConstants.CUPS_2D_CENTER_Y );
       this.waterCup2DArray.push( new WaterCup( {
         tandem: options.tandem.createTandem( `waterCup2D${i}` ),
-        x: x,
-        y: MeanShareAndBalanceConstants.CUPS_2D_CENTER_Y,
+        position: position2D,
         isActive: isActive,
         waterLevelPropertyOptions: {
           phetioReadOnly: true

js/intro/model/WaterCup.ts

@@ -24,18 +24,17 @@ import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
 import IOType from '../../../../tandem/js/types/IOType.js';
 import NumberIO from '../../../../tandem/js/types/NumberIO.js';
 import meanShareAndBalance from '../../meanShareAndBalance.js';
+import Vector2 from '../../../../dot/js/Vector2.js';
 
 type SelfOptions = {
-  x: number; // The cup's x-position in the view
-  y: number; // THe cup's y-position in the view
+  position: Vector2; // the cups x & y position in the view
   isActive?: boolean;
   waterHeightRange?: Range;
   waterLevelPropertyOptions?: PickOptional<NumberPropertyOptions, 'phetioReadOnly'>;
 };
 
 type StateObject = {
-  x: number;
-  y: number;
+  position: Vector2;
 };
 
 export type WaterCupModelOptions =
@@ -49,8 +48,7 @@ export default class WaterCup extends PhetioObject {
   public readonly isActiveProperty: BooleanProperty;
 
   // The x and y positions for the cup in the view.
-  public readonly x: number;
-  public readonly y: number;
+  public readonly position: Vector2;
 
   // The amount of water contained in the cup. 0 is empty, and 1 is full.
   public readonly waterLevelProperty: NumberProperty;
@@ -73,8 +71,7 @@ export default class WaterCup extends PhetioObject {
     super( options );
 
     this.isActiveProperty = new BooleanProperty( options.isActive );
-    this.x = options.x;
-    this.y = options.y;
+    this.position = options.position;
     this.resetEmitter = new Emitter();
 
     // When a 3D cup's slider is changed enabledRangeProperty is updated accordingly.
@@ -109,10 +106,10 @@ export default class WaterCup extends PhetioObject {
 WaterCup.WaterCupModelIO = new IOType<WaterCup>( 'WaterCupModelIO', {
   valueType: WaterCup,
   toStateObject: ( waterCupModel: WaterCup ) => ( {
-    x: waterCupModel.x
+    position: waterCupModel.position
   } ),
   stateToArgsForConstructor: ( stateObject: StateObject ) => {
-    return [ stateObject.x ];
+    return [ stateObject.position ];
   },
   stateSchema: {
     x: NumberIO

js/intro/view/PredictMeanSlider.ts

@@ -71,7 +71,7 @@ export default class PredictMeanSlider extends AccessibleSlider( Node, 0 ) {
     model.numberOfCupsProperty.link( numberOfCups => {
       const active2DCups = model.getActive2DCups();
       const waterCup2D = active2DCups[ active2DCups.length - 1 ];
-      this.updateLine( waterCup2D.x + 75 );
+      this.updateLine( waterCup2D.position.x + 75 );
     } );
 
     this.setPointerAreas();

js/intro/view/WaterCup2DNode.ts

@@ -40,7 +40,7 @@ export default class WaterCup2DNode extends Node {
                       providedOptions?: cup2DModel2DNodeOptions ) {
     const options = optionize<cup2DModel2DNodeOptions, SelfOptions, NodeOptions>()( {
       y: modelViewTransform.modelToViewY( 0 ) - MeanShareAndBalanceConstants.CUP_HEIGHT,
-      left: waterCup.x,
+      left: waterCup.position.x,
       visibleProperty: waterCup.isActiveProperty
     }, providedOptions );
 

js/intro/view/WaterCup3DNode.ts

@@ -39,7 +39,7 @@ export default class WaterCup3DNode extends Node {
 
     const options = optionize<WaterCup3DNodeOptions, SelfOptions, NodeOptions>()( {
       y: modelViewTransform.modelToViewY( 0 ) - MeanShareAndBalanceConstants.CUP_HEIGHT,
-      left: waterCup.x,
+      left: waterCup.position.x,
       visibleProperty: waterCup.isActiveProperty
     }, providedOptions );
     super();