Skip to content

Commit

Permalink
Adding spans to color profile as well, see #49
Browse files Browse the repository at this point in the history
  • Loading branch information
@AgustinVallejo
AgustinVallejo committed Oct 7, 2024
1 parent a37e0a3 commit 620ce92
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 21 deletions.
2 changes: 1 addition & 1 deletion js/coins/view/MultiCoinTestBox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import SmallCoinNode, { SmallCoinDisplayMode } from './SmallCoinNode.js';
type SelfOptions = EmptySelfOptions;
export type MultiCoinTestBoxOptions = SelfOptions & WithRequired<HBoxOptions, 'tandem'>;

// constants TODO: Colors https://github.com/phetsims/quantum-measurement/issues/49
// constants
const BOX_SIZE = new Dimension2( 200, 200 );
const TEST_BOX_CONTENTS_HIDDEN_FILL = new LinearGradient( 0, 0, BOX_SIZE.width, 0 )
.addColorStop( 0, quantumMeasurementColors.multiCoinFirstGradientColorProperty )
Expand Down
57 changes: 43 additions & 14 deletions js/coins/view/OutcomeProbabilityControl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
import DerivedStringProperty from '../../../../axon/js/DerivedStringProperty.js';
import Multilink from '../../../../axon/js/Multilink.js';
import NumberProperty from '../../../../axon/js/NumberProperty.js';
import Utils from '../../../../dot/js/Utils.js';
import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
Expand All @@ -19,36 +20,52 @@ import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
import { Node, RichText, Text, VBox, VBoxOptions } from '../../../../scenery/js/imports.js';
import { SystemType } from '../../common/model/SystemType.js';
import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
import QuantumMeasurementConstants from '../../common/QuantumMeasurementConstants.js';
import quantumMeasurement from '../../quantumMeasurement.js';
import QuantumMeasurementStrings from '../../QuantumMeasurementStrings.js';
import ProbabilityEquationsNode from './ProbabilityEquationsNode.js';
import ProbabilityValueControl from './ProbabilityValueControl.js';

type SelfOptions = EmptySelfOptions;
type OutcomeProbabilityControlOptions = SelfOptions & PickRequired<VBox, 'tandem' | 'visibleProperty'>;

// TODO: Include color into the span https://github.com/phetsims/quantum-measurement/issues/49

// constants
const MAGENTA_SPAN = ( text: string ) => `<span style="color: magenta;">${text}</span>`;
// constants that don't rely on systemType for the color
const TITLE_AND_LABEL_FONT = new PhetFont( 16 );
const ALPHA = QuantumMeasurementConstants.ALPHA;
const BETA = QuantumMeasurementConstants.BETA;
const UP = QuantumMeasurementConstants.SPIN_UP_ARROW_CHARACTER;
const DOWN = QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER;
const KET = QuantumMeasurementConstants.KET;
const BRA_KET_TITLE_STRING = `( ${ALPHA}|${UP}${KET} + ${MAGENTA_SPAN( BETA )}|${MAGENTA_SPAN( DOWN )}${KET} )`;

const MAGNITUDE_OF_ALPHA_SQUARED = `|${ALPHA}|<sup>2`;
const MAGNITUDE_OF_BETA_SQUARED = MAGENTA_SPAN( `|${BETA}|<sup>2` );


export default class OutcomeProbabilityControl extends VBox {

public constructor( systemType: SystemType,
outcomeProbabilityProperty: NumberProperty,
providedOptions: OutcomeProbabilityControlOptions ) {

let COLOR_SPAN: ( text: string ) => string = text => text;

let BRA_KET_TITLE_STRING = `( ${ALPHA}|${UP}${KET} + ${COLOR_SPAN( BETA )}|${COLOR_SPAN( DOWN )}${KET} )`;
let MAGNITUDE_OF_BETA_SQUARED = COLOR_SPAN( `|${BETA}|<sup>2` );

Multilink.multilink(
[
QuantumMeasurementColors.tailsColorProperty,
QuantumMeasurementColors.downColorProperty
],
( tailsColor, downColor ) => {
COLOR_SPAN = ( text: string ) => {
return ProbabilityEquationsNode.COLOR_SPAN( text, systemType === 'classical' ? tailsColor : downColor );
};
BRA_KET_TITLE_STRING = `( ${ALPHA}|${UP}${KET} + ${COLOR_SPAN( BETA )}|${COLOR_SPAN( DOWN )}${KET} )`;
MAGNITUDE_OF_BETA_SQUARED = COLOR_SPAN( `|${BETA}|<sup>2` );
}
);


let title: Node;
if ( systemType === 'classical' ) {
title = new Text( QuantumMeasurementStrings.coinBiasStringProperty, {
Expand All @@ -58,7 +75,11 @@ export default class OutcomeProbabilityControl extends VBox {
}
else {
const titleStringProperty = new DerivedStringProperty(
[ QuantumMeasurementStrings.stateToPrepareStringProperty ],
[
QuantumMeasurementStrings.stateToPrepareStringProperty,
QuantumMeasurementColors.tailsColorProperty,
QuantumMeasurementColors.downColorProperty
],
stateToPrepareString => `<b>${stateToPrepareString}</b> ${BRA_KET_TITLE_STRING}`
);
title = new RichText( titleStringProperty, {
Expand Down Expand Up @@ -96,9 +117,11 @@ export default class OutcomeProbabilityControl extends VBox {

const classicalDownTitleProperty = new DerivedProperty( [
QuantumMeasurementStrings.probabilityStringProperty,
QuantumMeasurementStrings.probabilityOfValuePatternStringProperty
QuantumMeasurementStrings.probabilityOfValuePatternStringProperty,
QuantumMeasurementColors.tailsColorProperty,
QuantumMeasurementColors.downColorProperty
], ( probabilityString, probabilityOfValuePatternString ) => {
const POfV = StringUtils.fillIn( probabilityOfValuePatternString, { value: MAGENTA_SPAN( `<b>${QuantumMeasurementConstants.CLASSICAL_DOWN_SYMBOL}</b>` ) } );
const POfV = StringUtils.fillIn( probabilityOfValuePatternString, { value: COLOR_SPAN( `<b>${QuantumMeasurementConstants.CLASSICAL_DOWN_SYMBOL}</b>` ) } );
return `${probabilityString} ${POfV}`;
}
);
Expand All @@ -114,9 +137,11 @@ export default class OutcomeProbabilityControl extends VBox {

const quantumDownTitleProperty = new DerivedProperty( [
QuantumMeasurementStrings.probabilityStringProperty,
QuantumMeasurementStrings.probabilityOfValuePatternStringProperty
QuantumMeasurementStrings.probabilityOfValuePatternStringProperty,
QuantumMeasurementColors.tailsColorProperty,
QuantumMeasurementColors.downColorProperty
], ( probabilityString, probabilityOfValuePatternString ) => {
const POfV = StringUtils.fillIn( probabilityOfValuePatternString, { value: MAGENTA_SPAN( `<b>${QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER}</b>` ) } );
const POfV = StringUtils.fillIn( probabilityOfValuePatternString, { value: COLOR_SPAN( `<b>${QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER}</b>` ) } );
return `${probabilityString} ${POfV} = ${MAGNITUDE_OF_BETA_SQUARED}`;
}
);
Expand All @@ -141,12 +166,16 @@ export default class OutcomeProbabilityControl extends VBox {

// There is an additional child node in the quantum case that shows the quantum state and updates dynamically.
const quantumStateReadoutStringProperty = new DerivedProperty(
[ outcomeProbabilityProperty ],
[
outcomeProbabilityProperty,
QuantumMeasurementColors.tailsColorProperty,
QuantumMeasurementColors.downColorProperty
],
outcomeProbability => {

const alphaValue = Utils.toFixed( Math.sqrt( outcomeProbability ), 3 );
const betaValue = Utils.toFixed( Math.sqrt( 1 - outcomeProbability ), 3 );
return `${alphaValue}|${UP}${KET} + ${MAGENTA_SPAN( betaValue )}|${MAGENTA_SPAN( DOWN )}${KET}`;
return `${alphaValue}|${UP}${KET} + ${COLOR_SPAN( betaValue )}|${COLOR_SPAN( DOWN )}${KET}`;
}
);

Expand Down
19 changes: 13 additions & 6 deletions js/coins/view/ProbabilityEquationsNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,25 @@ import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
import Utils from '../../../../dot/js/Utils.js';
import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
import { RichText } from '../../../../scenery/js/imports.js';
import { Color, RichText } from '../../../../scenery/js/imports.js';
import { SystemType } from '../../common/model/SystemType.js';
import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
import QuantumMeasurementConstants from '../../common/QuantumMeasurementConstants.js';
import quantumMeasurement from '../../quantumMeasurement.js';

export default class ProbabilityEquationsNode extends RichText {

public constructor( biasProperty: TReadOnlyProperty<number>, systemType: SystemType ) {
const equationsStringProperty = new DerivedProperty( [ biasProperty ], bias => {

// TODO: Include color into the span https://github.com/phetsims/quantum-measurement/issues/49

const equationsStringProperty = new DerivedProperty( [
biasProperty,
QuantumMeasurementColors.tailsColorProperty,
QuantumMeasurementColors.downColorProperty
], ( bias, tailsColor, downColor ) => {
const upperFunctionParameter = systemType === 'classical' ? QuantumMeasurementConstants.CLASSICAL_UP_SYMBOL : QuantumMeasurementConstants.SPIN_UP_ARROW_CHARACTER;
const lowerFunctionParameter = systemType === 'classical' ? QuantumMeasurementConstants.CLASSICAL_DOWN_SYMBOL : QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER;
const upperEquation = `P(<b>${upperFunctionParameter}</b>) = ${Utils.toFixed( bias, 2 )}`;
const lowerEquation = `P(<span style="color: magenta;"><b>${lowerFunctionParameter}</b></span>) = <span style="color: magenta;">${Utils.toFixed( 1 - bias, 2 )}</span>`;
const COLOR_SPAN = ( text: string ) => ProbabilityEquationsNode.COLOR_SPAN( text, systemType === 'classical' ? tailsColor : downColor );
const lowerEquation = `P(<b>${COLOR_SPAN( lowerFunctionParameter )}</b>) = ${COLOR_SPAN( Utils.toFixed( 1 - bias, 2 ) )}`;
return `${upperEquation}<br>${lowerEquation}`;
} );

Expand All @@ -36,6 +39,10 @@ export default class ProbabilityEquationsNode extends RichText {
leading: 7
} );
}

public static COLOR_SPAN( text: string, color: Color ): string {
return `<span style="color: ${color.toCSS()};">${text}</span>`;
}
}

quantumMeasurement.register( 'ProbabilityEquationsNode', ProbabilityEquationsNode );

0 comments on commit 620ce92

Please sign in to comment.