Lerping Color Correctly Attempt #2

docs/js/p5.js

@@ -1731,17 +1731,17 @@ var colorcreating_reading = function (require, core, p5Color) {
       if (c1 instanceof Array) {
         var c = [];
         for (var i = 0; i < c1.length; i++) {
-          c.push(p5.prototype.lerp(c1[i], c2[i], amt));
+          c.push(Math.sqrt(p5.prototype.lerp(c1[i]*c1[i], c2[i]*c2[i], amt)));
         }
         return c;
       } else if (c1 instanceof p5.Color) {
         var pc = [];
         for (var j = 0; j < 4; j++) {
-          pc.push(p5.prototype.lerp(c1.rgba[j], c2.rgba[j], amt));
+          pc.push(Math.sqrt(p5.prototype.lerp(c1.rgba[j]*c1.rgba[j], c2.rgba[j]*c2.rgba[j], amt)));
         }
         return new p5.Color(this, pc);
       } else {
-        return p5.prototype.lerp(c1, c2, amt);
+        return Math.sqrt(p5.prototype.lerp(c1*c1, c2*c2, amt));
       }
     };
     p5.prototype.red = function (c) {

lib/p5.js

@@ -1,4 +1,4 @@
-/*! p5.js v0.4.4 April 30, 2015 */
+/*! p5.js v0.4.4 May 12, 2015 */
 (function (root, factory) {
   if (typeof define === 'function' && define.amd)
     define('p5', [], function () { return (root.returnExportsGlobal = factory());});
@@ -2104,17 +2104,17 @@ amdclean['colorcreating_reading'] = function (require, core, p5Color) {
     if (c1 instanceof Array) {
       var c = [];
       for (var i = 0; i < c1.length; i++) {
-        c.push(Math.sqrt(p5.prototype.lerp(c1[i]*c1[i], c2[i]*c2[i], amt)));
+        c.push(Math.sqrt(p5.prototype.lerp(c1[i] * c1[i], c2[i] * c2[i], amt)));
       }
       return c;
     } else if (c1 instanceof p5.Color) {
       var pc = [];
       for (var j = 0; j < 4; j++) {
-        pc.push(Math.sqrt(p5.prototype.lerp(c1.rgba[j]*c1.rgba[j], c2.rgba[j]*c2.rgba[j], amt)));
+        pc.push(Math.sqrt(p5.prototype.lerp(c1.rgba[j] * c1.rgba[j], c2.rgba[j] * c2.rgba[j], amt)));
       }
       return new p5.Color(this, pc);
     } else {
-      return Math.sqrt(p5.prototype.lerp(c1*c1, c2*c2, amt));
+      return Math.sqrt(p5.prototype.lerp(c1 * c1, c2 * c2, amt));
     }
   };
   p5.prototype.red = function (c) {
@@ -2225,7 +2225,78 @@ amdclean['dataconversion'] = function (require, core) {
     } else if (typeof n === 'boolean') {
       return n ? 1 : 0;
     } else if (n instanceof Array) {
-      return n.map(p5.prototype.int);
+      return n.map(function (n) {
+        return p5.prototype.int(n, radix);
+      });
+    }
+  };
+  p5.prototype.str = function (n) {
+    if (n instanceof Array) {
+      return n.map(p5.prototype.str);
+    } else {
+      return String(n);
+    }
+  };
+  p5.prototype.boolean = function (n) {
+    if (typeof n === 'number') {
+      return n !== 0;
+    } else if (typeof n === 'string') {
+      return n.toLowerCase() === 'true';
+    } else if (typeof n === 'boolean') {
+      return n;
+    } else if (n instanceof Array) {
+      return n.map(p5.prototype.boolean);
+    }
+  };
+  p5.prototype.byte = function (n) {
+    var nn = p5.prototype.int(n, 10);
+    if (typeof nn === 'number') {
+      return (nn + 128) % 256 - 128;
+    } else if (nn instanceof Array) {
+      return nn.map(p5.prototype.byte);
+    }
+  };
+  p5.prototype.char = function (n) {
+    if (typeof n === 'number' && !isNaN(n)) {
+      return String.fromCharCode(n);
+    } else if (n instanceof Array) {
+      return n.map(p5.prototype.char);
+    } else if (typeof n === 'string') {
+      return p5.prototype.char(parseInt(n, 10));
+    }
+  };
+  p5.prototype.unchar = function (n) {
+    if (typeof n === 'string' && n.length === 1) {
+      return n.charCodeAt(0);
+    } else if (n instanceof Array) {
+      return n.map(p5.prototype.unchar);
+    }
+  };
+  p5.prototype.hex = function (n, digits) {
+    digits = digits === undefined || digits === null ? digits = 8 : digits;
+    if (n instanceof Array) {
+      return n.map(function (n) {
+        return p5.prototype.hex(n, digits);
+      });
+    } else if (typeof n === 'number') {
+      if (n < 0) {
+        n = 4294967295 + n + 1;
+      }
+      var hex = Number(n).toString(16).toUpperCase();
+      while (hex.length < digits) {
+        hex = '0' + hex;
+      }
+      if (hex.length >= digits) {
+        hex = hex.substring(hex.length - digits, hex.length);
+      }
+      return hex;
+    }
+  };
+  p5.prototype.unhex = function (n) {
+    if (n instanceof Array) {
+      return n.map(p5.prototype.unhex);
+    } else {
+      return parseInt('0x' + n, 16);
     }
   };
   return p5;

src/color/creating_reading.js

@@ -257,14 +257,21 @@ define(function (require) {
   };
 
   /**
-   * Calculates a color or colors between two color at a specific increment.
+   * Calculates a color or colors between two color at a specific increment,
+   * using gamma correction to blend colors in the linear RGB space.
    * The amt parameter is the amount to interpolate between the two values
    * where 0.0 equal to the first point, 0.1 is very near the first point,
    * 0.5 is halfway in between, etc. An amount below 0 will be treated as 0.
    * Likewise, amounts above 1 will be capped at 1. This is different from
    * the behavior of lerp(), but necessary because otherwise numbers outside
    * the range will produce strange and unexpected colors.
    *
+   * The regular RGB color representation stores the square root of the 
+   * displayed color, not the value itself. Your monitor behaves as if it 
+   * squares the color values before displaying it. lerpColor first transforms
+   * colors into the linear color space before blending, to correctly mix the 
+   * colors as two rays of light.
+   *
    * @method lerpColor
    * @param  {Array/Number} c1  interpolate from this color
    * @param  {Array/Number} c2  interpolate to this color
@@ -291,20 +298,24 @@ define(function (require) {
    * </div>
    */
   p5.prototype.lerpColor = function (c1, c2, amt) {
+    amt = Math.max(Math.min(amt, 1), 0);
     if (c1 instanceof Array) {
       var c = [];
       for (var i = 0; i < c1.length; i++) {
-        c.push(p5.prototype.lerp(c1[i], c2[i], amt));
+        c.push(Math.sqrt(p5.prototype.lerp(c1[i]*c1[i], c2[i]*c2[i], amt)));
       }
       return c;
     } else if (c1 instanceof p5.Color) {
       var pc = [];
       for (var j = 0; j < 4; j++) {
-        pc.push(p5.prototype.lerp(c1.rgba[j], c2.rgba[j], amt));
+        pc.push(Math.sqrt(p5.prototype.lerp(
+          c1.rgba[j]*c1.rgba[j],
+          c2.rgba[j]*c2.rgba[j],
+          amt)));
       }
       return new p5.Color(this, pc);
     } else {
-      return p5.prototype.lerp(c1, c2, amt);
+      return Math.sqrt(p5.prototype.lerp(c1*c1, c2*c2, amt));
     }
   };