Рассчитать недостающую координату

Я собираюсь разработать специальную анимацию с холстом. Я хочу повернуть равнобедренный треугольник по кругу.

Примечание: Я не хочу вращать сам холст. Я хотел бы вычислять 3 точки треугольника в каждом кадре. (!).

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>

Поскольку я знаю, что противоположные стороны треугольника имеют одинаковую длину, мне нужно вычислить только последнюю точку. Я знаю теоретический путь:

Вычислить градиент A расстояния xy1 / xy2
Вычислить центр M расстояния xy1 / xy2
обычно из A с определенной длиной (например, 20 пикселей) от центра M вычислить

Тем не менее у меня есть проблемы с его внедрением, и я надеюсь, что кто-то мне поможет. Заранее спасибо.

javascript html math canvas geometry

12.08.2018 17:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

120

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для вычисления координат третьей точки треугольника следует использовать средний угол между точками 1 и 2. А радиус должен быть увеличен на высоту треугольника. Я дал простое приближение для последнего параметра:

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 - отношение высоты к краю равнобедренного треугольника.

При аппроксимации в качестве кромки используется длина дуги (они немного отличаются, но для целей рисования ею можно пренебречь).

Более точное значение

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))

Извините, но я не совсем понимаю ваш ответ. Откуда взялось 0.866 и где y3? Почему в конце стоит запятая? И зачем мне approximation, если я могу рассчитать точное значение? Хм? :)

— 12.08.2018 19:44

Я добавил некоторые пояснения. Я надеялся, что очевидно, что координата Y использует те же параметры, но sin вместо cos.

— 12.08.2018 20:00

Также добавлено точное значение для увеличения радиуса

— 12.08.2018 20:42

12.08.2018 18:38