单击 P5.JS 中的三角形项目允许单击三角形修复的外部

Question

非常感谢您抽出宝贵的时间来尝试帮助解答我的问题！对此，我真的非常感激！！我是 P5JS 的新手，但决定尝试一下！我的代码很可能不是最紧凑的，非常感谢您提供的任何反馈！我的问题是，当你点击它外面的三角形部分时，它似乎通常会接受它作为它的内部。我很可能在我的代码中有一个允许这样做的错误。我所有的代码都是在 canvas 中创建一个随机三角形，并测试您是否可以单击或在三角形内放置一个按钮。当你这样做时，它会创建一个新的随机的。请让我知道是什么导致了这个奇怪的错误发生。 PS 我使用在线浏览器 https://alpha.editor.p5js.org/ 来运行所以我建议运行把它放在那里看看它复制得最好。

代码如下：

function setup() {
    createCanvas(500, 500);
    x1 = random(0, 500);
    y1 = random(0, 500);
    x2 = random(0, 500);
    y2 = random(0, 500);
    x3 = random(0, 500);
    y3 = random(0, 500);
    click = 0;
    x = false;
    y = false;
}
function testfor() {
    if (x == true && y == true) {
        if (mouseIsPressed) {
            click = 1;
        }
    }
    if (click == 1) {
        x1 = random(0, 500);
        y1 = random(0, 500);
        x2 = random(0, 500);
        y2 = random(0, 500);
        x3 = random(0, 500);
        y3 = random(0, 500);
        click = 0;
        X = false;
        Y = false;
    }
}
setInterval(testfor, 100);
function draw() {
    background(0, 100, 299);
    fill(125);
    triangle(x1, y1, x2, y2, x3, y3);
}
setInterval(draw, 100);
function xcheck() {
    if (x1 >= x2 && x1 >= x3) {
        if (x2 >= x3) {
            if (mouseX <= x1 && mouseX >= x3) {
                x = true;
            } else {
                x = false;
            }
        } else if (mouseX <= x1 && mouseX >= x2) {
            x = true;
        } else {
            x = false;
        }
    } else if (x2 >= x1 && x2 >= x3) {
        if (x1 >= x3) {
            if (mouseX <= x2 && mouseX >= x3) {
                x = true;
            } else {
                x = false;
            }
        } else if (mouseX <= x2 && mouseX >= x1) {
            x = true;
        } else {
            x = false;
        }
    } else if (x1 >= x2) {
        if (mouseX <= x3 && mouseX >= x2) {
            x = true;
        } else {
            x = false;
        }
    } else if (mouseX <= x3 && mouseX >= x1) {
        x = true;
    } else {
        x = false;
    }
}
setInterval(xcheck, 100);
function ycheck() {
    if (y1 >= y2 && y1 >= y3) {
        if (y2 >= y3) {
            if (mouseY <= y1 && mouseY >= y3) {
                y = true;
            } else {
                y = false;
            }
        } else if (mouseY <= y1 && mouseY >= y2) {
            y = true;
        } else {
            y = false;
        }
    } else if (y2 >= y1 && y2 >= y3) {
        if (y1 >= y3) {
            if (mouseY <= y2 && mouseY >= y3) {
                y = true;
            } else {
                y = false;
            }
        } else if (mouseY <= y2 && mouseY >= y1) {
            y = true;
        } else {
            y = false;
        }
    } else if (y1 >= y2) {
        if (mouseY <= y3 && mouseY >= y2) {
            y = true;
        } else {
            y = false;
        }
    } else if (mouseY <= y3 && mouseY >= y1) {
        y = true;
    } else {
        y = false;
    }
}
setInterval(ycheck, 100);

非常感谢您抽出宝贵时间！

Answer 1

我对你的代码做了一些修改。

首先，draw() 函数由 P5.js 库自动调用，因此您无需调用 setInterval(draw, 100);。

你似乎也做了很多不必要的检查，你只需要在按下鼠标时检查碰撞。 P5 通过 mousePressed 函数简化了此操作，该函数在用户单击鼠标时调用。这样你就可以摆脱 click 变量和 testFor 函数，并将所有碰撞检查移到 mousePressed.

内

function mousePressed() {
  xcheck();
  ycheck();

  if (x == true && y == true) {
    x1 = random(0, 500);
    y1 = random(0, 500);
    x2 = random(0, 500);
    y2 = random(0, 500);
    x3 = random(0, 500);
    y3 = random(0, 500);

    x = false;
    y = false;
  }
}

现在我们已经优化了您的代码，我们可以开始解决您原来的问题了。我们知道错误在 xcheck() 或 ycheck() 内，但我不明白你们的碰撞检测算法是如何工作的，而且我没有时间弄明白。您可以通过 console.log() 代码的不同部分尝试自己找到它：调用 mousePressed 时 mouseX 的值是多少？调用 mousePressed 时 mouseY 的值是多少？ xcheck 的输出是什么？ ycheck 的输出是什么？为什么是输出？回答这些问题并使用控制台可能会帮助您发现错误。

我可以向您展示的是一个非常简单的点到三角形碰撞算法以及如何在您的代码中实现它。您可以在该视频的前 3 分钟内找到它的工作原理：https://www.youtube.com/watch?v=vvaczEyI0Ho 可能有更好的方法来执行此操作，但此实现非常简单且易于理解。代码如下所示：

function trianCollision(px, py, x1, y1, x2, y2, x3, y3) {

  // get the area of the triangle
  var areaOrig = floor(abs((x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1)));
  //console.log("totalArea: " + areaOrig);

  // get the area of 3 triangles made between the point and the corners of the triangle
  var area1 = floor(abs((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)));
  var area2 = floor(abs((x2 - px) * (y3 - py) - (x3 - px) * (y2 - py)));
  var area3 = floor(abs((x3 - px) * (y1 - py) - (x1 - px) * (y3 - py)));
  //console.log("areaSum: " + (area1 + area2 + area3));

  // if the sum of the three areas equals the original, we're inside the triangle
  if (area1 + area2 + area3 <= areaOrig) {
    return true;
  }
  return false;
}

将所有内容放在一起，您的代码应如下所示：

function setup() {
  createCanvas(500, 500);

  x1 = random(0, 500);
  y1 = random(0, 500);
  x2 = random(0, 500);
  y2 = random(0, 500);
  x3 = random(0, 500);
  y3 = random(0, 500);

  x = false;
  y = false;
}

function draw() {
  background(202, 226, 249);
  fill(50);
  noStroke();
  triangle(x1, y1, x2, y2, x3, y3);
}

function mousePressed() {
  xcheck();
  ycheck();

  if (x == true && y == true) {
    x1 = random(0, 500);
    y1 = random(0, 500);
    x2 = random(0, 500);
    y2 = random(0, 500);
    x3 = random(0, 500);
    y3 = random(0, 500);

    x = false;
    y = false;
  }
}

function xcheck() {
  if (x1 >= x2 && x1 >= x3) {
    if (x2 >= x3) {
      if (mouseX <= x1 && mouseX >= x3) {
        x = true;
      } else {
        x = false;
      }
    } else if (mouseX <= x1 && mouseX >= x2) {
      x = true;
    } else {
      x = false;
    }
  } else if (x2 >= x1 && x2 >= x3) {
    if (x1 >= x3) {
      if (mouseX <= x2 && mouseX >= x3) {
        x = true;
      } else {
        x = false;
      }
    } else if (mouseX <= x2 && mouseX >= x1) {
      x = true;
    } else {
      x = false;
    }
  } else if (x1 >= x2) {
    if (mouseX <= x3 && mouseX >= x2) {
      x = true;
    } else {
      x = false;
    }
  } else if (mouseX <= x3 && mouseX >= x1) {
    x = true;
  } else {
    x = false;
  }
}


function ycheck() {
  if (y1 >= y2 && y1 >= y3) {
    if (y2 >= y3) {
      if (mouseY <= y1 && mouseY >= y3) {
        y = true;
      } else {
        y = false;
      }
    } else if (mouseY <= y1 && mouseY >= y2) {
      y = true;
    } else {
      y = false;
    }
  } else if (y2 >= y1 && y2 >= y3) {
    if (y1 >= y3) {
      if (mouseY <= y2 && mouseY >= y3) {
        y = true;
      } else {
        y = false;
      }
    } else if (mouseY <= y2 && mouseY >= y1) {
      y = true;
    } else {
      y = false;
    }
  } else if (y1 >= y2) {
    if (mouseY <= y3 && mouseY >= y2) {
      y = true;
    } else {
      y = false;
    }
  } else if (mouseY <= y3 && mouseY >= y1) {
    y = true;
  } else {
    y = false;
  }
}

如果您想使用其他算法，只需说

function mousePressed() {

  if (trianCollision(mouseX, mouseY, x1, y1, x2, y2, x3, y3)) {
    x1 = random(0, 500);
    y1 = random(0, 500);
    x2 = random(0, 500);
    y2 = random(0, 500);
    x3 = random(0, 500);
    y3 = random(0, 500);

    x = false;
    y = false;
  }
}

我希望这对您有所帮助，如果您有任何问题，请随时提出。

单击 P5.JS 中的三角形项目允许单击三角形修复的外部

Click on the Triangle project in P5.JS allows clicking outside of triangle fix

javascript

p5.js