CODEWITHSUNDEEP
javascriptmathrotationtrigonometry
user19485937
user19485937

Reputation:

how can I find the x, y from a rotated degree

what is the formula for getting the new X, Y

if I have the previus X, Y and the desired angle to rotate to.

the lines always start at 0, and go to the X, Y

enter image description here

function calcNewPoints(x, y, degree) {
  return {x: something, y: something}
}

I tried but not find anything simple (only very hard maths)

enter image description here

from what I see if always start at 0 it means, the line is inside the circle and the x and y are the height and width of a triangle,

but still don't understand

console.clear();

const input = document.querySelector("input[type=range]");
const line = document.querySelector("#line");
const span = document.querySelector("span");

input.addEventListener("input", (e) => {
  const result = `${Math.round(e.target.value) - 90}deg`;
  line.style.rotate = result;
  span.textContent = Math.round(e.target.value);
});
<script src="https://cdn.tailwindcss.com"></script>

<body class="h-screen grid place-items-center">
  <label class="fixed top-4">
      <input type="range" min="0" max="360" value="0" class="w-60" />
      <span></span>
    </label>

  <div id="line" class="bg-red-500 h-1 w-20 origin-[center_left] relative before:absolute before:right-0 before:bg-blue-500 before:h-3 before:w-3 before:bottom-[50%] before:translate-y-[50%] before:rounded-xl"></div>
</body>

in this example, I want to find the blue dot x, y.

Upvotes: 3

Views: 1847

Answers (1)

Christopher
Christopher

Reputation: 3647

Using Rotation-formulars you can calculate the position for the new x and y using the degree.

Sadly the english wiki page doesn't provide it in a simple way.

To rotate it counter-clockwise by α:
x1 = x * cos(α) - y * sin(α)
y1 = x * sin(α) + y * cos(α)

And clockwise:
x1 = x * cos(α) + y * sin(α) 
y1 = -x * sin(α) + y * cos(α)

Note: By multiplying the radiant with -1 you get the same result.


const input = document.querySelector("input[type=range]");
const line = document.querySelector("#line");

input.addEventListener("input", (e) => {
  let angle = parseFloat(e.target.value, 10),
    r = parseFloat(getComputedStyle(line).width, 10);
  const result = `${angle}deg`;
  line.style.rotate = result;
  const
    x = parseFloat((r * Math.cos(angle * Math.PI / 180)).toFixed(5), 10),
    // y must be inverted as it rotates clockwise by default
    y = -1 * parseFloat((r * Math.sin(angle * Math.PI / 180)).toFixed(5), 10),

    // test value, rotated by 90° clockwise
    rot = rotateByDegrees(x, y, 90);


  output.value = `α:${angle % 360}°\nx:${x} y:${y}\nx1:${rot.x} y1:${rot.y}`;
});

function rotateByDegrees(x, y, degree, roundTo = 5, invert = false) {
  const radiant = (invert ? 1 : -1) * degree * Math.PI / 180,
    cos = Math.cos(radiant),
    sin = Math.sin(radiant),
    // round a bit to get rid of numbers like 4...-e15
    round = (n) => parseFloat(n.toFixed(roundTo), 10);
  return {
    x: round(x * cos - y * sin),
    y: round(x * sin + y * cos),
  }
}
input.dispatchEvent(new Event("input"));
<script src="https://cdn.tailwindcss.com"></script>

<body class="h-screen grid place-items-center">
  <label class="fixed top-4" style="width: 100vw;">
    <input type="range" min="0" max="360" value="270" class="w-80" /><br>
    <output id="output" style="white-space: pre-wrap;"></output>
  </label>

  <div id="line" class="bg-red-500 h-1 w-20 origin-[center_left] relative before:absolute before:right-0 before:bg-blue-500 before:h-3 before:w-3 before:bottom-[50%] before:translate-y-[50%] before:rounded-xl"></div>
</body>

Upvotes: 2

Related Questions