Блог

Я пытаюсь создать очень простое физическое моделирование в p5.js и я использую класс для создания нескольких экземпляров фигур (которые в настоящее время все являются кругами), у меня есть функция, которая проверяет, нажимает ли пользователь внутри области круга, и если это так, позволяет им перетаскивать его, но ястолкнулся с проблемой. Мне нужно, чтобы программа определила, на какой объект она зависает, но я не уверен, как я это сделаю, ниже у меня есть функция, работающая только для первого объекта (obj1). могу ли я вместо этого сделать что-то вроде {classname}.PosX ?

 function whilePressed()
    {
      if (Math.pow(mouseX-obj1.posX,2) (Math.pow(mouseY-obj1.posY,2))<=(Math.pow(obj1.size/2,2)) | grabbed == true)
        {
          grabbed = true;
          if (firstGrab == true)
          {
            difX = (obj1.posX-mouseX);
            difY = (obj1.posY-mouseY);
            firstGrab = false;
          }
          obj1.posX = mouseX difX;
          obj1.posY = mouseY difY;
        }
    }
 

ниже приведен класс (в функции рисования есть оператор switch, потому что у меня тоже был квадрат, но я решил заставить работать круг перед реализацией квадрата)

 class primitive
{
  constructor()
  {
    this.size = 50;
    this.posX = canvasSize/2;
    this.posY = canvasSize/2;
    this.velX = 0;
    this.velY = 0;
    this.terminalVel = 15;
  }
  
  pos(x,y)
  {
    this.posX = x;
    this.posY = y;
  }
  
  draw(shape = 'circle')
  {
    stroke(168,198,159);
    fill(204,226,163);
    switch (shape)
    {
      case 'circle':
        circle(this.posX,this.posY,this.size);
      break;
    }
  }
  
  gravity()
  {
    if (this.velY < this.terminalVel)
    {
      this.velY = (this.velY 1);  
    }
    else
    {
      this.velY = 20;
    }
    this.posY = this.posY this.velY;
    
    if (this.posY > groundLevel-(this.size/2))
    {
      this.posY = groundLevel-(this.size/2);
      this.velY = 0;
    }
  }
}
 

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

 var foo = new primitive("foo");
 

 var PRIMITIVES = [];
// ...
constructor(name)
  {
    this.name = name;
    this.size = 50;
    this.posX = canvasSize/2;
    this.posY = canvasSize/2;
    this.velX = 0;
    this.velY = 0;
    this.terminalVel = 15;
    PRIMITIVES.push(name);
  }
 

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

 static findInstance(mouseX, mouseY) {
  for (var i = 0; i < PRIMITIVES.length; i  ) 
    {
      obj = window[PRIMITIVES[i]];
      if (Math.pow(mouseX-obj.posX,2) (Math.pow(mouseY-obj.posY,2))<=(Math.pow(obj.size/2,2)))
        {
          return obj;
        }
    }
  
}
 

Затем вы можете вызвать primitive.findInstance(mouseX, mouseY) , и он вернет правильный экземпляр. Если это не работает, пожалуйста, прокомментируйте. Я надеюсь, что это помогло вам.

Создайте массив объектов:

 let objects = []
 

 objects.push(obj1);
objects.push(obj2);
 

Реализовать алгоритм в mousePressed() обратном вызове, который обнаруживает выбранный объект:

 let draggedObject;
let dragOffsetX;
let dragOffsetY;
 

 function mousePressed() {
 
    draggedObject = null;

    for (let i=0; i < objects.lenght; i  ) {

        obj = objects[i];
        if (Math.pow(mouseX-obj.posX,2)   Math.pow(mouseY-obj.posY,2) <= Math.pow(obj.size/2,2)) {
            
            draggedObject = obj;
            dragOffsetX = draggedObject.posX - mouseX;
            dragOffsetY = draggedObject.posY - mouseY;
            break;
        }
    }
}
 

Измените положение объекта в обратном mouseDragged() вызове:

 function mouseDragged() {

    if (dragged_object) {
        draggedObject.posX = mouseX   dragOffsetX;
        draggedObject.posY = mouseY   dragOffsetY;
    }
}