With reference to my previous question:

I'm using micklh's answer, which works perfectly. However, it calculates the gradient based on two points, a starting point and an ending point. I want to change that such that I can give it a center point, an angle in degrees, and a length.

If you look at the picture from the other question:

gradient example

You can sort of discern where the center point is, the x,y of starting/ending locations become the dots based on the length of the gradient.

I assume I would have to:

  1. Take the center location
  2. Apply the angle + length
  3. Gives me my ending x,y
  4. Take the center location
  5. Calculate the reverse angle
  6. Apply the reverse angle + length
  7. Gives me my starting x,y
  8. Plug these starting/ending positions to the answer from the other question.

Am I correct? How would I do those steps?

  • \$\begingroup\$ This is a basic vector math problem. Generate a vector of the desired angle using sin/cos, scale it to the desired length, and add/subtract it from the center point. \$\endgroup\$ Jan 23, 2014 at 2:21
  • \$\begingroup\$ Hmm I'm not really sure how to do all of that. :( \$\endgroup\$
    – Thraka
    Jan 23, 2014 at 3:28

1 Answer 1


You might want to briefly refresh your trigonometry (maybe by reading the overview at Wikipedia) if you're stuck.

Your problem looks like this:

Pictorial problem description

Keeping that picture in mind, we can take essentially the same steps you described, but in a more mathematical form:

As inputs, you have a centre point p0 (red) and an angle (blue) and a length (orange).
As outputs, you want two points p1 and p2 (in black), representing the points that are length/2 away from p0 on its directly opposite sides.

The gray circle is just for emphasis that trigonometry applies.

Basic trigonometry says that to get the x value of the orange vector (p0 to p1), we can do r * sin(a) and for its y, do r * cos(a).

Hence to find p1, add the orange vector to p0. For p2, subtract the orange vector from p0.

You can then use p1 and p2 to draw your gradient.

  • \$\begingroup\$ Thank you so much. I got this working based on those steps and translating it (through lots of trial and error) into code. Maybe I should ask another question about this, but how would I do this if the circle is an oval? See in my grid that this is translating to, each cell is 5x10, not 10x10 so when the angle is horizontal vs vertical, it looks wider than it is tall. How would I take that into consideration with the angle? \$\endgroup\$
    – Thraka
    Jan 23, 2014 at 6:21
  • \$\begingroup\$ BTW Amazing illustration. Helped me understand what was going on. \$\endgroup\$
    – Thraka
    Jan 23, 2014 at 6:53
  • \$\begingroup\$ @Thraka An oval would follow a similar process, but the equations are different of course. It should be a different question and maybe better suited for Math SE. As for the grid; you can just scale the coordinates for p1 and p2 similarly, dividing just the y-coordinate by 2, for instance. \$\endgroup\$
    – Anko
    Jan 24, 2014 at 10:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .