Skip to content

Commit

Permalink
add scale and update force of displaced water, phetsims/buoyancy#113
Browse files Browse the repository at this point in the history 
Signed-off-by: Michael Kauzmann <[email protected]>
  • Loading branch information
@zepumph
zepumph committed Mar 26, 2024
1 parent 6c2c35f commit 5b2ab08
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 18 deletions.
39 changes: 35 additions & 4 deletions js/buoyancy/view/BuoyancyLabScreenView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
import Vector2 from '../../../../dot/js/Vector2.js';
import { combineOptions } from '../../../../phet-core/js/optionize.js';
import { AlignBox, HBox, VBox } from '../../../../scenery/js/imports.js';
import { AlignBox, HBox, Node, VBox } from '../../../../scenery/js/imports.js';
import Panel from '../../../../sun/js/Panel.js';
import DensityBuoyancyCommonConstants from '../../common/DensityBuoyancyCommonConstants.js';
import Material from '../../common/model/Material.js';
Expand All @@ -28,6 +28,9 @@ import FluidDisplacedPanel from './FluidDisplacedPanel.js';
import SubmergedAccordionBox from './SubmergedAccordionBox.js';
import DensityBuoyancyCommonStrings from '../../DensityBuoyancyCommonStrings.js';
import PatternStringProperty from '../../../../axon/js/PatternStringProperty.js';
import ThreeUtils from '../../../../mobius/js/ThreeUtils.js';
import Vector3 from '../../../../dot/js/Vector3.js';
import ScaleView from '../../common/view/ScaleView.js';

// constants
const MARGIN = DensityBuoyancyCommonConstants.MARGIN;
Expand All @@ -51,9 +54,12 @@ export default class BuoyancyLabScreenView extends DensityBuoyancyScreenView<Buo
spacing: 10,
align: 'left',
children: [
new FluidDisplacedPanel( this.waterLevelVolumeProperty, maxBlockVolume, {
visibleProperty: model.showDisplacedFluidProperty
} ),
new FluidDisplacedPanel( this.waterLevelVolumeProperty,
maxBlockVolume,
BuoyancyLabScreenView.getFluidDisplacedPanelScaleIcon(),
model.gravityProperty, {
visibleProperty: model.showDisplacedFluidProperty
} ),
new MultiSectionPanelsNode( [ new BuoyancyDisplayOptionsNode( model, {
showFluidDisplacedProperty: model.showDisplacedFluidProperty
} ) ] )
Expand Down Expand Up @@ -159,6 +165,31 @@ export default class BuoyancyLabScreenView extends DensityBuoyancyScreenView<Buo

this.addChild( this.popupLayer );
}

// TODO: cache icon? https://github.com/phetsims/buoyancy/issues/113
private static getFluidDisplacedPanelScaleIcon(): Node {
if ( !ThreeUtils.isWebGLEnabled() ) {
return DensityBuoyancyScreenView.getFallbackIcon();
}

const icon = DensityBuoyancyScreenView.getAngledIcon( 6, new Vector3( 0, 0.2, 0 ), scene => {

const scaleGeometry = ScaleView.getScaleGeometry();

const scale = new THREE.Mesh( scaleGeometry, new THREE.MeshStandardMaterial( {
color: 0xffffff,
roughness: 0.2,
metalness: 0.7,
emissive: 0x666666
} ) );

scale.position.copy( ThreeUtils.vectorToThree( new Vector3( 0, 0.2, 0 ) ) );
scene.add( scale );
}, null );

icon.setScaleMagnitude( 0.2 );
return icon;
}
}

densityBuoyancyCommon.register( 'BuoyancyLabScreenView', BuoyancyLabScreenView );
52 changes: 38 additions & 14 deletions js/buoyancy/view/FluidDisplacedPanel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,14 @@ import BeakerNode from '../../../../scenery-phet/js/BeakerNode.js';
import NumberProperty from '../../../../axon/js/NumberProperty.js';
import Range from '../../../../dot/js/Range.js';
import { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
import { Text, VBox } from '../../../../scenery/js/imports.js';
import { Node, RichText, Text, VBox } from '../../../../scenery/js/imports.js';
import DensityBuoyancyCommonStrings from '../../DensityBuoyancyCommonStrings.js';
import DensityBuoyancyCommonConstants from '../../common/DensityBuoyancyCommonConstants.js';
import NumberDisplay from '../../../../scenery-phet/js/NumberDisplay.js';
import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
import Utils from '../../../../dot/js/Utils.js';
import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
import Gravity from '../../common/model/Gravity.js';

type SelfOptions = EmptySelfOptions;

Expand All @@ -28,18 +30,14 @@ const STARTING_VOLUME = DensityBuoyancyCommonConstants.DESIRED_STARTING_POOL_VOL

export default class FluidDisplacedPanel extends MultiSectionPanelsNode {

/**
* @param poolVolumeProperty
* @param maxBeakerVolume - in liters
* @param providedOptions
*/
public constructor( poolVolumeProperty: TReadOnlyProperty<number>,
maxBeakerVolume: number,
scaleIcon: Node,
gravityProperty: TReadOnlyProperty<Gravity>,
providedOptions?: FluidDisplacedPanelOptions ) {
// TODO: is there a way to assert this? https://github.com/phetsims/buoyancy/issues/113
// assert && assert( Utils.toFixedNumber( poolVolumeProperty.value, 7 ) === 100, 'This class greatly expects the starting value to be 100.' );


const displayRange = new Range( 0, maxBeakerVolume );
const displayedDisplacedVolumeProperty = new NumberProperty( 0, { range: displayRange } );
poolVolumeProperty.link( totalLiters => {
Expand All @@ -51,16 +49,16 @@ export default class FluidDisplacedPanel extends MultiSectionPanelsNode {
numberFormatter: value => StringUtils.fillIn( DensityBuoyancyCommonStrings.litersPatternStringProperty, {
liters: Utils.toFixed( value, 2 )
} ),
numberFormatterDependencies: [ DensityBuoyancyCommonStrings.litersPatternStringProperty ]
numberFormatterDependencies: [ DensityBuoyancyCommonStrings.litersPatternStringProperty ],
textOptions: {
font: new PhetFont( 14 )
},
opacity: 0.8
} );

// Beaker expects a range between 0 and 1
const beakerRange = new Range( 0, 1 );
const beakerVolumeProperty = new NumberProperty( 0, { range: beakerRange } );
displayedDisplacedVolumeProperty.link( displayedLiters => {
// TODO: assert if we go over 1?? https://github.com/phetsims/buoyancy/issues/113
beakerVolumeProperty.value = beakerRange.constrainValue( ( displayedLiters ) / maxBeakerVolume );
} );

// TODO: add majorTickMarkModulus: 5 as an option, https://github.com/phetsims/buoyancy/issues/113
const beakerNode = new BeakerNode( beakerVolumeProperty, {
Expand All @@ -72,15 +70,41 @@ export default class FluidDisplacedPanel extends MultiSectionPanelsNode {
numberOfTicks: 10
} );

const forceReadout = new RichText( 'hi mark', {
font: new PhetFont( {
size: 16,
weight: 'bold'
} ),
// TODO: why doesn't this worK? https://github.com/phetsims/buoyancy/issues/113
maxWidth: scaleIcon.width
} );

displayedDisplacedVolumeProperty.link( displayedLiters => {
// TODO: assert if we go over 1?? https://github.com/phetsims/buoyancy/issues/113
beakerVolumeProperty.value = beakerRange.constrainValue( ( displayedLiters ) / maxBeakerVolume );

// TODO: i18n, https://github.com/phetsims/buoyancy/issues/113
forceReadout.string = `${Utils.toFixedNumber( gravityProperty.value.value * displayedLiters, 2 )}N`;
forceReadout.centerX = beakerNode.centerX;
} );

numberDisplay.bottom = beakerNode.bottom;
numberDisplay.left = beakerNode.left;
scaleIcon.top = beakerNode.bottom - 25;
forceReadout.centerY = scaleIcon.bottom - 20;
scaleIcon.centerX = forceReadout.centerX = beakerNode.centerX;


super( [ new VBox( {
spacing: DensityBuoyancyCommonConstants.MARGIN,
children: [
new Text( DensityBuoyancyCommonStrings.fluidDisplacedStringProperty, {
font: DensityBuoyancyCommonConstants.TITLE_FONT,
maxWidth: 100
} ),
beakerNode,
numberDisplay
new Node( {
children: [ scaleIcon, beakerNode, numberDisplay, forceReadout ]
} )
]
} ) ], providedOptions );
}
Expand Down

0 comments on commit 5b2ab08

Please sign in to comment.