Color gradient algorithm -

given 2 rgb colors , rectangle, i'm able create basic linear gradient. blog post gives explanation on how create it. want add 1 more variable algorithm, angle. want create linear gradient can specified angle of color.

for example, have rectangle (400x100). color red (255, 0, 0) , color green (0, 255, 0) , angle 0°, have following color gradient.

given have same rectangle, color , color. time change angle 45°. should have following color gradient.

that's quite simple. besides angle, need 1 more parameter, i.e. how tight/wide gradient should be. let's instead work 2 points:

                                         __d                                      __--                                  __--                              __--                          __--                         m 

where m middle point of gradient (between red , green) , d shows direction , distance. therefore, gradient becomes:

                  m'                    |                     __d                     |                __--                      |           __--                       |      __--                        | __--                         m                    __--  |                __--       |            __--            |        __--                 |    d'--                      |                              m" 

which means, along vector d'd, change red green, linearly know. along vector m'm", keep color constant.

---

that theory. implementation depends on how draw pixels. let's assume nothing , want decide color pixel pixel (so can draw in pixel order.)

that's simple! let's take point:

                  m'                    | sa                  __d                 __--|                __--                p--   |__       __--                |  -- /| \    __--                 |   -- | |_--                  |    --m                   |__--  |                __--ca     |            __--            |        __--                 |    d'--                      |                              m" 

point p, has angle a coordinate system defined m , d. know along vector m'm", color doesn't change, sin(a) doesn't have significance. instead, cos(a) shows relatively how far towards d or d' pixels color should go to. point ca shows |pm|cos(a) means mapping of p on line defined m , d, or in details length of line pm multiplied cos(a).

so algorithm becomes follows

• for every pixel
  • calculate ca
  • if farther d, green. if before d', red.
  • else find color red green based on ratio of |d'ca|/|d'd|

---

based on comments, if want determine wideness canvas size, can calculate d based on input angle , canvas size, although advise using separate parameter.