Garland for R.：Processing 2D アニメーション作例

今回、このような作品を作ってみました。
タイトルは「Garland for R.」。R は元のソースコードを書かれた方のイニシャルです。

ritoco さん

ジェネレーティブアートをされてる方ならきっと ritoco さんをご存知でしょう。
いつも活発に活動されていて、Twitter でも多くの作品を発表されています。

■ ritoco さんの Twitter : https://twitter.com/RITOCO_t

先日は、こちらのブログでご自身の作品のソースコードを公開されていました。

【第１回目】Processingでお絵描きをしてみる。【ベータ版】 - ritocoがなんかやってます。

マウスを動かしていくと円の残像が残り、良きところでキーボードの p キーを押すことによって、描いた状態を画像ファイルに書き出すというものです。

「Processing を絵筆代わりにして絵を書くためのコード」という解釈ができると思いますが、私にはこの発想はありませんでした。
私にとって ritoco さんの作品にはこのような発見というか、あたらしい発想を浮かばせてくれるものが多いんです。

私はこのソースを試してみた後に、私だったらどうしただろう？と考えてみました。
きっと、私だったら円をマウスで動かすとは考えず、for 文を回しながら計算式で円を動かそうとしたと思います。

ソースコード

それで、ritoco さんのソースを元にいろいろ試してみて、（なかなかうまくいかなくて、結局いつもの調子で偶然に助けられて）、うまくいったのがこの「Garland for R.」でした。

ソースコードはこうなっています。

// Garland for R.
// Processing 3.2.1
// 2018.05.02
// 10fps x 6s
// reference : https://ritocopalette.hatenablog.com/entry/2018/04/29/173328

float easeRate;

void setup() {

  size(720, 720);
  colorMode(HSB, 360, 100, 100, 100);
  smooth();

  strokeWeight(0.5);
  textAlign(CENTER, CENTER);

  easeRate = 0.0;

}

void draw() {

  float eased       = sin(PI * easeRate);
  float radius      = 300 * eased;
  float angle       = 0;
  int   petalCntMax = 48;

  background(0.0, 0.0, 90.0, 100.0);
  translate(width / 2, height / 2);

  // R fade in/out
  noStroke();
  fill(0, 0, 20, 40 * eased * eased);
  textSize(300 * eased);
  text("R", 5 * eased, -40 * eased);

  // rotate whole canvas
  rotate(PI * eased / 5);

  // garland blooming!
  stroke(0, 0, 20, 100);
  noFill();
  int petalCnt = floor(petalCntMax * sin(PI * easeRate));
  for (int petal = 0; petal < petalCnt; ++petal) {
    pushMatrix();
    translate(
              radius * cos(PI * petal / 8.0),
              radius * sin(PI * petal / 8.0)
              );
    rotate(PI * angle);
    ellipse(0, 0, 15 * eased, 90 * eased);
    ellipse(0, 0, 90 * eased, 15 * eased);
    popMatrix();

    angle += 0.01;
  }

  // animation proceed
  easeRate += 1.0 / (10 * 6);  // 10fps x 6s

  saveFrame("frames/####.png");
  if (easeRate > 1.0) {
    exit();
  }
  
}

元のソースにライセンスの記載が無かったので、これにも特にライセンスは付けていません。
ご自由にお使いください。（って、勝手に言っちゃっていいかな？ ＞ ritoco さん）

やってるうちに欲が出てごちゃごちゃと付け加えてしまいましたが、肝心の描画の部分をご覧いただくと、マウスで動かす部分が三角関数になっただけで、ほとんどオリジナルのソースコードと同じことがおわかりいただけると思います。

    pushMatrix();
    translate(
              radius * cos(PI * petal / 8.0),
              radius * sin(PI * petal / 8.0)
              );
    rotate(PI * angle);
    ellipse(0, 0, 15 * eased, 90 * eased);
    ellipse(0, 0, 90 * eased, 15 * eased);
    popMatrix();

    angle += 0.01;

実はまだまだ面白いことができそう

ritoco さんのジェネラティブアートのソースコード、ご本人が『これを応用したことをやっていきます』とおっしゃっているように、まだまだ面白いことができそうな予感がします。

やってるうちにこんなのも出来ました。

本当にいつもながら新鮮な驚きを与えてくれます。ritoco さん、ありがとう！