BUG: Fixes color distortion for flat-facing geometries

emperor/support_files/js/shapes.js

@@ -3,17 +3,18 @@
 // shapes.
 define(['jquery', 'three', 'underscore'], function($, THREE, _) {
 
-  var SPHERE = 'Sphere', CUBE = 'Cube', CONE = 'Cone',
-      ICOSAHEDRON = 'Icosahedron', CYLINDER = 'Cylinder';
+  var SPHERE = 'Sphere', SQUARE = 'Square', CONE = 'Cone',
+      ICOSAHEDRON = 'Icosahedron', CYLINDER = 'Cylinder',
+      OCTAHEDRON = 'Diamond', RING = 'Ring';
 
-  var shapes = [SPHERE, CUBE, CONE, ICOSAHEDRON, CYLINDER];
+  var shapes = [SPHERE, OCTAHEDRON, CONE, CYLINDER, RING, SQUARE, ICOSAHEDRON];
 
   /**
    *
    * Return a correctly sized geometry that matches the plotting space
    *
-   * @param {string} shapeName One of 'Sphere', 'Cube', 'Cone', 'Icosahedron'
-   * or 'Cylinder'.
+   * @param {string} shapeName One of 'Sphere', 'Square', 'Cone',
+   * 'Icosahedron', 'Cylinder', 'Diamond' and 'Ring'.
    * @param {Object} ranges Object with two arrays of "max" and "min" values as
    * generated by the `DecompositionModel` dimensionRanges property
    *
@@ -26,20 +27,35 @@ define(['jquery', 'three', 'underscore'], function($, THREE, _) {
     // this is a heauristic tested on numerous plots since 2013, based off of
     // the old implementation of emperor. We select the dimensions of all the
     // geometries based on this factor.
-    var factor = (ranges.max[0] - ranges.min[0]) * 0.012;
+    var factor = (ranges.max[0] - ranges.min[0]) * 0.012, geom;
+
+    /*
+     *
+     * We arbitrarily rotate "flat-facing" geometries to avoid having the color
+     * of the markers being distorted with the scene's light.
+     *
+     */
 
     switch (shapeName) {
       case SPHERE:
         return new THREE.SphereGeometry(factor, 8, 8);
-      case CUBE:
-        return new THREE.CubeGeometry(factor, factor, factor, 8, 8, 8);
+      case SQUARE:
+        geom = new THREE.PlaneGeometry(factor * 2, factor * 2, 2, 2);
+        geom.rotateX(0.3);
+        return geom;
       case CONE:
-        return new THREE.CylinderGeometry(factor * 0.4, 0, 1.5 * factor, 8);
+        return new THREE.CylinderGeometry(factor, 0, 2 * factor, 8);
       case ICOSAHEDRON:
         return new THREE.IcosahedronGeometry(factor, 0);
+      case OCTAHEDRON:
+        return new THREE.OctahedronGeometry(factor, 0);
+      case RING:
+        // 1.618033 ~= golden ratio
+        geom = new THREE.RingGeometry(factor / 1.618033, factor);
+        geom.rotateX(0.3);
+        return geom;
       case CYLINDER:
-        return new THREE.CylinderGeometry(factor * 0.4, factor * 0.4,
-                                          1.5 * factor, 10);
+        return new THREE.CylinderGeometry(factor, factor, 2 * factor, 10);
       default:
         throw Error('Unknown geometry requested: ' + shapeName);
     }

tests/javascript_tests/test_shape_controller.js

@@ -17,8 +17,8 @@ requirejs([
     module('Shape Controller', {
       setup: function() {
         // setup function
-        this.shapesAvailable = ['Sphere', 'Cube', 'Cone', 'Icosahedron',
-                                'Cylinder'];
+        this.shapesAvailable = ['Sphere', 'Diamond', 'Cone', 'Cylinder',
+                                'Ring', 'Square', 'Icosahedron'];
         this.sharedDecompositionViewDict = {};
 
         // setup function
@@ -93,23 +93,29 @@ requirejs([
       geom = shapes.getGeometry('Sphere', range);
       equal(geom.parameters.radius, 0.06);
 
-      geom = shapes.getGeometry('Cube', range);
-      equal(geom.parameters.width, 0.06);
-      equal(geom.parameters.height, 0.06);
-      equal(geom.parameters.depth, 0.06);
+      geom = shapes.getGeometry('Square', range);
+      equal(geom.parameters.width, 0.12);
+      equal(geom.parameters.height, 0.12);
 
       geom = shapes.getGeometry('Cone', range);
-      equal(geom.parameters.radiusTop, 0.024);
+      equal(geom.parameters.radiusTop, 0.06);
       equal(geom.parameters.radiusBottom, 0);
-      equal(geom.parameters.height, 0.09);
+      equal(geom.parameters.height, 0.12);
 
       geom = shapes.getGeometry('Icosahedron', range);
       equal(geom.parameters.radius, 0.06);
 
+      geom = shapes.getGeometry('Diamond', range);
+      equal(geom.parameters.radius, 0.06);
+
+      geom = shapes.getGeometry('Ring', range);
+      equal(geom.parameters.innerRadius, 0.06 / 1.618033);
+      equal(geom.parameters.outerRadius, 0.06);
+
       geom = shapes.getGeometry('Cylinder', range);
-      equal(geom.parameters.radiusTop, 0.024);
-      equal(geom.parameters.radiusBottom, 0.024);
-      equal(geom.parameters.height, 0.09);
+      equal(geom.parameters.radiusTop, 0.06);
+      equal(geom.parameters.radiusBottom, 0.06);
+      equal(geom.parameters.height, 0.12);
     });
 
     test('Check getGeometry raises an exception with unknown shape',
@@ -126,9 +132,9 @@ requirejs([
       plottables = [{idx: idx}];
       equal(this.dv.markers[idx].geometry.type, 'SphereGeometry');
       equal(this.dv.markers[idx + 1].geometry.type, 'SphereGeometry');
-      ShapeController.prototype.setPlottableAttributes(this.dv, 'Cube',
+      ShapeController.prototype.setPlottableAttributes(this.dv, 'Square',
                                                        plottables);
-      equal(this.dv.markers[idx].geometry.type, 'BoxGeometry');
+      equal(this.dv.markers[idx].geometry.type, 'PlaneGeometry');
       equal(this.dv.markers[idx + 1].geometry.type, 'SphereGeometry');
       equal(this.dv.needsUpdate, true);
 
@@ -167,7 +173,7 @@ requirejs([
 
     test('Testing fromJSON', function() {
       var json = {'category': 'SampleID',
-                  'data': {'PC.636': 'Cube', 'PC.635': 'Sphere'}
+                  'data': {'PC.636': 'Square', 'PC.635': 'Sphere'}
       };
 
       var container = $('<div id="does-not-exist" style="height:11px; ' +
@@ -178,7 +184,7 @@ requirejs([
       controller.fromJSON(json);
       var idx = 0;
       equal(controller.decompViewDict.scatter.markers[idx].geometry.type,
-            'BoxGeometry');
+            'PlaneGeometry');
       equal(controller.decompViewDict.scatter.markers[idx + 1].geometry.type,
             'SphereGeometry');
     });