Skip to content

Clamp color() to maxes #7715

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

Merged
merged 1 commit into from
Apr 9, 2025
Merged

Clamp color() to maxes #7715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion src/color/creating_reading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,7 +408,8 @@ function creatingReading(p5, fn){
return new Color(
arg,
this._renderer.states.colorMode,
this._renderer.states.colorMaxes[this._renderer.states.colorMode]
this._renderer.states.colorMaxes[this._renderer.states.colorMode],
{ clamp: true }
);
};

Expand Down
45 changes: 26 additions & 19 deletions src/color/p5.Color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,14 @@ import {
} from 'colorjs.io/fn';
import HSBSpace from './color_spaces/hsb.js';

const map = (n, start1, stop1, start2, stop2) =>
((n - start1) / (stop1 - start1) * (stop2 - start2) + start2);
const map = (n, start1, stop1, start2, stop2, clamp) => {
let result = ((n - start1) / (stop1 - start1) * (stop2 - start2) + start2);
if (clamp) {
result = Math.max(result, Math.min(start2, stop2));
result = Math.min(result, Math.max(start2, stop2));
}
return result;
}

const serializationMap = {};

Expand Down Expand Up @@ -63,7 +69,7 @@ class Color {
Color.#grayscaleMap[mode] = definition.fromGray;
}

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

Expand Down Expand Up @@ -106,16 +112,16 @@ 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);
mappedVals = Color.mapColorRange(vals, this.mode, colorMaxes, clamp);
}else if(vals.length === 3){
mappedVals = Color.mapColorRange([vals[0], vals[1], vals[2]], this.mode, colorMaxes);
mappedVals = Color.mapColorRange([vals[0], vals[1], vals[2]], this.mode, colorMaxes, clamp);
mappedVals.push(1);
}else if(vals.length === 2){
// Grayscale with alpha
if(Color.#grayscaleMap[this.mode]){
mappedVals = Color.#grayscaleMap[this.mode](vals[0], colorMaxes);
mappedVals = Color.#grayscaleMap[this.mode](vals[0], colorMaxes, clamp);
}else{
mappedVals = Color.mapColorRange([vals[0], vals[0], vals[0]], this.mode, colorMaxes);
mappedVals = Color.mapColorRange([vals[0], vals[0], vals[0]], this.mode, colorMaxes, clamp);
}
const alphaMaxes = Array.isArray(colorMaxes[colorMaxes.length-1]) ?
colorMaxes[colorMaxes.length-1] :
Expand All @@ -126,15 +132,16 @@ class Color {
alphaMaxes[0],
alphaMaxes[1],
0,
1
1,
clamp
)
);
}else if(vals.length === 1){
// Grayscale only
if(Color.#grayscaleMap[this.mode]){
mappedVals = Color.#grayscaleMap[this.mode](vals[0], colorMaxes);
mappedVals = Color.#grayscaleMap[this.mode](vals[0], colorMaxes, clamp);
}else{
mappedVals = Color.mapColorRange([vals[0], vals[0], vals[0]], this.mode, colorMaxes);
mappedVals = Color.mapColorRange([vals[0], vals[0], vals[0]], this.mode, colorMaxes, clamp);
}
mappedVals.push(1);
}else{
Expand All @@ -157,7 +164,7 @@ class Color {
}

// Convert from p5 color range to color.js color range
static mapColorRange(origin, mode, maxes){
static mapColorRange(origin, mode, maxes, clamp){
const p5Maxes = maxes.map((max) => {
if(!Array.isArray(max)){
return [0, max];
Expand All @@ -168,7 +175,7 @@ class Color {
const colorjsMaxes = Color.#colorjsMaxes[mode];

return origin.map((channel, i) => {
const newval = map(channel, p5Maxes[i][0], p5Maxes[i][1], colorjsMaxes[i][0], colorjsMaxes[i][1]);
const newval = map(channel, p5Maxes[i][0], p5Maxes[i][1], colorjsMaxes[i][0], colorjsMaxes[i][1], clamp);
return newval;
});
}
Expand Down Expand Up @@ -680,7 +687,7 @@ function color(p5, fn, lifecycles){
*/
p5.Color = Color;

sRGB.fromGray = P3.fromGray = function(val, maxes){
sRGB.fromGray = P3.fromGray = function(val, maxes, clamp){
// Use blue max
const p5Maxes = maxes.map((max) => {
if(!Array.isArray(max)){
Expand All @@ -690,11 +697,11 @@ function color(p5, fn, lifecycles){
}
});

const v = map(val, p5Maxes[2][0], p5Maxes[2][1], 0, 1);
const v = map(val, p5Maxes[2][0], p5Maxes[2][1], 0, 1, clamp);
return [v, v, v];
};

HSBSpace.fromGray = HSLSpace.fromGray = function(val, maxes){
HSBSpace.fromGray = HSLSpace.fromGray = function(val, maxes, clamp){
// Use brightness max
const p5Maxes = maxes.map((max) => {
if(!Array.isArray(max)){
Expand All @@ -704,11 +711,11 @@ function color(p5, fn, lifecycles){
}
});

const v = map(val, p5Maxes[2][0], p5Maxes[2][1], 0, 100);
const v = map(val, p5Maxes[2][0], p5Maxes[2][1], 0, 100, clamp);
return [0, 0, v];
};

HWBSpace.fromGray = function(val, maxes){
HWBSpace.fromGray = function(val, maxes, clamp){
// Use Whiteness and Blackness to create number line
const p5Maxes = maxes.map((max) => {
if(!Array.isArray(max)){
Expand Down Expand Up @@ -738,7 +745,7 @@ function color(p5, fn, lifecycles){
LCHSpace.fromGray =
OKLab.fromGray =
OKLCHSpace.fromGray =
function(val, maxes){
function(val, maxes, clamp){
// Use lightness max
const p5Maxes = maxes.map((max) => {
if(!Array.isArray(max)){
Expand All @@ -748,7 +755,7 @@ function color(p5, fn, lifecycles){
}
});

const v = map(val, p5Maxes[0][0], p5Maxes[0][1], 0, 100);
const v = map(val, p5Maxes[0][0], p5Maxes[0][1], 0, 100, clamp);
return [v, 0, 0];
};

Expand Down
19 changes: 19 additions & 0 deletions test/unit/color/creating_reading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,25 @@ suite('color/CreatingReading', function() {
});
});

suite('constructor clamping', function() {
test('should work on multi channels', function() {
const myColor = mockP5Prototype.color(1000, 1000, 1000, 1000);
assert.deepEqual(myColor.array(), [1, 1, 1, 1]);
});
test('should work on gray + alpha', function() {
const myColor = mockP5Prototype.color(1000, 1000);
assert.deepEqual(myColor.array(), [1, 1, 1, 1]);
});
test('should work on gray', function() {
const myColor = mockP5Prototype.color(1000);
assert.deepEqual(myColor.array(), [1, 1, 1, 1]);
});
test('normal values work', function() {
const myColor = mockP5Prototype.color(255 / 2);
assert.deepEqual(myColor.array(), [0.5, 0.5, 0.5, 1]);
});
});

suite('p5.prototype.lerpColor', function() {
beforeEach(function() {
mockP5Prototype.colorMode(mockP5Prototype.RGB);
Expand Down