Проблем с реакцията при сблъсък - основен кръг в рамките на правоъгълник

Имам анимация, използваща 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;

}

ляво = x & горе = y

Има стойности 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);
    }

всяка помощ е изключително ценена, благодаря!


person null    schedule 24.02.2014    source източник
comment
@Geobits - имам чувството, че съм тъп тук - току-що го начертах на хартия, така че се надявам да грешите:) началото е в центъра, така че да се получи отляво на кръга ще бъде x +rad или ляво+rad (като ляво е ефективно x) и за да получа страната на возенето на кръга, трябва да направя x-rad. Моля, обяснете по-подробно, ако греша, тъй като в момента се чувствам някак специално.   -  person null    schedule 24.02.2014
comment
@Geobits - мисля, че тук имаме кръстосани кабели. Добре знам какъв е радиусът, но благодаря за пояснението. Не мога да се позова на оригиналния коментар, тъй като е изтрит, но от това, което прочетох, си помислих - о, няма значение, вие също сте изтрили това съобщение. Convo fail. :)   -  person null    schedule 24.02.2014


Отговори (1)


Начинът, по който аз го виждам, кръг, дефиниран от (x,y,r) координатите на центъра и радиуса, е вътре в подравнен по ос n правоъгълник, дефиниран от (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