Учебное пособие по проекту p5.js
ОБЗОР
p5.js — это библиотека javascript для творческого кодирования, основанная на идее создания эскизов. В этом уроке я буду использовать эту библиотеку для создания имитации фортепиано.
ПРЕДПОСЫЛКИ
- Вы должны немного знать Javascript.
- У вас должен быть доступ к веб-редактору p5.js или он должен быть установлен локально в вашей системе. Примечание. В этом руководстве используется веб-редактор. Вы можете найти его по адресу: https://editor.p5js.org. Убедитесь, что вы вошли в систему или зарегистрировали бесплатную учетную запись, чтобы иметь возможность использовать большинство функций редактора.
ДАВАЙТЕ НАЧНЕМ!
Войти
Войдите в свою учетную запись веб-редактора p5.js. И откройте новый эскиз.
Проектирование клавиатуры фортепиано
Клавиатура пианино обычно черного цвета и имеет прямоугольную форму. Он имеет небольшой цифровой экран в верхней части передней панели и множество других элементов управления, таких как громкость, ритм и звуки. Передняя нижняя часть состоит из клавиш белого цвета. Давайте попробуем нарисовать его на нашем холсте p5.js.
- Установите цвет пера на черный.
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 файлов.
Загрузите загруженные звуки в свой код.
Как только все звуки будут загружены, вы должны увидеть их на панели навигации по файлам. Но вы все равно не сможете воспроизвести их в нашем коде. Чтобы иметь возможность сделать это, нам сначала нужно загрузить их в наш проект.
- Создайте пустые переменные для хранения звуков.
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(); } }
На этом учебник по моделированию фортепиано завершен. Вы можете добавить расширения к этому проекту, такие как:
- Добавьте звуки для остальных оставшихся клавиш.
- Добавьте эффект оттенка к нажатой клавише пианино. Чтобы узнать, как нажать здесь.
Если у вас есть какие-либо вопросы, пожалуйста, оставьте их в разделе ответов.