Создание пианино в p5.js - PullRequest
Новая
       25

Создание пианино в p5.js

0 голосов
/ 25 декабря 2018

Я создаю пианино, используя 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);
  }
}

1 Ответ

0 голосов
/ 25 декабря 2018

Вы проверяете, находится ли положение мыши в пределах 300 пикселей от точки 0,300.Это устанавливает круг с центром в 0,300 и радиусом 300. Попробуйте нарисовать это в своей сцене, чтобы увидеть, где находится область, на которую вы кликаете.

Ваши ключи - прямоугольники, поэтому вам следуетиспользуйте точку - пересечение прямоугольника , чтобы проверить, находится ли мышь внутри определенной клавиши.Google здесь ваш друг, но в основном вы хотите проверить, находится ли mouseX между левым и правым краями, а mouseY между верхним и нижним краями.

Наконец, обратите внимание, что вы толькокогда-либо показывая «вспышку» для одного кадра.Я лично даже не вижу этого.Возможно, вы захотите показать вспышку дольше, используя функцию millis() или переменную frameCount для синхронизации.(Опять же, Google - ваш друг!)

Бесстыдная самореклама: здесь - учебное пособие по обнаружению столкновений, включая пересечение точек и прямоугольников.Это для обработки, но идеи те же в P5.js.

...