＜たろう＞ニコニコ技術部　blog

まずは、processing で 画面エフェクト。

とりあえず試してみたい方はこちらから。黒いとこをクリックしてみて。

1. エフェクトの種類はとりあえず、直線、○、△、□。将来的に、任意の絵を表示できるように。
2. クリックポイントを中心に 各図形が回転しながら大きくなって暗くなって消えていく。
3. 直線はクリックポイントを通るランダムな角度の直線。
4. processingの座標変換機能を最大限利用。サイズの変化は描画で、角度の変化は座標変換で。
5. 画面エフェクトは、Class化しておく。
6. メソッドは、start と display。コンストラクタは何もしない。

processingでのListの実装がわからん。エフェクトオブジェクトをクリックされるたび、生成して、暗くなっ て消えたら デストラクタして、、と考えたんだけど、配列しか無くて、可変できないみたい。む～、美しくないけど、固定配列に start() で 生成して順番に使って行く形式にする。

というわけで ささっと作ったのがこれ。

class Effect {
int px;
int py;

int dBright = 10;
boolean drawFlg = false;
int cR = 0;
int cG = 240;
int cB = 96;
float angle=0;
int objType = 0;

int strokeW = 20;

float rAngle;
float dAngle = 20;
int rSize;
int dSize = 20;

Effect() {
}

void startObj(int x,int y ) {
this.px = x;
this.py = y;
this.drawFlg = true;
this.angle = random(0, 360 );
cR = 0;
cG = 240;
cB = 96;
objType = int(random(0,4));
rAngle = angle;
rSize = strokeW;
noFill();
}

void display() {
if( drawFlg ){
// 座標形の変更
strokeWeight(strokeW);
stroke( cR, cG, cB );
cR = cR - dBright; if( cR<0 ){ cR=0; }
cG = cG - dBright; if( cG<0 ){ cG=0; }
cB = cB - dBright; if( cB<0 ){ cB=0; }
if( cR==0 && cG==0 && cB==0 ){
drawFlg = false;
}
pushMatrix();
translate( px,py );
rotate( radians( angle ) );

if( objType==0 ){
// 線
strokeWeight(strokeW*2);
line( 1024,0, -1024,0 );
} else if( objType == 1 ){
// ○
ellipse( 0,0, rSize, rSize );
ellipse( 0,0, rSize+50, rSize+50 );
rSize = rSize + dSize;
} else if( objType == 2 ){
// □
rectMode( CENTER );
rotate( radians( rAngle ) );
rect( 0, 0, rSize, rSize );
rSize = rSize + dSize;
rAngle = rAngle + dAngle;
} else if( objType == 3 ){
// △
// dx = sin( 60 );
float dx,dy;
dx = rSize * cos( radians( 60 ) );
dy = rSize * sin( radians( 60 ) );
rotate( radians( rAngle ) );
triangle( 0, int(dy*2/3), int(dx), int(-dy/3), int(-dx), int(-dy/3) );
rSize = rSize + dSize;
rAngle = rAngle + dAngle;
}

popMatrix();
}
}

}

で、メイン側の処理

import processing.opengl.*;

Effect[] efs = new Effect[10];
int efCnt = 0;

void setup() {
size( 1024,380 );

for(int i=0; i<efs.length; i++ ){
efs[i] = new Effect();
}
}

void draw() {
background( 0 );
//
for(int i=0; i<efs.length; i++ ){
efs[i].display();
}
}

void mousePressed() {
// mouseX, mouseY
println( “mouse pressed” );
// 絵を描き始め
efs[efCnt].startObj( mouseX, mouseY );
efCnt++;
if( efCnt == efs.length ){ efCnt=0; }
}

変数の説明とかは 後で、このソースに書き足しておきます。

※たしか、processingは 簡単に JavaApplet にできたと思ったんだけどな。

まぁ後でやっておこう。

簡単だった（笑） アプレット化 黒いとこを クリックしてみてねぃ（＾＾

※問題点

1. エフェクトの数が10個しか用意されてないので それを越えると古い画像が消えるように見えるかも。（まだ、足りなくなったことはない）
2. 画面サイズを大きくすると、描画がとろい、というか画面のリセットがとろいのだなこれは。Effectクラスの描画パラメータをいじってみる。
3. 書き方の順番が オブジェクトの０からになってるので、重なりの描画が変（これはプログラムのせい。いつか直そう）。重なったら、なんかするべきだろ＞processing
4. 重なりの描画は なんか 考える必要があるな。。背景が黒ってのがまずいような気がする。Alphaチャンネルを扱えるのはいいのだけど、どうも考えてる仕様とはちがうな。

とりあえず。Effectの描画は これで オーケーってことにしておこう（笑）。

1. （今ここ→）エフェクト作成。
2. 音出し作成。（単音、和音）
3. 音階ボタン作成。
4. 音階ボタンから音生成。
5. 筐体作成。
6. 完成。

液晶画面タッチパネルは 今使ってるノートパソコンを使うとして、、、

音源はMIDI outを使うように作る。遅延とか気になるけど、まぁ、今はプロトタイプの段階だし、遅延が気になるようになった時点で俺の作業は終わりってことにしよう。 FPGAなり、CPLDなり軽いものに置き換えるのはもっと技術力のある人におまかせ。

音階入力は gainer経由のボタンから行う予定。

形状は、Innocenseの画像よりずんぐりむっくりになる。いいのだ プロトタイプなんだから。

プログラミング言語は proce55ing。processing が正式なんだけど、processingでぐぐると、ゴミがですぎるので、proce55ing。興味のあるひとはぐぐってみてね。gnainerのライブラリがあったのが、主な採用理由なんだけど、これ、中身はJavaでJavaライブラリが使えるらしい。Javaには MIDIライブラリもあるし、いい選択のようだ。

大体の スケジュール。というか作成手順。

1. エフェクト作成。
2. 音出し作成。（単音、和音）
3. 音階ボタン作成。
4. 音階ボタンから音生成。
5. 筐体作成。
6. 完成。

メモ

音のNoteONは画面タッチで、NoteOffは音階キーのリリースで。おまけとして（というか実験として）カオシレータのようにタッチ位置から音階を拾う機能をつける。

音のエフェクトは、エクスクルーシブ（ベロシティ）、ピッチベンドは実装したい。

というわけで 作ってみる。開始。