added icon for the cloud, see #49

phetsims · Sep 13, 2021 · 9339b46 · 9339b46
1 parent faa595c
commit 9339b46
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git 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
@@ -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, {