Clash Royale CLAN TAG#URR8PPP

Calculate missing coordinate

I am about to develop a special animation with a canvas. I want to rotate an isosceles triangle around a circle.

Note: I do not want to rotate the canvas itself. I'd like to calculate the 3 points of the triangle every single frame. (!).

(!)

let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d")

let trianglePositionAngle = 0;
let triangleSizeAngle = 15;


function draw(trianglePositionAngle)
ctx.fillStyle = "blue"
ctx.fillRect(0, 0, canvas.width, canvas.height)

let radius = 70
ctx.fillStyle = "black"
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);
ctx.fill();

let triangle =
x1: canvas.width / 2 + radius * Math.cos((trianglePositionAngle * Math.PI / 180)),
y1: canvas.height / 2 + radius * Math.sin((trianglePositionAngle * Math.PI / 180)),

x2: canvas.width / 2 + radius * Math.cos(((trianglePositionAngle + triangleSizeAngle) * Math.PI / 180)),
y2: canvas.height / 2 + radius * Math.sin(((trianglePositionAngle + triangleSizeAngle) * Math.PI / 180))


ctx.fillStyle = "red"
ctx.beginPath()
ctx.moveTo(triangle.x1, triangle.y1);
ctx.lineTo(triangle.x2, triangle.y2);
ctx.lineTo(canvas.width/2, canvas.height/2); // looking for the coordinates of this point
ctx.fill();


setInterval(function()
draw(trianglePositionAngle++)
,100)

<canvas id="canvas" width="200" height="200"></canvas>

Since I know that the opposite sides of the triangle are of equal length, I only have to calculate the last point. I know the theoretical path:

Nevertheless I have problems to implement it and hope that someone will help me. Thanks in advance.

1 Answer
1

To calculate coordinates of the third point of triangle, you should use middle angle betweeen points 1 and 2. And radius should be enlarged by the height of triangle. I gave simple approximation for the last parameter:

x3: canvas.width / 2 +
radius * (1 + 0.866 * triangleSizeAngle * Math.PI / 180) *
Math.cos(((trianglePositionAngle + triangleSizeAngle / 2) * Math.PI / 180))

y3: canvas.height / 2 +
radius * (1 + 0.866 * triangleSizeAngle * Math.PI / 180) *
Math.sin(((trianglePositionAngle + triangleSizeAngle / 2) * Math.PI / 180))


0.866=Sqrt(3)/2 is ratio of isosceles triangle height and edge.

0.866=Sqrt(3)/2

Approximation uses arc length as edge (they are slightly different, but it is negligible for drawing purposes).

More precise value

instead of
(1 + 0.866 * triangleSizeAngle * Math.PI / 180)
you can use
(cos(0.5* triangleSizeAngle * Math.PI / 180) +
Sqrt(3)* sin(0.5* triangleSizeAngle * Math.PI / 180))


approximation

:)

sin

cos

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.