前へ 上へ 次へ

Processing入門3

いろいろな図形

ところで、「塗らない」という命令があるからには、逆に「輪郭線を引かない」という意味の noStroke() という命令もある。

 noStroke();
 rect(0,0,50,50);

逆に輪郭を引くのは stroke だが、これは fill と同様に色を指定する。

 noStroke();
 fill(200,0,0);
 rect(0,0,50,50);
 stroke(100);
 fill(0,200,100,100);
 rect(30,30,50,50);

fig8.jpg

実は stroke は line にも効果をおよぼす

 stroke(200,0,0);
 rect(30,30,50,50);
 line(0,0,99,99);

ついでなので、線の太さを変える命令も見ておこうstrokeWeight() は、それ以降の線の太さをピクセル単位で指定する。

 strokeWeight(5);
 stroke(200,0,0);
 rect(30,30,50,50);
 strokeWeight(20);
 line(0,0,99,99);

fig9.jpg

noStroke()

図形の輪郭線を描かない

stroke(...)

輪郭線の色を指定。指定のしかたは fill と同じ

strokeWeight(width)

線の太さを指定。太さ(width)はピクセル単位

直線と長方形以外の図形も見ておこう。

点

point(x,y)

三角形

triangle(x1,y1,x2,y2,x3,y3)

任意の四角形

quad(x1,y1,x2,y2,x3,y3,x4,y4)

楕円

ellipse(x,y,width,height)

円弧

arc(x,y,width,height,start,stop)

たとえば、三角形なら三点の座標を指定、任意の四角なら四点の座標を指定する。

 triangle(10,10,30,30,20,40);
 fill(0,200,200);
 quad(20,40,50,30,70,60,40,100);

ちなみに、四角形はねじれていてもかまわない

 quad(20,40,50,30,40,100,70,60);

円関係はちょっと複雑で、中心座標と幅と高さで楕円を指定する。幅と高さを同じにすれば円になる。

 ellipse(50,50,80,80);

更に円弧は始点と終点の角度を指定する。ただし、角度は左向きを0として、右回りに測り、単位は「ラジアン」。ラジアンに慣れていない人は多いと思うが、これは角度を半径1の円弧の周囲長で表すもの。360度が円周率πの二倍になる。円周率は3.141592...だが、その数字の代わりに PI という名前が使える。したがって、下半円は

 arc(50,50,80,80,0,PI);

上半円は 角度を-πから0までとして(始点の角度は、終点より小さくなくてはならない))

 arc(50,50,80,80,-PI,0);

fig10.jpg

そろそろ、背景が薄い灰色に塗られているのが気になりだしたかもしれない。背景の色は background() という命令で指定できる。色の指定方法は fill と同様。たとえば、背景が青く塗られた領域の真ん中に半径25の白い円を描くプログラムは次のようになる。

 background(0,0,255);
 ellipse(50,50,50,50);

fig11.jpg

background(...)

キャンバスの背景色を指定。指定のしかたは fill と同じ

これだけわかれば、簡単な絵なら描くことができる。たとえば以下のプログラムは簡単な絵を描く。

 size(200,200);
 background(255);
 noStroke();
 fill(200,150,10);
 ellipse(100,150,100,80);
 ellipse(100,110,80,70);
 fill(150);
 rect(90,20,20,90);
 rect(80,10,40,20);
 fill(100);
 ellipse(100,130,30,30);
 stroke(0);
 line(93,20,93,160);
 line(97,20,97,160);
 line(101,20,101,160);
 line(105,20,105,160);

fig12.jpg

書き方の注意

ここまではあまり気にせずに書いてきたが、たぶん気になる人はすでに「コンマのあとは空白をいれていいんだろうか」などなど、細かいところが気になっていると思う。実は、あまり気にしなくてよい。空白は適宜いれてかまわない。たとえば、次のように書いてもよい。

      line  (  0  ,  0  ,  99  ,  99  )   ;

それどころか、途中で改行したり、行を空けたりしても大丈夫。

      line
      (
      
         0  ,
         0  ,
         99  ,
         99
         )
         ;

ただし、line や 99 といったひとまとまりの単語の途中に空白をいれてはいけない(入れてもいいプログラミング言語もあるが、processingでは許されていないようだ)。

また、プログラム中に注釈(コメント)を書きたいときは、// を使う。// から改行までがコメントとみなされる(この場合は改行はコメント終了の意味になるので注意)。たとえば、以下のように書いてよい

 //　簡単なプログラム
 //　線を引く
 
   line(0,0,99,99); //(0,0)から(99,99)まで

もっとも、コメントを日本語で書くと、たまに変なことになるかもしれない。

練習問題

 ここまでの知識を使って簡単な絵を描くプログラムを作れ

前へ 上へ 次へ