基本の操作:図形に色を塗る/塗らない

Fri, 15 Jan 2016 18:11:46 JST (3026d)
Top > 基本の操作:図形に色を塗る/塗らない

色を塗る:入力するコード

以下のコードを入力してください。

size(200, 200);

fill(255, 0, 255);

ellipse(50, 50, 80, 80);

色を塗る:結果

以下のような画面がでたらOKです。
fill_sample.png

色を塗る:解説

1行目と3行目は基本の図形:円と同様です。今回は、「ellipse(50, 50, 280, 280)」で円を描く前に「fill(255, 0, 255)」というものを呼び出しています。
この「fill(255, 0, 255)」があると、その後に描かれた図形の中の色はすべてこれで指定された色になります。
 
塗られる色は()内の数字で決まります。これは「RGB」という色の表現方法を用いています。
「RGB」は赤(Red)、緑(Green)、青(Blue)の頭文字をとったもので、赤、緑、青の「三原色」の強さによって様々な色を表現することができます。
 
「fill(255, 0, 255)」の中身を見ていきましょう。
()内の3つの数字は、左から順にそれぞれ赤、緑、青の強さを示しています。「0」が最も弱く(無色)、「255」が最も強くなります。したがって、この場合は「赤と青が強く、緑は弱い(無色)」色を指しています。
 
赤と青を混ぜると…そう、紫色になりますね。よって円の中は紫色になったのです。
 
※なお、「fill」を特に指定しない場合、自動的に図形の中は白になります。

色を塗らない(透明にする):入力するコード

以下のコードを入力してください。
※「f」でなく「F」であることに注意してください。

size(200, 200);

noFill(255, 0, 255);

ellipse(50, 50, 80, 80);

色を塗らない(透明にする):結果

以下のような画面がでたらOKです。
noFill_sample.png

色を塗らない(透明にする):解説

「noFill()」を用いると、その後に描かれる図形の中はすべて無色になります。