JavaScript でGUI音遊びソフト作り(3) - 微調整、今後何をするか

ごぶさたしております。
ここ一か月間ほとんどコードをいじっておりません。さぼっておりました。
8月末に自作webアプリ Orbit に微調整をしているのと、今まで紹介できていなかった機能もあり、そのへんの紹介と今後どうするかを書きます。

→　https://takasa5-orbit.herokuapp.com/
→　https://takasa5.github.io/orbit/　(2019年5月，移動しました)

1. デザイン微調整

線を太くしてコメット(回ってるやつ)を白抜きの円にしました。僕の好みです。
エフェクトを波紋のようなものから飛び散る感じにしました。正直波紋の方が好みでしたが宇宙感がうすかったので……。
飛び散るエフェクトには方向や個数に乱数を使ったりして、波紋よりは実装がめんどうでした。その割には地味です。

2. 削除機能の充実

オービット(白いやつ)とプラネット(カラフルな小さいやつ)は削除できます。
以前配布したものではプラネットのみ右クリックで削除ができました。今回は画面下に並んでいる×ボタンを押すと削除モードになります。delete Orbit と delete Planet の二つのボタンが現れるので、それで削除モードを切り替えます。
delete Orbit を押している場合、画面上にマウスを持っていくとオービットが赤くなります。オービットが赤くなっている状態でクリックすると赤くなったオービットが消えます。
delete Planet を押している場合、画面上のある点からある点へドラッグをすることで範囲指定ができます。赤い四角形で選択している範囲が表示されます。ドラッグ終了時に範囲内にあったプラネットが消えます。

ドラッグすると選択範囲が表示される

当初はどちらもクリックで消える単純な仕様でしたが、プラネットはどうしてもたくさん置くことになりますので、消すのがめんどくさいなと思いこういう仕様にしました。

3. 大きさ、速度のリアルタイム変更機能の追加(恒星(仮)の追加)

学科の友人に遊んでもらったところ、「白いやつの半径を自由に変えられないのか」と言われました。
当時はオービット配置モードに画面下部に現れるスライダーを調整し、クリックするとスライダーの値に応じたオービットが出てくる仕様で、リアルタイムに半径を変えることはできませんでした。
まあ確かに半径変える時いちいち消すのはめんどうなので自由に変更できる機能をウンウン考えました。
それで追加したのが恒星という機能です。

中央のが恒星

ユーザはここをポチポチすることでオービットに変化を加えることになります。ちなみに軌道中央にあるので恒星(fixed star)ですがなんかすっきりしない名前が気に食わなかったのでプログラム中ではa star(astar)と記述しアスターと読んでヘラヘラしています。今ちょっと確認したらプログラム中の star の綴り間違ってて大きい声でた

アスターをクリックすると速度が変わります。あらかじめ用意された4種類の速度に順々に変わっていきます。速度に応じてアスターの回転速度も変わっていきます。
また、アスターをグワッと掴んでグイーッとドラッグすることで オービット半径が変わります(説明しづらいのでやってみてください)。

しばらくさぼってたのでリハビリがてらデザイン変更と(要望のあった)置いたあとに速度と軌道半径を変えられる機能を追加しました　速度変更後飛んじゃうの直したい pic.twitter.com/UaajOqSM88

— 高砂 (@takasa_five) 2017年8月27日

こんな感じ。ツイートしてるように速度変更時にコメットが飛んじゃうのは課題です。

4. これから

最初からの課題なんですけどリズムだけじゃなくてもっとちゃんとメロディが作れるようにしたい。
一時期そういう機能をつけようとしてたんですけどどうもうまくいかなくて公開にいたっていません。
リズムのサンプル音のように1オブジェクトに1音のようにやってると多様なメロディを作りたい要望に応えられませんので、解決策を考えるなり新しい機能として作るなりしないといけないわけで、そこが難しいです。
とりあえず新しい機能の方で暗礁に乗り上げたので、1オブジェクトにこめる感じでなんとか作る方向で考えています。

あと書いてて思ったけどちゃんとした説明書がないのがさみしいですね。まだ完成してないからいらないといえばいらないんだけどそんなんじゃ誰も遊んでくれなさそう。

時間を見つけてすすめたいです。