Processingの基本的操作-1 : 図形の描画

Processingとは「Javaのようなプログラミング言語をもちいてお絵かきをするツール」です
絵を描いたり，アニメーションを作ったりするうちにJavaの基本的な使い方が身に付くようになります

今回は，Processingの基本操作に慣れるためにお絵かきをしましょう
円だけをつかって，下図のようなパンダの絵を描きたいと思います

パンダの絵

ではまず，Processingを起動します
Processingのダウンロードがまだの人は，下のリンクを参照してください
processing-p5.hateblo.jp

Processingを起動すると，テキストエディタ画面が表示されます
まずはこのテキストエディタに，下のコードを打ち込んでください

size(300,400);

この状態で，Processing画面左上の再生ボタンをクリックすると，
灰色のキャンバスが描画されます

このキャンバスのサイズは，横300px, 縦400pxとなります
先ほど打ち込んだsize(300, 400)というコードは，キャンバスのサイズを指定するものでした
これからお絵かきをするにあたって，キャンバスのサイズは300x400である必要はありません
size(800, 600)など，好きなサイズを試してみましょう

キャンバスのサイズが決まったら，次にキャンバスの下地の色を決めます
テキストエディタに，下のコードを打ち込みましょう

size(300,400);
background(0, 0, 0);

この状態で再生ボタンを押すと，先ほど灰色だったキャンバスが黒色になりました

background()は，キャンバスの背景色を決定するためのものです
カッコの中の3つの数字0, 0, 0はRGBの強度を示しています
RGBとは，R(赤)，G(緑), B(青)の３原色の強度によって全ての色を表す方法で，
色の強度は0から255の間の数値をとります
試しに，background(255, 0, 0)と打ち込んでみるとキャンバスの色が赤色となります

せっかくなので，キャンバスの色も自由に変更してみましょう
キャンバスを紫色にするにはどうしたらいいでしょうか？考えてみてください

背景色が決まったら，次にパンダの顔の輪郭を描きます
テキストエディタに，下のコードを打ち込みましょう

size(300,400);
background(200, 0, 255);

fill(255, 255, 255);
circle(150, 190, 200);

この状態で再生ボタンを押すと，キャンバスに白い丸が出現しました

fill(255, 255, 255)は，図形の色を指定するコードです
background()と同じように，色をRGBで指定しています
試しにfill(0, 0, 0)とすると，丸の色は黒色に変わります

circle(150, 190, 200)は丸の位置と大きさを指定するコードです
「横150px, 縦190pxの位置に，直径200pxの丸を描きなさい」という意味になります
ではcircle()の中の数字をいじってみましょう
circle(20, 20, 100)としてみた場合はどうなるでしょうか

さて，輪郭ができたので目と鼻をいっきに描き込んでみましょう
テキストエディタに，下のコードを打ち込んでください

size(300,400);
background(200, 0, 255);

fill(255, 255, 255);
circle(150, 190, 200);

fill(0, 0, 0);
circle(150, 220, 25);
circle(101, 175, 50);
circle(120, 165, 40);
circle(199, 175, 50);
circle(180, 165, 40);

fill(255, 255);
circle(120, 175, 10);
circle(180, 175, 10);

再生ボタンを押すとパンダが出現しました

今回用いた図形は丸だけですが，processingにはcircle()の他に四角形を描くためのrect()や，
線を描くためのline()などが多数用意されています
これらについても，次回以降バンバン使っていきます

次回のテーマは「アニメーションの動かし方」についてです