1．図形の描画

　プログラム初心者の人は命令のつづりを間違えないように気を付けながらゆっくりやってください。プログラムが動いたら数値を変えてどのように実行結果が変わるかを見てください。そうしていくうちに理解できると思います。

　プログラム経験者の人は命令のところの説明を読んで、プログラム部分を入力して実行し、プログラムの数値を変えてみるだけで理解できるでしょう。

(1) ウィンドウを開く

　インストールのところで試した命令は、

　のたった1行でした。この時に出てきたウィンドウは大きさが縦横100ピクセルでした（下図）。

　中心の位置をずらしたり、大きな楕円を書くとウィンドウからはみ出てしまいました。次はウィンドウの大きさを設定する命令sizeを使ってみましょう。
size(600, 300);
ellipse(50,50,80,80);

実行はメニューのスケッチー＞実行、あるいは緑の三角アイコン（再生ボタンみたいなもの）をクリックする。実行結果は以下のようになります。

ウィンドウが大きくなりました。sizeはウィンドウの大きさを設定する命令で、2つの引数でウィンドウの幅と高さを指定します。

(2)　様々な形の描画1

このウィンドウにいろいろな図形を描く命令を実行してみましょう。

間抜けな絵が描けました！
それぞれの命令の説明を下に示します。説明では、指定する座標を(x1, y1)や(x2, y2)のようにあらわし、高さや幅をhigh, widthと示しています。

点を描く　point(x1,y1);　(x1, y1)に点を描く
線を描く　line(x1, y1, x2, y2);　(x1, y1) と(x2, y2)の間に線を引く
長方形を描く　rect(x1, y1, width, hight);　(x1, y1)を左上の頂点とする幅widthの, 高さhight, 長方形を描く
三角形を描く　triangle(x1, y1, x2, y2, x3, y3);　(x1, y1)と(x2, y2), (x3, y3)を頂点とする三角形を描く
四角形を描く　quad(x1, y1, x2, y2, x3, y3, x4, y4);　(x1, y1)と(x2, y2), (x3, y3), (x4, y4)を頂点とする四角形を描く

(3)　様々な形の描画2

　円弧の描画にはarcを用いる。引数は、中心の位置(x, y)と高さhightと幅width、開始角度、終了角度。角度はラジアンで表す。角度の基準はx軸のプラス向きを0 radとして、時計回りに角度を表現する。また、PIは円周率π、HALF_PIはπ/2, TWO_PIは2π、QUARTER_PIはπ/4を示す定数であり、processingではあらかじめ値が決められている。度をラジアンに変換するには、radians(角度)を用いる。

size(480, 120);
arc(90, 60, 80, 80, 0, HALF_PI);
arc(190, 60, 80, 80, 0, PI+HALF_PI);
arc(290, 60, 80, 80, radians(180),TWO_PI+ HALF_PI);
arc(390, 60, 80, 80, QUARTER_PI, PI*5/4);

※ 参考 ellipseやrectの描画法の別の指定の仕方。
・rectで中心位置と高さ、幅を指定して描画
 rectMode(CENTER);
 rect(50, 50, 80, 80);

・rectで長方形の対角線を指定して描画

 rectMode(CORNERS);
 rect(10, 10, 90, 90);
出力は上と同じ

・ellipseで外接する長方形の左上の点と幅と高さを指定して描画

ellipseMode(CORNER);
ellipse(30, 10, 40, 80);

・ellipseで外接する長方形の左上の点と右下の点を指定して描画

ellipseMode(CORNERS);
ellipse(30, 10, 70, 90);
出力は上と同じ。

(3)　線の太さや角の形
　描画する線の太さや端の形を指定します。太さを指定するのは、
strokeWeight(太さ);
　です。太さはpixel値で決めます。デフォルトは1です。
　線の端の形は、
strokeCap(形);
　で示します。形は、SQUARE:直角, PROJECT:拡張された端、ROUNDは丸い端で指定します。デフォルトはROUNDです。
　さらに四角などの角で線をどうつなぐかは、
strokeJoin(線の接続する形);
　です。線の接続する形は、ROUND:丸い角, BEVEL: 斜めの角, MITER: 直角で指定します。デフォルトはMITERです。

　細かな説明よりも実際に実行してみましょう。どの命令がどの図に対応しているか見ながら線の特徴をつかんでください。//の後に続く文字はコメントです。実際の実行結果には影響しません。

(4)　図の重なり
　次のプログラムを入力して実行してみてください。

rectMode(CORNERS);
rect(30, 10, 70, 90);
ellipseMode(CORNERS);
ellipse(30, 10, 70, 90);
実行結果

一方、命令の順番を入れ替えると

ellipseMode(CORNERS);
ellipse(30, 10, 70, 90);
rectMode(CORNERS);
rect(30, 10, 70, 90);
実行結果

　と、楕円が消えてしまいます。これは、2番目のプログラムは楕円を先に描いてから四角を描いているので、楕円が四角の下に入ってしまい消えているのです。

(5)　図形を塗りつぶす(fill)
　描画する図形を塗りつぶす場合、その色を図形を描く命令の前に
fill(明るさ); 　または　fill(赤の強度, 緑の強度，青の強度);
　で指定します。引数が一つの場合は0-255の値で灰色の明るさを指定します。0が黒、255が白です。引数が3つの場合、RGBの色の強さで色を指定します。例えば、fill(255,0,0);なら赤、fill(0,0,255)なら青、fill(255,255,0)なら黄色です。塗りつぶしなしの場合には、
noFill();
と指定します。

　背景の色を指定するには、
background(明るさ); 　または　background(赤の強度, 緑の強度，青の強度);
 とします。さて、これらを踏まえて次のプログラムを実行してみましょう。

最後に大きな四角を描いているのですが、塗りつぶしなしなので中に入った円と四角も消えていません。

※　色選択ツールで色の指定。メニューのツール→色選択をクリックすると、次の画面が現れます。このツール画面で色を選択してRGBの値を読み取ることができます。また、コピーボタンを押すと色の16進数表記(下の図では#FEFF1C)をコピーできます。これを色のRGBの3つの引数の代わりにすることができます。例 fill(#FEFF1C); 

(6)　枠線の色指定(stroke)
　(5)では図形の塗りつぶしを指定しましたが、今度は図形の枠線です。枠線の色は、
stroke(明るさ); 　または、　stroke(赤の明るさ, 緑の明るさ，青の明るさ);
　で指定します。枠線を書かない場合にはnoStroke();とします。

(7)　透明度の設定（参考: https://processing.org/tutorials/color/)
　fillには4番目の引数として透明度を設定することができます。0で完全に透明、255では後ろがまったく透けないとなります。白黒の上に透明度を変えて赤い帯を描画してみます。

size(200,210);
background(0);
fill(255);
noStroke();
rect(0,0,100,210);
fill(255,0,0,255);      // 透明度0
rect(0,10,200,40);    // 一番上の赤い帯を描く
fill(255,0,0,191);      // 透明度25%　（255-191)/255*100 = 25.1%
rect(0,60,200,40);    // 2番目の赤い帯
fill(255,0,0,127);       // 透明度50%　（255-127)/255*100 = 50.2%
rect(0,110,200,40);   // 3番目の赤い帯
fill(255,0,0,63);         //透明度75%　（255-63)/255*100 = 75.3%
rect(0,160,200,40);

演習1　図形の重なりに注意して下記の様な絵を完成させよ。なお、ウィンドウの大きさはsize(130, 120); とし、顔の輪郭は円でellipse(60, 60, 100,100); とすること。また、口は円弧arcを用いること。

演習2　下記の様な絵を完成させよ。なお、ウィンドウの大きさはsize(130, 120); とし、顔の輪郭は円でellipse(60, 60, 100,100); とすること。

(8) 複数の点をつなぎ合わせる(vertex)
　もう少し複雑な図形を作ることを考えましょう。vertex(x1,y1)では各点の座標を直線でつないでいくことができます。使い方はbeginShape();で開始して、vertex(x,y)でつなぐ座標を指定し、最後にendShape(CLOSE); で終わりです。CLOSEを省略すると図形は閉じません。星印を描いてみましょう。星印を方眼紙の上に描くと次のようになります。そこから座標を読み取っていきます。

プログラムは次のようになります。

実行結果は次の通り。

演習3　次の図の様なYをvertex命令を使って描きなさい。