diff --git a/js/common/MeanShareAndBalanceConstants.ts b/js/common/MeanShareAndBalanceConstants.ts index 6d5321a..e58492f 100644 --- a/js/common/MeanShareAndBalanceConstants.ts +++ b/js/common/MeanShareAndBalanceConstants.ts @@ -84,7 +84,16 @@ const MeanShareAndBalanceConstants = { MAX_NUMBER_OF_SNACKS_PER_PLATE: 10, MIN_NUMBER_OF_SNACKS_PER_PLATE: 0, NOTEPAD_PAPER_CENTER_Y: 220, - NOTEPAD_LINE_PATTERN: new Pattern( graphiteTexture_png ).setTransformMatrix( Matrix3.affine( 0.15, 0, 0, 0, 0.15, 0.975 ) ), + HORIZONTAL_SKETCH_LINE_PATTERN: new Pattern( graphiteTexture_png ).setTransformMatrix( Matrix3.affine( 0.15, 0, 0, 0, 0.15, 0.975 ) ), + VERTICAL_SKETCH_LINE_PATTERN: new Pattern( graphiteTexture_png ).setTransformMatrix( + Matrix3.affine( + 0.15 * Math.cos( Math.PI / 2 ), + -0.15 * Math.sin( Math.PI / 2 ), + 0.975, + 0.15 * Math.sin( Math.PI / 2 ), + 0.15 * Math.cos( Math.PI / 2 ), + 0 + ) ), NOTEPAD_LINE_PATTERN_WIDTH: 1.95, SOCCER_BALL_RANGE: new Range( 0, 10 ), diff --git a/js/common/view/MeanPredictionSlider.ts b/js/common/view/MeanPredictionSlider.ts index b8c3faf..08dc61e 100644 --- a/js/common/view/MeanPredictionSlider.ts +++ b/js/common/view/MeanPredictionSlider.ts @@ -52,7 +52,7 @@ export default class MeanPredictionSlider extends AccessibleSlider( Node, 0 ) { const predictMeanLine = new Line( new Vector2( 0, 0 ), new Vector2( MeanShareAndBalanceConstants.CUP_WIDTH, 0 ), { lineWidth: MeanShareAndBalanceConstants.NOTEPAD_LINE_PATTERN_WIDTH, - stroke: MeanShareAndBalanceConstants.NOTEPAD_LINE_PATTERN, + stroke: MeanShareAndBalanceConstants.HORIZONTAL_SKETCH_LINE_PATTERN, lineDash: [ 5, 3 ] } ); diff --git a/js/distribute/view/DistributeScreenView.ts b/js/distribute/view/DistributeScreenView.ts index 0450243..c4ad7af 100644 --- a/js/distribute/view/DistributeScreenView.ts +++ b/js/distribute/view/DistributeScreenView.ts @@ -201,7 +201,7 @@ export default class DistributeScreenView extends SharingScreenView { // the default pattern, and return early. if ( !successIndicatorsOperating ) { successRectangle.visible = false; - predictMeanLine.stroke = MeanShareAndBalanceConstants.NOTEPAD_LINE_PATTERN; + predictMeanLine.stroke = MeanShareAndBalanceConstants.HORIZONTAL_SKETCH_LINE_PATTERN; return; } const successRectangleWasVisible = successRectangle.visible; @@ -215,11 +215,11 @@ export default class DistributeScreenView extends SharingScreenView { predictMeanLine.stroke = roundedPrediction === roundedMean ? MeanShareAndBalanceColors.meanColorProperty : - MeanShareAndBalanceConstants.NOTEPAD_LINE_PATTERN; + MeanShareAndBalanceConstants.HORIZONTAL_SKETCH_LINE_PATTERN; successRectangle.visible = roundedPrediction !== roundedMean && closeToMean; } else { - predictMeanLine.stroke = MeanShareAndBalanceConstants.NOTEPAD_LINE_PATTERN; + predictMeanLine.stroke = MeanShareAndBalanceConstants.HORIZONTAL_SKETCH_LINE_PATTERN; successRectangle.visible = false; } diff --git a/js/distribute/view/NotepadCandyBarNode.ts b/js/distribute/view/NotepadCandyBarNode.ts index efbdda0..6bf4867 100644 --- a/js/distribute/view/NotepadCandyBarNode.ts +++ b/js/distribute/view/NotepadCandyBarNode.ts @@ -9,7 +9,7 @@ */ import meanShareAndBalance from '../../meanShareAndBalance.js'; -import { DragListener, Image, InteractiveHighlighting, Line, Node, NodeOptions, Pattern, Rectangle, Text } from '../../../../scenery/js/imports.js'; +import { DragListener, Image, InteractiveHighlighting, Line, Node, NodeOptions, Rectangle, Text } from '../../../../scenery/js/imports.js'; import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js'; import Bounds2 from '../../../../dot/js/Bounds2.js'; import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js'; @@ -19,8 +19,6 @@ import WithRequired from '../../../../phet-core/js/types/WithRequired.js'; import CandyBar from '../model/CandyBar.js'; import Vector2 from '../../../../dot/js/Vector2.js'; import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransform2.js'; -import graphiteTexture_png from '../../../images/graphiteTexture_png.js'; -import Matrix3 from '../../../../dot/js/Matrix3.js'; import Multilink from '../../../../axon/js/Multilink.js'; import RichPointerDragListener from '../../../../scenery-phet/js/RichPointerDragListener.js'; import grabCandyBarV2_mp3 from '../../../sounds/grabCandyBarV2_mp3.js'; @@ -130,54 +128,32 @@ export default class NotepadCandyBarNode extends InteractiveHighlighting( Node ) * A pattern is used for the outline of the candy bar. Because of this, the pattern must be rotated and translated to * match the bounds of the rectangle. This method returns the nodes that make up the outline of the candy bar. */ - public static getSketchOutline( candyBarWidth = MeanShareAndBalanceConstants.CANDY_BAR_WIDTH ): Node[ ] { - - const rightYTranslation = 0.975; - const horizontalStrokePattern = new Pattern( graphiteTexture_png ).setTransformMatrix( - Matrix3.affine( 0.15, 0, 0, 0, 0.15, 0.9 ) - ); - const leftStrokePattern = new Pattern( graphiteTexture_png ).setTransformMatrix( - Matrix3.affine( - 0.15 * Math.cos( Math.PI / 2 ), - -0.15 * Math.sin( Math.PI / 2 ), - 0.975, - 0.15 * Math.sin( Math.PI / 2 ), - 0.15 * Math.cos( Math.PI / 2 ), - 0 - ) ); - const rightStrokePattern = new Pattern( graphiteTexture_png ).setTransformMatrix( - Matrix3.affine( - 0.15 * Math.cos( Math.PI / 2 ), - -0.15 * Math.sin( Math.PI / 2 ), - rightYTranslation, - 0.15 * Math.sin( Math.PI / 2 ), - 0.15 * Math.cos( Math.PI / 2 ), - 0 - ) ); - + public static getSketchOutline(): Node[ ] { + const candyBarWidth = MeanShareAndBalanceConstants.CANDY_BAR_WIDTH; + const candyBarHeight = MeanShareAndBalanceConstants.CANDY_BAR_HEIGHT; const candyBarStrokeLeft = new Line( - 0, 0, 0, MeanShareAndBalanceConstants.CANDY_BAR_HEIGHT, + 0, 0, 0, candyBarHeight, { lineWidth: 1.95, - stroke: leftStrokePattern + stroke: MeanShareAndBalanceConstants.VERTICAL_SKETCH_LINE_PATTERN } ); const candyBarStrokeRight = new Line( - candyBarWidth, 0, candyBarWidth, MeanShareAndBalanceConstants.CANDY_BAR_HEIGHT, + candyBarWidth, 0, candyBarWidth, candyBarHeight, { lineWidth: 1.95, - stroke: rightStrokePattern + stroke: MeanShareAndBalanceConstants.VERTICAL_SKETCH_LINE_PATTERN } ); const candyBarStrokeTop = new Line( 0, 0, candyBarWidth, 0, { lineWidth: 1.95, - stroke: horizontalStrokePattern + stroke: MeanShareAndBalanceConstants.HORIZONTAL_SKETCH_LINE_PATTERN } ); const candyBarStrokeBottom = new Line( - 0, MeanShareAndBalanceConstants.CANDY_BAR_HEIGHT, candyBarWidth, MeanShareAndBalanceConstants.CANDY_BAR_HEIGHT, + 0, candyBarHeight, candyBarWidth, candyBarHeight, { lineWidth: 1.95, - stroke: horizontalStrokePattern + stroke: MeanShareAndBalanceConstants.HORIZONTAL_SKETCH_LINE_PATTERN } ); return [ candyBarStrokeLeft, candyBarStrokeRight, candyBarStrokeTop, candyBarStrokeBottom ]; diff --git a/js/fair-share/view/AllocationModeSoundGenerator.ts b/js/fair-share/view/AllocationModeSoundGenerator.ts index 8148163..df75af9 100644 --- a/js/fair-share/view/AllocationModeSoundGenerator.ts +++ b/js/fair-share/view/AllocationModeSoundGenerator.ts @@ -71,8 +71,8 @@ class AllocationModeSoundGenerator extends SoundGenerator { shareCompleteLargeAmountSoundClip.connect( this.mainGainNode ); const shareCompleteMediumAmountSoundClip = new SoundClip( shareCompleteMediumAmount_mp3 ); shareCompleteMediumAmountSoundClip.connect( this.mainGainNode ); - const shareCompleteSmallAmoungSoundClip = new SoundClip( shareCompleteSmallAmount_mp3 ); - shareCompleteSmallAmoungSoundClip.connect( this.mainGainNode ); + const shareCompleteSmallAmountSoundClip = new SoundClip( shareCompleteSmallAmount_mp3 ); + shareCompleteSmallAmountSoundClip.connect( this.mainGainNode ); const shareFractionalizeSoundClip = new SoundClip( shareFractionalizeSound_mp3 ); shareFractionalizeSoundClip.connect( this.mainGainNode ); @@ -84,7 +84,7 @@ class AllocationModeSoundGenerator extends SoundGenerator { if ( totalApplesProperty.value < MAX_APPLES / 3 ) { - shareCompleteSmallAmoungSoundClip.play(); + shareCompleteSmallAmountSoundClip.play(); } else if ( totalApplesProperty.value < 2 * MAX_APPLES / 3 ) { shareCompleteMediumAmountSoundClip.play(); diff --git a/js/level-out/view/LevelOutScreenView.ts b/js/level-out/view/LevelOutScreenView.ts index b3045a3..9e78bb4 100644 --- a/js/level-out/view/LevelOutScreenView.ts +++ b/js/level-out/view/LevelOutScreenView.ts @@ -75,7 +75,7 @@ export default class LevelOutScreenView extends MeanShareAndBalanceScreenView { // the default pattern, and return early. if ( !successIndicatorsOperating ) { successRectangle.visible = false; - predictMeanLine.stroke = MeanShareAndBalanceConstants.NOTEPAD_LINE_PATTERN; + predictMeanLine.stroke = MeanShareAndBalanceConstants.HORIZONTAL_SKETCH_LINE_PATTERN; return; } const meanTolerance = 0.05; @@ -91,7 +91,7 @@ export default class LevelOutScreenView extends MeanShareAndBalanceScreenView { } else { successRectangle.visible = pipesOpen && doWaterLevelsMatchMean && closeToMean; - predictMeanLine.stroke = MeanShareAndBalanceConstants.NOTEPAD_LINE_PATTERN; + predictMeanLine.stroke = MeanShareAndBalanceConstants.HORIZONTAL_SKETCH_LINE_PATTERN; } // If one of the success indicators was just activated, play the "successful prediction" sound. diff --git a/js/level-out/view/NotepadCupNode.ts b/js/level-out/view/NotepadCupNode.ts index 0494a26..db8a459 100644 --- a/js/level-out/view/NotepadCupNode.ts +++ b/js/level-out/view/NotepadCupNode.ts @@ -44,20 +44,19 @@ export default class NotepadCupNode extends Node { // 0 is empty, 1 is full const y = Utils.linear( 0, 1, MeanShareAndBalanceConstants.CUP_HEIGHT, 0, notepadCup.waterLevelProperty.value ); - const topStrokePattern = new Pattern( graphiteTexture_png ).setTransformMatrix( Matrix3.affine( 0.15, 0, 0, 0, 0.15, 0.9 ) ); + // Create the outline of the notepad cup with a pattern. const bottomStrokePattern = new Pattern( graphiteTexture_png ).setTransformMatrix( Matrix3.affine( 0.15, 0, 0, 0, 0.15, 0 ) ); - const verticalStrokePattern = new Pattern( graphiteTexture_png ) - .setTransformMatrix( Matrix3.affine( 0.15 * Math.cos( Math.PI / 2 ), -0.15 * Math.sin( Math.PI / 2 ), 0.975, - 0.15 * Math.sin( Math.PI / 2 ), 0.15 * Math.cos( Math.PI / 2 ), 0 ) ); - - const cupStrokeLeft = new Line( 0, 0, 0, MeanShareAndBalanceConstants.CUP_HEIGHT, { lineWidth: 1.95, stroke: verticalStrokePattern } ); + const cupStrokeLeft = new Line( 0, 0, 0, MeanShareAndBalanceConstants.CUP_HEIGHT, { + lineWidth: 1.95, + stroke: MeanShareAndBalanceConstants.VERTICAL_SKETCH_LINE_PATTERN + } ); const cupStrokeRight = new Line( MeanShareAndBalanceConstants.CUP_WIDTH, 0, MeanShareAndBalanceConstants.CUP_WIDTH, MeanShareAndBalanceConstants.CUP_HEIGHT, { lineWidth: 1.95, - stroke: verticalStrokePattern + stroke: MeanShareAndBalanceConstants.VERTICAL_SKETCH_LINE_PATTERN } ); const cupStrokeTop = new Line( 0, 0, MeanShareAndBalanceConstants.CUP_WIDTH, 0, { lineWidth: 1.95, - stroke: topStrokePattern + stroke: MeanShareAndBalanceConstants.HORIZONTAL_SKETCH_LINE_PATTERN } ); const cupStrokeBottom = new Line( 0, MeanShareAndBalanceConstants.CUP_HEIGHT, MeanShareAndBalanceConstants.CUP_WIDTH, MeanShareAndBalanceConstants.CUP_HEIGHT, { lineWidth: 1.95, diff --git a/js/level-out/view/PipeNode.ts b/js/level-out/view/PipeNode.ts index 98cf957..a4eb0c4 100644 --- a/js/level-out/view/PipeNode.ts +++ b/js/level-out/view/PipeNode.ts @@ -10,7 +10,7 @@ import Vector2 from '../../../../dot/js/Vector2.js'; import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransform2.js'; import optionize, { combineOptions, EmptySelfOptions } from '../../../../phet-core/js/optionize.js'; -import { FireListener, InteractiveHighlighting, Line, Node, NodeOptions, Pattern, Rectangle } from '../../../../scenery/js/imports.js'; +import { FireListener, InteractiveHighlighting, Line, Node, NodeOptions, Rectangle } from '../../../../scenery/js/imports.js'; import meanShareAndBalance from '../../meanShareAndBalance.js'; import Pipe from '../model/Pipe.js'; import MeanShareAndBalanceConstants from '../../common/MeanShareAndBalanceConstants.js'; @@ -20,8 +20,6 @@ import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js'; import ValveNode from './ValveNode.js'; import Property from '../../../../axon/js/Property.js'; import PickRequired from '../../../../phet-core/js/types/PickRequired.js'; -import graphiteTexture_png from '../../../images/graphiteTexture_png.js'; -import Matrix3 from '../../../../dot/js/Matrix3.js'; type SelfOptions = EmptySelfOptions; type PipeNodeOptions = SelfOptions & StrictOmit & PickRequired; @@ -43,27 +41,23 @@ export default class PipeNode extends InteractiveHighlighting( Node ) { const pipeRectangle = new Rectangle( 0, 0, MeanShareAndBalanceConstants.PIPE_LENGTH, MeanShareAndBalanceConstants.PIPE_WIDTH, { fill: MeanShareAndBalanceConstants.PIPE_GRADIENT } ); - const horizontalStrokePattern = new Pattern( graphiteTexture_png ) - .setTransformMatrix( Matrix3.affine( 0.15, 0, 0, 0, 0.15, 0.9 ) ); - const leftStrokePattern = new Pattern( graphiteTexture_png ) - .setTransformMatrix( Matrix3.affine( 0.15 * Math.cos( Math.PI / 2 ), -0.15 * Math.sin( Math.PI / 2 ), 0.975, - 0.15 * Math.sin( Math.PI / 2 ), 0.15 * Math.cos( Math.PI / 2 ), 0 ) ); - const rightStrokePattern = new Pattern( graphiteTexture_png ) - .setTransformMatrix( Matrix3.affine( 0.15 * Math.cos( Math.PI / 2 ), -0.15 * Math.sin( Math.PI / 2 ), 0, - 0.15 * Math.sin( Math.PI / 2 ), 0.15 * Math.cos( Math.PI / 2 ), 0 ) ); - - const pipeStrokeLeft = new Line( 0, 0, 0, MeanShareAndBalanceConstants.PIPE_WIDTH, { lineWidth: 1.95, stroke: leftStrokePattern } ); - const pipeStrokeRight = new Line( MeanShareAndBalanceConstants.PIPE_LENGTH, 0, MeanShareAndBalanceConstants.PIPE_LENGTH, MeanShareAndBalanceConstants.PIPE_WIDTH, { + const pipeStrokeLeft = new Line( 0, 0, 0, MeanShareAndBalanceConstants.PIPE_WIDTH, { lineWidth: 1.95, - stroke: rightStrokePattern + stroke: MeanShareAndBalanceConstants.VERTICAL_SKETCH_LINE_PATTERN + } ); + const pipeStrokeRight = new Line( MeanShareAndBalanceConstants.PIPE_LENGTH, 0, + MeanShareAndBalanceConstants.PIPE_LENGTH, MeanShareAndBalanceConstants.PIPE_WIDTH, { + lineWidth: 1.95, + stroke: MeanShareAndBalanceConstants.VERTICAL_SKETCH_LINE_PATTERN } ); const pipeStrokeTop = new Line( 0, 0, MeanShareAndBalanceConstants.PIPE_LENGTH, 0, { lineWidth: 1.95, - stroke: horizontalStrokePattern + stroke: MeanShareAndBalanceConstants.HORIZONTAL_SKETCH_LINE_PATTERN } ); - const pipeStrokeBottom = new Line( 0, MeanShareAndBalanceConstants.PIPE_WIDTH, MeanShareAndBalanceConstants.PIPE_LENGTH, MeanShareAndBalanceConstants.PIPE_WIDTH, { + const pipeStrokeBottom = new Line( 0, MeanShareAndBalanceConstants.PIPE_WIDTH, + MeanShareAndBalanceConstants.PIPE_LENGTH, MeanShareAndBalanceConstants.PIPE_WIDTH, { lineWidth: 1.95, - stroke: horizontalStrokePattern + stroke: MeanShareAndBalanceConstants.HORIZONTAL_SKETCH_LINE_PATTERN } ); diff --git a/js/level-out/view/WaterBalanceSoundGenerator.ts b/js/level-out/view/WaterBalanceSoundGenerator.ts index 3a21b7a..e903169 100644 --- a/js/level-out/view/WaterBalanceSoundGenerator.ts +++ b/js/level-out/view/WaterBalanceSoundGenerator.ts @@ -2,7 +2,7 @@ /** * Sound generator for the water cup levels. The pitch of the tone is scaled based on the mean value of all the cups, - * and a lowpass filter is applied that passes more frequencies as the cups get closer to the mean value and less as + * and a low pass filter is applied that passes more frequencies as the cups get closer to the mean value and less as * they get further away. * * @author John Blanco (PhET Interactive Simulations) @@ -169,7 +169,7 @@ class WaterBalanceSoundGenerator extends SoundClip { meanProperty.link( updateMaxPossibleDeviation ); // Create a closure function that maps the current max deviation from the mean for the notepad cups to a cutoff - // frequency for the lowpass filter. This uses a piecewise function defined by two points in a unit square. It's + // frequency for the low pass filter. This uses a piecewise function defined by two points in a unit square. It's // hard to describe in a comment, so please see // https://github.com/phetsims/mean-share-and-balance/issues/171#issuecomment-2099127519, which includes a diagram. const getFrequencyFromMaxDeviationFromMean = ( deviationFromMean: number ) => { @@ -236,7 +236,7 @@ class WaterBalanceSoundGenerator extends SoundClip { this.startOrContinueSoundProduction(); } - // Set the cutoff frequency of the lowpass filter based on the max deviation from the mean. The intent here + // Set the cutoff frequency of the low pass filter based on the max deviation from the mean. The intent here // is to produce a more filtered sound when far from the mean and less filtered when all cups are close to it. const filterFrequency = getFrequencyFromMaxDeviationFromMean( maxDeviationFromMean ); lowPassFilter.frequency.cancelScheduledValues( 0 ); diff --git a/js/mean-share-and-balance-main.ts b/js/mean-share-and-balance-main.ts index 4b2b8a6..8964daf 100644 --- a/js/mean-share-and-balance-main.ts +++ b/js/mean-share-and-balance-main.ts @@ -29,7 +29,7 @@ const simOptions: SimOptions = { } }; -// launch the sim - beware that scenery Image nodes created outside of simLauncher.launch() will have zero bounds +// launch the sim - beware that scenery Image nodes created outside simLauncher.launch() will have zero bounds // until the images are fully loaded, see https://github.com/phetsims/coulombs-law/issues/70 simLauncher.launch( () => { const sim = new Sim( MeanShareAndBalanceStrings[ 'mean-share-and-balance' ].titleStringProperty, [