画面エフェクト

まずは、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. 書き方の順番が オブジェクトの0からになってるので、重なりの描画が変(これはプログラムのせい。いつか直そう)。重なったら、なんかするべきだろ>processing
  4. 重なりの描画は なんか 考える必要があるな。。背景が黒ってのがまずいような気がする。Alphaチャンネルを扱えるのはいいのだけど、どうも考えてる仕様とはちがうな。

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

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

コメントをどうぞ