Membuat Piano dengan Processing

Awal semester satu disibukkan dengan software open source baru bernama processing. Setelah beberapa minggu mengenal processing, ternyata banyak sekali yang bisa dilakukan dengan processing, apalagi plugin-plugin yang tersedia, sangatlah banyak yang bisa digunakan. Namun yang disayangkan banyak plugin yang tidak user friendly, cukup sulit untuk menjalankan plugin tersebut pada platform selain Mac. Terakhir menjelang UTS, ada test untuk membuat sebuah piano dengan memanafatkan plugin soundcipher.

piano dengan processing

Saya teringat dengan piandu yang pernah saya buat. Karena awalnya terinspirasi dari karya seorang teman yang menggunakan java. Meski sistemnya cukup berbeda, namun saya tahu konsepnya, sehingga bisa dengan mudah saya terapkan di processing. Itulah yang akan saya share kali ini. Berikut step by step pembuatan project piano dengan processing.

Pertama, install library soundcipher, untuk pengguna linux, ubah SoundCipher.jar menjadi soundcipher.jar (huruf kecil semua). Karena jika menggunakan SoundCipher.jar, plugin tersebut tidak akan dikenali.

Download soundcipher.

Kedua, buka example keyTrigger dari panel examples. Example tersebut dibuat oleh Andrew R. Brown.  Yang isinya seperti ini

/**
* Create a music keyboard from the qwerty keyboard.
* Capture key presses and map the ascii key number 
* to a MIDI pitch number and play a note immediatly.
*
* A SoundCipher example by Andrew R. Brown
*/

import arb.soundcipher.*;

SoundCipher sc = new SoundCipher(this);

void keyPressed()
{
  sc.playNote(key - 40, 100, 0.5);
}

// keep processing 'alive'
void draw() {}

Kita akan melakukan banyak sekali perombakan pada script tersebut. Karena apa yang kita buat akan tampak seperti piandu yang bisa di download di sini

Ketiga, tambahkan insialisasi sebagai berikut, dan letakkan sebelum void setup

SoundCipher sc;
boolean[] keysNotePlay;
int[] keysNoteMap;

Keempat, masukkan pengaturan keyboarad yang digunakan untuk menghasilkan suara, juga atur tinggi rendahnya nada yang dihasilkan oleh piano, disitu kita atur tombol mana saja yang mengahasilkan bunyi. Jangan lupa untuk menambahkan size yang cukup panjang, karena piano yang kita buat akan memiliki tampilan tombol-tombol seperti halnya piandu.

  keysNotePlay = new boolean[127];
  keysNoteMap = new int[127];
  keysNoteMap['a'] = 59;
  keysNoteMap['s'] = 60;
  keysNoteMap['d'] = 62;
  keysNoteMap['f'] = 64;
  keysNoteMap['g'] = 65;
  keysNoteMap['h'] = 67;
  keysNoteMap['j'] = 69;
  keysNoteMap['w'] = 61;
  keysNoteMap['e'] = 63;
  keysNoteMap['t'] = 66;
  keysNoteMap['y'] = 68;
  keysNoteMap['u'] = 70;
  size (250,150);

Kelima, tambahkan script berikut yang berfungsi untuk mematikan suara ketika tombol kita lepas.

void keyReleased(){
  keysNotePlay[key] = false;
}

Keenam, pada void draw atur masing-masing perubahan tombol yang terbuat dari rectangle agar berubah ketika kita tekan tombol pada keyboard dengan menggunakan script seperti ini,

void draw() {
  fill(255);
  if( keyPressed && keysNotePlay['a'] == true){
    fill(204);
  }
  rect (10, 10, 30, 100);
    
  fill(255);
    if( keyPressed && keysNotePlay['s'] == true){
    fill(204);
  }
  rect (40, 10, 30, 100);
    fill(255);
    if( keyPressed && keysNotePlay['d'] == true){
    fill(204);
  }
  rect (70, 10, 30, 100);
    fill(255);
    if( keyPressed && keysNotePlay['f'] == true){
    fill(204);
  }
  rect (100, 10, 30, 100);
    fill(255);
    if( keyPressed && keysNotePlay['g'] == true){
    fill(204);
  }
  
  rect (130, 10, 30, 100);
    fill(255);
    if( keyPressed && keysNotePlay['h'] == true){
    fill(204);
  }
  
  rect (160, 10, 30, 100);
    fill(255);
    if( keyPressed && keysNotePlay['j'] == true){
    fill(204);
  }
  
  rect (190, 10, 30, 100);
  
  
  //ireng
  fill(0);
  if( keyPressed && keysNotePlay['w'] == true){
    fill(204);
  }
  rect (32,10,15,60);
  fill(0);
  if( keyPressed && keysNotePlay['e'] == true){
    fill(204);
  }
  rect (62,10,15,60);
  fill(0);
  if( keyPressed && keysNotePlay['t'] == true){
    fill(204);
  }
  rect (122,10,15,60);
  fill(0);
  if( keyPressed && keysNotePlay['y'] == true){
    fill(204);
  }
  rect (152,10,15,60);
  fill(0);
  if( keyPressed && keysNotePlay['u'] == true){
    fill(204);
  }

Ketujuh, tambahkan script berikut juga untuk memainkan aplikasi piano yang sudah dibuat 😀

  if( keyPressed && keysNotePlay[key] == false){
    sc.playNote(keysNoteMap[key], 100, 1);
    keysNotePlay[key] = true; 

Berikut full scriptnya

/**
* Create a music keyboard from the qwerty keyboard.
* Capture key presses and map the ascii key number 
* to a MIDI pitch number and play a note immediatly.
*
* A SoundCipher example by Andrew R. Brown
*/

import arb.soundcipher.*;

SoundCipher sc;
boolean[] keysNotePlay;
int[] keysNoteMap;

void setup(){
  sc = new SoundCipher(this);
  keysNotePlay = new boolean[127];
  keysNoteMap = new int[127];
  keysNoteMap['a'] = 59;
  keysNoteMap['s'] = 60;
  keysNoteMap['d'] = 62;
  keysNoteMap['f'] = 64;
  keysNoteMap['g'] = 65;
  keysNoteMap['h'] = 67;
  keysNoteMap['j'] = 69;
  keysNoteMap['w'] = 61;
  keysNoteMap['e'] = 63;
  keysNoteMap['t'] = 66;
  keysNoteMap['y'] = 68;
  keysNoteMap['u'] = 70;
  size (250,150);
}

void keyReleased(){
  keysNotePlay[key] = false;
}

// keep processing 'alive'
void draw() {

//tut hitam putih

  fill(255);
  if( keyPressed && keysNotePlay['a'] == true){
    fill(204);
  }
  rect (10, 10, 30, 100);
    
  fill(255);
    if( keyPressed && keysNotePlay['s'] == true){
    fill(204);
  }
  rect (40, 10, 30, 100);
    fill(255);
    if( keyPressed && keysNotePlay['d'] == true){
    fill(204);
  }
  rect (70, 10, 30, 100);
    fill(255);
    if( keyPressed && keysNotePlay['f'] == true){
    fill(204);
  }
  rect (100, 10, 30, 100);
    fill(255);
    if( keyPressed && keysNotePlay['g'] == true){
    fill(204);
  }
  
  rect (130, 10, 30, 100);
    fill(255);
    if( keyPressed && keysNotePlay['h'] == true){
    fill(204);
  }
  
  rect (160, 10, 30, 100);
    fill(255);
    if( keyPressed && keysNotePlay['j'] == true){
    fill(204);
  }
  
  rect (190, 10, 30, 100);
  
  
  //tut hitam
  fill(0);
  if( keyPressed && keysNotePlay['w'] == true){
    fill(204);
  }
  rect (32,10,15,60);
  fill(0);
  if( keyPressed && keysNotePlay['e'] == true){
    fill(204);
  }
  rect (62,10,15,60);
  fill(0);
  if( keyPressed && keysNotePlay['t'] == true){
    fill(204);
  }
  rect (122,10,15,60);
  fill(0);
  if( keyPressed && keysNotePlay['y'] == true){
    fill(204);
  }
  rect (152,10,15,60);
  fill(0);
  if( keyPressed && keysNotePlay['u'] == true){
    fill(204);
  }
  rect (182,10,15,60);
  if( keyPressed && keysNotePlay[key] == false){
    sc.playNote(keysNoteMap[key], 100, 1);
    keysNotePlay[key] = true; 
  }
}

Semoga bermanfaat dan bisa dibuat belajar teman-teman yang besok senin akan menghadapi UTS Programming Multimedia :D.