February 11, 2008
Proce55ingによる待受画面の自動生成
テーマ:Web
携帯電話を買い替えたというイベントが、割と自分の中ではビッグイベントだったらしく、今いろいろ機能をカスタマイズしてます。
待受画面も好きな写真やロゴにするような安易な方向に流れず、自作してみようと思い、ここ数年HPのデザインなどで使用しているグラフィックと同じデザインを採用することにしました。
といっても、全く同じにしてもおもしろくないので、少し違ったパターンを作るために、Proce55ingのアルゴリズムやパラメータを少しいじりました。
ちなみにProce55ingとはMITが開発しているコンピュータアートとビジュアルデザインのためのプログラミング言語、総合開発環境です。
http://www.processing.org
この言語はJavaを単純化し、計算結果を即座にグラフィカルに表示することで、プログラミング未経験者が容易に学習することができるようにしたものなので、アート以外の分野の初心者にもおすすめできる言語です。ベースとなっている文法はJavaです。
今回の待受画面にある曲線を描くソースコードはこのような感じです。
for(int i = 0; i<=313; i+=1){
beginShape();
noFill();
stroke(255, 13, 78, 35);
vertex(xxx*0.15, -xxx*0.1);
bezierVertex(xxx*0.35, -yyy*0.1,yyy*0.45,xxx*0.25, xxx*0.51,yyy*1.2);
vertex(xxx*0.85, -xxx*0.8);
bezierVertex(xxx*0.12,xxx*0.2,yyy*0.12,xxx*0.46, xxx*0.1,yyy*0.15);
xxx=xxx*1.008;
yyy=yyy*0.95;
endShape();
}
ベジエ曲線を数百回ループさせる単純な構造ですが、変数の使い方で3次元的、4次元的な複雑な奥行きや動きを表現できます。
このような図形はコンピュータの数学的に精密な計算なしに手作業で描くことは不可能です。
たとえPhotoshopやIllustratorを使っても気の遠くなるような変形とレイヤーが必要になります。(この画像の場合は312個のレイヤーと曲線が必要)
PhotoshopやIllustratorは人間も手書きで行えるような処理をコンピュータを使って高速に行うような使い方をする傾向が強いですが、Proce55ingのようなソフトは確率や変数をコントロールして人間の作業では絶対に不可能なグラフィックを生成することが得意です。
まさに、コンピュータアートのためのソフトウェアです。
将来的にはProce55ingを使って音楽作品と連動したグラフィックの同時自動生成も行う予定です。






