ツイッターのアイコンをProcessingで作ってみる

　ブログを始めたついでにツイッターを始めることにした。卵アイコンではなんだか物足りないので何かアイコンを作ろうと思う。

　とはいうものの，アイコンって結構悩みどころ。かっこいい画像がいいけれど，オリジナルにしたい。あと理系っぽい雰囲気をかもし出すためにはなんかグラフとかにしたい。

　散々迷った挙句，とりあえずバラ曲線を描いてみることにした。

1.バラ曲線を描く

まぁまずバラ曲線の式はこちら。極方程式であらわされる。

aとnは定数。θはもちろん変数。Processingで描く際にはθを適当な値から少しづつ変化させて，次の(x,y)について点を打つ。

まぁ実際には点ではなく線を引いている。とりあえずプログラムを見てもらえればわかると思う。

/* シータの値 */
float theta = 0.0;
/* この値を変えると形が変化する */
float n = 5.0/7.0; 

void setup() {
  /* 適当な大きさのウィンドウを表示する */
  size(512, 512);
  /* 背景を黒く塗りつぶす */
  background(0);
}

void draw() {

  float x0, x1, y0, y1;
  float r;

  /* Processingでは左上が原点になっているので中心に持ってくる */
  translate(width/2, height/2);
  /* Processingでは上下が逆なので180度(つまりPI[rad])回転する */
  rotate(PI);

  /* 線の色は緑にする */
  stroke(0, 255, 0);
  /* thetaが変化する前の座標 */
  r = width / 2 * sin(n*theta);
  x0 = r * cos(theta);
  y0 = r * sin(theta);

  /* thetaをちょっとだけ動かす */
  theta += 0.01;

  /* thetaが変化した後の座標 */
  r = width / 2 * sin(n*theta);
  x1 = r * cos(theta);
  y1 = r * sin(theta);

  /* (x0,y0)から(x1,y1)に線を引く */
  line(x0, y0, x1, y1);

  //saveFrame("a.png");
}

x0,y0は前回計算したx1,y1を流用すれば計算回数少なくて済むよ！という声が聞こえてきそうだがプログラム的には(たぶん)こっちのほうが見やすいかなと思ってこうした。

　徐々に描かれるのは仕様です。ほんとは範囲決めて一瞬で描きたかったけれど，nが小数の時にどうするかがわからなかった。整数なら0 <= θ < 2πでやれば描けるんだけれどもね。実行結果は以下の通り。

　十分きれいな形だな。でもこの図形は数学Ⅲでならうくらい有名なものです。これじゃつまらん。オリジナリティがないとか言われそう。なのでちょっとアレンジしてみる。

2.バラバラ曲線を描く

なんて名前付けたらいいのかわからないのでこう呼ぶことにした。上のバラ曲線のプログラムを書いてた時に偶然生まれたもの。ごにょごにょやっている間にえらい変な数式になってしまった。

　訳が分からないよ。一応a,c0～c4は定数。この(x0,y0)から(x1,y1)に引いた線分の集合をバラバラ曲線と呼ぶことにした。とりあえずソースコードみて（お察しください）。

/* 各係数を格納する配列 */
int[] c = { 1, 6, -6, 2, -2};
/* 係数の最小値 */
int C_MIN = -8;
/* 係数の最大値 */
int C_MAX = 8;

void setup() {
  /* 適当な大きさのウィンドウを表示する */
  size(512, 512);
  /* 1秒間に1回drawが呼ばれるようにする */
  frameRate(1);
}

void draw() {
  /* 背景を黒く塗りつぶす */
  background(0);

  float x0, x1, y0, y1;
  float r;

  /* Processingでは左上が原点になっているので中心に持ってくる */
  translate(width/2, height/2);
  /* Processingでは上下が逆なので180度(つまりPI[rad])回転する */
  rotate(PI);

  for (float theta = 0.0; theta < 2 * PI; theta += 0.01 ) {
    /* この辺はバラ曲線と似たイメージ */
    r = width / 2 * sin(c[0]*theta);
    x0 = r * cos(c[1]*theta);
    y0 = r * sin(c[2]*theta);
    x1 = r * cos(c[3]*theta);
    y1 = r * sin(c[4]*theta);

    /* 色をそれっぽい感じに変化させる */
    stroke(255*abs(sin(theta)));

    /* (x0,y0)から(x1,y1)に線を引く */
    line(x0, y0, x1, y1);
  }
  
  /* 係数をランダムに変える */
  for (int i = 0; i < c.length; i++ ) {
    c[i] = int(random(C_MIN, C_MAX));
  }
}

/* キーボードが押されたときに呼び出される関数 */
void keyPressed() { 
  /* 保存する */
  saveFrame("######.png");
}

　1秒に1回ランダムにパラメータを決めて表示している。何かしらキーボードを押せば保存される。実行結果の例としてはこんなのが出てきた。

　まぁまぁいいんじゃない？オリジナリティもあるし。まぁ変なのばかりだけれど。しばらくツイッターのアイコンはこれにしておこうと思います。