Point to point linear gradient?

Question

I want to make an application that can generate point to point gradient (like Photoshop does). I'm familiar with how to generate an up to down gradient but not point to point. How is this conceptually done.

Thanks

Answer 1

I can't say if this is exactly how Photoshop does it, or that it's the most optimal way of doing it, but this should be the basic principle.

Think of the two points as defining a vector. You can find a normal vector for this, which will be perpendicular to the original vector (since that's the definition of a normal vector).

For each discrete point (pixel) on the line, calculate the gradient color as you would for an up-down (or left-right) gradient of the same length as your vector. Then draw a line of the selected color, such that it passes through the currently chosen point and is parallel with the normal vector.

It's actually very similar to the approach you'd use for an up-down gradient, except it's rotated.

Answer 2

Building on Michael Madsen's answer-

For every point in the region you're filling, compute the closest point on the line segment. (You'll have to google that, but there are plenty of examples.) At some point in the computation of that closest point, there's a value computed that ranges from 0 at the start point to 1 at the end point. Plug that into whatever your gradient function is.

The overview of the algorithm is basically...

pc = # the point you are coloring now
p0 = # start point
p1 = # end point
v = p1 - p0
d = Length(v)
v = Normalize(v) # or Scale(v, 1/d)

v0 = pc - p0

t = Dot(v0, v)
t = Clamp(t/d, 0, 1)

color = (start_color * t) + (end_color * (1 - t))

You can actually lose the make t/d just t if you scale v by 1/d^2 instead of 1/d. But anyway... I think this'll get you there. Perhaps obviously, the first half is "static" so you only need to loop over the last four lines.