Проверьте столкновение в пределах круга

#javascript #graphics #2d #collision

#javascript #графика #2d #столкновение

Вопрос:

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

введите описание изображения здесь

Зеленые линии я хочу рисовать, а красные — нет. Мне интересно узнать о некоторых идеях, которые могут помочь быстро обнаружить нежелательные спрайты. Есть ли что-нибудь, что я могу использовать для этих целей? Я использую pixi.js а высота и ширина спрайта всегда одинаковы.

Ответ №1:

Простая идея может заключаться в следующем:

Для отрезка (линии?), определяемого двумя точками P1 = (x0,y0) и P2 = (x1, y1). Окружность определяется центром R = (xc, yc) и радиусом r.

Теперь проверьте

  • расстояние P1 — C < r, также означает, что точка находится в круге
  • расстояние P2 — C < r, (то же самое)

Если оба верны, зеленая линия! В зависимости от используемой вами библиотеки вы, вероятно, найдете такой метод pointIsInCircle , который выполнит половину работы.

Вот простой пример из w3resource

 function check_a_point(a, b, x, y, r) {
    var dist_points = (a - x) * (a - x)   (b - y) * (b - y);
    r *= r;
    if (dist_points < r) {
        return true;
    }
    return false;
}