Skip to content

Performance improvements for colors #8355

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
davepagurek wants to merge 5 commits into
base: dev-2.0
Choose a base branch
from
+107 −50
Open

Performance improvements for colors #8355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
98ad43f
Add a fast tracked default color serialization
davepagurek Dec 22, 2025
80237aa
Only lazily create colorjs objects
davepagurek Dec 22, 2025
f62a719
Use hex instead of rgba for speed
davepagurek Dec 23, 2025
a67ec31
Remove unused mode setter
davepagurek Dec 24, 2025
2c2f505
Merge branch 'dev-2.0' into color-perf
davepagurek Dec 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 100 additions & 43 deletions src/color/p5.Color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,22 @@ const map = (n, start1, stop1, start2, stop2, clamp) => {
return result;
}

const serializationMap = {};
const toHexComponent = (v) => {
const vInt = ~~(v * 255);
const hex = vInt.toString(16)
if (hex.length < 2) {
return '0' + hex
} else {
return hex
}
}

const serializationMap = new Map();



class Color {
// Reference to underlying color object depending on implementation
// Not meant to be used publicly unless the implementation is known for sure
_color;
// Color mode of the Color object, uses p5 color modes
mode;

class Color {
static colorMap = {};
static #colorjsMaxes = {};
static #grayscaleMap = {};
Expand All @@ -77,40 +81,47 @@ class Color {

constructor(vals, colorMode, colorMaxes, { clamp = false } = {}) {
// This changes with the color object
this.mode = colorMode || RGB;
this._cachedMode = colorMode || RGB;

if(vals instanceof Color){
// Received Color object to be used for color mode conversion
const mode = colorMode ?
Color.colorMap[colorMode] :
Color.colorMap[vals.mode];
this._color = to(vals._color, mode);
this.mode = mode;
this._initialize = () => {
this._cachedColor = to(vals._color, mode);
this._cachedMode = mode;
};

}else if (typeof vals === 'object' && !Array.isArray(vals) && vals !== null){
// Received color.js object to be used internally
const mode = colorMode ?
Color.colorMap[colorMode] :
vals.spaceId;
this._color = to(vals, mode);
this.mode = colorMode || Object.entries(Color.colorMap)
.find(([key, val]) => {
return val === this._color.spaceId;
});
this._initialize = () => {
this._cachedColor = to(vals, mode);
this._cachedMode = colorMode || Object.entries(Color.colorMap)
.find(([key, val]) => {
return val === this._cachedColor.spaceId;
});
};

} else if(typeof vals[0] === 'string') {
// Received string
try{
this._color = parse(vals[0]);
const [mode] = Object.entries(Color.colorMap).find(([key, val]) => {
return val === this._color.spaceId;
});
this.mode = mode;
this._color = to(this._color, this._color.spaceId);
}catch(err){
// TODO: Invalid color string
throw new Error('Invalid color string');
}
this._defaultStringValue = vals[0];
this._initialize = () => {
try{
this._cachedColor = parse(vals[0]);
const [mode] = Object.entries(Color.colorMap).find(([key, val]) => {
return val === this._cachedColor.spaceId;
});
this._cachedMode = mode;
this._cachedColor = to(this._cachedColor, this._cachedColor.spaceId);
}catch(err){
// TODO: Invalid color string
throw new Error('Invalid color string');
}
};

}else{
// Received individual channel values
Expand All @@ -119,27 +130,27 @@ class Color {
if(colorMaxes){
// NOTE: need to consider different number of arguments (eg. CMYK)
if(vals.length === 4){
mappedVals = Color.mapColorRange(vals, this.mode, colorMaxes, clamp);
mappedVals = Color.mapColorRange(vals, this._cachedMode, colorMaxes, clamp);
}else if(vals.length === 3){
mappedVals = Color.mapColorRange(
[vals[0], vals[1], vals[2]],
this.mode,
this._cachedMode,
colorMaxes,
clamp
);
mappedVals.push(1);
}else if(vals.length === 2){
// Grayscale with alpha
if(Color.#grayscaleMap[this.mode]){
mappedVals = Color.#grayscaleMap[this.mode](
if(Color.#grayscaleMap[this._cachedMode]){
mappedVals = Color.#grayscaleMap[this._cachedMode](
vals[0],
colorMaxes,
clamp
);
}else{
mappedVals = Color.mapColorRange(
[vals[0], vals[0], vals[0]],
this.mode,
this._cachedMode,
colorMaxes,
clamp
);
Expand All @@ -159,16 +170,16 @@ class Color {
);
}else if(vals.length === 1){
// Grayscale only
if(Color.#grayscaleMap[this.mode]){
mappedVals = Color.#grayscaleMap[this.mode](
if(Color.#grayscaleMap[this._cachedMode]){
mappedVals = Color.#grayscaleMap[this._cachedMode](
vals[0],
colorMaxes,
clamp
);
}else{
mappedVals = Color.mapColorRange(
[vals[0], vals[0], vals[0]],
this.mode,
this._cachedMode,
colorMaxes,
clamp
);
Expand All @@ -180,19 +191,54 @@ class Color {
}else{
mappedVals = vals;
}
if (this._cachedMode === RGB) {
if (mappedVals[3] === 1) {
// Faster for the browser to parse than rgba
this._defaultStringValue = '#' + toHexComponent(mappedVals[0]) + toHexComponent(mappedVals[1]) + toHexComponent(mappedVals[2]);
} else {
this._defaultStringValue = '#' + toHexComponent(mappedVals[0]) + toHexComponent(mappedVals[1]) + toHexComponent(mappedVals[2]) + toHexComponent(mappedVals[3]);;
}
}

const space = Color.colorMap[this.mode] || console.error('Invalid color mode');
const coords = mappedVals.slice(0, 3);
this._initialize = () => {
const space = Color.colorMap[this._cachedMode] || console.error('Invalid color mode');
const coords = mappedVals.slice(0, 3);

const color = {
space,
coords,
alpha: mappedVals[3]
const color = {
space,
coords,
alpha: mappedVals[3]
};
this._cachedColor = to(color, space);
};
this._color = to(color, space);
}
}

// Color mode of the Color object, uses p5 color modes
get mode() {
if (this._initialize) {
this._initialize();
this._initialize = undefined;
}
return this._cachedMode;
}
// Reference to underlying color object depending on implementation
// Not meant to be used publicly unless the implementation is known for sure
get _color() {
if (this._initialize) {
this._initialize();
this._initialize = undefined;
}
return this._cachedColor;
}
set _color(newColor) {
if (this._initialize) {
this._initialize();
this._initialize = undefined;
}
this._cachedColor = newColor;
}

// Convert from p5 color range to color.js color range
static mapColorRange(origin, mode, maxes, clamp){
const p5Maxes = maxes.map(max => {
Expand Down Expand Up @@ -319,14 +365,21 @@ class Color {
* </div>
*/
toString(format) {
if (format === undefined && this._defaultStringValue !== undefined) {
return this._defaultStringValue;
}

const key = `${this._color.space.id}-${this._color.coords.join(',')}-${this._color.alpha}-${format}`;
let colorString = serializationMap[key];
let colorString = serializationMap.get(key);

if(!colorString){
colorString = serialize(this._color, {
format
});
serializationMap[key] = colorString;
if (serializationMap.size > 1000) {
serializationMap.delete(serializationMap.keys().next().value)
}
serializationMap.set(key, colorString);
}
return colorString;
}
Expand Down Expand Up @@ -487,6 +540,7 @@ class Color {
* </div>
*/
setRed(new_red, max=[0, 1]) {
this._defaultStringValue = undefined;
if(!Array.isArray(max)){
max = [0, max];
}
Expand Down Expand Up @@ -542,6 +596,7 @@ class Color {
* </div>
*/
setGreen(new_green, max=[0, 1]) {
this._defaultStringValue = undefined;
if(!Array.isArray(max)){
max = [0, max];
}
Expand Down Expand Up @@ -597,6 +652,7 @@ class Color {
* </div>
*/
setBlue(new_blue, max=[0, 1]) {
this._defaultStringValue = undefined;
if(!Array.isArray(max)){
max = [0, max];
}
Expand Down Expand Up @@ -653,6 +709,7 @@ class Color {
* </div>
*/
setAlpha(new_alpha, max=[0, 1]) {
this._defaultStringValue = undefined;
if(!Array.isArray(max)){
max = [0, max];
}
Expand Down
14 changes: 7 additions & 7 deletions test/unit/color/p5.Color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ suite('p5.Color', function() {
});

test('should correctly render color string', function() {
assert.equal(c.toString(), 'rgb(100% 0% 40% / 0.8)');
assert.equal(c.toString(), '#ff0066cc');
});

test('should correctly get RGBA property after overwrite', function() {
Expand Down Expand Up @@ -471,7 +471,7 @@ suite('p5.Color', function() {
});

test('should correctly render color string', function() {
assert.equal(c.toString(), 'rgb(100% 0% 40% / 0.8)');
assert.equal(c.toString(), 'rgba(255, 0, 102, 0.8)');
});
});

Expand All @@ -498,7 +498,7 @@ suite('p5.Color', function() {
});

test('should correctly render color string', function() {
assert.equal(c.toString(), 'hsl(336 100% 50% / 0.8)');
assert.equal(c.toString(), 'hsla(336, 100%, 50%, 0.8)');
});
});

Expand All @@ -525,7 +525,7 @@ suite('p5.Color', function() {
});

test('should correctly render color string', function() {
assert.equal(c.toString(), 'rgb(100% 0% 40% / 0.8)');
assert.equal(c.toString(), 'hsba(336, 100%, 100%, 0.8)');
});
});

Expand Down Expand Up @@ -641,7 +641,7 @@ suite('p5.Color', function() {
});

test('should correctly render color string', function() {
assert.equal(c.toString(), 'rgb(100% 0% 40% / 0.8)');
assert.equal(c.toString(), 'rgba(255, 0, 102, 0.8)');
});
});

Expand All @@ -666,7 +666,7 @@ suite('p5.Color', function() {
});

test('should correctly render color string', function() {
assert.equal(c.toString(), 'rgb(100% 0% 40% / 0.8)');
assert.equal(c.toString(), 'hsba(336, 100%, 100%, 0.8)');
});
});

Expand All @@ -691,7 +691,7 @@ suite('p5.Color', function() {
});

test('should correctly render color string', function() {
assert.equal(c.toString(), 'hsl(336 100% 50% / 0.8)');
assert.equal(c.toString(), 'hsla(336, 100%, 50%, 0.8)');
});
});

Expand Down
Loading