在 p5.js 中创建钢琴答案

【问题标题】：Creating a piano in p5.js在 p5.js 中创建钢琴
【发布时间】：2018-12-25 08:33:43
【问题描述】：

我正在使用 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);
  }
}

【问题讨论】：

标签： javascript p5.js piano

【解决方案1】：

您正在检查鼠标位置是否在点 0,300 的 300 像素内。这会设置一个中心为 0,300 且半径为 300 的圆。尝试在场景中绘制它，看看您的可点击区域在哪里。

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

最后，请注意，您只为单帧显示“闪光灯”。我个人也看不出来。您可能希望使用millis() 函数或frameCount 变量来显示更长时间的闪光。（再次重申，Google 是您的朋友！）

无耻的自吹自擂：here是一个关于碰撞检测的教程，包括点-矩形相交。是用来处理的，但是在P5.js中思路是一样的。

【讨论】：