Why the value of end point of element is wrong when using a function

Question

The problem is solved when adding angles individually and then using ttheta(without calling a function to add angles and than using ttheta), but can anyone tell about why using function here is wrong or what problem is this function causing

The issue is solved by using this:

    dtransform = window.getComputedStyle(leg1, null).getPropertyValue("transform");
    values = dtransform.split('(')[1].split(')')[0].split(',');
    dtheta = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
    dtransform1 = window.getComputedStyle(leg2, null).getPropertyValue("transform");
    values1 = dtransform1.split('(')[1].split(')')[0].split(',');
    dtheta1 = Math.round(Math.atan2(values1[1], values1[0]) * (180 / Math.PI));

    ttheta = dtheta + dtheta1;

Instead of using function.

What I am trying to achieve is to get value of end points of an element when it is rotated from left and top of browser.

X & Y values are max-distance of end points of shoe

I get right values at some points and wrong at some. I tried to add angle from the parent element but that also don't solve the problem.

This is the related answer from which I had taken help

To check values are right or wrong I added an event to get clientX of mouse click. And values of element positions are taken when Try button is clicked.

Am I doing something wrong, any insights will be really helpful

let leg1 = document.querySelector(".Leg1Shoe")
let leg2 = document.querySelector(".Leg1Part")
let animeAll = document.querySelectorAll(".allClass")
let animePause = false

let ttheta = 0;

function getPos() {
  if (!animePause) {
    animeAll.forEach(e => {
      e.classList.add("AnimatePaused");
    })
    animePause = true;
  } else {
    animeAll.forEach(e => {
      e.classList.remove("AnimatePaused");
    })
    animePause = false;
  }

  let h, w, x, dx, tx, y, dy, ty = "";
  leg1.style.outline = "1px solid red"
  h = leg1.offsetHeight;
  w = leg1.offsetWidth;
  x = leg1.getBoundingClientRect().left;
  y = leg1.getBoundingClientRect().top;
  func2(leg2);
  func2(leg1);
  dx = (Number(h * (Math.sin(ttheta * (Math.PI / 180)))) + Number(w * (Math.cos(ttheta * (Math.PI / 180))))).toFixed(2);
  dy = (Number(w * (Math.sin(ttheta * (Math.PI / 180)))) + Number(h * (Math.cos(ttheta * (Math.PI / 180))))).toFixed(2);
  tx = (Number(x) + Number(Math.abs(dx))).toFixed(2);
  ty = (Number(y) + Number(Math.abs(dy))).toFixed(2);
  console.log("X:" + tx, "Y:" + ty);
}

function func2(e) {
  let dtransform, dtheta, values = "";
  dtransform = window.getComputedStyle(e, null).getPropertyValue("transform");
  if (dtransform != "none") {
    values = dtransform.split('(')[1].split(')')[0].split(',');
    dtheta = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
  } else {
    dtheta = 0;
  };
  ttheta = Number(ttheta) + Number(dtheta);
}

leg1.addEventListener('click', mousePos);

function mousePos(e) {
  console.log("X:" + e.clientX, "Y:" + e.clientY)
}

.Leg1Part {
  position: relative;
  left: 100px;
  top: 43px;
  width: 20px;
  height: 75px;
  background-color: green;
  transform-origin: top center;
  animation: animateLeg1Part 5.0s linear infinite alternate;
}

@keyframes animateLeg1Part {
  0% {
    transform: rotate(40deg);
  }
  25% {
    transform: rotate(25deg);
  }
  50% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(60deg);
  }
}

.Leg1Shoe {
  position: absolute;
  left: 0px;
  top: 73px;
  width: 40px;
  height: 20px;
  background-color: blue;
  transform-origin: center left;
  animation: animateLeg1Shoe 5.0s linear infinite alternate;
}

@keyframes animateLeg1Shoe {
  0% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

.AnimatePaused {
  animation-play-state: paused;
}

<div class="Leg1Part allClass">
  <div class="Leg1Shoe allClass"></div>
</div>
<button onclick="getPos()">Try</button>

Thanks for help in advance

Answer 1

This is not a simple answer that can give you a complete solution, but just an outline of the process you can follow.

1. You get the transformation matrices for the "leg" and the "shoe", as you already do, by calling getPropertyValue("transform") This gives you a string like this: matrix(-0.568718, 0.822533, -0.822533, -0.568718, 0, 0), this is a shortened form of a 3x3 transformation matrix:

| cos(theta) -sin(theta) 0 |
| sin(theta) cos(theta)  0 |
| 0          0           1 |

2. Parse the string and create a 2d array for this matrix. Note: since you don't have any translation (two zeros in the last column) you can operate on 2x2 matrices.

3. Multiple the transformation matrices for the "leg" and the "shoe". It's a tedious process, and you can use the mathjs library to help.

4. Multiply the resulting transformation matrix by the vector of each point's original coordinates. This will give you the coordinates of the point with all rotations applied.

Here are some references:

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix()
• https://en.wikipedia.org/wiki/Affine_transformation
• http://web.cse.ohio-state.edu/~shen.94/681/Site/Slides_files/transformation_review.pdf
• https://en.wikipedia.org/wiki/Matrix_multiplication_algorithm