如何让一组三角形相互碰撞？

Question

我有一个空数组，每次更新都会添加新元素。这些是从屏幕顶部落到底部的三角形。我将如何着手让这些三角形相互作用。我希望他们互相碰撞，但我发现的每个教程都没有帮助。

let PARTICLES = [];
//Creates canvas of 400x650 pixels
function setup() {
  createCanvas(400, 650);
}

//Creates new particles and adds them to the Particles[] array
function draw() {
  background("turquoise");
  let newP = new Particle();
  PARTICLES.push(newP);
  //Continously +1 to the PARTICLES array which duplicated the original triangle.
  for (let i = 0; i < PARTICLES.length; i++) {
    PARTICLES[i].update();
    PARTICLES[i].show();
    if(PARTICLES[i].delete()) {
      PARTICLES.splice(i,1);           //keeps the array 78 elements long
    }
  }
}

//Gives the position of the original particle that all the others are copied from
class Particle {
  constructor() {
    this.x1 = 195;
    this.y1 = 30;
    this.x2 = 200;
    this.y2 = 20;
    this.x3 = 205;
    this.y3 = 30;
    this.vx = random(-0.8, 0.8);
    this.vy = 8;
  }
  
  //if the y position of a particle gets >650, it is deleted from the array
  delete() {
    return this.y1 > 650;
  }
  
  //updates every vertex with the speed given to it
  update() {
    this.x1 += this.vx;
    this.y1 += this.vy;
    this.x2 += this.vx;
    this.y2 += this.vy;
    this.x3 += this.vx;
    this.y3 += this.vy;  
  }
  
  //Triangle properties
  show() {
    stroke(255);
    fill(255, 10);
    triangle(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3);
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="p5.collide2D.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

Answer 1

我自己不使用 p5，但任何库的基本原理都是相同的：测试每个对象是否与另一个对象重叠，并在发生重叠时采取一些措施：例如改变一个或两个物体的位置，使它们不再碰撞。

查看主 p5.js 库表明它有一个名为 p5.collide2d 的插件库，您可以使用它。这个库有函数 collidePolyPoly() 检查 2 个多边形是否相交。

这是一个检查随机放置的圆圈是否发生碰撞的官方演示。如果一个新添加的圆圈与另一个圆圈重叠，它会被赋予一个新的位置，并重复测试直到所有圆圈都没有任何重叠地放置 - 相同类型的想法。

https://editor.p5js.org/p52dcollide/sketches/WYb8vT3Mh

或者您可能想改用 p5.play 库。这是一个对象相互反弹的示例 http://molleindustria.github.io/p5.play/examples/index.html?fileName=collisions4.js

如何让一组三角形相互碰撞？

How to make an array of triangles collide with eachother?

javascript

p5.js