Processing初心者と歩むビジュアルプログラミング
コードを書いてなにか絵を描きたい。
ふと唐突にそういう気持ちになったので、先日知ったProcessingを使い始めました。
Processingとは
Javaをベースとした、電子アートとビジュアルデザインのためのプログラミング言語です。
描画に関するメソッドがたくさんデフォルトで用意されているので便利そうです。
実行できるアプリケーションが無料でダウンロードできます。
ダウンロードはこちら
私自身も初心者で何ができるのやら分からず始めてみたので、もし興味のある方はこの機会に一緒にやりながら見てください。
何か描いてみる
早速なにか描いてみましょう。
まずは単純に円から。
void setup() {
size(600, 600);
background(255);
}
void draw() {
noStroke();
fill(0,0,0);
ellipse(190, 235, 120, 120);
noStroke();
fill(0,0,0);
ellipse(410, 235, 120, 120);
noStroke();
fill(0,0,0);
ellipse(300, 350, 200, 200);
}
Processingのコードには基本的にsetup()という初期設定と、draw()という描画をするメソッドの2つを用意するようです。
円を書くにはellipse()というメソッドで座標とサイズを設定します。
図形の色はnoStroke()で外枠の線をなしに、fill()で塗りつぶしの設定をしています。
さぁこれでどのような描画ができているのでしょう。
ハハ！
あ、つい。。。失礼しました。趣味が暴走しました笑
先ほどのコードで黒く塗り潰した3つの円を書くことができます。
ただ丸を書くだけでしたが、コードもかなりシンプルでしたね。
これだけでは面白くないので次は何か動きをつけたものを書いてみます。
動きをつける
描画したものに動きをつける、というのは正確には動いているように見せることです。
この違いは何かと言うと、一度描画したものの設定を変更するのではなく、描画したものの残像が残るように再描画し直すということです。
では作成したコードを基に簡単にご紹介します。
int num = 100;
float mx[] = new float[num];
float my[] = new float[num];
void setup() {
fullScreen();
background(0);
}
void draw() {
background(0);
int which = frameCount % num;
mx[which] = mouseX;
my[which] = mouseY;
for (int i = 0; i < num; i++) {
int index = (which + 1 + i) % num;
noFill();
strokeWeight(10);
stroke(100, 200, 255, i);
if (mousePressed) {
rotate(1);
}
rect(mx[index], my[index], 100, 100);
}
}
draw()は一度ではなく常に走っているメソッドなので、
一番最初のbackground(0)で毎回真っ黒に塗りつぶしてリセットしています。
そして過去に描いた図形の座標をmx, myに格納していき、色をどんどん薄くして同じ位置に再描画しています。
こうすることで描画し終えた図形が消えていくようにみえるわけです。
今回はrect()で四角形の描画をしています。
せっかく動きをつけたので、実際にどうなっているのか見てください。
chasing square
カーソルを追っかけて四角形が描画され、どんどん消えていくように見えますよね。
また、クリックしながらカーソルを動かすと謎に動き回るようにしてみました。
他にもクリックした位置に合わせて図形を描画するようなものも作成してみました。
コードは以下で公開しています。
wing
最後に
書き味がcanvasに似ていたり、割と直感で書いていけるなと個人的に思いました。
動きのあるものでもコード量が少ないというのも魅力です。
Processingの公式にもサンプルがあったり、個人作成の凝った作品がたくさん投稿されているサイトもありますので興味のある方は是非見てください！
私も絵のセンスはほぼ皆無（←）ですが、暇を見つけて作成して公開しようと思います笑
参考
