Processing:音楽のbpmに合わせて、VJのように画面を次々に切り替えるコード

概要

ProcessingでVJみたいな表示ができるコードを作成しました。

  • 小節数のキリのいいところ(2小節、4小節など)で画面がトランジションする
  • bpmを設定したらそこから自動でトランジションするタイミングを計算できる
  • コードを流用・変更しやすいように、draw関数とは別の関数を呼び出す形式にする
  • トランジションするときは、background()で一度画面をクリアする

もともと、オーディオリアクティブなProcessingを作っていましたが、同じような映像がずっと続いてしまい、大きな変化が作りにくいという課題を感じていました。

このコードを使えば、時間が経つと一気に画面が切り替わるので、大きな変化をつけることができます。

コード

//音楽のテンポに合わせてProcessingの表示を次々に切り替える(トランジションさせる)コード

int transition_num=0 ; //トランジション関数関連の初期値代入
int measure_count =0; //トランジション関数関連の初期値代入


//setup関数
void setup(){
  size(854,480); //画面サイズを指定。1280x720,854x480,640x360などが代表的な16:9画面
  surface.setLocation(0,0);   //実行画面をスクリーン上の左上に位置付ける
  frameRate(30);//フレームレート設定
  smooth();
  background(255);
  stroke(0);
  strokeWeight(1);
  noFill();
  
}

//draw関数
void draw(){

  if (transition_num <= 0 )
{
    circlefunc();  //円を書く関数呼び出し
} 

else if ( transition_num  > 0 &&  transition_num <= 1)
{
    squarefunc(); //四角を書く関数呼び出し
}

else if ( transition_num  > 1 && transition_num <= 2)
{
    linefunc(); //線を書く関数呼び出し
}
else
{
  textfunc();//文字を書く関数呼び出し
}

  transitionfunc();  //トランジション関数を呼び出し
  
}
//draw関数ここまで


//円を書く関数
void circlefunc(){
    background(255);
  ellipse(width/2,height/2,random(width),random(width));
  ellipse(width/2,height/2,random(width),random(width));
}

//四角を書く関数
void squarefunc(){
  pushMatrix(); //座標を保存
  translate(width/2,height/2); //原点を中心に移動
  rotate(frameCount);
  rect(width/10,height/10,100,100);
  popMatrix();//座標をもとに戻す
}

//線を書く関数
void linefunc(){
  line(width/2,height/2,random(width),random(height));
}


//文字を書く関数
void textfunc(){
  background(255);
  textSize(random(width/2)); //文字サイズ指定
  String str_text_left = str(second());
  String str_text_right = str(frameCount);
    text(str_text_left,width/5,height*4/10,1000,1000);
    text(str_text_right,width*3/5,height*4/10,1000,1000);
}


//トランジション関数  テンポに合わせて小節の区切りよいところでトランジションする。frameCountを使用。
void transitionfunc (){
   int bpm = 140; //bpmを入力
   int measure = 0; //小節数を初期化
   float measure_num =4; //トランジションする小節数を入力。例:4  例2:0.5  小数点もOK
   int transition_num_max = 4; //トランジションする数の最大値を入力(繰り返すため)
   int beat =4;  //拍子を入力
   int setframe = 30; //frameRateで設定した値を入力。Default30
   float transition_frame =0;  //トランジションするframeを初期化
   
   measure = 60*setframe*beat/bpm; //1小節のframe数を計算
   transition_frame = 60*setframe*beat*measure_num/bpm;  //トランジションするframe数を計算
   float transition_num_buffer = transition_num; //トランジションするときにbackground(255)で白紙に戻すためのtransition_num_bufferを定義

 if(frameCount%int(transition_frame) == 0 ){  //frameCountとtransition_frameの余りが0だったらtransition_numを1増やす
  transition_num++;
}
 if(frameCount%measure == 0){  //frameCountとmeasureの余りが0だったらmeasure_countを1増やす
  measure_count++;
 }
 if(transition_num >= transition_num_max){ //transition_numが最大値を超えたら0にクリア
   transition_num = 0;
 }
 if(transition_num_buffer != transition_num){ //transition_numが変化したら背景をbackground(255)でクリアする
  background(255);
  transition_num_buffer = transition_num;
 }
 

 //トランジションの数字と小節数を表示する
 fill(255);
 rect (0,0,100,100);
  fill(0);
  String str_transition_num = str(transition_num);
  String str_measure_count = str(measure_count);
    textSize(15); //文字サイズ指定
    text("transition",10,10,100,100);
    text(str_transition_num,10,30,100,100);
    text("measure",10,50,100,100);
    text(str_measure_count,10,70,100,100);
    noFill();
}

使い方

トランジション関数内の、bpm、トランジションする小節数、拍子、framerateなど設定してください。

円を書く関数・四角を書く関数・線を書く関数・文字を書く関数のところを、各自のProcessingのコードに置き換えてみてください。

translateやrotate、またnoFillやstrokeなどの設定は、他の関数へ影響してしまうことがあるので、各自うまくチューニングしてください。

トランジションの上限は、今は4つまでにしていますが、関数呼び出しの箇所と、transition_num_maxを変更すれば、さらにトランジション数を増やせます。

コード流用は自由にしてOKですが、自己責任でお願いします。

コメントを残す

CAPTCHA