Garland for R.:Processing 2D アニメーション作例
見出し画像

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

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


ritoco さん

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

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

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

マウスを動かしていくと円の残像が残り、良きところでキーボードの 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 さん、ありがとう!




この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
deconbatch

この記事が面白かったらサポートしていただけませんか? ぜんざい好きな私に、ぜんざいをお腹いっぱい食べさせてほしい。あなたのことを想いながら食べるから、ぜんざいサポートお願いね 💕

あなたの「スキ」を家宝にします!
何かしら作ってる時間が大好きーっ! 主にクリエイティブ・コーディング、Processing の記事を書いています。 Twitterでも画像、映像をアップしてるのでぜひ! : @deconbatch