diff --git a/js/bloch-sphere/view/BlochSphereScreenView.ts b/js/bloch-sphere/view/BlochSphereScreenView.ts index 717c823..d92e397 100644 --- a/js/bloch-sphere/view/BlochSphereScreenView.ts +++ b/js/bloch-sphere/view/BlochSphereScreenView.ts @@ -7,6 +7,7 @@ */ import BlochSphereModel from 'model/BlochSphereModel.js'; +import Dimension2 from '../../../../dot/js/Dimension2.js'; import Vector2 from '../../../../dot/js/Vector2.js'; import ScreenView from '../../../../joist/js/ScreenView.js'; import PhetFont from '../../../../scenery-phet/js/PhetFont.js'; @@ -34,17 +35,27 @@ export default class BlochSphereScreenView extends QuantumMeasurementScreenView tandem: tandem } ); - const azimuthSlider = new Slider( model.blochSphere.azimuthalAngleProperty, model.blochSphere.azimuthalAngleProperty.range, { - center: new Vector2( 100, 100 ), - tandem: tandem.createTandem( 'azimuthSlider' ), - thumbFill: '#444' - } ); const polarSlider = new Slider( model.blochSphere.polarAngleProperty, model.blochSphere.polarAngleProperty.range, { center: new Vector2( 100, 200 ), tandem: tandem.createTandem( 'polarSlider' ), - thumbFill: '#444' + thumbFill: '#444', + trackSize: new Dimension2( 150, 0.5 ), + majorTickLength: 10 + } ); + const azimuthSlider = new Slider( model.blochSphere.azimuthalAngleProperty, model.blochSphere.azimuthalAngleProperty.range, { + center: new Vector2( 100, 100 ), + tandem: tandem.createTandem( 'azimuthSlider' ), + thumbFill: '#444', + trackSize: new Dimension2( 150, 0.5 ), + majorTickLength: 10 } ); + polarSlider.addMajorTick( 0, new Text( '0', { font: new PhetFont( 15 ) } ) ); + polarSlider.addMajorTick( Math.PI, new Text( 'π', { font: new PhetFont( 15 ) } ) ); + + azimuthSlider.addMajorTick( 0, new Text( '0', { font: new PhetFont( 15 ) } ) ); + azimuthSlider.addMajorTick( 2 * Math.PI, new Text( '2π', { font: new PhetFont( 15 ) } ) ); + const slidersPanel = new Panel( new VBox( { spacing: 10, children: [ @@ -62,7 +73,6 @@ export default class BlochSphereScreenView extends QuantumMeasurementScreenView const blochSphereNode = new BlochSphereNode( model.blochSphere, { tandem: tandem.createTandem( 'blochSphereNode' ), - center: this.layoutBounds.center, expandBounds: false, drawTitle: false } ); @@ -79,8 +89,7 @@ export default class BlochSphereScreenView extends QuantumMeasurementScreenView fill: '#aff', cornerRadius: 5, stroke: null, - xMargin: 10, - yMargin: 10 + xMargin: 10 } ), blochSphereNode, diff --git a/js/common/view/BlochSphereNode.ts b/js/common/view/BlochSphereNode.ts index c7c6d90..48fe5db 100644 --- a/js/common/view/BlochSphereNode.ts +++ b/js/common/view/BlochSphereNode.ts @@ -2,8 +2,6 @@ /** * Visual representation of the Bloch Sphere, meaning an orb with axis and the state vector. * - * // TODO: Show the angle indicators and clean code, see https://github.com/phetsims/quantum-measurement/issues/44 - * * @author Agustín Vallejo */ @@ -64,7 +62,8 @@ export default class BlochSphereNode extends Node { drawKets: true, drawTitle: true, drawAngleIndicators: true, - expandBounds: true + expandBounds: true, + excludeInvisibleChildrenFromBounds: true }, providedOptions ); const sphereRadius = 100; @@ -174,6 +173,51 @@ export default class BlochSphereNode extends Node { }, angleIndicatorPathOptions ) ); const zProjectionLine = new Path( null, angleIndicatorPathOptions ); + options.children = [ + title, + upStateLabel, + downStateLabel, + sphereNode, + equatorLine, + xAxis, + yAxis, + zAxis, + xAxisLabel, + yAxisLabel, + zAxisLabel, + polarAngleIndicator, + azimuthalAngleIndicator, + xyProjectionVector, + zProjectionLine, + stateVector + ]; + + super( options ); + + this.pointOnTheEquator = pointOnTheEquator; + + const plusX = this.pointOnTheEquator( 0, xAxisOffsetAngleProperty.value ); + const minusX = this.pointOnTheEquator( Math.PI, xAxisOffsetAngleProperty.value ); + xAxis.shape = new Shape().moveTo( plusX.x, plusX.y ).lineTo( minusX.x, minusX.y ); + + const plusY = this.pointOnTheEquator( Math.PI / 2, xAxisOffsetAngleProperty.value ); + const minusY = this.pointOnTheEquator( -Math.PI / 2, xAxisOffsetAngleProperty.value ); + yAxis.shape = new Shape().moveTo( plusY.x, plusY.y ).lineTo( minusY.x, minusY.y ); + zAxis.shape = new Shape().moveTo( 0, -sphereRadius ).lineTo( 0, sphereRadius ); + + xAxisLabel.centerX = plusX.x + 3 * LABELS_OFFSET; + xAxisLabel.centerY = plusX.y + 2 * LABELS_OFFSET; + yAxisLabel.centerX = plusY.x; + yAxisLabel.centerY = plusY.y - LABELS_OFFSET; + + if ( options.expandBounds ) { + this.setLocalBounds( new Bounds2( -1.5 * sphereRadius, this.bounds.minY, 1.5 * sphereRadius, this.bounds.maxY ) ); + } + + this.sphereRadius = sphereRadius; + this.xAxisOffsetAngleProperty = xAxisOffsetAngleProperty; + this.stateVectorVisibleProperty = stateVectorVisibleProperty; + Multilink.multilink( [ blochSphere.azimuthalAngleProperty, @@ -232,51 +276,6 @@ export default class BlochSphereNode extends Node { ); } ); - - options.children = [ - title, - upStateLabel, - downStateLabel, - sphereNode, - equatorLine, - xAxis, - yAxis, - zAxis, - xAxisLabel, - yAxisLabel, - zAxisLabel, - polarAngleIndicator, - azimuthalAngleIndicator, - xyProjectionVector, - zProjectionLine, - stateVector - ]; - - super( options ); - - this.pointOnTheEquator = pointOnTheEquator; - - const plusX = this.pointOnTheEquator( 0, xAxisOffsetAngleProperty.value ); - const minusX = this.pointOnTheEquator( Math.PI, xAxisOffsetAngleProperty.value ); - xAxis.shape = new Shape().moveTo( plusX.x, plusX.y ).lineTo( minusX.x, minusX.y ); - - const plusY = this.pointOnTheEquator( Math.PI / 2, xAxisOffsetAngleProperty.value ); - const minusY = this.pointOnTheEquator( -Math.PI / 2, xAxisOffsetAngleProperty.value ); - yAxis.shape = new Shape().moveTo( plusY.x, plusY.y ).lineTo( minusY.x, minusY.y ); - zAxis.shape = new Shape().moveTo( 0, -sphereRadius ).lineTo( 0, sphereRadius ); - - xAxisLabel.centerX = plusX.x + 3 * LABELS_OFFSET; - xAxisLabel.centerY = plusX.y + 2 * LABELS_OFFSET; - yAxisLabel.centerX = plusY.x; - yAxisLabel.centerY = plusY.y - LABELS_OFFSET; - - if ( options.expandBounds ) { - this.setLocalBounds( new Bounds2( -1.5 * sphereRadius, this.bounds.minY, 1.5 * sphereRadius, this.bounds.maxY ) ); - } - - this.sphereRadius = sphereRadius; - this.xAxisOffsetAngleProperty = xAxisOffsetAngleProperty; - this.stateVectorVisibleProperty = stateVectorVisibleProperty; } }