graphics/color.js

  1. 'use strict';
  3. /**
  4.  * @namespace Color
  5.  */
  7. var Randomizer = require('./randomizer.js');
  9. /**
  10.  * @class Color
  11.  * @param {number} r - Red value.
  12.  * @param {number} g - Green value.
  13.  * @param {number} b - Blue value.
  14.  */
  15. function Color(r, g, b) {
  16.     this.r = r;
  17.     this.g = g;
  18.     this.b = b;
  19. }
  21. /**
  22.  * Generate a hex representation of the color.
  23.  * @returns {string}
  24.  */
  25. Color.prototype.toString = function() {
  26.     return Color.createFromRGB(this.r, this.g, this.b);
  27. };
  29. Color.random = Randomizer.nextColor;
  31. Color.constants = {
  32.     red: '#FF0000',
  33.     RED: '#FF0000',
  34.     green: '#00FF00',
  35.     GREEN: '#00FF00',
  36.     blue: '#0000FF',
  37.     BLUE: '#0000FF',
  38.     yellow: '#FFFF00',
  39.     YELLOW: '#FFFF00',
  40.     cyan: '#00FFFF',
  41.     CYAN: '#00FFFF',
  42.     orange: '#FFA500',
  43.     ORANGE: '#FFA500',
  44.     white: '#FFFFFF',
  45.     WHITE: '#FFFFFF',
  46.     black: '#000000',
  47.     BLACK: '#000000',
  48.     gray: '#cccccc',
  49.     GRAY: '#CCCCCC',
  50.     grey: '#cccccc',
  51.     GREY: '#CCCCCC',
  52.     purple: '#9B30FF',
  53.     PURPLE: '#9B30FF'
  54. };
  56. var name;
  57. for (name in Color.constants) {
  58.     Color[name] = Color.constants[name];
  59. }
  61. /**
  62.  * Helpers for createFromRGB
  63.  */
  65. /**
  66.  * Convert RGB to a hex string.
  67.  *
  68.  * @memberof Color
  69.  * @param {number} r - Red component.
  70.  * @param {number} g - Green component.
  71.  * @param {number} b - Blue component.
  72.  * @returns {string} Hex representation.
  73.  */
  74. function rgbToHex(r, g, b) {
  75.     r = Math.floor(r);
  76.     g = Math.floor(g);
  77.     b = Math.floor(b);
  78.     if (r > 255 || g > 255 || b > 255) {
  79.         throw 'Invalid color component';
  80.     }
  81.     return ((r << 16) | (g << 8) | b).toString(16);
  82. }
  84. function getColor(r, g, b) {
  85.     return '#' + ('000000' + rgbToHex(r, g, b)).slice(-6);
  86. }
  88. /**
  89.  * Create a hex color from RGB values.
  90.  *
  91.  * @param {number} r - Red value.
  92.  * @param {number} g - Green value.
  93.  * @param {number} b - Blue value .
  94.  * @returns {string}
  95.  */
  96. Color.createFromRGB = function(r, g, b) {
  97.     return getColor(r, g, b);
  98. };
  100. /**
  101.  * Generate a random red value.
  102.  *
  103.  * @returns {string} Hex representation of random red color.
  104.  */
  105. Color.randomRed = function() {
  106.     var r = Randomizer.nextInt(50, 255);
  107.     return Color.createFromRGB(r, 0, 0);
  108. };
  110. /**
  111.  * Generate a random green value.
  112.  *
  113.  * @returns {string} Hex representation of random green color.
  114.  */
  115. Color.randomGreen = function() {
  116.     var g = Randomizer.nextInt(50, 255);
  117.     return Color.createFromRGB(0, g, 0);
  118. };
  120. /**
  121.  * Generate a random blue value.
  122.  *
  123.  * @returns {string} Hex representation of random blue color.
  124.  */
  125. Color.randomBlue = function() {
  126.     var b = Randomizer.nextInt(50, 255);
  127.     return Color.createFromRGB(0, 0, b);
  128. };
  131. /**
  132.  * Creates a hex color string from a (r,g,b) value as well
  133.  * as a lightness value l from [0, 1]. To do this we convert
  134.  * the rgb color to hsl. Then we modify the l, take it back to
  135.  * rgb, and then convert to a color string.
  136.  *
  137.  * @param {number} r - The red color value.
  138.  * @param {number} g - The green color value.
  139.  * @param {number} b - The blue color value.
  140.  * @param {number} l - The lightness value [0,1].
  141.  * @returns {string} The hex color string.
  142.  */
  143. Color.createFromRGBL = function(r, g, b, l) {
  144.     var hsl = Color.rgbToHsl(r, g, b);
  146.     if (l < 0) {
  147.         l = 0;
  148.     }
  149.     if (l > 1) {
  150.         l = 1;
  151.     }
  153.     var rgb = Color.hslToRgb(hsl[0], hsl[1], l);
  154.     return Color.createFromRGB(rgb[0], rgb[1], rgb[2]);
  155. };
  158. /**
  159.  * Converts an RGB color value to HSL. Conversion formula
  160.  * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
  161.  * Assumes r, g, and b are contained in the set [0, 255] and
  162.  * returns h, s, and l in the set [0, 1].
  163.  *
  164.  * @param {number} r - The red color value.
  165.  * @param {number} g - The green color value.
  166.  * @param {number} b - The blue color value.
  167.  * @returns {array} The HSL representation.
  168.  */
  169. Color.rgbToHsl = function(r, g, b) {
  170.     r /= 255, g /= 255, b /= 255;
  171.     var max = Math.max(r, g, b), min = Math.min(r, g, b);
  172.     var h, s, l = (max + min) / 2;
  174.     if (max == min) {
  175.         h = s = 0; // achromatic
  176.     }else {
  177.         var d = max - min;
  178.         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  179.         switch (max) {
  180.             case r: h = (g - b) / d + (g < b ? 6 : 0); break;
  181.             case g: h = (b - r) / d + 2; break;
  182.             case b: h = (r - g) / d + 4; break;
  183.         }
  184.         h /= 6;
  185.     }
  187.     return [h, s, l];
  188. };
  190. /**
  191.  * Helpers for hslToRgb
  192.  */
  194. /**
  195.  * Converts an HSL representation to RGB.
  196.  *
  197.  * @memberof Color
  198.  * @param {number} p
  199.  * @param {number} q
  200.  * @param {number} t
  201.  * @returns {number} RGB representation of component.
  202.  */
  203. function hue2rgb(p, q, t) {
  204.     if (t < 0) t += 1;
  205.     if (t > 1) t -= 1;
  206.     if (t < 1 / 6) return p + (q - p) * 6 * t;
  207.     if (t < 1 / 2) return q;
  208.     if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
  209.     return p;
  210. }
  212. /**
  213.  * Converts an HSL color value to RGB. Conversion formula
  214.  * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
  215.  * Assumes h, s, and l are contained in the set [0, 1] and
  216.  * returns r, g, and b in the set [0, 255].
  217.  *
  218.  * @param {number} h - The hue.
  219.  * @param {number} s - The saturation.
  220.  * @param {number} l - The lightness.
  221.  * @returns {object} The RGB representation.
  222.  */
  223. Color.hslToRgb = function(h, s, l) {
  224.     var r, g, b;
  226.     if (s === 0) {
  227.         r = g = b = l; // achromatic
  228.     } else {
  229.         var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
  230.         var p = 2 * l - q;
  231.         r = hue2rgb(p, q, h + 1 / 3);
  232.         g = hue2rgb(p, q, h);
  233.         b = hue2rgb(p, q, h - 1 / 3);
  234.     }
  236.     return [r * 255, g * 255, b * 255];
  237. };
  239. /**
  240.  * Generate the average of two hex colors.
  241.  *
  242.  * @param {string} colorOne - First hex color.
  243.  * @param {string} colorTwo - Second hex color.
  244.  * @returns {string} Averaged hex color.
  245.  */
  246. Color.average = function(colorOne, colorTwo) {
  247.     // functions for converting to/from hex/dec
  248.     function getHex(num) { return num.toString(16); }
  249.     function getDec(hex) { return parseInt(hex, 16); }
  251.     var componentRegEx = /[\da-z]{2}/gi;
  253.     var componentsOne = colorOne.match(componentRegEx);
  254.     var componentsTwo = colorTwo.match(componentRegEx);
  256.     var averageHex = '#';
  257.     var colorOneComponent;
  258.     var colorTwoComponent;
  259.     var averageDec;
  260.     var h;
  261.     for (var i = 0; i < componentsOne.length; i++) {
  262.         colorOneComponent = getDec(componentsOne[i]);
  263.         colorTwoComponent = getDec(componentsTwo[i]);
  264.         averageDec = Math.floor((colorOneComponent + colorTwoComponent) >> 1);
  265.         h = getHex(averageDec);
  266.         if (h.length == 1) h = '0' + h;
  267.         averageHex += h;
  268.     }
  270.     return averageHex;
  271. };
  273. Color.getColor = function(colorString) {
  274.     return Color.constants[colorString];
  275. };
  277. Color.getHexColor = function(hexString) {
  278.     return hexString;
  279. };
  281. module.exports = Color;