Javascript 具有indexArray的顶点不'；不能正确地连接三角形

我试图在p5.js中创建一种“多边形抽屉”。 我的意图是在开始时创建三个顶点中的随机三角形，用户可以使用鼠标添加三角形，三角形会自动连接到鼠标器中最近的两个顶点。 这一切都很好，但有时当我开始通过单击添加新的垂直时（鼠标get上的当前向量被推到顶点数组，三角形/索引数组得到更新），会绘制一个三角形get，它使用不同的垂直，而不是最近的、第二最近的和鼠标光标向量

我有两个顶点和三角形的数组（后面的函数作为索引数组）：

全局跟踪顶点数组的最近索引和第二最近索引：

let closest;
let secondClosest;

我首先创建一个随机三角形。我将每个顶点的索引推送到三角形数组，然后再次推第一个顶点以完成三角形：

function createRandomTriangle(){
  for(i = 0; i < 3; i++){
   let vert = createVector(random(0, width),random(0, height));
    vertices.push(vert);
    triangles.push(i);
  }
  triangles.push(0);
}

有时这种方法效果很好，有时会突然出现一条新线

我不明白确切的原因

---

您可以在此处测试thje p5.js sketch:

这是一个非常基本的示例，说明如何绘制多边形。我真的建议创建一个政治家，这样你就可以跟踪所有事情，但这超出了我现在愿意讨论的范围

//{
doc=document；htm=doc.documentElement；bod=doc.body；nav=navigator；M=tag=>doc.createElement（tag）；I=id=>doc.getElementById（id）；
mobile=nav.userAgent.match（/Mobi/i）？真：假；
S=（选择器，在范围内）=>{
设w=在| | doc内；
返回w.querySelector（选择器）；
}
Q=（选择器，内部）=>{
设w=在| | doc内；
返回w.querySelectorAll（选择器）；
}
兰德=（最小值，最大值）=>{
设mn=min，mx=max；
如果（mx==未定义）{
mx=mn；mn=0；
}
返回mn+Math.floor（Math.random（）*（mx mn+1））；
}
//下面魔术上方的小库-可以使用加载事件（除了//结束加载行）将其放在另一个页面上
const can=I（'can'），canB=can.getBoundingClientRect（）；
常数canW=can.WITH=canB.WITH，canH=can.height=canB.height；
const ctx=can.getContext（'2d'），points=[]；
ctx.lineWidth='1px'；ctx.lineStyle='#000'；ctx.fillStyle='#700'；
多功能游戏（e）{
设b=can.getBoundingClientRect（）；
clearRect（0，0，canW，canH）；
点推（[e.clientX-b.left，e.clientY-b.top]）；
ctx.beginPath（）；ctx.moveTo（…点[0]）；
对于（设i=1，l=points.length；i{
polyFun（e.Touchs[0]）；
}
}
否则{
onmousedown=polyFun；
}
}); // 端荷载
//]]>

/*css/external.css*/
*{
框大小：边框框；字体大小：0；填充：0；边距：0；
}
html，body，#can{
宽度：100%；高度：100%；
}
#能{
光标：指针；
}

标题在这里

您已经根据绘制三角形的方式创建了三角形阵列，每次创建新三角形时，都会向其添加4个点。但是，当您绘制它们时，您不会以4为一组对其进行迭代，这意味着您的绘制方法将三角形的第一个（因此也是第四个）点连接到下一个三角形的第一个点。通过将

if（i%4！=3）

放在

line（）

命令之前，可以快速解决此问题。更好的解决方案是为每个三角形创建一个包含三个点的数组，并将其推送到三角形数组，然后使用嵌套循环绘制它们。

让点之间的距离=Math.sqrt（Math.pow（x_coord_1-x_coord_2，2）+Math.pow（y_coord_1-y_coord_2，2））@Chris G:这很有道理！我是个哑巴。谢谢！为什么不喜欢
ctx.lineTo（x，y）；ctx.closePath（）
？@zOn看起来与您试图实现的目标类似
function createRandomTriangle(){
  for(i = 0; i < 3; i++){
   let vert = createVector(random(0, width),random(0, height));
    vertices.push(vert);
    triangles.push(i);
  }
  triangles.push(0);
}

function draw() {
  background(255);

  for(i = 0; i < triangles.length-1; i++){
    line(vertices[triangles[i]].x, vertices[triangles[i]].y,vertices[triangles[i+1]].x, vertices[triangles[i+1]].y);
  }

  let mouseVector = createVector(mouseX, mouseY);

  let distances = [];
  for(i = 0; i < vertices.length; i++){
    distances.push(mouseVector.dist(vertices[i]));
  }
  closest = distances.indexOf(Math.min( ...distances ));    
  distances[closest] = width + height;
  secondClosest = distances.indexOf(Math.min( ...distances ));

  line(mouseVector.x, mouseVector.y, vertices[closest].x, vertices[closest].y);
  line(mouseVector.x, mouseVector.y, vertices[secondClosest].x, vertices[secondClosest].y);
  line(vertices[closest].x, vertices[closest].y, vertices[secondClosest].x, vertices[secondClosest].y); 
    }

function mouseClicked() { 
    let latestIndex = vertices.push(createVector(mouseX, mouseY)) - 1;
    triangles.push(latestIndex);
    triangles.push(closest);
    triangles.push(secondClosest);
    triangles.push(latestIndex);
}