Music Boxel Prototype (Processing+PeasyCam)

こんばんは〜

Processingでスケッチするのは、楽しいですね！的な話として今日は、Music Boxelのプロトタイプのご紹介です。

本物のMusic Boxelのリアルタイム・ヴィジュアルオーディオはaircordの森氏によるopenFrameworks+SuperColliderのプログラムですが、ヴィジュアルの試作品はProcessingで書かれました。

開発中のMusic Boxelのヴィジュアル×オーディオを制作チーム内でイメージするために、「キューブ」が同心円状に4列になってぐるぐると周り、円周上の一定の角度(0度〜10度)にさしかかったときに「発光(発音)」しつつ「摩耗」する、というアイディアをProcessingでスケッチしました。

JavaApplet版はここに置いてあります。
Music Boxel Prototype (JavaApplet build with Processing)

Javaプラグインをブラウザに入れていない皆さまはこちらをどうぞ。 ↓ こんな感じです。
(動作中のJavaAppletをiPhoneでビデオ撮影したもの)

Processingのコードはこんな感じ。PeasyCamさえ入っていれば、手元のProcessingで動くと思います。
(PeasyCam、ありがとう！わたしのようなものぐさでも3Dでスケッチする気が起こります)

// 3Dカメラのコントロール用にpeasyを読み込んでいます。描画はOpenGL
import peasy.*;
import processing.opengl.*;

PeasyCam cam;

// キューブのサイズ初期値
float boxSize = 5;

// 4つの円周上に配置するキューブの数の初期値
int num = 4;
int num2 = 8;
int num3 = 4;
int num4 = 8;

// 4つの円の半径
float R = 5;
float R2 = 10;
float R3 = 15;
float R4 = 20;

// 4つの円の初期角度、回転スピード
float Rdiff = 0;
float Rspeed = 1;
float Rdiff2 = 0;
float Rspeed2 = 2;
float Rdiff3 = 0;
float Rspeed3 = 3;
float Rdiff4 = 0;
float Rspeed4 = 4;

void setup() {
  size(500,500,OPENGL);
  // 3Dカメラを作っています
  cam = new PeasyCam(this, 100);
  cam.setMinimumDistance(50);
  cam.setMaximumDistance(500);
}

void draw() {
  background(0);
  // 角度を加算。4つの円を回転させています
  Rdiff = Rdiff + Rspeed;
  Rdiff2 = Rdiff2 + Rspeed2;
  Rdiff3 = Rdiff3 + Rspeed3;
  Rdiff4 = Rdiff4 + Rspeed4;
  // 一番内側の円周上のキューブを描画
  for(int i=0; i<num; i=i+1) {
    // 現在の角度からキューブを配置する位置を決定しています
    pushMatrix();
    rotateZ(radians(360/num*i+Rdiff));
    translate(R,0,0);
    // "摩耗エリア(0〜10度)" にあるときに、キューブを "摩耗" させています。
    // また白い輪郭を表示しています
    if ((360/num*i+Rdiff)%360 < 10) {
      stroke(255);
      fill(255);
      boxSize = boxSize*0.9;
      box(boxSize*2);
      noFill();
      box(boxSize*3);
    } else {
      // "摩耗エリア" でないときは、通常の色で描画します
      stroke(255,0,0);
      fill(255,0,0);
    }
    // キューブを描画
    box(boxSize);
    popMatrix();
  }
  // 内側から二番目の円周上のキューブを描画
  for(int i=0; i<num2; i=i+1) {
    pushMatrix();
    rotateZ(radians(360/num2*i+Rdiff2));
    translate(R2,0,boxSize);
    if ((360/num2*i+Rdiff2)%360 < 10) {
      stroke(255);
      fill(255);
      boxSize = boxSize*0.9;
      box(boxSize*2);
      noFill();
      box(boxSize*3);
    } else {
      stroke(0,255,0);
      fill(0,255,0);
    }
    stroke(0,255,0);
    box(boxSize);
    popMatrix();
  }
  // 内側から三番目の円周上のキューブを描画
  for(int i=0; i<num3; i=i+1) {
    pushMatrix();
    rotateZ(radians(360/num3*i+Rdiff3));
    translate(R3,0,boxSize*2);
    if ((360/num3*i+Rdiff3)%360 < 10) {
      stroke(255);
      fill(255);
      boxSize = boxSize*0.9;
      box(boxSize*2);
      noFill();
      box(boxSize*3);
    } else {
      stroke(0,0,255);
      fill(0,0,255);
    }
    box(boxSize);
    popMatrix();
  }
  // 一番外側の円周上のキューブを描画
  for(int i=0; i<num4; i=i+1) {
    pushMatrix();
    rotateZ(radians(360/num4*i+Rdiff4));
    translate(R4,0,boxSize*3);
    if ((360/num4*i+Rdiff4)%360 < 10) {
      stroke(255);
      fill(255);
      boxSize = boxSize*0.9;
      box(boxSize*2);
      noFill();
      box(boxSize*3);
    } else {
      stroke(0,255,255);
      fill(0,255,255);
    }
    box(boxSize);
    popMatrix();
  }
  // キューブがある程度以上 "摩耗" したら、キューブの数、サイズをリセット
  if (boxSize < 0.1) {
    boxSize = 5;
    num = round(random(8));
    num2 = round(random(8));
    num3 = round(random(8));
    num4 = round(random(8));
  }
}

MusicBoxelのデモ・ムービーは、近日、もうそろそろ公開予定…