Processing講座 第一回 †
環境構築 †
1. ダウンロード
2. 解凍する
3. 実行する
- 「Processing.exe」アイコンをダブルクリック
これで、Processingが起動します
何か描いてみよう！ †
次のように入力して左上のRunボタンをクリック
line(0,0,200,200);
これで、左上から右下に直線が描かれます。
カッコ内の数値は直線の始点座標と終点座標を表しており、(始点のx座標,始点のy座標,終点のx座標,終点のy座標)という順に指定していきます。
様々な図形 †
Processingでは様々な図形を描くことができます。
以下に基本的な図形の命令を書いておきます。
| 図形 | 宣言方法 |
| 点 | point(x,y) |
| 直線 | line(x1,y1,x2,y2) |
| 長方形 | rect(x,y,幅,高さ) |
| 楕円 | ellipse(x,y,横直径,縦直径) |
| 三角形 | triangle(x1,y1,x2,y2,x3,y3) |
座標の指定方法 †
Processingで図形や絵を描くとき、その位置を座標で指示します。
横軸をx軸、縦軸をy軸と呼び、画面の左上が原点となります。
直交座標上の、とある点の座標は、原点からx軸上の位置aと、原点からy軸上の位置bの、二つの値(a,b)で指定します。
しかし、Processingでは一般的な座標指定と違い、上の図のようにx軸が右に行くほど値が大きくなるのに対して、y軸は下にいくほど値が大きくなります。
また、描画エリアのサイズは、size命令で自由に設定することができます。
size(x,y);
色を指定する †
Processingでは、0～255の数値で色を指定します。
| 種類 | 例 |
| グレースケール | (255) |
| グレースケール,透明度 | (255,30) |
| RGB | (255,0,0) |
| RGB、透明度 | (255,0,0,30) |
| RGB：16進表示 | (#FF0000) |
| RGB、透明度：16進表示 | (#FF0000, 30) |
例えば、背景色を変えたい場合
background(255);
これで、背景色を白色で塗りつぶすことができます。
図形の装飾 †
| 意味 | 宣言方法 |
| 線の太さ | strokeWeight(太さ) |
| 線の色 | stroke(R,G,B) |
| 線なし | noStroke() |
| 塗りつぶし | fill(R,G,B) |
| 塗りつぶしなし | noFill() |
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
