1

I am currently using javascript to render out some circles to a canvas based off x & y coordinates. I came across a need for a maths equation to calculate some x & y coordinates based off of the angle of one of the circles. Basically I have circle A and circle B. Circle A gets rendered out to a fixed position on my canvas with some simple coordinates ie x = 20 and y = 20. I then use the coordinates of circle A to render out circle B so that it just touches circle A as shown in example A & B.

Example A just shows a simple offset because the circle is not at an angle so on circle B I can just simply set an Y offset of around 1.8x whatever the y value of circle A is to get the desired result. In example A because there is no angle, X value is the same for circles A & B.

Where I get stuck is when I have a circle A that is at an angle (desired result shown in example B). I can set circle B to the same angle no problem so the text within the circles is both at the same angle. Where I am struggling is where I need to calculate the X & Y offset for circle B based off the circle A X & Y values.

I imagine there is some kind of mathematics equation to calculate the correct x & y offsets when there is an angle present but I have no idea what it is.

Ideally I would like the offset of circle B's X & Y values to be such that circle B always appears to just touch circle A.

Can anyone point me in the right direction?

enter image description here

red house 87
  • 133
  • If the distance between the centers (the radial offset with respect to the center of $A$) is $d$ and $\alpha$ is the angle, then the offset for the coordinates should be $d\cos(\alpha)$ and $d\sin(\alpha)$ for the $x$ and $y$ coordinates, respectively. – Nina Simone Jul 26 '17 at 11:35
  • @BenLiger Hey ben did I answered your question or do you need something more ? Give me your feedback =) – Furrane Jul 26 '17 at 16:42

1 Answers1

1

Alright Ben I'm going to make some assumptions here :

Let say a circle is defined by the coordinates $(x,y)$ of its center and its radius $r$

Let's say you get the angle of a vector $\vec{u}$ by referencing $-\vec{y}$ (here I'm assuming $(0,0)$ is top left corner) : for example $(1,0)$ would have angle $90\deg$ and your example B would have an angle about $215\deg $.

Now we can compute $(x_b,y_b)$ the coordinates of the center of circle b relative to $(x_a,y_a)$ with a desired angle of $\theta$ :

$$x_b = x_a + (r_a+r_b)\cdot\sin(\theta)\text{ and }y_b = y_a - (r_a+r_b)\cos(\theta)$$

Note that if $r_a = r_b$ meaning both circles have the same radius, $r_a + r_b$ simplifies to $2r$

If we look at example A we can see $\theta = 180\deg$ hence we have $\cos(\theta) = -1$ and $\sin(\theta) = 0$ and if we plug in our values we get :

$x_b = x_a + 0 = x_a$ and $y_b = y_a -(r_a+r_b)\cdot (-1) = y_a + (r_a+r_b)$

Furrane
  • 1,562