a-2 Processingで描画する　基礎編

---

Proessingをはじめる

ダウンロードできれば開発環境の準備は完了。

コンピュータの画面はピクセルが並んだものです。ピクセルは座標で示すことができます。任意のピクセル座標は(x,y)で表せます。画面サイズが100×100ピクセルのときは、最も左上は(0,0)※1、最も右下は(99,99)となります。

※1)Processingでは原点oが左上隅

Processingの基本的なプログラム構成単位＝関数。関数はパラメーターで定義します。

ウィンドウの幅と高さを定義する関数は、size(幅,高さ)。size( )のパラメーターは幅と高さです。

---

描画する基本的な関数を記載します。

点を描く point()

size(500,500);
point(250,250);

x方向に250ピクセル（以下px）、y方向に250pxの位置に1pxの点をうっています。

線を描く line()

size(500,500);
line(100,400,400,100);

これは幅500px、高さ500pxのウィンドウに左下（100x,400y）から右上(400x,100y)の位置に直線を引くという関数です。

三角形を描く triangle()

size(500,500);
triangle(100,100,100,400,400,100);

線を描いた時は２点を繋いだので、今度は３点を繋ぐように座標を追加する。

四角形を描く quad()

size(500,500);
quad(100,100,400,150,400,300,100,400);

座標を4点にすればいいが、座標（パラメーター）の順番を気をつけること。３点までは気にしなくてもよかったが、４点以上は適当に書くとねじれた図形ができるので、左上の座標から時計回りにパラメーターを入れること。

矩形（正方形、長方形）を描く　rect()

size(500,500);
rect(125,100,250,200);

左上の座標(125,100)を起点に幅250px、高さ200pxの矩形

円（正円、楕円）を描く ellipse()

size(500,500);
ellipse(250,250,200,200);

x250px、y250pxを中心点として幅200px、高さ200pxの正円。幅、高さを変えれば楕円になる。ellipse(x,y,幅、高さ)



---

ここまでが基本の描画。これらを使って他の図形も描くための応用を次回。