forked from phaserjs/phaser
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathColorHarmony.js
231 lines (216 loc) · 8.96 KB
/
ColorHarmony.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
/**
* A collection of methods useful for manipulating and comparing colors.
*
* @class ColorHarmony
* @author Richard Davey <[email protected]>
* @copyright 2013 Photon Storm Ltd.
* @license https://github.com/photonstorm/phaser/blob/master/license.txt MIT License
* @module Phaser
*/
Phaser.Plugins.ColorHarmony.prototype = {
/**
* Returns a Complementary Color Harmony for the given color.
* <p>A complementary hue is one directly opposite the color given on the color wheel</p>
* <p>Value returned in 0xAARRGGBB format with Alpha set to 255.</p>
*
* @method getComplementHarmony
* @param {Number} color The color to base the harmony on.
* @return {Number} 0xAARRGGBB format color value.
*/
getComplementHarmony: function (color) {
var hsv = Phaser.Color.RGBtoHSV(color);
var opposite = Phaser.Color.game.math.wrapValue(hsv.hue, 180, 359);
return Phaser.Color.HSVtoRGB(opposite, 1.0, 1.0);
},
/**
* Returns an Analogous Color Harmony for the given color.
* <p>An Analogous harmony are hues adjacent to each other on the color wheel</p>
* <p>Values returned in 0xAARRGGBB format with Alpha set to 255.</p>
*
* @method getAnalogousHarmony
* @param {Number} color The color to base the harmony on.
* @param {Number} threshold Control how adjacent the colors will be (default +- 30 degrees)
* @return {Object} Object containing 3 properties: color1 (the original color), color2 (the warmer analogous color) and color3 (the colder analogous color)
*/
getAnalogousHarmony: function (color, threshold) {
if (typeof threshold === "undefined") { threshold = 30; }
var hsv = Phaser.Color.RGBtoHSV(color);
if(threshold > 359 || threshold < 0) {
throw Error("Color Warning: Invalid threshold given to getAnalogousHarmony()");
}
var warmer = Phaser.Color.game.math.wrapValue(hsv.hue, 359 - threshold, 359);
var colder = Phaser.Color.game.math.wrapValue(hsv.hue, threshold, 359);
return {
color1: color,
color2: Phaser.Color.HSVtoRGB(warmer, 1.0, 1.0),
color3: Phaser.Color.HSVtoRGB(colder, 1.0, 1.0),
hue1: hsv.hue,
hue2: warmer,
hue3: colder
};
},
/**
* Returns an Split Complement Color Harmony for the given color.
* <p>A Split Complement harmony are the two hues on either side of the color's Complement</p>
* <p>Values returned in 0xAARRGGBB format with Alpha set to 255.</p>
*
* @method getSplitComplementHarmony
* @param {Number} color The color to base the harmony on
* @param {Number} threshold Control how adjacent the colors will be to the Complement (default +- 30 degrees)
* @return {Object} An object containing 3 properties: color1 (the original color), color2 (the warmer analogous color) and color3 (the colder analogous color)
*/
getSplitComplementHarmony: function (color, threshold) {
if (typeof threshold === "undefined") { threshold = 30; }
var hsv = Phaser.Color.RGBtoHSV(color);
if(threshold >= 359 || threshold <= 0) {
throw Error("Phaser.Color Warning: Invalid threshold given to getSplitComplementHarmony()");
}
var opposite = Phaser.Color.game.math.wrapValue(hsv.hue, 180, 359);
var warmer = Phaser.Color.game.math.wrapValue(hsv.hue, opposite - threshold, 359);
var colder = Phaser.Color.game.math.wrapValue(hsv.hue, opposite + threshold, 359);
return {
color1: color,
color2: Phaser.Color.HSVtoRGB(warmer, hsv.saturation, hsv.value),
color3: Phaser.Color.HSVtoRGB(colder, hsv.saturation, hsv.value),
hue1: hsv.hue,
hue2: warmer,
hue3: colder
};
},
/**
* Returns a Triadic Color Harmony for the given color.
* <p>A Triadic harmony are 3 hues equidistant from each other on the color wheel</p>
* <p>Values returned in 0xAARRGGBB format with Alpha set to 255.</p>
*
* @method getTriadicHarmony
* @param {Number} color The color to base the harmony on.
* @return {Object} An Object containing 3 properties: color1 (the original color), color2 and color3 (the equidistant colors)
*/
getTriadicHarmony: function (color) {
var hsv = Phaser.Color.RGBtoHSV(color);
var triadic1 = Phaser.Color.game.math.wrapValue(hsv.hue, 120, 359);
var triadic2 = Phaser.Color.game.math.wrapValue(triadic1, 120, 359);
return {
color1: color,
color2: Phaser.Color.HSVtoRGB(triadic1, 1.0, 1.0),
color3: Phaser.Color.HSVtoRGB(triadic2, 1.0, 1.0)
};
},
/**
* Get HSV color wheel values in an array which will be 360 elements in size.
*
* @method getHSVColorWheel
* @param {Number} alpha Alpha value for each color of the color wheel, between 0 (transparent) and 255 (opaque)
* @return {Array} An array containing 360 elements corresponding to the HSV color wheel.
*/
getHSVColorWheel: function (alpha) {
alpha = alpha || 255;
var colors = [];
for (var c = 0; c <= 359; c++)
{
colors[c] = Phaser.Color.getWebRGB(Phaser.Color.HSVtoRGB(c, 1.0, 1.0, alpha));
}
return colors;
},
/**
* Convert a HSV (hue, saturation, lightness) color space value to an RGB color
*
* @method HSVtoRGB
* @param {Number} h Hue degree, between 0 and 359
* @param {Number} s Saturation, between 0.0 (grey) and 1.0
* @param {Number} v Value, between 0.0 (black) and 1.0
* @param {Number} alpha Alpha value to set per color (between 0 and 255)
* @return {Number} 32-bit ARGB color value (0xAARRGGBB)
*/
HSVtoRGB: function (h, s, v, alpha) {
if (typeof alpha === "undefined") { alpha = 255; }
var result;
if(s == 0.0) {
result = Phaser.Color.getColor32(alpha, v * 255, v * 255, v * 255);
} else {
h = h / 60.0;
var f = h - Math.floor(h);
var p = v * (1.0 - s);
var q = v * (1.0 - s * f);
var t = v * (1.0 - s * (1.0 - f));
switch(Math.floor(h)) {
case 0:
result = Phaser.Color.getColor32(alpha, v * 255, t * 255, p * 255);
break;
case 1:
result = Phaser.Color.getColor32(alpha, q * 255, v * 255, p * 255);
break;
case 2:
result = Phaser.Color.getColor32(alpha, p * 255, v * 255, t * 255);
break;
case 3:
result = Phaser.Color.getColor32(alpha, p * 255, q * 255, v * 255);
break;
case 4:
result = Phaser.Color.getColor32(alpha, t * 255, p * 255, v * 255);
break;
case 5:
result = Phaser.Color.getColor32(alpha, v * 255, p * 255, q * 255);
break;
default:
throw new Error("Phaser.Color.HSVtoRGB : Unknown color");
}
}
return result;
},
/**
* Convert an RGB color value to an object containing the HSV color space values: Hue, Saturation and Lightness
*
* @method RGBtoHSV
* @param {Number} color In format 0xRRGGBB
* @return {Object} An Object with the properties hue (from 0 to 360), saturation (from 0 to 1.0) and lightness (from 0 to 1.0, also available under .value)
*/
RGBtoHSV: function (color) {
var rgb = Phaser.Color.getRGB(color);
var red = rgb.red / 255;
var green = rgb.green / 255;
var blue = rgb.blue / 255;
var min = Math.min(red, green, blue);
var max = Math.max(red, green, blue);
var delta = max - min;
var lightness = (max + min) / 2;
var hue;
var saturation;
// Grey color, no chroma
if(delta == 0) {
hue = 0;
saturation = 0;
} else {
if(lightness < 0.5) {
saturation = delta / (max + min);
} else {
saturation = delta / (2 - max - min);
}
var delta_r = (((max - red) / 6) + (delta / 2)) / delta;
var delta_g = (((max - green) / 6) + (delta / 2)) / delta;
var delta_b = (((max - blue) / 6) + (delta / 2)) / delta;
if(red == max) {
hue = delta_b - delta_g;
} else if(green == max) {
hue = (1 / 3) + delta_r - delta_b;
} else if(blue == max) {
hue = (2 / 3) + delta_g - delta_r;
}
if(hue < 0) {
hue += 1;
}
if(hue > 1) {
hue -= 1;
}
}
// Keep the value with 0 to 359
hue *= 360;
hue = Math.round(hue);
return {
hue: hue,
saturation: saturation,
lightness: lightness,
value: lightness
};
}
}