Using canvas nodes to render natures mix of isotopes for performance …

…enhancement, see #26
phetsims · Jan 15, 2016 · cc5c216 · cc5c216
1 parent 537f906
commit cc5c216
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/js/mix-isotopes/model/MixIsotopesModel.js b/js/mix-isotopes/model/MixIsotopesModel.js
@@ -137,6 +137,7 @@ define( function( require ) {
     // List of the isotope buckets.
     this.bucketList = new ObservableArray();
     this.isotopesList = new ObservableArray();
+    this.naturesIsotopesList = [];
 
     // List of the numerical controls that, when present, can be used to add
     // or remove isotopes to/from the test chamber.
@@ -586,6 +587,7 @@ define( function( require ) {
       // Clear out anything that is in the test chamber.  If anything
       // needed to be stored, it should have been done by now.
       this.removeAllIsotopesFromTestChamberAndModel();
+      self.naturesIsotopesList = [ ];
 
       // Get the list of possible isotopes and then sort it by abundance
       // so that the least abundant are added last, thus assuring that
@@ -605,7 +607,6 @@ define( function( require ) {
           // one.  This behavior was requested by the design team.
           numToCreate = 1;
         }
-          // { MovableAtom[] }
         var isotopesToAdd = [];
         for ( var i = 0; i < numToCreate; i++ ) {
           var newIsotope = new MovableAtom( isotopeConfig.protonCount, isotopeConfig.neutronCount, self.testChamber.generateRandomLocation() );
@@ -615,11 +616,11 @@ define( function( require ) {
           newIsotope.radius = SMALL_ISOTOPE_RADIUS;
           newIsotope.showLabel = false;
           isotopesToAdd.push( newIsotope );
-          self.isotopesList.add( newIsotope );
-            // notifyIsotopeInstanceAdded( newIsotope );
+          self.naturesIsotopesList.push( newIsotope );
         }
         self.testChamber.bulkAddIsotopesToChamber( isotopesToAdd );
       });
+      this.trigger( 'naturesIsotopeUpdated' );
 
       // Add the isotope controllers (i.e. the buckets).
       this.addIsotopeControllers();
@@ -635,9 +636,11 @@ define( function( require ) {
     // TODO Check back on this
     removeAllIsotopesFromTestChamberAndModel: function() {
       var self = this;
-      this.testChamber.containedIsotopes.forEach( function( isotope ) {
-        self.isotopesList.remove( isotope );
-      } );
+      if ( this.isotopesList.length > 0 ) {
+        this.testChamber.containedIsotopes.forEach( function( isotope ) {
+          self.isotopesList.remove( isotope );
+        } );
+      }
       this.testChamber.removeAllIsotopes( true );
     },
 

diff --git a/js/mix-isotopes/view/MixIsotopesScreenView.js b/js/mix-isotopes/view/MixIsotopesScreenView.js
@@ -22,6 +22,7 @@ define( function( require ) {
   var Dimension2 = require( 'DOT/Dimension2' );
   var EraserButton = require( 'SCENERY_PHET/buttons/EraserButton' );
   var ExpandedPeriodicTableNode = require( 'SHRED/view/ExpandedPeriodicTableNode' );
+  var IsotopeCanvasNode = require( 'SHRED/view/IsotopeCanvasNode' );
   var HSlider = require( 'SUN/HSlider' );
   var inherit = require( 'PHET_CORE/inherit' );
   var isotopesAndAtomicMass = require( 'ISOTOPES_AND_ATOMIC_MASS/isotopesAndAtomicMass' );
@@ -232,6 +233,15 @@ define( function( require ) {
       lineWidth: 1
     } );
     chamberLayer.addChild( testChamberNode );
+    this.isotopesLayer = new IsotopeCanvasNode( this.model.naturesIsotopesList, this.mvt, {
+      canvasBounds: this.mvt.modelToViewBounds( this.model.testChamber.getTestChamberRect() )
+    } );
+    this.addChild( this.isotopesLayer );
+    this.isotopesLayer.visible = false;
+    this.model.on( 'naturesIsotopeUpdated', function() {
+      self.isotopesLayer.setIsotopes( self.model.naturesIsotopesList );
+
+    });
 
     var isotopeProprotionsPieChart = new IsotopeProprotionsPieChart( this.model );
     isotopeProprotionsPieChart.scale( 0.6 );
@@ -299,10 +309,12 @@ define( function( require ) {
       if ( mixIsotopesModel.showingNaturesMixProperty.get() === true ){
         interactivityModeSelectionNode.visible = false;
         clearBoxButton.visible = false;
+        self.isotopesLayer.visible = true;
       }
       else{
         interactivityModeSelectionNode.visible = true;
         clearBoxButton.visible = true;
+        self.isotopesLayer.visible = false;
       }
     } );