# Thread: linear gradient color fill algorithm

1. ## linear gradient color fill algorithm

Hello

I need linear and radial gradient color fill algorithm for polygons. help me.

2. we might be able to help if you give more information.

are you applying the gradient to transformed polygons, meaning you need an algorithm to quickly read only the necessary data from a texture? maybe you could show some examples of what you wish to do.

3. Thanks for ur reply. ya I have to apply for polygons also , but first i need for rectangle. user will give only angle based on that I have to fill gardient colors( only two colors) internally I have to calculate starting point of first color and starting point of second color based on the angle. Total Color filling logic I dont want. just logic for calculating the colors starting point.

4. remember $sin(\theta)=\frac{opposite}{hypotenuse}$

so if your rectangle started parallel to the view port, top left of the rectangle being $(0,0)$ and say your start point on the rectangle was $(10,27)$, then if the rectangle was angled 50 degrees (right edge of the rectangle moves away from the view port) then the start point would become $(10*sin(50),27)$, which is about $(8,27)$. if the rectangle was angled 37 degrees (bottom of the rectangle towards the view port) then the start point would become $(10,27*sin(37))$, which is about $(10,16)$.

there's also the fact that if one edge of the rectangle is closer of further than the other, it is taller or smaller, respectively, but hopefully this will give you a general idea of what you can do.

5. Hi

Thanks for ur reply. I am not very well in maths, anyway, please explain for 0 and 35 angle with diagram. how to calculate starting point of color1(x1,y1) , and starting point of color2(x2,y).

6. you must be working in 2d coordinates

take a look at the attachment

hope it helps!

7. Hi pinion,

Thanks for ur help.

8. Hi Pinion

I have to generate gradient(diagonal type) out put like this, what is the logic for this. I have to calculate x1,y1 of the first color and x2, y2 of second color based on the angle. I want to know what angle used in the picture small one.

9. ok i see, the rectangle isn't at an angle, but rather the gradient is at an angle, gotcha. i'm not sure what you mean by start point here. perhaps you could give more context or some code.

*edit*
ok i think i might have figured out what ya mean. is the start point always inside the bounds of the rectangle? or is it more like this -

10. Hi pinion,

correct. That x1,y1 and x2,y2 points will occur in the boundary of the outer rectangle. That will vary depens on the angle.

11. all right, so your darkest of each color is always going to be in opposite corners (for the linear gradient) and you want to know how to figure out which corner each color starts in depending on the angle of the gradient.

there are eight possibilities for your starting points - top left, entire left side, bottom left, entire bottom side, bottom right, entire right side, top right, entire top side.

now, assuming a gradient at a 35 degree angle means the gradient is rotated counter-clockwise 35 degrees...and that @ 0 degrees color_1 is top edge, color_2 is bottom edge...

here are the eight possibilities

angle@0 degrees - color_1 is top, color_2 is bottom
angle@90 degrees - color_1 is left, color_2 is right
angle@180 degrees - color_1 is bottom, color_2 is top
angle@270 degrees - color_1 is right, color_2 is left

0 < angle < 90 - color_1 is top left, color_2 is bottom right
90 < angle < 180 - color_1 is bottom left, color_2 is top right
180 < angle < 270 - color_1 is bottom right, color_2 is top left
270 < angle < 360 (back to 0) - color_1 is top right, color_2 is bottom left

as far as the (x_1, y_1) and (x_2, y_2) go, that depends on the size of the rectangle you are filling. also, remember sometimes the color starts on the entire edge of your rectangle, so it's not just a point.

12. Hello Mr.Pinion,

I have to calculate exactly x1, y1 and x2, y2. any formula is there?
x1 = sin(angle) * rectanglewidth( this is example only, not correct one);
like this I need formula for calculating x1,y1 and x2,y2 for different angles.

13. hmm, this wouldn't be my first choice method, but maybe your application has limitations that i'm not aware of. does one of these pictures show the correct (x1,y1) and (x2,y2)? is the coordinate system relative to the center of the rectangle, meaning (0,0) is the center of the rectangle? i can't give a direct answer unless i know more about your (x1,y1) and (x2,y2).