transform wire shape 'clip area' so dots don't stick out, see #170

phetsims · Sep 6, 2018 · 3f4a5bb · 3f4a5bb
1 parent f215a74
commit 3f4a5bb
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/js/resistance-in-a-wire/view/DotsCanvasNode.js b/js/resistance-in-a-wire/view/DotsCanvasNode.js
@@ -21,8 +21,6 @@ define( function( require ) {
   var WireShapeConstants = require( 'RESISTANCE_IN_A_WIRE/resistance-in-a-wire/view/WireShapeConstants' );
 
   // constants
-  var DOT_RADIUS = 2;
-
   // to calculate the number of dots
   var MAX_WIDTH_INCLUDING_ROUNDED_ENDS = WireShapeConstants.WIRE_VIEW_WIDTH_RANGE.max + 2 * WireShapeConstants.WIRE_VIEW_HEIGHT_RANGE.max * WireShapeConstants.PERSPECTIVE_FACTOR;
   var AREA_PER_DOT = 200; // Adjust this to control the density of the dots.
@@ -111,7 +109,7 @@ define( function( require ) {
         // the left and the right of the rectangular wire shape
         if ( i < numDotsToShow && this.dotsClipArea.containsPoint( this.dotCenters[ i ] ) ) {
           context.beginPath();
-          context.arc( this.dotCenters[ i ].x, this.dotCenters[ i ].y, DOT_RADIUS, 0, 2 * Math.PI, true );
+          context.arc( this.dotCenters[ i ].x, this.dotCenters[ i ].y, WireShapeConstants.DOT_RADIUS, 0, 2 * Math.PI, true );
           context.fill();
         }
       }

diff --git a/js/resistance-in-a-wire/view/WireNode.js b/js/resistance-in-a-wire/view/WireNode.js
@@ -15,6 +15,7 @@ define( function( require ) {
   var inherit = require( 'PHET_CORE/inherit' );
   var LinearGradient = require( 'SCENERY/util/LinearGradient' );
   var Node = require( 'SCENERY/nodes/Node' );
+  var Matrix3 = require( 'DOT/Matrix3' );
   var Path = require( 'SCENERY/nodes/Path' );
   var platform = require( 'PHET_CORE/platform' );
   var Property = require( 'AXON/Property' );
@@ -109,9 +110,11 @@ define( function( require ) {
           .addColorStop( 1, '#8C4828' );
 
         // Clip the dots that are shown to only include those inside the wire (including the wireEnd). Don't use
-        // clipArea setter directly because it is too slow, but but the area is still used by
-        // DotsCanvasNode.paintCanvas
-        dotsNode.dotsClipArea = wireBody.shape.ellipticalArc( -width / 2, 0, WireShapeConstants.PERSPECTIVE_FACTOR * height / 2, height / 2, 0, 3 * Math.PI / 2, Math.PI / 2, true );
+        // clipArea setter directly because it is too slow, but but the area is still used by DotsCanvasNode to
+        // determine where to place the dots. Shape is scaled down so that the dots don't stick out beyond the shape
+        var dotsClipArea = wireBody.shape.ellipticalArc( -width / 2, 0, WireShapeConstants.PERSPECTIVE_FACTOR * height / 2, height / 2, 0, 3 * Math.PI / 2, Math.PI / 2, true );
+        var scale = ( width - WireShapeConstants.DOT_RADIUS ) / width;
+        dotsNode.dotsClipArea = dotsClipArea.transformed( Matrix3.scaling( scale, 1.0 ) );
 
         // redraw the dots representing resistivity
         dotsNode.invalidatePaint();

diff --git a/js/resistance-in-a-wire/view/WireShapeConstants.js b/js/resistance-in-a-wire/view/WireShapeConstants.js
@@ -28,7 +28,10 @@ define( function( require ) {
     // Used to calculate the size of the wire in screen coordinates from the model values
     WIRE_DIAMETER_MAX: WIRE_DIAMETER_MAX,
     WIRE_VIEW_WIDTH_RANGE: WIRE_VIEW_WIDTH_RANGE, 
-    WIRE_VIEW_HEIGHT_RANGE: WIRE_VIEW_HEIGHT_RANGE, 
+    WIRE_VIEW_HEIGHT_RANGE: WIRE_VIEW_HEIGHT_RANGE,
+
+    // used when drawing dots in the wire
+    DOT_RADIUS: 2,
 
     // Linear mapping transform
     lengthToWidth: new LinearFunction(