第2週： 繰り返しと場合分け

2.1 図形の出力

数値や文字だけでなく、図形を出力することもできます。前回の練習用プログラムでは図形を表示する部分がありませんので、もう一つ別の練習用プログラムを使います。

まず、前回と同じように

    /pub/sfc/ipl/1bc/SfcTemplate2.java
    /pub/sfc/ipl/1bc/SfcTemplate2.html

% cd /pub/sfc/ipl/1bc
% cp SfcTemplate2.java SfcTemplate2.html 自分の作業ディレクトリ
%

コピーできたら、前回の手順を思い出して、SfcTemplate2.java をコンパイルし、SfcTemplate2.html を表示してみましょう。どのようなウィンドウが出てきましたか？

直線を描く

手始めに直線を描いてみましょう。まず、Line.java と Line.html というファイルにコピーします。

% cd 自分の作業ディレクトリ % cp SfcTemplate2.java Line.java % cp SfcTemplate2.html Line.html %

変更する個所は前回と同じです。

public class Line extends Applet implements ActionListener {

void sfcDraw(Graphics g) { //ここに自分のプログラムを書く g.drawLine(0,0,300,300); }

<applet code="Line.class" width=300 height=380>

• drawLine() は直線を描くメソッドです。その前の gは変数ですが、この意味は次回以後に勉強します。
• sfcOutput() では扱うデータは1個の文字列だけでしたが、drawLine() では4個の数字を扱います。
• 4個の数字はコンマで区切って書き、順に始点のX座標、始点のY座標、終点のX座標、終点のY座標を指定します。
• 座標軸は数学と違い、左上が原点でX軸は右へ、Y軸は下へ増えていきます。SfcTemplate2 では縦横300ピクセルの領域が用意されていますので、左上が(0,0)、右上が(300,0)、左下が(0,300)、右下が(300,300)になります。

Line.java を変更し、次のような線を描くようにしなさい。

1. 水平な線
2. 垂直な線
3. 左下隅と右上隅を結ぶ線

2.3 for 文

少しずつ違うことを何回も繰り返して行いたい場合があります。例えば、次のように線を11本描くことを考えてみましょう。

これは、次のように drawLine を11回書くこともできます。

      g.drawLine(0, 0, 300, 0);
      g.drawLine(0, 0, 300, 30);
      g.drawLine(0, 0, 300, 60);
      g.drawLine(0, 0, 300, 90);
      g.drawLine(0, 0, 300, 120);
      g.drawLine(0, 0, 300, 150);
      g.drawLine(0, 0, 300, 180);
      g.drawLine(0, 0, 300, 210);
      g.drawLine(0, 0, 300, 240);
      g.drawLine(0, 0, 300, 270);
      g.drawLine(0, 0, 300, 300);

上の11本の線を描くには Line.java を次のように変更します。

45 46 47 48 49 50

void sfcDraw(Graphics g) { //ここに自分のプログラムを書く for (int y = 0; y <= 300; y = y + 30) { // x = 0, 30, 60, …, 300 g.drawLine(0, 0, 300, y); } }

(青字の部分は解説です。左端の数字は行数を数えやすいように付けてあります。)

for が繰り返しをするための命令です。この場合は次のような繰り返しになります。

• int y = 0
  • 変数宣言 int y と、代入 y = 0 を同時に書いています。
  • 繰り返しの最初に1回だけ実行されます。
• y <= 300
  • <= は≦の意味です。
  • 変数 y の値と 300 を比べて、y の方が小さいか等しいという条件を表しています。
  • この条件が成り立たたなくなると、繰り返しが終了します。
• y = y + 30
  • 変数 y の現在の値に 30 を足して、結果を再び yに記憶させます。結局、 y の値が 30 増えることになります。
  • 1回繰り返すごとに実行されます。
• 47行目の最後の '{' と、49行目の '}' に挟まれた部分
  • 繰り返しの本体です。
  • 繰り返すごとに y の値が 0, 30, 60, 90, …と変化するので、少しずつずれた線が引けます。

代入や for のようなひとまとまりの命令を文(statement)と呼びます。いくつかの文を '{' と'}' でまとめたものをブロック(block)と呼びます。

for 文の書き方は正確には次のようになります。

     for ( 初期設定; 継続条件; 増分設定 ) {
         繰り返しブロック
     }

• 初期設定は、繰り返しを始めるときの変数の値などを設定します。
• 継続条件が成り立っていると、繰り返しブロックを実行します。
• 繰り返しブロックの実行が1回終わるたびに、増分設定の部分を実行し、次の繰り返しに向けて、変数の値などを変更します。
• 継続条件が成り立っている限り、繰り返しブロックと増分設定が実行され続けます。
• 継続条件が成り立たなくなると、for 文の実行が終了し、次の文の実行へ移ります。

2.4 練習問題

Line.java を変更して、次のような図を描くようにしてみましょう。

1. 
2. 
3. 
   (ヒント: for 文を2回使います)

2.5 円を描く

% cd 自分の作業ディレクトリ
% cp SfcTemplate2.java Circle.java
% cp SfcTemplate2.html Circle.html
%

円（または楕円）を描くメソッドは drawOval()、中を塗り潰した円（または楕円）を描くメソッドは fillOval() です。括弧の中には4個の数字を書き、それによって次のように楕円が描かれます。

1. 最初の2個の数字を x 座標、y 座標として点を決めます。
2. その点から、次の2個の数字を横幅と高さとして、長方形を考えます。
3. その長方形に内接する楕円が描かれます。

public class Circle extends Applet implements ActionListener {

    void sfcDraw(Graphics g) {
	//ここに自分のプログラムを書く
	g.drawOval(100, 100, 50, 50);
	g.fillOval(150, 200, 100, 50);
    }

<applet code="Circle.class" width=300 height=380>

2.6 練習問題

2.7 二重の繰り返し

次のように100個の円を描きたいときはどうすればいいでしょうか。

まず左端の縦一列から描くとします。Y座標が順に増えていって、下までいくと、次の列はX座標を30増やして、Y座標はまた0から始めなければなりません。

二重の繰り返しを使って、次のような図を描くプログラムを作りましょう。

縦10個、横10個並べた円のうち、対角線上にあるものだけ中を塗り潰すことにします。

対角線上にあるということは、X座標とY座標の値が等しいということですから、その時だけ別の処理をするようにします。

Circle.java を次のように変更します。

45 46 47 48 49 50 51 52 53 54 55 56

void sfcDraw(Graphics g) { //ここに自分のプログラムを書く for (int x = 0; x < 300; x = x + 30) { for (int y = 0; y < 300; y = y + 30) { if ( x == y ) { // x 座標と y 座標が等しいなら g.fillOval(x, y, 30, 30); } else { g.drawOval(x, y, 30, 30); } } } }

if が場合分けをするための命令です。この場合は次のような場合分けになります。

• x == y
  • 場合分けをするための条件です。
  • == は両側の式の値が等しいか比較します。代入 = と間違いやすいので注意しましょう。
• 49行目の最後の '{' と、51行目の最初の '}' に挟まれた部分
  • if の条件が成り立ったときに実行されるブロックです。
  • 塗り潰した円を描きます。
• else
  • 次に成り立たないときのブロックが来ることを示します。
  • else 以下を省略することもできます。その場合、条件が成り立たないと何も実行されません。
• 51行目の最後の '{' と、53行目の最初の '}' に挟まれた部分
  • if の条件が成り立なかったときに実行されるブロックです。
  • 塗り潰さない円を描きます。

2.10 練習問題

次のように変更すると、どのような図形を描くか予想しましょう。

45 46 47 48 49 50 51 52 53 54

void sfcDraw(Graphics g) { //ここに自分のプログラムを書く for (int x = 0; x < 300; x = x + 30) { for (int y = 0; y < 300; y = y + 30) { if ( x == y ) { g.fillOval(x, y, 30, 30); } } } }

次のような図を描くプログラムを作りなさい。

1. 
2. 
   2番はif 文を使っても使わなくてもできます。余裕のある人は両方考えてみましょう。

2.12 おまけ