p5.jsでシンセサイザーを作る 第6話　スイッチ制作

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

https://note.com/fumisa2821/n/n4079e14958b2

これまでのキーの動作

前回までに作成したキーはマウスがクリックされている間、オレンジ色にひかるようにプログラムを作成しました。

ピカピカ

今回は、キーボードのような反応ではなくて、OnとOffを切り替えるパーツに応用していきます。

今回はかなりシンプルです。スイッチの当たり判定が成立した時に、falseとtrueを切り替えるようにしています。

変数の宣言部分

let keySize = 50; // キーのサイズ
let keyTop = keySize / 1.4;　// キートップのサイズ
let topSize = 7;　// キートップの位置を中央に寄せる幅
let keyX = 50; // キーの位置X
let keyY = 50; // キーの位置Y
let keyStat = false; // キーのクリック判定
var switchStat = false; // スイッチのOnとOffの判定　//　＜＝ここです！

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

let switchStat = false; // スイッチのOnとOffの判定
このswitchStatという変数でOnとOffを認識します。
Onの場合だけ、キーが赤色に点灯するように制御していきます。

当たり判定の時の処理を追加する

function touchStarted() {
  if (
    mouseX > keyX - keySize &&
    mouseX < keyX + keySize &&
    mouseY > keyY - keySize &&
    mouseY < keyY + keySize
  ) {
    keyStat = true;
    switchStat =! switchStat; // <= ここです！
  }
}

当たり判定を行っているtouchStarted()の中に。
switchStat != switchStat;
これを追加しました。
=!の演算子はfalseとtrueを入れ替えることができます。とても便利ですね。

スイッチOnでキートップを赤色に点灯させる

if (switchStat == true){ //　スイッチOnで赤色でキートップを塗り替える
    fill(255, 0, 0);
    rect(keyX + topSize, keyY + topSize, keyTop, keyTop);
  }

draw()の最後にswitchStatがtrueの時だけ赤色でキートップを塗り潰すようにif文を付け加えます。

動作確認

赤！白！

これでOnとOffの切り替えスイッチができました。

この記事のコード全文

let keySize = 50; // キーのサイズ
let keyTop = keySize / 1.4;　// キートップのサイズ
let topSize = 7;　// キートップの位置を中央に寄せる幅
let keyX = 50; // キーの位置X
let keyY = 50; // キーの位置Y
let keyStat = false; // キーのクリック判定
var switchStat = false; // スイッチのOnとOffの判定　//　＜＝ここです！

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);
  }
  
  if (switchStat == true){ //　スイッチOnで赤色でキートップを塗り替える
    fill(255, 0, 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;
    switchStat =! switchStat; // <= ここです！
  }
}

function touchEnded() {
  keyStat = false;
}

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

p5.js Web Editor

このようなスイッチ機構は、シーケンサーやミュートボタンなど使ったりしますので、必須と言えます。
ここまでで、ノブ、キー、スイッチの制作が完了しました。次はピッチベンドなどを行うホイールを制作していきます。