Учебное пособие по проекту p5.js

ОБЗОР

p5.js — это библиотека javascript для творческого кодирования, основанная на идее создания эскизов. В этом уроке я буду использовать эту библиотеку для создания имитации фортепиано.

ПРЕДПОСЫЛКИ

  1. Вы должны немного знать Javascript.
  2. У вас должен быть доступ к веб-редактору p5.js или он должен быть установлен локально в вашей системе. Примечание. В этом руководстве используется веб-редактор. Вы можете найти его по адресу: https://editor.p5js.org. Убедитесь, что вы вошли в систему или зарегистрировали бесплатную учетную запись, чтобы иметь возможность использовать большинство функций редактора.

ДАВАЙТЕ НАЧНЕМ!

Войти

Войдите в свою учетную запись веб-редактора p5.js. И откройте новый эскиз.

Проектирование клавиатуры фортепиано

Клавиатура пианино обычно черного цвета и имеет прямоугольную форму. Он имеет небольшой цифровой экран в верхней части передней панели и множество других элементов управления, таких как громкость, ритм и звуки. Передняя нижняя часть состоит из клавиш белого цвета. Давайте попробуем нарисовать его на нашем холсте p5.js.

  1. Установите цвет пера на черный.
fill( 51 );

2. Нарисуйте прямоугольник. Передайте верхнюю левую координату: x как 45 и y как 155. Передайте ширину как 300 и высоту как 150.

rect( 45 , 155 , 300 , 150);

3. Установите зеленый цвет пера.

fill( 0 , 128 , 0);

4. Нарисуйте небольшой прямоугольник внутри черного прямоугольника с небольшим отступом сверху и слева. Этот прямоугольник будет представлять собой цифровой экран клавиатуры пианино. Передайте верхнюю левую координату: x как 55 и y как 160. Передайте ширину как 200 и высоту как 50.

rect( 55 , 160 , 200 , 50 );

5. Установите желтый цвет пера.

fill( 255 , 255 , 0 );

6. Нарисуйте два круга рядом с цифровым экраном, выровненные вертикально друг к другу. Эти два круга будут представлять некоторые элементы управления, которые вы можете найти на клавиатуре фортепиано.

circle( 280 , 170 , 20 , 20 );
circle( 280, 200 , 20 , 20 );

7. Установите белый цвет пера.

fill( 255 );

8. Нарисуйте прямоугольники, выровненные по вертикали друг к другу. Эти прямоугольники будут представлять собой клавиши фортепианной клавиатуры. Для этой клавиатуры, которую мы нарисовали, мы можем нарисовать не более 14 клавиш внутри нее. Давайте сначала создадим несколько переменных с именами x, y, w и h, где x и y будут содержать левые верхние координаты первого прямоугольника, а w и h будут содержать ширину и высоту соответственно.

var x , y , w , h;

9. Внутри функции setup() инициализируйте переменные со значениями, как показано.

function setup(){
 createCanvas( 400 , 400 );
 x = 55;
 y = 230;
 w = 20;
 h = 70;
}

10. Чтобы нарисовать прямоугольники, мы будем использовать цикл for, который будет повторяться от 1 до 14 каждый раз, когда рисуется прямоугольник и увеличивается значение x на значение w. Остальные три значения останутся прежними, так как мы хотим, чтобы прямоугольники выровнялись по горизонтали друг с другом. Мы сделаем это внутри функции draw().

for (let i = 1; i <= 14; i++)
{
 rect(x , y , w , h);
 x = x + w;
}

УРА! Мы закончили рисовать наше пианино! Теперь давайте издадим звук!

Загрузить звуковые файлы.

Вы можете найти в Интернете бесплатные ключевые ноты для фортепиано или скачать несколько с моего диска, которые я использовал в этом уроке:

https://drive.google.com/drive/folders/18GAKJLquQQco6g8JeFz_cIuswyC9wYNB?usp=sharing

Загрузить звуковые файлы.

В редакторе кода вы должны увидеть панель навигации по файлам слева. Нажмите на раскрывающееся меню под названием «Файлы эскиза». Вы должны увидеть опцию для загрузки файлов. Нажмите на нее, и должно появиться диалоговое окно «Загрузить файл». Перетащите в него файлы. Вы можете удалить определенное количество файлов за раз. Повторите процесс, чтобы загрузить остальные звуки. В этом уроке мы будем загружать 7 файлов.

Загрузите загруженные звуки в свой код.

Как только все звуки будут загружены, вы должны увидеть их на панели навигации по файлам. Но вы все равно не сможете воспроизвести их в нашем коде. Чтобы иметь возможность сделать это, нам сначала нужно загрузить их в наш проект.

  1. Создайте пустые переменные для хранения звуков.
var a1 , b1 , c2 , d2 , e2 , f2 , g2;

2. В функции setup() мы несколько раз вызовем функцию loadSound(). Функция loadSound() принимает строку, которая должна быть путем к звуковому файлу.

Загрузите каждый звук один за другим и сохраните их в соответствующих переменных, как показано.

function setup() {
 createCanvas(400, 400);
 w = 20;
 h = 70;
 y = 230;
 x = 55;
 
 a1 = loadSound(‘A1.mp3’);
 b1 = loadSound(‘B1.mp3’);
 c2 = loadSound(‘C2.mp3’);
 d2 = loadSound(‘D2.mp3’);
 e2 = loadSound(‘E2.mp3’);
 f2 = loadSound(‘F2.mp3’);
 g2 = loadSound(‘G2.mp3’);
}

Воспроизведение звуков при нажатии клавиш пианино.

Для этого мы переопределим встроенную функцию с именем mousePressed(). Всякий раз, когда нажимается мышь, эта функция вызывается. Также нам доступны переменные mouseX и mouseY. Эти переменные содержат координаты точки, в которой был сделан щелчок мышью.

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

function mousePressed()
{
 //first key
 if (mouseX > 55 && mouseX < 75 && mouseY > y && mouseY < 300)
 { 
 a1.play();
 }
//second key 
 if (mouseX > 75 && mouseX < 95 && mouseY > y && mouseY < 300)
 {
 b1.play();
 }
//third key
 if (mouseX > 95 && mouseX < 115 && mouseY > y && mouseY < 300)
 {
 c2.play();
 }
//fourth key
 if (mouseX > 115 && mouseX < 135 && mouseY > y && mouseY < 300)
 {
 d2.play();
 }
//fifth key
 if (mouseX > 135 && mouseX < 155 && mouseY > y && mouseY < 300)
 {
 e2.play();
 }
//sixth key
 if (mouseX > 155 && mouseX < 175 && mouseY > y && mouseY < 300)
 {
 f2.play();
 }
//seventh key
 if (mouseX > 175 && mouseX < 195 && mouseY > y && mouseY < 300)
 {
 g2.play();
 }
}

На этом учебник по моделированию фортепиано завершен. Вы можете добавить расширения к этому проекту, такие как:

  1. Добавьте звуки для остальных оставшихся клавиш.
  2. Добавьте эффект оттенка к нажатой клавише пианино. Чтобы узнать, как нажать здесь.

Если у вас есть какие-либо вопросы, пожалуйста, оставьте их в разделе ответов.