p5.jsで自作のシンセサイザーを作ろう 第5話　キー制作

Javascriptとp5.jsを使って、オリジナルなシンセサイザーを作るプログラミングの記事です。とりあえず何を作るのかを手っ取り早くお伝えしたいので、第0話で公開している完成品もチェックしてみてください。

キーの作成

演奏に使用するキーボード部分に使用するキーを制作します。今回はノブの制作よりもかなりシンプルにできそうです。

これです

キーの描画

rect()とtriangle()を使ってこのパーツを作ります。今回はキーのベース、影部分、キートップの素材を描画していきます。

この素材でいきます。とてもシンプル。

変数の宣言部分

let keySize = 50; // キーのサイズ
let keyTop = keySize / 1.4;　// キートップのサイズ
let topSize = 7;　// キートップの位置を中央に寄せる幅
let keyX = 50; // キーの位置X
let keyY = 50; // キーの位置Y
let keyStat = false; // キーのクリック判定

let strokeValue = 2; // 枠線の太さ

これらの変数をうまく使ってキーを描画します。
今回は矩形を描画するrect()と三角形を描画するtriangle()を使います。ノブの制作で使ったcircle()と異なり、図形の基準点は左上になります。

早速キーを描画します。

function draw() {
  background(250); //背景の色
  
  stroke(150, 100, 100);
  strokeWeight(strokeValue);
  
  fill(230, 230, 230);
  rect(keyX , keyY, keySize, keySize);
  
  fill(100, 100, 100);
    triangle(
      keyX, keyY, //左上
      keyX, keyY + keySize, //左上
      keyX + keySize, keyY + keySize //右下
    );
  
  fill(250, 250, 250)
  rect(keyX　+ topSize, keyY + topSize, keyTop, keyTop);
}

draw()関数の中身の全体像です。まず、
stroke(150, 100, 100);
strokeWeight(strokeValue);
ここは枠線の色と太さを指定しているだけです。

fill(230, 230, 230);
rect(keyX , keyY, keySize, keySize);

キーのベース部分です。
rect()の引数は左上のX、左上のY、横幅、縦幅の４つで構成されています。
ここに宣言した変数を当てはめていますので、とても簡単だと思います。

fill(100, 100, 100);
    triangle(
      keyX, keyY, //左上
      keyX, keyY + keySize, //左下
      keyX + keySize, keyY + keySize //右下
    );

キーの影部分は三角形で表現します。これでなんとなく立体感が出てくるのではないかと思い。配置する事にしました。
triangle()は6つの引数になっているので、若干戸惑いますが、コメントを参考にしてください。
左上のXY、左下のXY、右下のXYという3を指定しているだけなので、慣れてしまえば意外と簡単です。

  fill(250, 250, 250)
  rect(keyX　+ topSize, keyY + topSize, keyTop, keyTop);

これがキーのトップ部分です。rect()を使用しています。ここではトップの位置をtopSizeで指定した値の分だけ、右下にずらしている事になります。

マウスクリックに反応させる

マウスクリックにプログラムが反応するようにしていきます。

let keyStat = false;

keyStatの変数はtureとfalseの真偽によってクリックされているかどうかを判定知るために使います。

キーの当たり判定

function touchStarted() {
  if (
    mouseX > keyX - keySize &&
    mouseX < keyX + keySize &&
    mouseY > keyY - keySize &&
    mouseY < keyY + keySize
  ) {
    keyStat = true;
  }
}


function touchEnded() {
  keyStat = false;
}

当たり判定はノブの時と同じように、touchStarted()とtouchEnded()でクリックの開始と終了を検出することで行います。
クリックされた時のmouseXとmouseY座標が、キーの範囲に収まっていた場合、
keyStatがtrueになります。
クリックが終わるとtouchEnded()によってkeyStatがfalseになるようにしています。

draw()の中で反応を可視化する

if (keyStat == true){ //　マウスクリックでオレンジ色でキートップを塗り替える
    fill(255, 125, 0);
    rect(keyX + topSize, keyY + topSize, keyTop, keyTop);
}

draw()関数の中に追加したこのコードによってkeyStatがtrueの時だけ、キートップがオレンジ色に光るようになりました。

ピカピカ

この記事のコード全文

let keySize = 50; // キーのサイズ
let keyTop = keySize / 1.4;　// キートップのサイズ
let topSize = 7;　// キートップの位置を中央に寄せる幅
let keyX = 50; // キーの位置X
let keyY = 50; // キーの位置Y
let keyStat = false; // キーのクリック判定

let strokeValue = 2; // 枠線の太さ

function setup() {
  createCanvas(500, 400);
}

function draw() {
  background(250); //背景の色
  
  stroke(150, 100, 100);
  strokeWeight(strokeValue);
  
  fill(230, 230, 230); //　キーのベース
  rect(keyX , keyY, keySize, keySize);
  
  fill(100, 100, 100);  //　キーの影部分を三角形で表現
    triangle(
      keyX, keyY, //左上
      keyX, keyY + keySize, //左上
      keyX + keySize, keyY + keySize //右下
    );
  
  fill(250, 250, 250) //　キーのトップ部分
  rect(keyX + topSize, keyY + topSize, keyTop, keyTop);
  
  if (keyStat == true){ //　マウスクリックでオレンジ色でキートップを塗り替える
    fill(255, 125, 0);
    rect(keyX + topSize, keyY + topSize, keyTop, keyTop);
  }
}

function touchStarted() {
  if (
    mouseX > keyX - keySize &&
    mouseX < keyX + keySize &&
    mouseY > keyY - keySize &&
    mouseY < keyY + keySize
  ) {
    keyStat = true;
  }
}

function touchEnded() {
  keyStat = false;
}

実際にp5.jsのエディターにコピペして、試してみてください。

p5.js Web Editor

キーの処理は比較的簡単です。
前回まではノブの円運動などややこしい処理をしていたので、これまでの記事を読んでいただいた方であればスムーズに実装できるのではないかと思います。

今回は単にクリックを検出して反応させるだけのキーを作りましたが、例えばON・OFFスイッチのように点灯、消灯を切り替えるパターンも必要なので、次回はその辺りを書いていきます。