Processing/1.はじめに/7.線の描き方の変更点

追加された行はこの色です。
削除された行はこの色です。
Processing/1.はじめに/7.線の描き方へ行く。
Processing/1.はじめに/7.線の描き方の差分を削除

#author("2019-05-21T23:44:04+09:00","default:qua","qua")
#author("2019-05-21T23:44:48+09:00","default:qua","qua")
#navi(Processing/1.はじめに)
*1-7 線の描き方 [#cf96f97b]

PrcsessingではstrokeWidth()で線の幅を指定できる。()の中に線の幅をピクセル単位で記す。何も指定しなければ、幅は1であるとみなされる。 
線の幅が太くなると、先端や折れ目での線の形状が気になる。先端の形状は、strokeCap()で、折れ目での形状は、strokeJoin()で指定する。 
 

- 線の先端の形状
|strokeCap(ROUND);|先端の座標を中心とする半円形|
|strokeCap(SQUARE);|先端の座標で切り落とす|
|strokeCap(PROJECT);|先端を線の幅の半分だけ伸ばす|
 
 size(200,200); 
 strokeWeight(20); 
 strokeCap(ROUND); 
 line(50,50,150,50); 
 strokeCap(SQUARE); 
 line(50,100,150,100); 
 strokeCap(PROJECT); 
 line(50,150,150,150); 
 strokeWeight(1); 
 stroke(255,255,0); 
 line(150,10,150,190); 

#ref(http://www.ist.aichi-pu.ac.jp/lab/qua/~qua/pbl/processing/img/1-7-1.png)
 
上から、strokeCapがROUND, SQUARE, PROJECTの線が描かれている。すべての線の始点のx座標も終点のx座標も等しい。終点のx座標は黄色の縦線で示されている。 

- 線の折れ目の形状
|strokeJoin(MITER);|継ぎ目は尖らせる|
|strokeJoin(BEVEL);|継ぎ目を直線で切り取る|
|strokeJoin(ROUND);|継ぎ目を丸める|

 size(350,200); 
 noFill(); 
 strokeWeight(20); 
 strokeJoin(MITER); 
 triangle(50,50,100,100,50,150); 
 strokeJoin(BEVEL); 
 triangle(150,50,200,100,150,150); 
 strokeJoin(ROUND); 
 triangle(250,50,300,100,250,150); 
 strokeWeight(1); 
 stroke(255,255,0); 
 triangle(50,50,100,100,50,150); 
 triangle(150,50,200,100,150,150); 
 triangle(250,50,300,100,250,150); 

#ref(http://www.ist.aichi-pu.ac.jp/lab/qua/~qua/pbl/processing/img/1-7-2.png)

左からstrokeJoinがMITER, BEVLE, ROUNDの三角形が黒い太線で描かれている。黄色の三角形は同じ座標の線を細線で描いたものである。

Processing/1.はじめに/7.線の描き方 の変更点

Processing/1.はじめに/7.線の描き方の変更点