Update notepad balls and beam to look more sketchy

[amanda-phet]

Should we make the balance beam and circles look more sketchy? It's the only screen without that aesthetic, so I wonder if the beam could have the sketchy stroke we're using in other places, and if the black circles could have the same fill as the apples in either black or dark gray.

[amanda-phet]

The ball fill is #4d4d4d. It would be great to use the same color for the stroke around it. I think that's the same color being used as the stroke around the apples, but if it's not I can update the ball fill to match!

[marlitas]

I played with the balance beam line pattern today, and though I fully believe there is a way to do it. I think it's going to require some help from @jbphet. My calculus isn't quite up to snuff to figure out the rotation properly. I'm going to put this on hold until I come back and we have time to meet together.

```diff Subject: [PATCH] balance beam pattern --- Index: js/balance-point/view/BalanceBeamNode.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/balance-point/view/BalanceBeamNode.ts b/js/balance-point/view/BalanceBeamNode.ts --- a/js/balance-point/view/BalanceBeamNode.ts (revision 0ed19fd187f3af81886f72de875b835b38f4cc96) +++ b/js/balance-point/view/BalanceBeamNode.ts (date 1717983923260) @@ -8,7 +8,7 @@ * @author John Blanco (PhET Interactive Simulations) */ -import { Circle, Color, Image, Line, ManualConstraint, MatrixBetweenProperty, Node, NodeOptions, Text } from '../../../../scenery/js/imports.js'; +import { Circle, Color, Image, Line, ManualConstraint, MatrixBetweenProperty, Node, NodeOptions, Pattern, Text } from '../../../../scenery/js/imports.js'; import meanShareAndBalance from '../../meanShareAndBalance.js'; import NumberLineNode from '../../../../soccer-common/js/view/NumberLineNode.js'; import MeanShareAndBalanceConstants from '../../common/MeanShareAndBalanceConstants.js'; @@ -36,6 +36,8 @@ import selectionArpeggio009_mp3 from '../../../../tambo/sounds/selectionArpeggio009_mp3.js'; import BeamTiltSoundGenerator from './BeamTiltSoundGenerator.js'; import sketchedDataPointFill_svg from '../../../images/sketchedDataPointFill_svg.js'; +import sketchedBalanceBeamTexture_svg from '../../../images/sketchedBalanceBeamTexture_svg.js'; +import Matrix3 from '../../../../dot/js/Matrix3.js'; const BALANCE_BEAM_GROUND_Y = 220; const TRANSFORM_SCALE = MeanShareAndBalanceConstants.CHART_VIEW_WIDTH / MeanShareAndBalanceConstants.SOCCER_BALL_RANGE.getLength(); @@ -156,9 +158,10 @@ // Create the line that represents the balance beam. const transformedLeftYValue = BALANCE_BEAM_TRANSFORM.modelToViewY( sceneModel.leftBalanceBeamYValueProperty.value ); const transformedRightYValue = BALANCE_BEAM_TRANSFORM.modelToViewY( sceneModel.rightBalanceBeamYValueProperty.value ); + const balanceBeamLinePattern = new Pattern( sketchedBalanceBeamTexture_svg ).setTransformMatrix( Matrix3.affine( 1, 0, 0, 0, 1, -0.8 ) ); const beamLineNode = new Line( lineStartX, transformedLeftYValue, lineEndX, transformedRightYValue, { - stroke: MeanShareAndBalanceColors.meanColorProperty, - lineWidth: 2 + stroke: balanceBeamLinePattern, + lineWidth: 2.5 } ); // Define the dots that appear on the beam when tick marks are enabled. @@ -250,6 +253,9 @@ ); // Update the balance beam line. + const angle = viewEndPoint.minus( viewStartPoint ).getAngle(); + balanceBeamLinePattern.setTransformMatrix( Matrix3.affine( Math.cos( angle ), -Math.sin( angle ), -0.8, + Math.sin( angle ), Math.cos( angle ), -0.8 ) ); beamLineNode.setPoint1( viewStartPoint ); beamLineNode.setPoint2( viewEndPoint ); Index: js/common/MeanShareAndBalanceConstants.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/common/MeanShareAndBalanceConstants.ts b/js/common/MeanShareAndBalanceConstants.ts --- a/js/common/MeanShareAndBalanceConstants.ts (revision 0ed19fd187f3af81886f72de875b835b38f4cc96) +++ b/js/common/MeanShareAndBalanceConstants.ts (date 1717982731127) @@ -16,6 +16,7 @@ import Matrix3 from '../../../dot/js/Matrix3.js'; import Vector2 from '../../../dot/js/Vector2.js'; import Dimension2 from '../../../dot/js/Dimension2.js'; +import sketchedBalanceBeamTexture_svg from '../../images/sketchedBalanceBeamTexture_svg.js'; const DEFAULT_MARGIN = 15; const CONTROLS_MAX_TEXT_WIDTH = 175; ```

[marlitas]

@amanda-phet confirmed on slack that we would like to stick with the solid purple line for the balance beam. That means this issue is done and ready for review. @amanda-phet feel free to close if all looks well.

[amanda-phet]

Looks good. Thanks!