diff --git a/js/common/view/CloudNode.js b/js/common/view/CloudNode.js index db61f09e..77c5baa6 100644 --- a/js/common/view/CloudNode.js +++ b/js/common/view/CloudNode.js @@ -37,7 +37,7 @@ class CloudNode extends Node { super( options ); - const cloudPath = new Path( this.createCloudShape( + const cloudPath = new Path( CloudNode.createCloudShape( modelViewTransform.modelToViewPosition( cloud.position ), Math.abs( modelViewTransform.modelToViewDeltaX( cloud.width ) ), Math.abs( modelViewTransform.modelToViewDeltaY( cloud.height ) ) @@ -68,16 +68,16 @@ class CloudNode extends Node { /** * Create a blobby cloud-like shape to represent the cloud. Returns a Shape to be used with a Path. * - * TODO: This is probably temporary, since we may have artwork or may refine the look of the cloud sometime in the - * future. + * TODO: This may be temporary, since we may have artwork or may refine the look of the cloud sometime in the future. + * See https://github.com/phetsims/greenhouse-effect/issues/49. * - * @private * @param {Vector2} position * @param {number} width * @param {number} height * @returns {Shape} + * @public */ - createCloudShape( position, width, height ) { + static createCloudShape( position, width, height ) { const circleShapes = []; let drawnWidth = 0; diff --git a/js/waves/view/CloudCheckbox.js b/js/waves/view/CloudCheckbox.js index a7d0926c..fc01f550 100644 --- a/js/waves/view/CloudCheckbox.js +++ b/js/waves/view/CloudCheckbox.js @@ -8,11 +8,18 @@ * @author John Blanco (PhET Interactive Simulations) */ -import Rectangle from '../../../../scenery/js/nodes/Rectangle.js'; +import Matrix3 from '../../../../dot/js/Matrix3.js'; +import Vector2 from '../../../../dot/js/Vector2.js'; +import Path from '../../../../scenery/js/nodes/Path.js'; +import Color from '../../../../scenery/js/util/Color.js'; +import CloudNode from '../../common/view/CloudNode.js'; import GreenhouseEffectCheckbox from '../../common/view/GreenhouseEffectCheckbox.js'; import greenhouseEffect from '../../greenhouseEffect.js'; import greenhouseEffectStrings from '../../greenhouseEffectStrings.js'; +// constants +const CLOUD_ICON_WIDTH = 40; + class CloudCheckbox extends GreenhouseEffectCheckbox { /** @@ -21,9 +28,16 @@ class CloudCheckbox extends GreenhouseEffectCheckbox { */ constructor( cloudEnabledProperty, tandem ) { + // Create a shape to use for the cloud icon. The shape generation seems to only work well for some ratios of width + // to height, so change with caution. + const unscaledCloudShape = CloudNode.createCloudShape( Vector2.ZERO, 170, 60 ); + const cloudShapeScale = CLOUD_ICON_WIDTH / unscaledCloudShape.bounds.width; + const scaledCloudShape = unscaledCloudShape.transformed( Matrix3.scale( cloudShapeScale, cloudShapeScale ) ); + // temporary icon, something else will eventually be added - const iconNode = new Rectangle( 0, 0, 15, 15, { - fill: 'rgb(17,209,243)' + const iconNode = new Path( scaledCloudShape, { + stroke: Color.BLACK, + fill: Color.WHITE } ); super( greenhouseEffectStrings.cloud, cloudEnabledProperty, {