Processingを用いて間違った円を描く方法

3331α Art Hack Day 2016というアート×エンジニアリングの共演みたいな面白そうなハッカソンに応募したんだけど 見事に抽選（というか審査）に落ちて、参加できなかったので、悔しくて以下の本を買ってみました。

この本おもしろくて、最初は単純の線を描く方法ばっかりなんだけど（実際、著者も「これは退屈だが」って書いてるあたりわかってる。） 「間違った円を描く方法」という章あたりから大分、様子がおかしくなってくる。
というわけなので、自分も、とっかかりとしてこの様子がおかしい円を描いてみることにした。

書いたもの

様子がおかしいというか、なんだか悪夢感がすごい円が描けました。

実際にうごくやつ

実際に動くと悪夢感がさらにすごい。

Processing Demo

書いたコード

// setupでアニメーションを動かす前のセットアップを行う
void setup(){
  // キャンバスサイズの設定を横:500 縦:300に設定
  size(500,300);

  // 背景を白に設定
  background(255);

  // らせんの線の太さを細めに設定
  strokeWeight(0.5);

  // 形をなめらかに
  smooth();
}

// drawで実際にアニメーションの内容を設定
// このdrawで書いた内容が無限ループされる感じ
void draw(){
  // ループ毎に背景をリセット
  background(255);

  // らせんの中心を設定
  int centx = 250;
  int centy = 150;

  float x, y;

  // らせんを100個描くfor ループ
  for (int i = 0; i < 100; i++){
    float lastx = -999;
    float lasty = -999;
    float radius = 10;

    // 直径を乱数化するシードをランダムに設定
    float radiusNoise = random(10);
　 
    // 線の色の濃さもランダムに
    stroke(random(20), random(50), random(70), 80);

    // らせんを描きはじめる角度をランダムに
    int startangle = int(random(360));

    // らせんを描きはじめる角度もランダムに
    int endangle = 1440 + int(random(1440));

    // 角度のステップもランダムに
    int anglestep = 5 + int(random(3));

    // らせんを描くforループ
    for (float ang = startangle; ang <= endangle; ang += anglestep){
      radiusNoise += 0.05;
      radius += 0.5;

      // 今回の直径を ランダムに0~100の間でランダムに加算
      float thisRadius = radius + (noise(radiusNoise) * 200) - 100;
      float rad = radians(ang);

      // らせんの中心から三角関数でx軸、y軸を設定
      x = centx + (thisRadius * cos(rad));
      y = centy + (thisRadius * sin(rad));

　   // 前の座標から今回計算した座標へ線を引く
      if(lastx > -999) {
        line(x, y, lastx, lasty);
      }

      // 次のforループで利用するため今回のx,y座標を保存
      lastx = x;
      lasty = y;
    }
  }
}

感想

• Javaベースだから、馴染みやすい文法で線とか絵がかけるProcessingすごい
• こんなわかりやすいコードでこんなカオスな絵をかけるマットピアソンさん(↑の本の著者ね)すごい

しかも、この「間違った円を描く」章以降、かなりカオスな絵ばっかり出てくるので わくわくが止まらない。。。
また読み進んだら、ここにも載っけようかと思います。