![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2019-05-21T17:50:55+09:00","default:qua","qua") #author("2019-05-21T17:51:25+09:00","default:qua","qua") #navi(Processing/2.ちょっと発展) * 2-10. 図形の再利用 [#w1212a53] Processingでは図形を再利用する仕組みが用意されている。 「繰り返し」のところで五角形を描いたが、それを少し変更すると星型が描かれる。 int i, th=0; size( 200, 200 ); beginShape(); for( i=0; i<5; i++ ){ vertex(50 + 20 * sin(radians(th)), 130 - 20 * cos(radians(th))); th = th + 144; } endShape(CLOSE); これは点(50,130)を中心とする星形を描くスケッチであるが、これを変更して、(100,100), (150,30), (50, 130)の3か所に星を描くことにする。 同じことを3回書くこともできるが、Shapeを用いれば、次のスケッチのように、図形を再利用できる。 PShape star;で、starという名前のShapeを使うことを宣言する。 createShape()でShapeを用意する。 その下の6行の内容は、star.を加えることで、画面ではなくShapeに描くことを指定していること、中心を(0,0)にしていること以外は上とほぼ同様である。 shape(star, 100, 100)でShapeを画面の点100,100に描く。 int i, th=0; PShape star; size( 200, 200 ); star=createShape(); star.beginShape(); for( i=0; i<5; i++ ){ star.vertex(20 * sin(radians(th)), -20 * cos(radians(th))); th = th + 144; } star.endShape(CLOSE); shape(star, 100, 100); shape(star, 150, 30); shape(star, 50, 130); 図形を拡大、縮小、回転したり、色を変えたりすることもできる。 以下の例では、2番目の星を36度回転し、3番目の星を線を赤で、塗りつぶしを黄色で描く。なお、resetMatrixは拡大、縮小、回転を元に戻す。 int i, th=0; PShape star; size( 200, 200 ); star=createShape(); star.beginShape(); for( i=0; i<5; i++ ){ star.vertex(20 * sin(radians(th)), -20 * cos(radians(th))); th = th + 144; } star.endShape(CLOSE); shape(star, 100, 100); star.rotate(radians(36)); shape(star, 150, 30); star.resetMatrix(); star.setStroke(color(255,0,0)); star.setFill(color(255,255,0)); shape(star, 50, 130); いくつかの図形を組み合わせて一つのShapeを作ることもできる。 次の例では、星(star)と三角形(tri)を組み合わせた図形(star_tri)を作る。 tri = createShape(TRIANGLE, 20, 0, 40, 7, 42, -5); は、3点(20,0), (40,7), (42,-5)を頂点とする三角形のShapeを作る。 star_tri=createShape(GROUP); でいくつかのShapeを組み合わせて新しいShapeを作る「入れ物」を用意する。 star_tri.addChild(...); でstar_triに( )内のShapeを追加する。 int i, th=0; PShape star, tri, star_tri; size( 200, 200 ); star=createShape(); star.beginShape(); for( i=0; i<5; i++ ){ star.vertex(20 * sin(radians(th)), -20 * cos(radians(th))); th = th + 144; } star.endShape(CLOSE); tri = createShape(TRIANGLE, 20, 0, 40, 7, 42, -5); star_tri=createShape(GROUP); star_tri.addChild(star); star_tri.addChild(tri); shape(star_tri, 100, 100); star.rotate(radians(36)); shape(star, 150, 30); star.setStroke(color(255,0,0)); star.setFill(color(255,255,0)); shape(star, 50, 130); #ref(http://www.ist.aichi-pu.ac.jp/lab/qua/~qua/pbl/processing/img/2-10-1.png) createShapeでは[[いろいろな図形>Processing/1.はじめに/3.いろいろな図形]]で示した簡単な図形を作成することができる。 createShapeでは[[いろいろな図形>Processing/1.はじめに/5.いろいろな図形]]で示した簡単な図形を作成することができる。 |createShape(POINT,x,y);|点(x,y)| |createShape(LINE,x1,y1,x2,y2);|2点(x1,y1), (x2,y2)を結ぶ線分| |createShape(TRIANGLE,x1,y1,x2,y2,x3,y3);|3点(x1,y1), (x2,y2), (x3,y3)を頂点とする三角形| |createShape(QUAD,x1,y1,x2,y2,x3,y3,x4,y4);|4点(x1,y1), (x2,y2), (x3,y3), (x4,y4)を頂点とする四角形| |createShape(RECT,x1,y1,x2,y2);|2点(x1,y1), (x2,y2)を対角線とする長方形| |createShape(ELLIPSE,x,y,dx,dy);|中心(x,y)、x方向の直径dx、y方向の直径dyの楕円| |createShape(ARC,x,y,dx,dy,a1,a2,mode);|中心(x,y)、x方向の直径dx、y方向の直径dy、開始角a1、終了角a2の楕円弧。| |createShape(BOX, w, h, d);|直方体| |createShape(SPHERE, r);|球|
