CODEWITHSUNDEEP
javascriptgeometry
Aditya Ramakrishnan
Aditya Ramakrishnan

Reputation: 238

How to get an angle by using tangent in javascript?

The red circle is at a known angle of 130°, then I want to draw the navy line from the center to 130° using x and y of the red circle but it looks like I missed the calculation.

Currently, the angle of the Navy line is a reflection to the angle of the red line and if I add minus sign ➖ to *diffX * at line13, it'll work as expected but Why do I need to do that by myself, why can't the Calculations at line 10 and 13 figured out if x should be minus ➖ or plus.

I couldn't figure out where I was wrong..any help/suggestions are appreciated!

let ctx, W = innerWidth,
  H = innerHeight;

// params for the red circle
let hypothenus = 100;
let knownAngle = (-130 * Math.PI) / 180;
let x = (W / 2) + Math.cos(knownAngle) * hypothenus;
let y = (H / 2) + Math.sin(knownAngle) * hypothenus;

// params for navy line
let diffX = x - (W / 2);
let diffY = (H / 2) - y;
let dist = Math.hypot(diffX, diffY); // pythagoras
let unknownAngle = -Math.atan2(diffY, diffX);
let newX = (W / 2) + Math.cos(unknownAngle) * dist;
let newY = (H / 2) + Math.sin(unknownAngle) * dist;

let angInDegree1 = ~~Math.abs(knownAngle * 180 / Math.PI);
let angInDegree2 = ~~Math.abs(unknownAngle * 180 / Math.PI) | 0;

const msg = document.getElementById("msg")
msg.innerHTML = `Hypothenus1: ${hypothenus}, angle: ${angInDegree1}<br>`;
msg.innerHTML +=`Hypothenus2: ${dist},  angle: ${angInDegree2}`;

// everything to be rendered to the screen
const update = () => {
  if (ctx == null) return;

  // drawing the red line
  draw.line([W / 2, 0], [W / 2, H], 6, "red");
  draw.line([0, H / 2], [W, H / 2], 6, "red");

  // the red circle
  draw.circle([x, y], 10, "red");
  // draw line
  draw.line([W / 2, H / 2], [newX, newY], 4, "navy");
}

// utility object for drawing
const draw = {
  line(from, to, width, color) {
    with(ctx) {
      beginPath();
      lineWidth = width;
      strokeStyle = color;
      moveTo(...from);
      lineTo(...to);
      stroke();
      closePath();
    }
  },

  circle(pos, radius, color) {
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.arc(...pos, radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();
  }
}

// init function
const init = () => {
  ctx = document.querySelector("#cvs").getContext("2d");
  W = ctx.canvas.width = innerWidth;
  H = ctx.canvas.height = innerHeight;

  update();
}

window.addEventListener("load", init);
<div id="msg"></div>
<canvas id="cvs"></canvas>

Upvotes: 1

Views: 244

Answers (1)

MBo
MBo

Reputation: 80177

Seems you are using too much minuses.

At first, you define angle -130 degrees, close to -3Pi/4. Cosine and sine values for this angle are about -0.7, using hypothenus = 100, we get x =W/2-70, y = H/2-70

diffX = x - W/2 = -70
diffY = y - H/2 = -70
atan2(-70, -70) gives -2.3561 radians = -3/4*Pi = -135 degrees

When you change sign of diffY (note - diffY formula is wrong, not difX one!), you make reflection against OX axis, and change angle sign - that is why another minus before Math.atan2 is required

Corrected code:

let diffX = x - (W / 2);
let diffY = y - (H / 2);
let dist = Math.hypot(diffX, diffY); // pythagoras
let unknownAngle = Math.atan2(diffY, diffX);

Upvotes: 1

Related Questions