Skip to content

Commit d1a42f5

Browse files
author
Lauren McCarthy
committed
Merge branch 'colour' of github.com:joecridge/p5.js
2 parents dd14aea + 87509f3 commit d1a42f5

17 files changed

+1062
-945
lines changed

‎lib/addons/p5.dom.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1231,7 +1231,7 @@
12311231
var self = this;
12321232

12331233
if (val instanceof p5.Color)
1234-
val = 'rgba(' + val.rgba[0] + ',' + val.rgba[1] + ',' + val.rgba[2] + ',' + val.rgba[3]/255 + ')'
1234+
val = 'rgba(' + val.levels[0] + ',' + val.levels[1] + ',' + val.levels[2] + ',' + val.levels[3]/255 + ')'
12351235

12361236
if (typeof val === 'undefined') {
12371237
if (prop.indexOf(':') === -1) {

‎src/3d/immediateMode3D.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -133,15 +133,15 @@ p5.Renderer3D.prototype.strokeWeight = function() {
133133

134134
p5.Renderer3D.prototype.fill = function(r, g, b, a) {
135135
var color = this._pInst.color.apply(this._pInst, arguments);
136-
var colorNormalized = color._normalize();
136+
var colorNormalized = color._array;
137137
this.curColor = colorNormalized;
138138
this.drawMode = 'fill';
139139
return this;
140140
};
141141

142142
p5.Renderer3D.prototype.stroke = function(r, g, b, a) {
143143
var color = this._pInst.color.apply(this._pInst, arguments);
144-
var colorNormalized = color._normalize();
144+
var colorNormalized = color._array;
145145
this.curColor = colorNormalized;
146146
this.drawMode = 'stroke';
147147
return this;
@@ -165,4 +165,4 @@ p5.Renderer3D.prototype._getColorVertexShader = function(){
165165
return shaderProgram;
166166
};
167167

168-
module.exports = p5.Renderer3D;
168+
module.exports = p5.Renderer3D;

‎src/3d/light.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ p5.prototype.ambientLight = function(v1, v2, v3, a){
4646

4747
var color = this._renderer._pInst.color.apply(
4848
this._renderer._pInst, arguments);
49-
var colors = color._normalize();
49+
var colors = color._array;
5050

5151
gl.uniform3f( shaderProgram.uAmbientColor,
5252
colors[0], colors[1], colors[2]);
@@ -143,7 +143,7 @@ p5.prototype.directionalLight = function(v1, v2, v3, a, x, y, z) {
143143
//@TODO: check parameters number
144144
var color = this._renderer._pInst.color.apply(
145145
this._renderer._pInst, [v1, v2, v3]);
146-
var colors = color._normalize();
146+
var colors = color._array;
147147

148148
gl.uniform3f( shaderProgram.uDirectionalColor,
149149
colors[0], colors[1], colors[2]);
@@ -270,7 +270,7 @@ p5.prototype.pointLight = function(v1, v2, v3, a, x, y, z) {
270270
//@TODO: check parameters number
271271
var color = this._renderer._pInst.color.apply(
272272
this._renderer._pInst, [v1, v2, v3]);
273-
var colors = color._normalize();
273+
var colors = color._array;
274274

275275
gl.uniform3f( shaderProgram.uPointLightColor,
276276
colors[0], colors[1], colors[2]);

‎src/3d/material.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ p5.prototype.basicMaterial = function(v1, v2, v3, a){
184184

185185
var color = this._renderer._pInst.color.apply(
186186
this._renderer._pInst, arguments);
187-
var colors = color._normalize();
187+
var colors = color._array;
188188

189189
gl.uniform4f( shaderProgram.uMaterialColor,
190190
colors[0], colors[1], colors[2], colors[3]);
@@ -230,7 +230,7 @@ p5.prototype.ambientMaterial = function(v1, v2, v3, a) {
230230

231231
var color = this._renderer._pInst.color.apply(
232232
this._renderer._pInst, arguments);
233-
var colors = color._normalize();
233+
var colors = color._array;
234234

235235
gl.uniform4f(shaderProgram.uMaterialColor,
236236
colors[0], colors[1], colors[2], colors[3]);
@@ -281,7 +281,7 @@ p5.prototype.specularMaterial = function(v1, v2, v3, a) {
281281

282282
var color = this._renderer._pInst.color.apply(
283283
this._renderer._pInst, arguments);
284-
var colors = color._normalize();
284+
var colors = color._array;
285285

286286
gl.uniform4f(shaderProgram.uMaterialColor,
287287
colors[0], colors[1], colors[2], colors[3]);
@@ -295,4 +295,4 @@ p5.prototype.specularMaterial = function(v1, v2, v3, a) {
295295
return this;
296296
};
297297

298-
module.exports = p5;
298+
module.exports = p5;

‎src/3d/p5.Renderer3D.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,10 @@ p5.Renderer3D.prototype.background = function() {
106106
var gl = this.GL;
107107
var _col = this._pInst.color.apply(this._pInst, arguments);
108108
// gl.clearColor(0.0,0.0,0.0,1.0);
109-
var _r = (_col.rgba[0]) / 255;
110-
var _g = (_col.rgba[1]) / 255;
111-
var _b = (_col.rgba[2]) / 255;
112-
var _a = (_col.rgba[3]) / 255;
109+
var _r = (_col.levels[0]) / 255;
110+
var _g = (_col.levels[1]) / 255;
111+
var _b = (_col.levels[2]) / 255;
112+
var _a = (_col.levels[3]) / 255;
113113
gl.clearColor(_r, _g, _b, _a);
114114
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
115115
};
@@ -404,4 +404,4 @@ p5.Renderer3D.prototype.pop = function() {
404404
this.uMVMatrix = uMVMatrixStack.pop();
405405
};
406406

407-
module.exports = p5.Renderer3D;
407+
module.exports = p5.Renderer3D;

‎src/color/color_conversion.js‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
/**
2+
* module Conversion
3+
* submodule Color Conversion
4+
* @for p5
5+
* @requires core
6+
*/
7+
8+
'use strict';
9+
10+
/**
11+
* Conversions adapted from <http://www.easyrgb.com/math.html>.
12+
*
13+
* In these functions, hue is always in the range [0,1); all other components
14+
* are in the range [0,1]. 'Brightness' and 'value' are used interchangeably.
15+
*/
16+
17+
var p5 = require('../core/core');
18+
var RGBA = []; // We will reuse this array whenever we convert to RGBA.
19+
20+
p5.ColorConversion = {};
21+
22+
/**
23+
* Convert an HSBA array to HSLA.
24+
*/
25+
p5.ColorConversion._hsbaToHSLA = function(hsba) {
26+
var hue = hsba[0];
27+
var sat = hsba[1];
28+
var val = hsba[2];
29+
30+
// Calculate lightness.
31+
var li = (2 - sat) * val / 2;
32+
33+
// Convert saturation.
34+
if (li !== 0) {
35+
if (li === 1) {
36+
sat = 0;
37+
} else if (li < 0.5) {
38+
sat = sat / (2 - sat);
39+
} else {
40+
sat = sat * val / (2 - li * 2);
41+
}
42+
}
43+
44+
// Hue and alpha stay the same.
45+
return [hue, sat, li, hsba[3]];
46+
};
47+
48+
/**
49+
* Convert an HSBA array to RGBA.
50+
*/
51+
p5.ColorConversion._hsbaToRGBA = function(hsba) {
52+
var hue = hsba[0] * 6; // We will split hue into 6 sectors.
53+
var sat = hsba[1];
54+
var val = hsba[2];
55+
56+
RGBA.length = 0; // Clear persistent RGBA array.
57+
58+
if (sat === 0) {
59+
RGBA = [val, val, val, hsba[3]]; // Return early if grayscale.
60+
} else {
61+
var sector = Math.floor(hue);
62+
var tint1 = val * (1 - sat);
63+
var tint2 = val * (1 - sat * (hue - sector));
64+
var tint3 = val * (1 - sat * (1 + sector - hue));
65+
var red, green, blue;
66+
if (sector === 0) { // Red to yellow.
67+
red = val;
68+
green = tint3;
69+
blue = tint1;
70+
} else if (sector === 1) { // Yellow to green.
71+
red = tint2;
72+
green = val;
73+
blue = tint1;
74+
} else if (sector === 2) { // Green to cyan.
75+
red = tint1;
76+
green = val;
77+
blue = tint3;
78+
} else if (sector === 3) { // Cyan to blue.
79+
red = tint1;
80+
green = tint2;
81+
blue = val;
82+
} else if (sector === 4) { // Blue to magenta.
83+
red = tint3;
84+
green = tint1;
85+
blue = val;
86+
} else { // Magenta to red.
87+
red = val;
88+
green = tint1;
89+
blue = tint2;
90+
}
91+
RGBA = [red, green, blue, hsba[3]];
92+
}
93+
94+
return RGBA;
95+
};
96+
97+
/**
98+
* Convert an HSLA array to HSBA.
99+
*/
100+
p5.ColorConversion._hslaToHSBA = function(hsla) {
101+
var hue = hsla[0];
102+
var sat = hsla[1];
103+
var li = hsla[2];
104+
105+
// Calculate brightness.
106+
var val;
107+
if (li < 0.5) {
108+
val = (1 + sat) * li;
109+
} else {
110+
val = li + sat - li * sat;
111+
}
112+
113+
// Convert saturation.
114+
sat = 2 * (val - li) / val;
115+
116+
// Hue and alpha stay the same.
117+
return [hue, sat, val, hsla[3]];
118+
};
119+
120+
/**
121+
* Convert an HSLA array to RGBA.
122+
*
123+
* We need to change basis from HSLA to something that can be more easily be
124+
* projected onto RGBA. We will choose hue and brightness as our first two
125+
* components, and pick a convenient third one ('zest') so that we don't need
126+
* to calculate formal HSBA saturation.
127+
*/
128+
p5.ColorConversion._hslaToRGBA = function(hsla){
129+
var hue = hsla[0] * 6; // We will split hue into 6 sectors.
130+
var sat = hsla[1];
131+
var li = hsla[2];
132+
133+
RGBA.length = 0; // Clear persistent RGBA array.
134+
135+
if (sat === 0) {
136+
RGBA = [li, li, li, hsla[3]]; // Return early if grayscale.
137+
} else {
138+
139+
// Calculate brightness.
140+
var val;
141+
if (li < 0.5) {
142+
val = (1 + sat) * li;
143+
} else {
144+
val = li + sat - li * sat;
145+
}
146+
147+
// Define zest.
148+
var zest = 2 * li - val;
149+
150+
// Implement projection (project onto green by default).
151+
var hzvToRGB = function(hue, zest, val) {
152+
if (hue < 0) { // Hue must wrap to allow projection onto red and blue.
153+
hue += 6;
154+
} else if (hue >= 6) {
155+
hue -= 6;
156+
}
157+
if (hue < 1) { // Red to yellow (increasing green).
158+
return (zest + (val - zest) * hue);
159+
} else if (hue < 3) { // Yellow to cyan (greatest green).
160+
return val;
161+
} else if (hue < 4) { // Cyan to blue (decreasing green).
162+
return (zest + (val - zest) * (4 - hue));
163+
} else { // Blue to red (least green).
164+
return zest;
165+
}
166+
};
167+
168+
// Perform projections, offsetting hue as necessary.
169+
RGBA = [hzvToRGB(hue + 2, zest, val),
170+
hzvToRGB(hue , zest, val),
171+
hzvToRGB(hue - 2, zest, val),
172+
hsla[3]];
173+
}
174+
175+
return RGBA;
176+
};
177+
178+
/**
179+
* Convert an RGBA array to HSBA.
180+
*/
181+
p5.ColorConversion._rgbaToHSBA = function(rgba) {
182+
var red = rgba[0];
183+
var green = rgba[1];
184+
var blue = rgba[2];
185+
186+
var val = Math.max(red, green, blue);
187+
var chroma = val - Math.min(red, green, blue);
188+
189+
var hue, sat;
190+
if (chroma === 0) { // Return early if grayscale.
191+
hue = 0;
192+
sat = 0;
193+
}
194+
else {
195+
sat = chroma / val;
196+
if (red === val) { // Magenta to yellow.
197+
hue = (green - blue) / chroma;
198+
} else if (green === val) { // Yellow to cyan.
199+
hue = 2 + (blue - red) / chroma;
200+
} else if (blue === val) { // Cyan to magenta.
201+
hue = 4 + (red - green) / chroma;
202+
}
203+
if (hue < 0) { // Confine hue to the interval [0, 1).
204+
hue += 6;
205+
} else if (hue >= 6) {
206+
hue -= 6;
207+
}
208+
}
209+
210+
return [hue / 6, sat, val, rgba[3]];
211+
};
212+
213+
/**
214+
* Convert an RGBA array to HSLA.
215+
*/
216+
p5.ColorConversion._rgbaToHSLA = function(rgba) {
217+
var red = rgba[0];
218+
var green = rgba[1];
219+
var blue = rgba[2];
220+
221+
var val = Math.max(red, green, blue);
222+
var min = Math.min(red, green, blue);
223+
var li = val + min; // We will halve this later.
224+
var chroma = val - min;
225+
226+
var hue, sat;
227+
if (chroma === 0) { // Return early if grayscale.
228+
hue = 0;
229+
sat = 0;
230+
} else {
231+
if (li < 1) {
232+
sat = chroma / li;
233+
} else {
234+
sat = chroma / (2 - chroma);
235+
}
236+
if (red === val) { // Magenta to yellow.
237+
hue = (green - blue) / chroma;
238+
} else if (green === val) { // Yellow to cyan.
239+
hue = 2 + (blue - red) / chroma;
240+
} else if (blue === val) { // Cyan to magenta.
241+
hue = 4 + (red - green) / chroma;
242+
}
243+
if (hue < 0) { // Confine hue to the interval [0, 1).
244+
hue += 6;
245+
} else if (hue >= 6) {
246+
hue -= 6;
247+
}
248+
}
249+
250+
return [hue / 6, sat, li / 2, rgba[3]];
251+
};
252+
253+
module.exports = p5.ColorConversion;

0 commit comments

Comments
 (0)