1

Есть программа, где производится наблюдение за объектами, согласно законам физики в идеальных условиях. При их 3-м столкновении почему-то насчитывает вместо 1 сразу 11 (демонстрация: https://jsfiddle.net/sazdan/xjohd75c/13/). Скорее всего это связано с большой частотой анимации (как и половина всех моих проблем :D ). Может стоит изменить подход, или что-то с этим можно и так сделать?

Кусок кода, что отвечает за подсчет столкновений между объектами:

if (MacroCollision(objects[i],objects[j])) {//проверка столкновения 2 объектов
        if(j==i) continue;//от бага
        let x1 = objects[j].X + objects[j].width;
        let x2 = objects[i].X;
        let dx = x1 - x2;
        if (dx > 0) {
            dx *= -1;
        }
        objects[j].X += dx;
        let tx1 = objects[i].velocity;
        let tx2 = objects[j].velocity;

        objects[i].velocity = ((objects[i].mass - objects[j].mass) * tx1 + 2.0 * 
            objects[j].mass * tx2) / (objects[i].mass + objects[j].mass);
        objects[j].velocity = (2.0 * objects[i].mass * tx1 + 
            (objects[j].mass - objects[i].mass) * tx2) / 
          (objects[i].mass + objects[j].mass);
        touch++;
}

И весь код:

function dotInObj (dotX, dotY, objX, objY, objWidth, objHeight) {
	if((dotX>=objX&&dotY>=objY)&&(dotX<=objX+objWidth&&dotY<=objY+objHeight)) return true;
  else return false;
}//функция проверки "точка в объекте"

function MacroCollision(obj1,obj2){
  var XColl=false;
  var YColl=false;

  if ((obj1.X + obj1.width >= obj2.X) && (obj1.X <= obj2.X + obj2.width)) XColl = true;
  if ((obj1.Y + obj1.width >= obj2.Y) && (obj1.Y <= obj2.Y + obj2.width)) YColl = true;

  if (XColl&YColl){return true;}
  return false;
}

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var touch = 0;

var objects = [];

function createObj(mass, velocity, position) {  //функция создания объекта, position[0-1]
  objects.push({
    X: cvs.width*position-30,
    Y: cvs.height-30,
    mass: mass,
    width: 30,
    velocity: velocity
  });
}

createObj(10, -1, 1);
createObj(1, 0, 0.5);//созаю объекты

ctx.fillStyle = "#000";
function draw() { //функция отрисовки
  ctx.clearRect(0,0,cvs.width,cvs.height);//очистка после предыдущего кадра
  ctx.fillRect(0,0,5,cvs.height);//стена
  for (let i=0; i<objects.length; i++) {//отрисовка объектов
  let count = 10;
  let dt = 1 / count;
  for (let n=0; n<=count; n++) {
    ctx.fillRect(objects[i].X,objects[i].Y,objects[i].width,objects[i].width);//заполнение объекта(ов)
    objects[i].X+=objects[i].velocity * dt;//передвижение объекта(ов) согласно его(их) скорости

    if (dotInObj(objects[i].X, objects[i].Y, 0, 0, 5, cvs.height)) {//проверка на стык со стеной
      objects[i].velocity =  Math.abs(objects[i].velocity) * Math.sign(-objects[i].velocity); 
      touch++;
    }
    //for (let j=0; j<objects.length; j++) {
    let j = 1;
      if (MacroCollision(objects[i],objects[j])) {//проверка столкновения 2 объектов
      	if(j==i) continue;//от бага
      	let x1 = objects[j].X + objects[j].width;
        let x2 = objects[i].X;
        let dx = x1 - x2;
        if (dx > 0) {
        	dx *= -1;
        }
        objects[j].X += dx;
        let tx1 = objects[i].velocity;
        let tx2 = objects[j].velocity;
       
        objects[i].velocity = ((objects[i].mass - objects[j].mass) * tx1 + 2.0 * 
        	objects[j].mass * tx2) / (objects[i].mass + objects[j].mass);
        objects[j].velocity = (2.0 * objects[i].mass * tx1 + 
        	(objects[j].mass - objects[i].mass) * tx2) / 
          (objects[i].mass + objects[j].mass);
        touch++;
      }
    //}
    }
  }
  ctx.font = "16px Arial";
  ctx.fillText(touch, 10, 20);
  requestAnimationFrame(draw); 
  //console.value = "kek";
}

draw();
canvas {
  border: 1px solid #999;
}
<div class="canvasBG"></div>
<canvas id="canvas" width="500" height="150"></canvas>
<input type="text" id="console">

3
  • Вы потпрежнему делаете проверки в цикле отрисовки. Вы понимаете что эта функция вызывается когда браузеру захочется? 29 июн 2019 в 20:29
  • Просто я новичек в этом, мне сложно представить как лучше реализовать проверку. Через отдельный таймер?
    – sazdan
    29 июн 2019 в 20:32
  • да, всю логику надо отделять от отрисовки 29 июн 2019 в 20:36

1 ответ 1

1

Проблема Вашей реализации этой чудесной загадки в 10 итерациях внутри отрисовки, я так понял что они были для ускорения процесса. это вызывало 10 одинаковых проверок внутри одного "тика" плюс dt я посчитал по-честному

function dotInObj (dotX, dotY, objX, objY, objWidth, objHeight) {
	if((dotX>=objX&&dotY>=objY)&&(dotX<=objX+objWidth&&dotY<=objY+objHeight)) return true;
  else return false;
}//функция проверки "точка в объекте"

function MacroCollision(obj1,obj2){
  var XColl=false;
  var YColl=false;

  if ((obj1.X + obj1.width >= obj2.X) && (obj1.X <= obj2.X + obj2.width)) XColl = true;
  if ((obj1.Y + obj1.width >= obj2.Y) && (obj1.Y <= obj2.Y + obj2.width)) YColl = true;

  if (XColl&YColl){return true;}
  return false;
}

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var touch = 0;

var objects = [];

function createObj(mass, velocity, position) {  //функция создания объекта, position[0-1]
  objects.push({
    X: cvs.width*position-30,
    Y: cvs.height-30,
    mass: mass,
    width: 30,
    velocity: velocity
  });
}

createObj(10, -100, 1);
createObj(1, 0, 0.5);//созаю объекты

ctx.fillStyle = "#000";
let prevTime = 0;

function draw(t) { //функция отрисовки
  let dt = (t - prevTime)/1000;
  ctx.clearRect(0,0,cvs.width,cvs.height);//очистка после предыдущего кадра
  ctx.fillRect(0,0,5,cvs.height);//стена
  for (let i=0; i<objects.length; i++) {//отрисовка объектов
    ctx.fillRect(objects[i].X,objects[i].Y,objects[i].width,objects[i].width);//заполнение объекта(ов)
    objects[i].X+=objects[i].velocity * dt;//передвижение объекта(ов) согласно его(их) скорости
    if (dotInObj(objects[i].X, objects[i].Y, 0, 0, 5, cvs.height)) {//проверка на стык со стеной
      objects[i].velocity =  Math.abs(objects[i].velocity) * Math.sign(-objects[i].velocity); 
      touch++;
    }
    let j = 1;
    if (MacroCollision(objects[i],objects[j])) {//проверка столкновения 2 объектов
      if(j==i) continue;//от бага
      let x1 = objects[j].X + objects[j].width;
      let x2 = objects[i].X;
      let dx = x1 - x2;
      if (dx > 0) 
        dx *= -1;
      objects[j].X += dx;
      let tx1 = objects[i].velocity;
      let tx2 = objects[j].velocity;
      let m2 = objects[i].mass + objects[j].mass;
      objects[i].velocity = ((objects[i].mass - objects[j].mass) * tx1 + 2.0 * 
                             objects[j].mass * tx2) / m2;
      objects[j].velocity = (2.0 * objects[i].mass * tx1 + 
                             (objects[j].mass - objects[i].mass) * tx2) / m2;
      touch++;
    }
  }
  ctx.font = "16px Arial";
  ctx.fillText(touch, 10, 20);
  requestAnimationFrame(draw); 
  prevTime = t;
}

requestAnimationFrame(draw); 
canvas {
  border: 1px solid #999;
}
<canvas id="canvas" width="500" height="170"></canvas>

PS: считать физику в requestAnimationFrame - ошибка, попробуйте запустить сниппет и убрать вкладку в фон и объекты с большой вероятностью вообще не столкнуться, т.к. когда вызывается эта функция - решает браузер.

PPS: меня очень порадовало то, что я увидел - это очень интересная загадка =)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.