Merge pull request #857 from xyfeng/master

color and colorMode update

Author: Lauren McCarthy

docs/js/p5.js

@@ -95,10 +95,10 @@ p5.Renderer3D.prototype.background = function() {
   var gl = this.GL;
   var _col = this._pInst.color.apply(this._pInst, arguments);
   // gl.clearColor(0.0,0.0,0.0,1.0);
-  var _r = (_col.color_array[0]) / 255;
-  var _g = (_col.color_array[1]) / 255;
-  var _b = (_col.color_array[2]) / 255;
-  var _a = (_col.color_array[3]) / 255;
+  var _r = (_col.rgba[0]) / 255;
+  var _g = (_col.rgba[1]) / 255;
+  var _b = (_col.rgba[2]) / 255;
+  var _a = (_col.rgba[3]) / 255;
   gl.clearColor(_r, _g, _b, _a);
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   this.resetMatrix();

docs/js/p5.min.js

@@ -11,23 +11,18 @@ p5.ColorUtils = {};
 /**
  * For a color expressed as an HSBA array, return the corresponding RGBA value
  * @param {Array} hsba An 'array' object that represents a list of HSB colors
- * @param {Array} maxes An 'array' object that represents the HSB range maxes
- * @return {Array} an array of RGBA values, on a scale of 0-255
+ * @return {Array} an array of RGBA values, on a scale of 0-1
  */
-p5.ColorUtils.hsbaToRGBA = function(hsba, maxes) {
+p5.ColorUtils.hsbaToRGBA = function(hsba) {
   var h = hsba[0];
   var s = hsba[1];
   var v = hsba[2];
-  var a = hsba[3] || maxes[3];
-  h /= maxes[0];
-  s /= maxes[1];
-  v /= maxes[2];
-  a /= maxes[3];
+  var a = hsba[3] || 1;
   // Adapted from http://www.easyrgb.com/math.html
   // hsv values = 0 - 1, rgb values = 0 - 255
   var RGBA = [];
   if(s===0){
-    RGBA = [Math.round(v*255), Math.round(v*255), Math.round(v*255), a*255];
+    RGBA = [v, v, v, a];
   } else {
     // h must be < 1
     var var_h = h * 6;
@@ -67,12 +62,7 @@ p5.ColorUtils.hsbaToRGBA = function(hsba, maxes) {
       g = var_1;
       b = var_2;
     }
-    RGBA = [
-      Math.round(r * 255),
-      Math.round(g * 255),
-      Math.round(b * 255),
-      a * 255
-    ];
+    RGBA = [r, g, b, a];
   }
   return RGBA;
 };
@@ -81,14 +71,13 @@ p5.ColorUtils.hsbaToRGBA = function(hsba, maxes) {
  * For a color expressed as an RGBA array, return the corresponding HSBA value
  *
  * @param {Array} rgba An 'array' object that represents a list of RGB colors
- * @param {Array} maxes An 'array' object that represents the RGB range maxes
- * @return {Array} an array of HSB values, scaled by the HSB-space maxes
+ * @return {Array} an array of HSB values
  */
-p5.ColorUtils.rgbaToHSBA = function(rgba, maxes) {
-  var r = rgba[0]/maxes[0];
-  var g = rgba[1]/maxes[1];
-  var b = rgba[2]/maxes[2];
-  var a = rgba[3]/maxes[3];
+p5.ColorUtils.rgbaToHSBA = function(rgba) {
+  var r = rgba[0];
+  var g = rgba[1];
+  var b = rgba[2];
+  var a = rgba[3] || 1;
 
   var min = Math.min(r, g, b); //Min. value of RGB
   var max = Math.max(r, g, b); //Max. value of RGB
@@ -124,36 +113,26 @@ p5.ColorUtils.rgbaToHSBA = function(rgba, maxes) {
       h -= 1;
     }
   }
-  return [
-      Math.round(h * 360),
-      Math.round(s * 100),
-      Math.round(v * 100),
-      a * 1
-    ];
+  return [h, s, v, a];
 };
 
 /**
  * For a color expressed as an HSLA array, return the corresponding RGBA value
  *
  * @param  {Array} hsla An 'array' object that represents a list of HSL colors
- * @param  {Array} maxes An 'array' object that represents the HSL range maxes
- *
- * @return {Array} an array of RGBA values, on a scale of 0-255
+ * @return {Array} an array of RGBA values, on a scale of 0-1
  */
-p5.ColorUtils.hslaToRGBA = function(hsla, maxes){
+p5.ColorUtils.hslaToRGBA = function(hsla){
   var h = hsla[0];
   var s = hsla[1];
   var l = hsla[2];
-  var a = hsla[3] || maxes[3];
-  h /= maxes[0];
-  s /= maxes[1];
-  l /= maxes[2];
-  a /= maxes[3];
+  var a = hsla[3] || 1;
+
   // Adapted from http://www.easyrgb.com/math.html
-  // hsl values = 0 - 1, rgb values = 0 - 255
+  // hsl values = 0 - 1, rgb values = 0 - 1
   var rgba = [];
   if(s === 0){
-    rgba = [Math.round(l*255), Math.round(l*255), Math.round(l*255), a];
+    rgba = [l, l, l, a];
   } else {
     var m, n, r, g, b;
 
@@ -182,31 +161,23 @@ p5.ColorUtils.hslaToRGBA = function(hsla, maxes){
     g = convert( m, n, h );
     b = convert( m, n, h - ( 1 / 3 ) );
 
-    rgba = [
-      Math.round(r * 255),
-      Math.round(g * 255),
-      Math.round(b * 255),
-      Math.round(a * 255)
-    ];
-
+    rgba = [r, g, b, a];
   }
 
   return rgba;
-
 };
 
 /**
  * For a color expressed as an RGBA array, return the corresponding HSBA value
  *
  * @param {Array} rgba An 'array' object that represents a list of RGB colors
- * @param {Array} maxes An 'array' object that represents the RGB range maxes
- * @return {Array} an array of HSL values, scaled by the HSL-space maxes
+ * @return {Array} an array of HSL values
  */
-p5.ColorUtils.rgbaToHSLA = function(rgba, maxes) {
-  var r = rgba[0]/maxes[0];
-  var g = rgba[1]/maxes[1];
-  var b = rgba[2]/maxes[2];
-  var a = rgba[3]/maxes[3];
+p5.ColorUtils.rgbaToHSLA = function(rgba) {
+  var r = rgba[0];
+  var g = rgba[1];
+  var b = rgba[2];
+  var a = rgba[3] || 1;
 
   var min = Math.min(r, g, b); //Min. value of RGB
   var max = Math.max(r, g, b); //Max. value of RGB
@@ -252,12 +223,63 @@ p5.ColorUtils.rgbaToHSLA = function(rgba, maxes) {
     }
 
   }
-  return [
-      Math.round(h * 360),
-      Math.round(s * 100),
-      Math.round(l * 100),
-      a * 1
-    ];
+  return [h, s, l, a];
+};
+
+/**
+ * For a color expressed as an hsla array, return the corresponding HSBA value
+ *
+ * @param {Array} hsla An 'array' object that represents a list of HSLA colors
+ * @return {Array} an array of HSBA values
+ */
+p5.ColorUtils.hslaToHSBA = function(hsla) {
+  var h = hsla[0];
+  var s = hsla[1];
+  var l = hsla[2];
+  var a = hsla[3] || 1;
+
+  var v;
+
+  //Hue and Alpha stay the same
+  s *= l < 0.5 ? l : 1 - l;
+  v = l + s;
+  s = 2 * s / (l + s);
+
+  return[ h, s, v, a];
+};
+
+/**
+ * For a color expressed as an hsba array, return the corresponding HSLA value
+ *
+ * @param {Array} hsba An 'array' object that represents a list of HSBA colors
+ * @return {Array} an array of HSLA values
+ */
+p5.ColorUtils.hsbaToHSLA = function(hsba) {
+  var h = hsba[0];
+  var s = hsba[1];
+  var v = hsba[2];
+  var a = hsba[3] || 1;
+
+  //Hue and Alpha stay the same
+  //Lightness is (2 - s) * v / 2
+  var l = (2 - s) * v / 2;
+
+  //Saturation is very different between the two color spaces
+  //If l < 0.5 set it to s / (2 - s)
+  //Otherwise s * v / (2 - (2 - s) * v)
+  if( l !== 0 ){
+    if( l === 1 ){
+      s = 0;
+    }
+    else if( l < 0.5 ){
+      s = s / (2 - s);
+    }
+    else{
+      s = s * v / (2 - l * 2);
+    }
+  }
+
+  return [ h, s, l, a];
 };
 
 module.exports = p5.ColorUtils;