lerpColor, colorMode(HSB,255), color(x,x,0)

[ducklin5]

I have came to realize that when in colorMode(HSB), colorLerp doesnt work well with color objects that have 0 as an argument.

stroke(255);
// where color doesnt have a zero
var from = color(200, 255, 1);
var to = color(200, 255, 255);
var interA = lerpColor(from, to, .33);
var interB = lerpColor(from, to, .66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);

//where color has a zerop
var from = color(200, 255, 0);
var to = color(200, 255, 255);
var interA = lerpColor(from, to, .33);
var interB = lerpColor(from, to, .66);
fill(from);
rect(10, 20+90, 20, 60);
fill(interA);
rect(30, 20+90, 20, 60);
fill(interB);
rect(50, 20+90, 20, 60);
fill(to);
rect(70, 20+90, 20, 60);

[ecridge]

I believe that this is a limitation of the HSB colour space.

The HSB space is essentially a set of points, each representing a different colour, arranged in a cone shape. The flat top of the cone is the set of all points with maximum brightness (this is your typical colour-picker wheel with white in the middle), while the vertex of the cone at the bottom is the one point with brightness zero (perfect black).

So regardless of what hue or saturation you provide, setting brightness to zero always gives you the same black, which has no defined hue or saturation. Then, when you call lerpColor() with black as one of the endpoints, p5 just sets the hue to green as a ‘best guess’, which is what you are seeing in your second interpolation.

I imagine something similar would happen in HSL (which is a double cone, with one point at the bottom for perfect black, and one point at the top for perfect white) if you were to set the lightness of the first colour to 255.

[ducklin5]

which means this function can only work well under the RGB colour space?

function gradientLine(x1, y1, x2, y2, cArray, steps) {
	var lineLength = createVector(x2 - x1, y2 - y1);
	var betweenNodes = p5.Vector.div(lineLength, cArray.length - 1);
	var startNode = createVector(x1, y1);
	for (i = 0; i < cArray.length - 1; i++) {
		for (var j = steps; j >= 1; j--) {
			var inter = map(j, 1, steps, 0, 1);
			var c = lerpColor(cArray[i], cArray[i + 1], inter);
			stroke(c);
			line(startNode.x, startNode.y, startNode.x + (betweenNodes.x * j / steps), startNode.y + (betweenNodes.y * j / steps));
		}
		stroke(0, 0, 255);
		startNode.add(betweenNodes);
	}
}

One advantage of using HSB is that one can easily use for loop to create a rainbow effect (by looping through hue), but I also need to use the function shown above which forces me to use HSB. My temporary solution is to not use 0 at all, so I'm current using colorMode(HSB,255) and color(x,x,1)

[ecridge]

I might be misinterpreting what you’re after, but I think you are saying that it is easiest to generate cArray using HSB, but that you want the colour interpolation between cArray[i] and cArray[i+1] to follow the straight line in RGB space, rather than the (undefined) curve through HSB space? In which case, one solution would be to call colorMode(RGB) immediately before the call to lerpColor(), and colorMode(HSB) immediately after?

Otherwise I think that what you are doing already (‘chopping off’ the awkward point of the cone) is probably he best thing to do.

[lmccart]

thanks @joecridge for the thorough explanation!