Rotating a point through equations

A dummy's guide

There is no range slide for centre coordinates because the javascript would give strange errors that were unfixable due to being so odd. If you want to have full control go to the desmos link

Summary and Contents:

This document is written to show how I made an equation for rotating points, and to act as a record of proof that I made this equation.

This document entails:

The reason I decided to create this equation was to make transformation rotation questions easier for myself. You see, I've never been a fan of using vellum paper for rotations, so I wanted a better solution. It's worth mentioning that I've actually made equations for transformations before, just to simplify things for myself. I even came up with a scaling equation that wasn't explicitly taught to me, and I had a blast writing it. However, when it comes to this specific equation for rotation, I want to clarify that I'm fully aware of the existence of other formulas. Nevertheless, I made this equation entirely from scratch, without referencing any other sources. I wanted to challenge myself and create something unique.

Resource information list:

Let's Begin

1. The Start

2. Setting the basic idea

Alright we have drawn a simplified version of the graph above.

Although we can try to do trigonometry right now. We do not even know what we're going to use in trigonometry yet, so let's draw some guides to hopefully make things a little familiar. Let's start by drawing a line connecting the 2 dots $ \large \overline{ca} $

We're getting somewhere but, can we do better?

Let's draw some axes for the x and y of each point, and see what we can build from there!

Have we done it?

A keen eye would spot the 2 triangles that are formed, or a square. So we have done it! We have found a triangle, making it easier for us to apply trigonometry, as we now know the hypotenus, opposite, and adjacent of a triangle. Let's clear it up, and label the adjacent, opposite, and hypotenus.

We have done it.

We now know everything we need so let's list them down below below.

$ Hyp = \large \sqrt{(a_{x} - c_{x})^{2}+(a_{y} - c{y})^{2}} $

$ Adj = \large a_{x} - c_{x} $

$ Opp = \large a_{y} - c_{y} $

We now know everything we need to know, and we now can move on to the other side of this document. Finding the equation.

3. Going into The Equations

We have prepared everything to start. To start we need to know a little bit more, we need to know what angle the point is currently. To find this, we can use $\tan^{-1}$.

$$\Large \tan\theta = \frac{Opp}{Adj}$$

$$ \Large \theta = \tan^{-1}(\frac{a_{y} - c_{y}}{a_{x} - c_{x}}) $$

Now, we can stop here. However, a strange phenomena happens when the centre X coordinates is smaller than the point X where the result from this equation is false. Or at least not the right answer we're looking for, a miscalculation on our end. The result that's produced is essentially 90 degrees off. You can see this below:

Angle: 90

So to fix this, we can just add 180 degrees when the coordinate Centre X is less than point X.

$$ \Large \theta = \begin{cases} \tan^{-1}(\frac{a_{y} - c_{y}}{a_{x} - c_{x}}), \space\space\space\space\space\space\space\space\space\space\space\space\space\space\space a_{x} \lt c_{x} \\ \\ \tan^{-1}(\frac{a_{y} - c_{y}}{a_{x} - c_{x}}) + 180, \space\space\space\space a_{x} \ge c_{x} \end{cases} $$

Now let's see if that fixes the issue:

Angle: 90

Now there isn't much left to do, but actually add the rotation amount, and applying it to our point. So let's do it

Let's begin by first declaring 3 new variables.

The calculated angle of a(x,y) and c(x,y)

$ \large \theta = \measuredangle $

The added angle to the original angle

$ \large \alpha = +\measuredangle$

The new rotated point

$(c_{x}, c_{y})$

The hypotenus

$r = \sqrt{(a_{x} - c_{x})^{2}+(a_{y} - c_{y})^{2}}$

Now we can return back

So let us calculate the x and y of the rotated point.

Starting with the X...

We know from our diagram above that the adjacent is our X essentially, so we can use cosine to calculate this.

$$ \Large \cos(\theta) = \frac{Adj}{Hyp} $$

$$ \Large \cos(\theta) = \frac{a_{x}-c_{x}}{r} $$

If you are wondering why the adjacent equation is $b_{x}$ and not $a_{x}$. it is because we have to solve for the new pair of coordinates. And so we have to swap $a_{x}$ with $b_{x}$

This is essentially the full equation to calculate the new coordinates but we must $b_{x}$ the subject of this equation.

$$\large b_{x}-c_{x} = r \space\space \times \space\space \cos(\theta) $$

$$ \large b_{x} = r \space\space \times \space\space \cos(\theta) + c_{x} $$

this equation is done, but we want to be able to add $\alpha$ which isn't hard to do, we can just add that into the cosine

$$ \large b_{x} = r \space\space \times \space\space \cos(\theta + \alpha) + c_{x} $$

we've finished this, now it's time to to also create an equation for $b_{y}$ Which isn't hard actually, we can just swap the cosine with sin.

$$ \large b_{y} = r \space\space \times \space\space \sin(\theta + \alpha) + c_{y} $$

We have done it. We have made an equation for the new coordinates, here is how both formulas look togheter and then in their fullness.

$$ \large b_{x} = r \space\space \times \space\space \cos(\theta + \alpha) + c_{x} $$

$$ \large b_{y} = r \space\space \times \space\space \sin(\theta + \alpha) + c_{y} $$

$$ b_{x} = \sqrt{(a_{x} - c_{x})^{2}+(a_{y} - c_{y})^{2}} \space\space \times \space\space \cos \Biggr(\begin{cases}\begin{rcases} \tan^{-1}(\frac{a_{y} - c_{y}}{a_{x} - c_{x}}), \space\space\space\space\space\space\space\space\space\space\space\space\space\space\space a_{x} \lt c_{x} \\ \tan^{-1}(\frac{a_{y} - c_{y}}{a_{x} - c_{x}}) + 180, \space\space\space\space a_{x} \gt c_{x} \end{rcases} \end{cases} + \alpha \Biggr) + c_{x} $$

$$ b_{y} = \sqrt{(a_{x} - c_{x})^{2}+(a_{y} - c_{y})^{2}} \space\space \times \space\space \sin \Biggr( \begin{cases}\begin{rcases} \tan^{-1}(\frac{a_{y} - c_{y}}{a_{x} - c_{x}}), \space\space\space\space\space\space\space\space\space\space\space\space\space\space\space a_{x} \lt c_{x} \\ \tan^{-1}(\frac{a_{y} - c_{y}}{a_{x} - c_{x}}) + 180, \space\space\space\space a_{x} \gt c_{x} \end{rcases} \end{cases} + \alpha \Biggr) + c_{y} $$

That's one big boy

Let's start with formating the $\alpha$ value properly

This step of formating the $\alpha$ is not actually neccasary. It just makes more sense when you look at it and is more conveniant.

In it's current form, when the degree is added or subtracted, it's anti-clockwise. So to fix this we have to make an equation for the $\alpha$ too but we'll use another greek letter to symbolise the degree variable. We will use $\beta$

$$ \alpha = -\beta $$

there's also another issue we must face, the rotation is about 180$\degree$s off. Essentially if we rotate this point by 90$\degree$ it will be 180$\degree$s off. So we just add another 180$\degree$s

$$ \alpha = -\beta + 180 $$

Let's write this equation in it's true fullest insanity!

$$ \small b_{x} = \sqrt{(a_{x} - c_{x})^{2}+(a_{y} - c_{y})^{2}} \space\space \times \space\space \cos \Biggr( \begin{cases} \begin{rcases} \tan^{-1}(\frac{a_{y} - c_{y}}{a_{x} - c_{x}}), \space\space\space\space\space\space\space\space\space\space\space\space\space\space\space a_{x} \lt c_{x} \\ \tan^{-1}(\frac{a_{y} - c_{y}}{a_{x} - c_{x}}) + 180, \space\space\space\space a_{x} \gt c_{x} \end{rcases} \end{cases} -\beta + 180 \Biggr) + c_{x} $$

$$ \small b_{y} = \sqrt{(a_{x} - c_{x})^{2}+(a_{y} - c_{y})^{2}} \space\space \times \space\space \sin \Biggr( \begin{cases} \begin{rcases} \tan^{-1}(\frac{a_{y} - c_{y}}{a_{x} - c_{x}}), \space\space\space\space\space\space\space\space\space\space\space\space\space\space\space a_{x} \lt c_{x} \\ \tan^{-1}(\frac{a_{y} - c_{y}}{a_{x} - c_{x}}) + 180, \space\space\space\space a_{x} \gt c_{x} \end{rcases} \end{cases} -\beta + 180 \Biggr) + c_{y} $$

We have done it.

If you wanna see an example go back to the top of this document, there's also a desmos link to where I first wrote this equation

We have completed our equation, no doubt it can be done better. But this is how I made my equation. Now let's apply this in coding!

Applying the equation to Js

Writing in Js & HTML Canvas

Let's put a very simple setup of HTML for canvas. The important part is the <canvas> and the < src >

                                     1. <!DOCTYPE html>
                                                            2. <html>
                                                            3. <body>
                                                            4.
                                                            5.  <h1>HTML5 Canvas</h1>
                                                            6.  <canvas id="myCanvas" width="200"  height="100"
                                                                style="border:1px solid #000000;"></canvas>;
                                                            7.
                                                            8.  <script src="Canvas.js"></script>
                                                            9.
                                                            10. </body>
                                                            11. </html>
                    

Now we'll write the rest of the code in JS. Starting with setting the file up and writing a function to create dots. And 2 variables for the x and y of a point, and another x y pair for the centre of rotation

                            1. const canvas = document.getElementById("myCanvas");
                                                            2. const ctx = canvas.getContext("2d");
                                                            3. var ax = 50; //point a X
                                                            4. var ay = 25; //point a Y
                                                            5. var cx = 100; //centre X
                                                            6. var cy = 50; //centre y
                                                            7.
                                                            8. function dot(X, Y, r, Col) {
                                                            9.     ctx.arc(X, Y, r, 0, 2*Math.PI);
                                                            10.    ctx.fillStyle = Col;
                                                            11.    ctx.fill();
                                                            12.    ctx.beginpath(); } 

                    

we can display the first dot. Dot A with a light blue. We will also create another function for the rotated point and some variable for it. And then let's run it

                            13.var theta;
                                                            14.var hyp;
                                                            15.var alpha;
                                                            16.function rotatedDot(ax, ay, xcentre, ycentre, r, Col, deg) {
                                                            17.  hyp = Math.hypot((ax - xcentre), (ay - ycentre))
                                                            18.    
                                                            19.  if (ax < xcentre) {
                                                            20.    theta = (Math.atan((ay - ycentre)/(ax - xcentre))) * (180/Math.PI);
                                                            21.  } else {
                                                            22.    theta = (Math.atan((ay - ycentre)/(ax - xcentre))) * (180/Math.PI)
                                                               + 180;
                                                            23.  }
                                                            24.    
                                                            25.  alpha = deg + 180;
                                                            26.  var tempX = hyp * Math.cos((theta + alpha) * (Math.PI/180)) + xcentre;
                                                            27.  var tempy = hyp * Math.sin((theta + alpha) * (Math.PI/180)) + ycentre;
                                                            28.
                                                            29.  console.log(tempX, tempy, "hello")
                                                            30.  dot(tempX, tempy, r, Col);
                                                            31.}
                                                            32.
                                                            33.dot(ax, ay, 8, "#90e0ef");
                                                            34.rotatedDot(ax, ay, cx, cy, 8, '#ef233c', 90);
                    

                    

Thank you for reading this document