Plugins/Color.js

   1 /*
   2 Script: Color.js
   3         Contains the Color class.
   4
   5 License:
   6         MIT-style license.
   7 */
   8
   9 /*
  10 Class: Color
  11         Creates a new Color Object, which is an array with some color specific methods.
  12 Arguments:
  13         color - the hex, the RGB array or the HSB array of the color to create. For HSB colors, you need to specify the second argument.
  14         type - a string representing the type of the color to create. needs to be specified if you intend to create the color with HSB values, or an array of HEX values. Can be 'rgb', 'hsb' or 'hex'.
  15
  16 Example:
  17         (start code)
  18         var black = new Color('#000');
  19         var purple = new Color([255,0,255]);
  20         // mix black with white and purple, each time at 10% of the new color
  21         var darkpurple = black.mix('#fff', purple, 10);
  22         $('myDiv').setStyle('background-color', darkpurple);
  23         (end)
  24 */
  25
  26 var Color = new Class({
  27
  28         initialize: function(color, type){
  29                 type = type || (color.push ? 'rgb' : 'hex');
  30                 var rgb, hsb;
  31                 switch(type){
  32                         case 'rgb':
  33                                 rgb = color;
  34                                 hsb = rgb.rgbToHsb();
  35                                 break;
  36                         case 'hsb':
  37                                 rgb = color.hsbToRgb();
  38                                 hsb = color;
  39                                 break;
  40                         default:
  41                                 rgb = color.hexToRgb(true);
  42                                 hsb = rgb.rgbToHsb();
  43                 }
  44                 rgb.hsb = hsb;
  45                 rgb.hex = rgb.rgbToHex();
  46                 return $extend(rgb, Color.prototype);
  47         },
  48
  49         /*
  50         Property: mix
  51                 Mixes two or more colors with the Color.
  52
  53         Arguments:
  54                 color - a color to mix. you can use as arguments how many colors as you want to mix with the original one.
  55                 alpha - if you use a number as the last argument, it will be threated as the amount of the color to mix.
  56         */
  57
  58         mix: function(){
  59                 var colors = $A(arguments);
  60                 var alpha = ($type(colors[colors.length - 1]) == 'number') ? colors.pop() : 50;
  61                 var rgb = this.copy();
  62                 colors.each(function(color){
  63                         color = new Color(color);
  64                         for (var i = 0; i < 3; i++) rgb[i] = Math.round((rgb[i] / 100 * (100 - alpha)) + (color[i] / 100 * alpha));
  65                 });
  66                 return new Color(rgb, 'rgb');
  67         },
  68
  69         /*
  70         Property: invert
  71                 Inverts the Color.
  72         */
  73
  74         invert: function(){
  75                 return new Color(this.map(function(value){
  76                         return 255 - value;
  77                 }));
  78         },
  79
  80         /*
  81         Property: setHue
  82                 Modifies the hue of the Color, and returns a new one.
  83
  84         Arguments:
  85                 value - the hue to set
  86         */
  87
  88         setHue: function(value){
  89                 return new Color([value, this.hsb[1], this.hsb[2]], 'hsb');
  90         },
  91
  92         /*
  93         Property: setSaturation
  94                 Changes the saturation of the Color, and returns a new one.
  95
  96         Arguments:
  97                 percent - the percentage of the saturation to set
  98         */
  99
 100         setSaturation: function(percent){
 101                 return new Color([this.hsb[0], percent, this.hsb[2]], 'hsb');
 102         },
 103
 104         /*
 105         Property: setBrightness
 106                 Changes the brightness of the Color, and returns a new one.
 107
 108         Arguments:
 109                 percent - the percentage of the brightness to set
 110         */
 111
 112         setBrightness: function(percent){
 113                 return new Color([this.hsb[0], this.hsb[1], percent], 'hsb');
 114         }
 115
 116 });
 117
 118 /* Section: Utility Functions */
 119
 120 /*
 121 Function: $RGB
 122         Shortcut to create a new color, based on red, green, blue values.
 123
 124 Arguments:
 125         r - (integer) red value (0-255)
 126         g - (integer) green value (0-255)
 127         b - (integer) blue value (0-255)
 128
 129 */
 130
 131 function $RGB(r, g, b){
 132         return new Color([r, g, b], 'rgb');
 133 };
 134
 135 /*
 136 Function: $HSB
 137         Shortcut to create a new color, based on hue, saturation, brightness values.
 138
 139 Arguments:
 140         h - (integer) hue value (0-100)
 141         s - (integer) saturation value (0-100)
 142         b - (integer) brightness value (0-100)
 143 */
 144
 145 function $HSB(h, s, b){
 146         return new Color([h, s, b], 'hsb');
 147 };
 148
 149 /*
 150 Class: Array
 151         A collection of The Array Object prototype methods.
 152 */
 153
 154 Array.extend({
 155
 156         /*
 157         Property: rgbToHsb
 158                 Converts a RGB array to an HSB array.
 159
 160         Returns:
 161                 the HSB array.
 162         */
 163
 164         rgbToHsb: function(){
 165                 var red = this[0], green = this[1], blue = this[2];
 166                 var hue, saturation, brightness;
 167                 var max = Math.max(red, green, blue), min = Math.min(red, green, blue);
 168                 var delta = max - min;
 169                 brightness = max / 255;
 170                 saturation = (max != 0) ? delta / max : 0;
 171                 if (saturation == 0){
 172                         hue = 0;
 173                 } else {
 174                         var rr = (max - red) / delta;
 175                         var gr = (max - green) / delta;
 176                         var br = (max - blue) / delta;
 177                         if (red == max) hue = br - gr;
 178                         else if (green == max) hue = 2 + rr - br;
 179                         else hue = 4 + gr - rr;
 180                         hue /= 6;
 181                         if (hue < 0) hue++;
 182                 }
 183                 return [Math.round(hue * 360), Math.round(saturation * 100), Math.round(brightness * 100)];
 184         },
 185
 186         /*
 187         Property: hsbToRgb
 188                 Converts an HSB array to an RGB array.
 189
 190         Returns:
 191                 the RGB array.
 192         */
 193
 194         hsbToRgb: function(){
 195                 var br = Math.round(this[2] / 100 * 255);
 196                 if (this[1] == 0){
 197                         return [br, br, br];
 198                 } else {
 199                         var hue = this[0] % 360;
 200                         var f = hue % 60;
 201                         var p = Math.round((this[2] * (100 - this[1])) / 10000 * 255);
 202                         var q = Math.round((this[2] * (6000 - this[1] * f)) / 600000 * 255);
 203                         var t = Math.round((this[2] * (6000 - this[1] * (60 - f))) / 600000 * 255);
 204                         switch(Math.floor(hue / 60)){
 205                                 case 0: return [br, t, p];
 206                                 case 1: return [q, br, p];
 207                                 case 2: return [p, br, t];
 208                                 case 3: return [p, q, br];
 209                                 case 4: return [t, p, br];
 210                                 case 5: return [br, p, q];
 211                         }
 212                 }
 213                 return false;
 214         }
 215
 216 });