まずは、processing で 画面エフェクト。
とりあえず試してみたい方はこちらから。黒いとこをクリックしてみて。
- エフェクトの種類はとりあえず、直線、○、△、□。将来的に、任意の絵を表示できるように。
- クリックポイントを中心に 各図形が回転しながら大きくなって暗くなって消えていく。
- 直線はクリックポイントを通るランダムな角度の直線。
- processingの座標変換機能を最大限利用。サイズの変化は描画で、角度の変化は座標変換で。
- 画面エフェクトは、Class化しておく。
- メソッドは、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 にできたと思ったんだけどな。
まぁ後でやっておこう。
簡単だった（笑） アプレット化 黒いとこを クリックしてみてねぃ（＾＾
※問題点
- エフェクトの数が10個しか用意されてないので それを越えると古い画像が消えるように見えるかも。（まだ、足りなくなったことはない）
- 画面サイズを大きくすると、描画がとろい、というか画面のリセットがとろいのだなこれは。Effectクラスの描画パラメータをいじってみる。
- 書き方の順番が オブジェクトの０からになってるので、重なりの描画が変（これはプログラムのせい。いつか直そう）。重なったら、なんかするべきだろ＞processing
- 重なりの描画は なんか 考える必要があるな。。背景が黒ってのがまずいような気がする。Alphaチャンネルを扱えるのはいいのだけど、どうも考えてる仕様とはちがうな。
とりあえず。Effectの描画は これで オーケーってことにしておこう（笑）。
- （今ここ→）エフェクト作成。
- 音出し作成。（単音、和音）
- 音階ボタン作成。
- 音階ボタンから音生成。
- 筐体作成。
- 完成。