差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
楽器をつくる:シーケンサ編 [2018/12/26 12:57] – [設計] baba | 楽器をつくる:シーケンサ編 [2020/06/20 11:27] – [タイムライン(自動演奏のための時間)機能を追加] baba | ||
---|---|---|---|
行 1: | 行 1: | ||
====== 最初に ====== | ====== 最初に ====== | ||
- | このページではプログラミング初学者の人が簡単なミュージックシーケンサを作成するまでをまとめたウェブサイトになります。自作デバイス上でArduinoを動かすことを想定していますが、教材用にProcessingで動作するソフトウェアとして紹介します。配列の宣言の仕方など、Arduino場合と少し異なりますので、適時読み替えてください。 | + | このページではプログラミング初学者の人が簡単なミュージックシーケンサを作成するまでをまとめたウェブサイトになります。自作デバイス上でArduinoを動かすことを想定していますが、教材用にProcessingで動作するソフトウェアとして紹介します。配列の宣言の仕方など、Arduinoの場合と少し異なりますので、適時読み替えてください。 |
====== 設計 ====== | ====== 設計 ====== | ||
行 9: | 行 9: | ||
</ | </ | ||
- | 重要なのは想定する一つ一つの部品や機能をソフトウェア上でclassとして作成していってください。いわゆるオブジェクト指向で考えていきます。シーケンサの機能としては、レイヤー階層になっており、各レイヤーごとに4x4のボタンが用意されています。ボタンを押すごとにそのボタンのonとoffを切り替えることができます。onになったボタンはタイムラインに従って自動で音を発話します。 | + | 重要なのは想定する一つ一つの部品や機能をソフトウェア上でclassとして作成していってください。いわゆるオブジェクト指向で考えていきます。シーケンサの機能としては、レイヤー階層になっており、各レイヤーごとに4x4のボタンが用意されています。ボタンを押すごとにそのボタンのonとoffを切り替えることができます。onになったボタンはタイムラインに従って自動で発音します。 |
+ | |||
+ | 実際に完成するソフトウェアは下記のようなものです。では一緒にやってみましょう。 | ||
+ | < | ||
+ | <iframe width=" | ||
+ | </ | ||
- | 実際にコードを作成していく際、ベースから作る場合と、トップから作っていく場合がありますが、 | ||
- | 馬場の普段の作り方は、トップから作っていく方法になります。一緒にやってみましょう。実際に完成するソフトウェアは下記のようなものです。 | ||
- | {{ : | ||
====== 最初のコード ====== | ====== 最初のコード ====== | ||
行 104: | 行 106: | ||
} | } | ||
void update() | void update() | ||
- | { | + | { |
// マウスがボタン上にあるとき(ボタン押下処理) | // マウスがボタン上にあるとき(ボタン押下処理) | ||
- | if ( sqrt( pow(x-mouseX, | + | if ( dist(x, y, mouseX, mouseY) < size/2 ) { |
- | + | ||
// マウスボタンが押されている、且つ一つ前の状態では押されていなかったとき | // マウスボタンが押されている、且つ一つ前の状態では押されていなかったとき | ||
if ( mousePressed == true && previous_mousePressed == false) { | if ( mousePressed == true && previous_mousePressed == false) { | ||
status = !status; // falseならtrue, | status = !status; // falseならtrue, | ||
- | | + | |
// trueなら明るめのグレーにする | // trueなら明るめのグレーにする | ||
if( status == true ){ | if( status == true ){ | ||
行 122: | 行 124: | ||
} | } | ||
} | } | ||
- | | + | |
previous_mousePressed = mousePressed; | previous_mousePressed = mousePressed; | ||
} | } | ||
+ | |||
int x; // x座標 | int x; // x座標 | ||
int y; // y座標 | int y; // y座標 | ||
行 133: | 行 135: | ||
boolean previous_mousePressed; | boolean previous_mousePressed; | ||
} | } | ||
+ | |||
Button[] button = new Button[16]; | Button[] button = new Button[16]; | ||
- | + | ||
void setup() | void setup() | ||
- | { | + | { |
- | + | size(500, 500); | |
- | size(500, 500); | + | |
for ( int i = 0; i < 16; i++ ) { | for ( int i = 0; i < 16; i++ ) { | ||
button[i] = new Button(); | button[i] = new Button(); | ||
行 147: | 行 146: | ||
} | } | ||
} | } | ||
- | {{ : | ||
void draw() | void draw() | ||
{ | { | ||
行 158: | 行 156: | ||
</ | </ | ||
- | ここらで少しButtonクラスの記述が増えて来たので、別ファイルにクラスの記述を移します。クラスの記述部分をすべてButtonというタブに移します。 | + | ここらで少しButtonクラスの記述が増えて来たので、下記のスクリーンショットのようにクラスの記述を別ファイルに移します。クラスの記述部分をすべてButtonというタブに移します。 |
{{ : | {{ : | ||
====== タイムライン(自動演奏のための時間)機能を追加 ====== | ====== タイムライン(自動演奏のための時間)機能を追加 ====== | ||
- | では次にタイムラインを追加します。タイムラインは決められたテンポで順番にボタンのON、OFFに従って自動演奏を行います。そこでまず決められたテンポを算出するクラスとして、Metroクラスを作ります。常時このMetroをupdate()することで、指定テンポでtrueを返す設計にします。まずは次のようなクラスを作成します。下記コードは先程のButtonクラスと同様に、新規タブからMetroとして作成してください。 | + | 各ボタンのON/ |
<file .pde Metro.pde> | <file .pde Metro.pde> | ||
行 182: | 行 180: | ||
} | } | ||
int ms; | int ms; | ||
- | long ms_stamp; | + | long ms_stamp; |
} | } | ||
</ | </ |