Processing講座第一回の変更点

追加された行はこの色です。
削除された行はこの色です。
Processing講座第一回へ行く。
Processing講座第一回の差分を削除
*Processing講座 第一回 [#f3db52e9]
**環境構築 [#w7c511cc]
1.　ダウンロード
-- https://processing.org/にアクセス~
-- downLoad Processingをクリック~
-- 自分のPCのOSにあったものを選ぶ~

2.　解凍する
-- zipファイルを好きな場所に解凍しよう~

3.　実行する
-- 「Processing.exe」アイコンをダブルクリック~
~
これで、Processingが起動します~
~
#ref(http://monge.tec.fukuoka-u.ac.jp/cg_processing/images/sys_01a.jpg,319x350)

**何か描いてみよう！ [#sb782b69]
次のように入力して左上のRunボタンをクリック~
 line(0,0,200,200);
これで、左上から右下に直線が描かれます。~
カッコ内の数値は直線の始点座標と終点座標を表しており、(始点のx座標,始点のy座標,終点のx座標,終点のy座標)という順に指定していきます。

**様々な図形 [#w06c6b5d]
Processingでは様々な図形を描くことができます。~
以下に基本的な図形の命令を書いておきます。
|図形|宣言方法|
|点|point(x,y)|
|直線|line(x1,y1,x2,y2)|
|長方形|rect(x,y,幅,高さ)|
|楕円|ellipse(x,y,横直径,縦直径)|
|三角形|triangle(x1,y1,x2,y2,x3,y3)|

**座標の指定方法 [#r86bfe0d]
Processingで図形や絵を描くとき、その位置を座標で指示します。~
横軸をx軸、縦軸をy軸と呼び、画面の左上が原点となります。~
直交座標上の、とある点の座標は、原点からx軸上の位置aと、原点からy軸上の位置bの、二つの値(a,b)で指定します。~
#ref(http://www.catch.jp/wiki/index.php?plugin=attach&refer=Processing%B4%F0%C1%C3%BA%C7%C2%AE%C6%FE%CC%E7&openfile=dimension.png,300x300)

しかし、Processingでは一般的な座標指定と違い、上の図のようにx軸が右に行くほど値が大きくなるのに対して、y軸は下にいくほど値が大きくなります。~

また、描画エリアのサイズは、size命令で自由に設定することができます。~
 size(x,y);

**色を指定する [#m29f5708]
Processigでは、0～255の数値で色を指定します。~
Processingでは、0～255の数値で色を指定します。~
|種類|例|
|グレースケール|(255)|
|グレースケール,透明度|(255,30)|
|RGB|(255,0,0)|
|RGB、透明度|(255,0,0,30)|
|RGB：16進表示|(#FF0000)|
|RGB、透明度：16進表示|(#FF0000, 30)|

例えば、背景色を変えたい場合
 background(255);
これで、背景色を白色で塗りつぶすことができます。

**図形の装飾 [#v8d420e1]
|意味|宣言方法|
|線の太さ|strokeWeight(太さ)|
|線の色|stroke(R,G,B)|
|線なし|noStroke()|
|塗りつぶし|fill(R,G,B)|
|塗りつぶしなし|noFill()|
Processing講座 第一回 の変更点

Processing講座第一回の変更点
