点击P5中的三角形项目.JS允许点击三角形外的固定点

Question

非常感谢您花一天的时间来尝试并帮助回答我的问题！我真的很感激！！我是P5JS的新手，但我决定尝试一下！我的代码很可能不是最紧凑的，我很感谢您的反馈！我的问题是，当你点击三角形外部的部分时，它似乎经常会接受它是内部的。我的代码中很可能出现了允许这样做的错误。我所有的代码都是在画布上创建一个随机三角形，并测试你点击或在三角形内按住一个按钮。当你这样做时，它会创建一个新的随机的。请告诉我是什么导致了这个奇怪的错误。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;
}
}

我希望这能在某种程度上帮助你，如果你有任何问题，请随时询问。