Commit abcfff3c authored by Zéfling's avatar Zéfling 🎨
Browse files

Add `getRGB()` and `getHSV()` mathods

- more commentaries
- change version to 0.0.2
parent d576ef46
# Changelog of coloration-lib
## V0.0.2 (2019-01-21)
### Changes
- add `getRGB()` and `getHSV()` mathods
## V0.0.1 (2019-01-20)
- initial release
[![npm version](https://badge.fury.io/js/coloration-lib.svg)](https://badge.fury.io/js/coloration-lib) [![Downloads](https://img.shields.io/npm/dm/coloration-lib.svg)](https://www.npmjs.com/package/coloration-lib) [![MIT license](https://img.shields.io/badge/license-MIT-blue.svg)](https://git.ikilote.net/angular/coloration/raw/master/LICENSE)
# Coloration
......@@ -23,6 +24,8 @@ Only for demo:
Example:
```typescript
import {Coloration} from 'coloration-lib';
const color = new Coloration('red');
color.addColor({
h: -23,
......
{
"name": "coloration-demo",
"version": "0.0.1",
"version": "0.0.2",
"license": "MIT",
"repository": {
"type": "git",
......
{
"name": "coloration-lib",
"version": "0.0.1",
"version": "0.0.2",
"license": "MIT",
"repository": {
"type": "git",
......
......@@ -7,12 +7,27 @@ const pattern = {
hsva: /^hsla?\(([\d]*(\.[\d]+)?)(,?\s*|\s+)([\d]*(\.[\d]+)?)\%(,?\s*|\s+)([\d]*(\.[\d]+)?)\%((,\s*)([\d]*(\.[\d]+)?))?\)$/i
};
export interface RGB { r: number; g: number; b: number; }
export interface HSV { h: number; s: number; v: number; }
export interface RGB {
/** Red color value [0,255] */ r: number;
/** Green color value [0,255] */ g: number;
/** Blue color value [0,255] */ b: number;
}
export interface HSV {
/** Hue color value [0,360] */ h: number;
/** Saluration color value [0,100] */ s: number;
/** Value/lightness color value [0,100] */ v: number;
}
export interface ColorData {
r?: number; g?: number; b?: number;
h?: number; s?: number; v?: number;
color?: string; luminosity?: number;
// RGB
/** Red color value [-256,255] */ r: number;
/** Green color value [-256,255] */ g: number;
/** Blue color value [-256,255] */ b: number;
// HSV/HSL
/** Hue value [-360,360] */ h: number;
/** Saluration value [-100,100] */ s: number;
/** Value/lightness value [-100,100] */ v: number;
// Other
/** luminosity value [-1,1] */ luminosity?: number;
}
export class Coloration {
......@@ -147,8 +162,25 @@ export class Coloration {
return this;
}
/**
* RGB informations
* @returns RGB
*/
getRGB(): RGB {
return Object.assign({}, this.rgb);
}
/**
* HSV informations
* @returns HSV
*/
getHSV(): HSV {
return Object.assign({}, this.hsv);
}
/**
* color in #HEX format
* @returns string of #HEX
*/
toHEX(): string {
return '#' + (0x1000000 + this.intColor).toString(16).slice(1);
......@@ -156,6 +188,7 @@ export class Coloration {
/**
* color in HVL() format
* @returns string of HVL(H, S%, V%)
*/
toHSL(): string {
return `hsl(${this.hsv.h}, ${this.hsv.s}%, ${this.hsv.v}%)`;
......@@ -163,11 +196,15 @@ export class Coloration {
/**
* color in RGB() format
* @returns string of RGB(R, G, B)
*/
toRGB(): string {
return `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b})`;
}
/**
* update colors data : RGB and HSL
*/
private updateColor() {
// update RGB
......@@ -250,6 +287,13 @@ export class Coloration {
return this.rgbToInt(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255));
}
/**
* hue color calculation
* @param p number
* @param q number
* @param t number
* @returns int color [0, 255]
*/
private hue2rgb(p: number, q: number, t: number): number {
if (t < 0) { t += 1; } else if (t > 1) { t -= 1; }
if (t < 1 / 6) { return p + (q - p) * 6 * t; }
......@@ -263,6 +307,7 @@ export class Coloration {
* @param r [0, 255]
* @param g [0, 255]
* @param b [0, 255]
* @returns HSV data
* @see https://stackoverflow.com/questions/39118528/rgb-to-hsl-conversion
* @see https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
*/
......@@ -310,10 +355,25 @@ export class Coloration {
};
}
/**
* convert RGB data to int value
* @param r red [0, 255]
* @param g green [0, 255]
* @param b blue [0, 255]
* @returns int value
*/
private rgbToInt(r: number, g: number, b: number): number {
return r * 0x10000 + g * 0x100 + b;
}
/**
* bound a value between two values
* @param value value
* @param min min value
* @param max max value
* @param defaultValue replace an invalid vvalue
* @returns value between min and max
*/
private minmax(value: number, min: number, max: number, defaultValue = 0) {
return Math.min(Math.max(value || defaultValue, min), max);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment