Lerping Question

#1

Hi all,

I’m trying to draw a line with a brushstroke along the x-axis, and I want this stroke’s colour to lerp vertically along the y-axis.

However, it seems to me that I am confined to lerping in the direction that I draw in - or am I missing something here?

Can someone help me wrap my head around this?

Thanks

#2

Hi, if I understand correctly you’re looking to have a gradient stroke, right? Correct me if that’s wrong.

As far as I know this can’t be done with a simple line. Because you can’t change a the color in the middle of drawing it. You can get around this limitation by splitting the line into smaller segments and drawing each of those with a different color.

Here’s a function I made for a project a couple months ago which does the trick. It’s not optimized for speed but hopefully it’s a good example of the concept.

void ofApp::drawGradientLine(ofPoint point1, ofPoint point2, ofColor color1, ofColor color2, int segments) {
	for (int i = 0; i < segments; i++) {
		float segmentCenter = (i + 0.5f) / segments;
		ofSetColor(
			ofLerp(color1.r, color2.r, segmentCenter),
			ofLerp(color1.g, color2.g, segmentCenter),
			ofLerp(color1.b, color2.b, segmentCenter),
			ofLerp(color1.a, color2.a, segmentCenter)
		);
		float segmentStart = i / static_cast<float>(segments);
		float segmentEnd = (i + 1) / static_cast<float>(segments);
		ofDrawLine(
			ofLerp(point1.x, point2.x, segmentStart),
			ofLerp(point1.y, point2.y, segmentStart),
			ofLerp(point1.x, point2.x, segmentEnd),
			ofLerp(point1.y, point2.y, segmentEnd)
		);
	}
}
1 Like
#3

Hey @figraham, yes thats what I meant! Thanks for the reply.

I just realized that “lerping” on its own doesn’t mean gradient per se - I should have specified, glad you picked up what I meant though.

Ah, thats a neat trick, I’ll have a go at implementing this in my project. Speed isn’t so much of an issue as its not for real time use.

I’m drawing my brushstroke using circles that dissipate with alpha (taken from the Circle Brush example from ofBook), so I will have to rework this.

Once again, thanks for the advice/code.

1 Like