Mod: Coding Challenge #86: Cube Wave by Bees and Bombs

f:id:takawo:20171229114252g:plain

Tumblrでアルゴリズミックに作られたGIFアニメーションを公開しているBees and Bombs．今回はその作品の中から一つを再作成するというもの．

.@shiffman attempting to recreate my gif in @p5xjs live! https://t.co/tpySsB4Ozi pic.twitter.com/yDQPXR0vlp
— dave 🐝💣 (@beesandbombs) 2017年12月12日

チュートリアルはp5.jsでやるものだったが，なんだか良くわからない意地でProcessingで書いた． Orthographic（正射影や平行投影など）と呼ばれる投影方法を指定するortho()の使い所がわかったけど，自分のコードに良い感じで差し込めるようになるにはまだ時間がかかる．元のGIFは，良い感じ出すのにライトを効果的に使ってるようだ．

コード

float angle = 0;
float w = 35;
float ma;
float maxD;

void setup() {
  size(800, 800, P3D);
  colorMode(HSB, 360, 100, 100, 100);
  ma = atan(cos(PI/4));
  maxD = dist(0, 0, width/2, height/2);
}

void draw() {
  background(0, 0, 0);
  directionalLight(0,0,100,0, 1, -2);
  ortho(-width, width, -height, height);
  translate(width/2, height/2, -500);
  rotateX(-ma);
  rotateY(-PI/4 + frameCount*0.01);

  for (float z = 0; z < height; z += w) {
    for (float x = 0; x < width; x += w) {
      pushMatrix();
      float d = dist(x, z, width/2, height/2);
      float offset = map(d, 0, maxD, -PI, PI);
      float a = angle + offset;
      float h = floor(map(sin(a), -1, 1, 200, width-200));
      translate(x - width / 2, 0, z - height / 2);

      float hue = map(sin(a), -1, 1, 80, 220);
      noStroke();
      fill(hue, 80, 100);

      box(w, h, w);
      popMatrix();
    }
  }
  angle -=0.05;
}