まずは、さまざまな図形を描きながら、Processingの使い方に慣れていきましょう。

プログラムはコピー＆ペーストせず、必ず自分の手で入力してください。 実際に入力することで、プログラムの書き方をより深く理解できます。

円の描画と色の指定

円を描く

circle(50, 50, 80);

「左から50ピクセル、上から50ピクセルの位置を中心として、直径80ピクセルの円を描く」プログラムです。

座標系

図形は座標を使って位置と大きさを指定します。

Processing における画面の座標系は右図の通りです。

画面の左上が原点（0, 0）で、x 軸は右方向へ、y 軸は下方向へと伸びていることに注意してください。

たとえば、円をより下方に描画したい場合は、

circle(50, 70, 80);

のように、y 座標の値を大きくします。

Processing のスクリーン座標系

circle(30, 50, 80);

circle(30, 30, 80);

circle(0, 0, 200);

circle(100, 100, 200);

複数の図形

複数の円を描くときは、次のように複数行のプログラムを書きます。

circle(30, 30, 40);
circle(70, 30, 40);
circle(30, 70, 40);
circle(70, 70, 40);

図形の重なり順

プログラムは1行目から順に実行されます。 複数の円を描くときは、図形は上書きされるように描かれていきます。

circle(30, 50, 50);
circle(50, 50, 50);
circle(70, 50, 50);

circle(70, 50, 50);
circle(50, 50, 50);
circle(30, 50, 50);

circle(30, 50, 50);
circle(70, 50, 50);
circle(50, 50, 50);