Проблема реакции на столкновение — основной круг внутри прямоугольника

У меня есть анимация с использованием JS и Fabric.js, в результате чего вокруг экрана больше кругов. Я пытаюсь сдержать их в определенной области, но у меня есть некоторые проблемы.

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

Круги создаются внизу экрана, где также находится их контейнер. С кодом, который у меня есть, они «плавают» наверху и остаются там на одном месте.

Журналы консоли, которые у меня есть, показывают, что они сразу же находятся за пределами прямоугольника, поэтому я предполагаю, что что-то не так с моей функцией столкновения.

Моя цель состоит в том, чтобы они оставались внутри сдерживающего элемента, двигаясь, и когда они ударяются о края, они должны менять направление, чтобы снова оставаться внутри.

Спасибо за любую помощь.

РЕДАКТИРОВАТЬ: ОТРЕДАКТИРОВАНО, ЧТОБЫ ВКЛЮЧИТЬ ПРИКОСНУЮ ЯСНОСТЬ И ИСПОЛЬЗОВАТЬ ОБНАРУЖЕНИЕ COLSIOSN ИЗ НИЖЕ ОТВЕТА, ТАК КАК СЕЙЧАС ДУМАЮТ, ЧТО ПРОБЛЕМА С ОТВЕТОМ ВМЕСТО ОБНАРУЖЕНИЯ.

Функция столкновения:

функция testCollision (круг, прямоугольник) {

return circle.left + circle.radius < rectangle.left + rectangle.width/2 //right side
    && circle.left - circle.radius < rectangle.left - rectangle.width/2 //left side
    && circle.top + circle.radius < rectangle.top + rectangle.height/2 //top
    && circle.top - circle.radius < rectangle.top - rectangle.height/2;

}

слева = х и вверху = у

Существуют значения maxX и maxY, которые представляют собой ширину и высоту контейнера.
это тест:

if(testCollision(circle, rect) == false){
        var r = Math.atan2(y - maxY / 2, x - maxX / 2);
        vx = -Math.cos(r);
        vy = -Math.sin(r);
    }

любая помощь очень ценится, спасибо!


javascript algorithm collision collision-detection
person null    schedule 24.02.2014    source источник
comment
@Geobits - мне кажется, что я здесь тупой - я только что нарисовал это на бумаге, поэтому надеюсь, что вы ошибаетесь :) начало координат находится в центре, поэтому слева от круга будет x +rad или left+rad (поскольку слева фактически x), и чтобы получить сторону круга, мне нужно сделать x-rad. Пожалуйста, уточните, если я ошибаюсь, потому что в данный момент я чувствую себя немного особенным.   -  person null    schedule 24.02.2014
comment
@Geobits - думаю, мы пересеклись здесь. Я хорошо знаю, что такое радиус, но спасибо за разъяснение. Я не могу сослаться на исходный комментарий, так как он удален, но из того, что я прочитал, я подумал, что вы - о, неважно, вы тоже удалили это сообщение. Конво терпит неудачу. :)   -  person null    schedule 24.02.2014

Ответы (1)


arrow_upward
2
arrow_downward

Как я это вижу, круг, определяемый (x,y,r) координатами центра и радиуса, находится внутри выровненного по оси прямоугольника, определяемого (x,y,w,h) координатами центра, шириной и высота, если 4 точки сверху, справа, снизу, слева от круга находятся внутри прямоугольника:

function testCollision(circle, rectangle) {
  return circle.x + circle.r < rectangle.x + rectangle.w/2
      && circle.x - circle.r > rectangle.x - rectangle.w/2
      && circle.y + circle.r < rectangle.y + rectangle.h/2
      && circle.y - circle.r > rectangle.y - rectangle.h/2
}

Я считал, что положительное направление y направлено вниз, как это принято в системах координат в Интернете.

person Tibos    schedule 24.02.2014
comment
привет, спасибо, что нашли время ответить. Исходной точкой является центр, поэтому я немного изменил его, чтобы отразить это, используя w/2 и -w/2 в строках 2 и 4. Это должно работать отлично, но круги перемещаются к точке в верхней части экрана и остаются там. Заставляет меня думать, что обнаружение столкновений - это не проблема, а скорее ответ. - person null; 24.02.2014
comment
@SteveGreen Я перепутал знаки, пожалуйста, проверьте исправленный ответ. - person Tibos; 24.02.2014
comment
спасибо за обновление ответа, я разобрался с признаками - когда-то в прошлом году я использовал aabb, что только добавило раздражения от того, что это работает :) Обнаружение есть, ответа нет. Спасибо за помощь. - person null; 24.02.2014