🛠 metafizzy#26 refactor & recalc updateSortValue

desandro · desandro · commit 339819e5c1af · 2019-06-13T21:32:28.000-04:00
+ Use Vector.lerp
+ Add Hemisphere apex
diff --git a/js/cone.js b/js/cone.js
@@ -34,6 +34,7 @@ Cone.prototype.create = function(/* options */) {
 
   // vectors used for calculation
   this.renderApex = new Vector();
+  this.renderCentroid = new Vector();
   this.tangentA = new Vector();
   this.tangentB = new Vector();
 
@@ -45,16 +46,10 @@ Cone.prototype.create = function(/* options */) {
 };
 
 Cone.prototype.updateSortValue = function() {
-  // call super
-  Ellipse.prototype.updateSortValue.apply( this, arguments );
-  var apexNormal = new Vector();
-  apexNormal.set( this.renderOrigin )
-    .subtract( this.apex.renderOrigin );
-  var apexAngleZ = Math.atan2( apexNormal.z, apexNormal.y );
-  apexAngleZ = utils.modulo( apexAngleZ, TAU );
-  //center of cone is one third of its length.
-  var apexZ = this.length/3 * Math.sin(apexAngleZ);
-  this.sortValue -= apexZ;
+  // center of cone is one third of its length
+  this.renderCentroid.set( this.renderOrigin )
+    .lerp( this.apex.renderOrigin, 1/3 );
+  this.sortValue = this.renderCentroid.z;
 };
 
 Cone.prototype.render = function( ctx, renderer ) {
diff --git a/js/hemisphere.js b/js/hemisphere.js
@@ -6,28 +6,38 @@
   // module definition
   if ( typeof module == 'object' && module.exports ) {
     // CommonJS
-    module.exports = factory( require('./boilerplate'), require('./ellipse') );
+    module.exports = factory( require('./boilerplate'), require('./vector'),
+        require('./anchor'), require('./ellipse') );
   } else {
     // browser global
     var Zdog = root.Zdog;
-    Zdog.Hemisphere = factory( Zdog, Zdog.Ellipse );
+    Zdog.Hemisphere = factory( Zdog, Zdog.Vector, Zdog.Anchor, Zdog.Ellipse );
   }
-}( this, function factory( utils, Ellipse ) {
+}( this, function factory( utils, Vector, Anchor, Ellipse ) {
 
 var Hemisphere = Ellipse.subclass({
   fill: true,
 });
 
 var TAU = utils.TAU;
 
-Hemisphere.prototype.updateSortValue = function() {
+Hemisphere.prototype.create = function(/* options */) {
   // call super
-  Ellipse.prototype.updateSortValue.apply( this, arguments );
-  var contourAngleZ = Math.atan2( this.renderNormal.z, this.renderNormal.y );
-  contourAngleZ = utils.modulo( contourAngleZ, TAU );
-  //center of dome is half the radius.
-  var domeZ = this.diameter/2/2 * Math.sin(contourAngleZ);
-  this.sortValue -= domeZ;
+  Ellipse.prototype.create.apply( this, arguments );
+  // composite shape, create child shapes
+  this.apex = new Anchor({
+    addTo: this,
+    translate: { z: this.diameter/2 },
+  });
+  // vector used for calculation
+  this.renderCentroid = new Vector();
+};
+
+Hemisphere.prototype.updateSortValue = function() {
+  // centroid of hemisphere is 3/8 between origin and apex
+  this.renderCentroid.set( this.renderOrigin )
+    .lerp( this.apex.renderOrigin, 3/8 );
+  this.sortValue = this.renderCentroid.z;
 };
 
 Hemisphere.prototype.render = function( ctx, renderer ) {
diff --git a/js/shape.js b/js/shape.js
@@ -108,25 +108,23 @@ Shape.prototype.transform = function( translation, rotation, scale ) {
   });
 };
 
-
 Shape.prototype.updateSortValue = function() {
-  // average sort all z points.
-  // ignore the final point if it is a closed shape.
-  var howManyPoints = this.pathCommands.length;
-  var sortValueTotal = 0;
+  // sort by average z of all points
+  // def not geometrically correct, but works for me
+  var pointCount = this.pathCommands.length;
   var firstPoint = this.pathCommands[0].endRenderPoint;
-  var lastPoint = this.pathCommands[this.pathCommands.length-1].endRenderPoint;
-  if (howManyPoints > 2 &&
-      firstPoint.isSame(lastPoint)) {
-    howManyPoints -= 1; // closed shape; ignore final point.
+  var lastPoint = this.pathCommands[ pointCount - 1 ].endRenderPoint;
+  // ignore the final point if self closing shape
+  var isSelfClosing = pointCount > 2 && firstPoint.isSame( lastPoint );
+  if ( isSelfClosing ) {
+    pointCount -= 1;
   }
-  
-  for (var i = 0; i < howManyPoints; i++) {
-      sortValueTotal += this.pathCommands[i].endRenderPoint.z;
-    }
-    // average sort value of all points
-    // def not geometrically correct, but works for me
-    this.sortValue = sortValueTotal / howManyPoints;
+
+  var sortValueTotal = 0;
+  for ( var i = 0; i < pointCount; i++ ) {
+    sortValueTotal += this.pathCommands[i].endRenderPoint.z;
+  }
+  this.sortValue = sortValueTotal / pointCount;
 };
 
 // ----- render ----- //
diff --git a/js/vector.js b/js/vector.js
@@ -79,9 +79,7 @@ Vector.prototype.isSame = function( pos ) {
   if ( !pos ) {
     return false;
   }
-  return (this.x === pos.x &&
-          this.y === pos.y &&
-          this.z === pos.z);
+  return this.x === pos.x && this.y === pos.y && this.z === pos.z;
 };
 
 Vector.prototype.add = function( pos ) {
