在 p5.js 中制作钢琴

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 是否在上下边缘之间。

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

无耻的自我推销：here是一个关于碰撞检测的教程，包括点-矩形相交。是为了Processing，但是思路和P5.js.

是一样的

在 p5.js 中制作钢琴

Creating a piano in p5.js

javascript

p5.js

piano