Color objects can be mixed.

There is now special support for mixing colors, in two specific cases:
- Generic JS objects are treated as colors with r/g/b/a in th 0-1 range,
instead of the 0-255 range.
- g.mix has a special case for Color objects, for performance reasons.

src/g.js

@@ -81,7 +81,7 @@ g.importCSV = function (csvString, delimiter) {
     csvRows = csvString.split(/\r\n|\r|\n/g);
     header = splitRow(csvRows[0], delimiter);
     csvRows = csvRows.slice(1);
-    
+
     var row, rows = [];
     var m, sr, col, index;
     for (var i = 0; i < csvRows.length; i += 1) {
@@ -124,6 +124,13 @@ g.mix = function (a, b, t) {
     t = t !== undefined ? t : 0.5;
     if (typeof a === 'number') {
         return (a * (1 - t)) + (b * t);
+    } else if (a instanceof g.Color && b instanceof g.Color) {
+        return new g.Color(
+            g.mix(a.r, b.r, t),
+            g.mix(a.g, b.g, t),
+            g.mix(a.b, b.b, t),
+            g.mix(a.a, b.a, t)
+        );
     } else if (typeof a === 'object') {
         var result = {};
         var keys = Object.keys(a);

src/libraries/vg/objects/color.js

@@ -219,15 +219,18 @@ Color.toCSS = function (c) {
     } else if (typeof c === 'string') {
         return c;
     } else if (c instanceof Color) {
-        var r255 = Math.round(c.r * 255),
+        let r255 = Math.round(c.r * 255),
             g255 = Math.round(c.g * 255),
             b255 = Math.round(c.b * 255);
         return 'rgba(' + r255 + ', ' + g255 + ', ' + b255 + ', ' + c.a + ')';
     } else if (c.r !== undefined && c.g !== undefined && c.b !== undefined) {
+        let r255 = Math.round(c.r * 255),
+            g255 = Math.round(c.g * 255),
+            b255 = Math.round(c.b * 255);
         if (c.a === undefined) {
-            return 'rgb(' + c.r + ', ' + c.g + ', ' + c.b + ')';
+            return 'rgb(' + r255 + ', ' + g255 + ', ' + b255 + ')';
         } else {
-            return 'rgba(' + c.r + ', ' + c.g + ', ' + c.b + ', ' + c.a + ')';
+            return 'rgba(' + r255 + ', ' + g255 + ', ' + b255 + ', ' + c.a + ')';
         }
     } else {
         throw new Error('Don\'t know how to convert ' + c + ' to CSS.');

test/colorSpec.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var assert = require('assert');
+var mocha = require('mocha');
+var describe = mocha.describe;
+var it = mocha.it;
+
+var g = require('../src/g');
+
+describe('The color object', function () {
+
+    it('can mix two colors', function () {
+        var red = new g.Color(1.0, 0.0, 0.0);
+        var blue = new g.Color(0.0, 0.0, 1.0);
+        assert.deepEqual(g.mix(red, blue), new g.Color(0.5, 0.0, 0.5));
+        var r1 = {r: 0.1, g: 0.4, b: 0.7, a: 0.0};
+        var r2 = {r: 0.3, g: 0.6, b: 0.9, a: 1.0};
+        assert.deepEqual(g.mix(r1, r2), new g.Color(0.2, 0.5, 0.8, 0.5));
+    });
+
+    it('can treat objects as colors', function () {
+        var c1 = {r: 1.0, g: 0.25, b: 0.75};
+        assert.equal(g.Color.toCSS(c1), 'rgb(255, 64, 191)');
+        var c2 = {r: 1.0, g: 0.25, b: 0.75, a: 0.5};
+        assert.equal(g.Color.toCSS(c2), 'rgba(255, 64, 191, 0.5)');
+    });
+
+});