Skip to content

Commit e689649

Browse files
author
Lauren McCarthy
committed
Merge pull request #541 from cambridgemike/add-tests-for-color
move color conversions into utility file, add tests for color
2 parents c159fa7 + 6ff7a02 commit e689649

File tree

9 files changed

+335
-126
lines changed

9 files changed

+335
-126
lines changed

‎Gruntfile.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,8 @@ module.exports = function(grunt) {
142142
'polargeometry': 'src/var/polargeometry',
143143
'shim': 'src/var/shim',
144144
'reqwest': 'node_modules/reqwest/reqwest',
145-
'filters': 'src/image/filters'
145+
'filters': 'src/image/filters',
146+
'utils.color_utils': 'src/utils/color_utils'
146147
},
147148
useStrict: true,
148149
wrap: {

‎src/color/creating_reading.js‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,7 @@ define(function (require) {
3030
* </div>
3131
*/
3232
p5.prototype.alpha = function(c) {
33-
if (c instanceof p5.Color) {
34-
return c.getAlpha();
35-
} else if (c instanceof Array) {
33+
if (c instanceof p5.Color || c instanceof Array) {
3634
return this.color(c).getAlpha();
3735
} else {
3836
throw new Error('Needs p5.Color or pixel array as argument.');
@@ -59,9 +57,7 @@ define(function (require) {
5957
* </div>
6058
*/
6159
p5.prototype.blue = function(c) {
62-
if (c instanceof p5.Color) {
63-
return c.getBlue();
64-
} else if (c instanceof Array) {
60+
if (c instanceof p5.Color || c instanceof Array) {
6561
return this.color(c).getBlue();
6662
} else {
6763
throw new Error('Needs p5.Color or pixel array as argument.');
@@ -164,6 +160,8 @@ define(function (require) {
164160
p5.prototype.color = function () {
165161
if (arguments[0] instanceof p5.Color) {
166162
return arguments[0];
163+
} else if (arguments[0] instanceof Array) {
164+
return new p5.Color(this, arguments[0]);
167165
} else {
168166
var args = Array.prototype.slice.call(arguments);
169167
return new p5.Color(this, args);
@@ -189,9 +187,7 @@ define(function (require) {
189187
* </div>
190188
*/
191189
p5.prototype.green = function(c) {
192-
if (c instanceof p5.Color) {
193-
return c.getGreen();
194-
} else if (c instanceof Array) {
190+
if (c instanceof p5.Color || c instanceof Array) {
195191
return this.color(c).getGreen();
196192
} else {
197193
throw new Error('Needs p5.Color or pixel array as argument.');
@@ -296,9 +292,7 @@ define(function (require) {
296292
* </div>
297293
*/
298294
p5.prototype.red = function(c) {
299-
if (c instanceof p5.Color) {
300-
return c.getRed();
301-
} else if (c instanceof Array) {
295+
if (c instanceof p5.Color || c instanceof Array) {
302296
return this.color(c).getRed();
303297
} else {
304298
throw new Error('Needs p5.Color or pixel array as argument.');

‎src/color/setting.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ define(function (require) {
140140
maxArr[0] = arguments[1];
141141
maxArr[1] = arguments[1];
142142
maxArr[2] = arguments[1];
143+
maxArr[3] = arguments[1];
143144
}
144145
else if (arguments.length > 2) {
145146
maxArr[0] = arguments[1];

‎src/objects/p5.Color.js‎

Lines changed: 3 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
define(function(require) {
77

88
var p5 = require('core');
9+
var color_utils = require('utils.color_utils');
910
var constants = require('constants');
1011

1112
/**
@@ -19,10 +20,10 @@ define(function(require) {
1920

2021
if (pInst._colorMode === constants.HSB) {
2122
this.hsba = this.color_array;
22-
this.rgba = p5.ColorUtils._hsbToRGB(this.color_array);
23+
this.rgba = color_utils.hsbaToRGBA(this.hsba);
2324
} else {
2425
this.rgba = this.color_array;
25-
this.hsba = p5.ColorUtils._rgbaToHSBA(this.color_array);
26+
this.hsba = color_utils.rgbaToHSBA(this.rgba);
2627
}
2728

2829
return this;
@@ -123,116 +124,5 @@ define(function(require) {
123124
];
124125
};
125126

126-
127-
p5.ColorUtils = {};
128-
129-
p5.ColorUtils._hsbToRGB = function(hsba) {
130-
var h = hsba[0];
131-
var s = hsba[1];
132-
var v = hsba[2];
133-
h /= 255;
134-
s /= 255;
135-
v /= 255;
136-
// Adapted from http://www.easyrgb.com/math.html
137-
// hsv values = 0 - 1, rgb values = 0 - 255
138-
var RGBA = [];
139-
if(s===0){
140-
RGBA = [Math.round(v*255), Math.round(v*255), Math.round(v*255), hsba[3]];
141-
}else{
142-
// h must be < 1
143-
var var_h = h * 6;
144-
if (var_h===6) {
145-
var_h = 0;
146-
}
147-
//Or ... var_i = floor( var_h )
148-
var var_i = Math.floor( var_h );
149-
var var_1 = v*(1-s);
150-
var var_2 = v*(1-s*(var_h-var_i));
151-
var var_3 = v*(1-s*(1-(var_h-var_i)));
152-
var var_r;
153-
var var_g;
154-
var var_b;
155-
if(var_i===0){
156-
var_r = v;
157-
var_g = var_3;
158-
var_b = var_1;
159-
}else if(var_i===1){
160-
var_r = var_2;
161-
var_g = v;
162-
var_b = var_1;
163-
}else if(var_i===2){
164-
var_r = var_1;
165-
var_g = v;
166-
var_b = var_3;
167-
}else if(var_i===3){
168-
var_r = var_1;
169-
var_g = var_2;
170-
var_b = v;
171-
}else if (var_i===4){
172-
var_r = var_3;
173-
var_g = var_1;
174-
var_b = v;
175-
}else{
176-
var_r = v;
177-
var_g = var_1;
178-
var_b = var_2;
179-
}
180-
RGBA= [
181-
Math.round(var_r * 255),
182-
Math.round(var_g * 255),
183-
Math.round(var_b * 255),
184-
hsba[3]
185-
];
186-
}
187-
return RGBA;
188-
};
189-
190-
p5.ColorUtils._rgbaToHSBA = function(rgba) {
191-
var var_R = rgba[0]/255;
192-
var var_G = rgba[1]/255;
193-
var var_B = rgba[2]/255;
194-
195-
var var_Min = Math.min(var_R, var_G, var_B); //Min. value of RGB
196-
var var_Max = Math.max(var_R, var_G, var_B); //Max. value of RGB
197-
var del_Max = var_Max - var_Min; //Delta RGB value
198-
199-
var H;
200-
var S;
201-
var V = var_Max;
202-
203-
if (del_Max === 0) { //This is a gray, no chroma...
204-
H = 0; //HSV results from 0 to 1
205-
S = 0;
206-
}
207-
else { //Chromatic data...
208-
S = del_Max/var_Max;
209-
210-
var del_R = ( ( ( var_Max - var_R ) / 6 ) + ( del_Max / 2 ) ) / del_Max;
211-
var del_G = ( ( ( var_Max - var_G ) / 6 ) + ( del_Max / 2 ) ) / del_Max;
212-
var del_B = ( ( ( var_Max - var_B ) / 6 ) + ( del_Max / 2 ) ) / del_Max;
213-
214-
if (var_R === var_Max) {
215-
H = del_B - del_G;
216-
} else if (var_G === var_Max) {
217-
H = 1/3 + del_R - del_B;
218-
} else if (var_B === var_Max) {
219-
H = 2/3 + del_G - del_R;
220-
}
221-
222-
if (H<0) {
223-
H += 1;
224-
}
225-
if (H>1) {
226-
H -= 1;
227-
}
228-
}
229-
return [
230-
Math.round(H * 255),
231-
Math.round(S * 255),
232-
Math.round(V * 255),
233-
rgba[3]
234-
];
235-
};
236-
237127
return p5.Color;
238128
});

‎src/utils/color_utils.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/**
2+
* @module Utils
3+
* @submodule Color Utils
4+
* @for p5
5+
*/
6+
define(function(require) {
7+
var p5 = require('core');
8+
9+
p5.ColorUtils = {};
10+
11+
/**
12+
* For a color expressed as an HSBA array, return the corresponding RGBA value
13+
*
14+
* @param {Array} hsba An 'array' object that represents a list of
15+
* HSB colors on a scale of 0-255
16+
* @return {Array} an array of RGBA values, on a scale of 0-255
17+
*/
18+
p5.ColorUtils.hsbaToRGBA = function(hsba) {
19+
var h = hsba[0];
20+
var s = hsba[1];
21+
var v = hsba[2];
22+
h /= 255;
23+
s /= 255;
24+
v /= 255;
25+
// Adapted from http://www.easyrgb.com/math.html
26+
// hsv values = 0 - 1, rgb values = 0 - 255
27+
var RGBA = [];
28+
if(s===0){
29+
RGBA = [Math.round(v*255), Math.round(v*255), Math.round(v*255), hsba[3]];
30+
} else {
31+
// h must be < 1
32+
var var_h = h * 6;
33+
if (var_h===6) {
34+
var_h = 0;
35+
}
36+
//Or ... var_i = floor( var_h )
37+
var var_i = Math.floor( var_h );
38+
var var_1 = v*(1-s);
39+
var var_2 = v*(1-s*(var_h-var_i));
40+
var var_3 = v*(1-s*(1-(var_h-var_i)));
41+
var var_r;
42+
var var_g;
43+
var var_b;
44+
if(var_i===0){
45+
var_r = v;
46+
var_g = var_3;
47+
var_b = var_1;
48+
}else if(var_i===1){
49+
var_r = var_2;
50+
var_g = v;
51+
var_b = var_1;
52+
}else if(var_i===2){
53+
var_r = var_1;
54+
var_g = v;
55+
var_b = var_3;
56+
}else if(var_i===3){
57+
var_r = var_1;
58+
var_g = var_2;
59+
var_b = v;
60+
}else if (var_i===4){
61+
var_r = var_3;
62+
var_g = var_1;
63+
var_b = v;
64+
}else{
65+
var_r = v;
66+
var_g = var_1;
67+
var_b = var_2;
68+
}
69+
RGBA= [
70+
Math.round(var_r * 255),
71+
Math.round(var_g * 255),
72+
Math.round(var_b * 255),
73+
hsba[3]
74+
];
75+
}
76+
return RGBA;
77+
};
78+
79+
/**
80+
* For a color expressed as an RGBA array, return the corresponding HSBA value
81+
*
82+
* @param {Array} rgba An 'array' object that represents a list of
83+
* RGB colors on a scale of 0-255
84+
* @return {Array} an array of HSB values, on a scale of 0-255
85+
*/
86+
p5.ColorUtils.rgbaToHSBA = function(rgba) {
87+
var var_R = rgba[0]/255;
88+
var var_G = rgba[1]/255;
89+
var var_B = rgba[2]/255;
90+
91+
var var_Min = Math.min(var_R, var_G, var_B); //Min. value of RGB
92+
var var_Max = Math.max(var_R, var_G, var_B); //Max. value of RGB
93+
var del_Max = var_Max - var_Min; //Delta RGB value
94+
95+
var H;
96+
var S;
97+
var V = var_Max;
98+
99+
if (del_Max === 0) { //This is a gray, no chroma...
100+
H = 0; //HSV results from 0 to 1
101+
S = 0;
102+
}
103+
else { //Chromatic data...
104+
S = del_Max/var_Max;
105+
106+
var del_R = ( ( ( var_Max - var_R ) / 6 ) + ( del_Max / 2 ) ) / del_Max;
107+
var del_G = ( ( ( var_Max - var_G ) / 6 ) + ( del_Max / 2 ) ) / del_Max;
108+
var del_B = ( ( ( var_Max - var_B ) / 6 ) + ( del_Max / 2 ) ) / del_Max;
109+
110+
if (var_R === var_Max) {
111+
H = del_B - del_G;
112+
} else if (var_G === var_Max) {
113+
H = 1/3 + del_R - del_B;
114+
} else if (var_B === var_Max) {
115+
H = 2/3 + del_G - del_R;
116+
}
117+
118+
if (H<0) {
119+
H += 1;
120+
}
121+
if (H>1) {
122+
H -= 1;
123+
}
124+
}
125+
return [
126+
Math.round(H * 255),
127+
Math.round(S * 255),
128+
Math.round(V * 255),
129+
rgba[3]
130+
];
131+
};
132+
133+
return p5.ColorUtils;
134+
});

‎test/test.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232

3333
<!-- Spec files -->
3434
<script src="unit/objects/p5.Vector.js" type="text/javascript" ></script>
35+
<script src="unit/objects/p5.Color.js" type="text/javascript" ></script>
3536
<script src="unit/core/core.js" type="text/javascript" ></script>
3637
<script src="unit/data/array_functions.js" type="text/javascript" ></script>
3738
<script src="unit/math/calculation.js" type="text/javascript" ></script>
@@ -43,7 +44,9 @@
4344
<script src="unit/input/files.js" type="text/javascript" ></script>
4445
<script src="unit/input/time_date.js" type="text/javascript" ></script>
4546
<script src="unit/color/setting.js" type="text/javascript" ></script>
47+
<script src="unit/color/creating_reading.js" type="text/javascript" ></script>
4648
<script src="unit/image/loading.js" type="text/javascript" ></script>
49+
<script src="unit/utils/color_utils.js" type="text/javascript" ></script>
4750

4851
<!-- run mocha -->
4952
<script type="text/javascript" >

0 commit comments

Comments
 (0)