Question

我正在使用p5.js制作钢琴。我需要换色方面的帮助。当用户按下某个键时，我希望该键闪烁一次快速的颜色更改，以使他们知道他们按下了该键。

在我的代码中，单击第一个键时颜色确实会更改，但是，当我在第一个键之外单击一点时，第一个键仍会更改颜色。

我的距离有点远吗？还是有更有效的方法来做到这一点？

function setup() {
  createCanvas(990, 600);
}

function draw() {
  background(220);
  fill(255);
  rect(0, 300, 70, 400);
  rect(70, 300, 70, 400);
  rect(140, 300, 70, 400);
  rect(210, 300, 70, 400);
  rect(280, 300, 70, 400);
  rect(350, 300, 70, 400);
  rect(420, 300, 70, 400);
  rect(490, 300, 70, 400);
  rect(560, 300, 70, 400);
  rect(630, 300, 70, 400);
  rect(700, 300, 70, 400);
  rect(770, 300, 70, 400);
  rect(840, 300, 70, 400);
  rect(910, 300, 70, 400);
  fill(0);
  rect(50, 300, 38, 180);
  rect(120, 300, 38, 180);
  rect(260, 300, 38, 180);
  rect(330, 300, 38, 180);
  rect(400, 300, 38, 180);
  rect(540, 300, 38, 180);
  rect(610, 300, 38, 180);
  rect(750, 300, 38, 180);
  rect(820, 300, 38, 180);
  rect(890, 300, 38, 180);
  text("mouse x: "+mouseX+" mouse y:"+mouseY, width/2,height-30);
 }

function mousePressed() {
  cursor(HAND);

}

function mouseReleased() {
    cursor(ARROW);

let d = dist(mouseX, mouseY, 0, 300);
  if (d < 300) {
    fill(0);
    rect(0, 300, 70, 400);
  }
}

Answer 1

您正在检查鼠标位置是否位于0,300点的300个像素处。这样会设置一个圆，其圆心为0,300，半径为300。尝试在场景中绘制该圆，以查看可单击区域的位置。

您的按键是矩形，因此您应该使用点-矩形相交来检查鼠标是否在特定按键内。 Google是您的朋友，但基本上您想检查mouseX是否在左右边缘之间，mouseY是否在上下边缘之间。

最后，请注意，您只显示单个帧的“闪光”。我个人甚至看不到它。您可能希望使用millis()函数或frameCount变量进行计时，以延长闪光时间。（再次，Google是您的朋友！）

无耻的自我促进：here是有关碰撞检测的教程，包括点与矩形的交点。用于处理，但是在P5.js中是相同的。

在p5.js中创建钢琴

1 个答案: