19 3!! (+) (>) (++) (+=) for while 3.1!! (20, 20) (1)(Blocks1.java) import javax.swing.japplet; import java.awt.graphics;

(1)

19

第

3

章

同じ図形を繰り返し描画してみよう

!!

重要 ¶ ³ • 変数... 値を入れる入れもの • 型... データの種類 • 演算子 – 算術演算子(+) – 比較演算子(>) – インクリメント演算子(++) – 代入演算子(+=) • 繰り返し – for文 – while文 µ ´

3.1 いくつかのブロックを書いてみよう

!!

例題 3.1.1 幅50画素，高さ20画素の長方形を20画素の幅をおいて5個横に並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする． 2 プログラム 3.1.1 長方形を並べて描画するプログラム(1)(Blocks1.java) import javax.swing.JApplet; import java.awt.Graphics;

public class Blocks1 extends JApplet{

public void paint(Graphics g){ 5

g.drawRect( 20, 20, 50, 20); g.drawRect( 90, 20, 50, 20); g.drawRect(160, 20, 50, 20); g.drawRect(230, 20, 50, 20); g.drawRect(300, 20, 50, 20); 10 } } 2 プログラム3.1.1では，6行目から10行目までの処理で，幅50画素，高さ20 画素の長方形を順番に(20, 20),

(2)

(90, 20), (160, 20), (230, 20), (300, 20)の位置に描画している．このようにプログラムに書いた式文を順番に処理する手続きを逐次処理と言う．

O

_x

y

50

100

150

200

250

300

350

図3.1 横に並んだ5個の長方形例題 3.1.2 幅50画素，高さ20画素の長方形を20画素の幅をおいて5個縦に並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする． 2 例題 3.1.3 幅50画素，高さ10画素の長方形を10画素の幅をおいて5個縦に並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする． 2 例題 3.1.4 幅50画素，高さ10画素の長方形を10画素の幅をおいて10個縦に並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする． 2 規則的に値が変化するだけで，同じ処理を何度も繰り返して行う場合，例題3.1.2のように何度も値を変えて同じ文をプログラム中に書くことは非常に手間がかかる．また，例題3.1.3のように規則が微妙に変化した場合も，例題3.1.2 の修正作業が煩雑になり，バグを発生させる要因となる．そこで，変数を利用することで，これらの手間の一部が解消できる．例題 3.1.5 変数を用いて，プログラム3.1.1を書き直せ． 2

(3)

3.1 いくつかのブロックを書いてみよう!! 21

プログラム 3.1.2 長方形を並べて描画するプログラム(2)(Blocks2.java)

import javax.swing.JApplet; import java.awt.Graphics;

int w = 50, h = 20, x = 20, y = 20, space = 20; g.drawRect(x, y, w, h); x = x + w + space; 10 g.drawRect(x, y, w, h); x = x + w + space; g.drawRect(x, y, w, h); 15 x = x + w + space; g.drawRect(x, y, w, h); x = x + w + space; g.drawRect(x, y, w, h); 20 } } 2 変数(variable)とは，データを入れる入れ物の役割をする．Javaは，変数に特定の型のデータだけを格納することができる型付き言語である．型(type)とは，データの種類を表すものである．型には，1, 12, -50などの整数を表

すint整数型，1.23, -10.5などの実数を表すfloat, double浮動小数点型などがある．

プログラム中で変数を利用する場合には，変数名に対してどのような型であるか宣言(declaration)する必要がある．宣言は変数の性質を指定するもので次のように定義する． ¨ § ¥ ¦ 型指定子変数名; ¨ § ¥ ¦ 型指定子変数名, 変数名, .... ; 型指定子には，変数が保持する対象の種類を表すデータ型(int, doubleなど)を指定する．また，変数名は，英字と数字とアンダースコア( )だけからなり，先頭の文字は数字以外の文字を使用しなければならない． int w; double s, s1, s_x;

変数名はcamel case を使うのが慣習である．camel caseとは，先頭の単語は小文字，単語の切れ目の最初の文

字を大文字にする命名規則である．変数への値の代入は，次のように行なう．ここで，=は，式の結果を変数に代入 (assignment)することを表し，等しいという意味ではない． ¨ § ¥ ¦ 変数=式; w = 50; 上式は，wという整数型変数に50という値を代入するという意味である．変数の宣言と同時に，値の初期化を行なうこともできる．Javaの場合には，初期化されていない変数があるとコン

(4)

パイラからエラーが出される． int w = 50; 数値の計算には，四則演算を行う算術演算子を用いる．算術演算子は，和，積などの算術演算を行なう演算子であり，Javaでは基本的な算術演算子として，表F.3に示す演算子が用意されている．プログラム3.1.1を変数を用いて書き直す場合，前に書いた長方形の左上の位置(x, y)に対して，次に書く長方形の左上の位置が(x +長方形の移動距離, y) = (x +長方形の幅+長方形の間隔, y)になることを利用する．長方形の幅を w，長方形間の間隔をspaceとすると，次に描画する長方形の左上の位置は，x + (w + space)となる．プログラム 10行目の処理は，変数x(値20)とw, space(それぞれ値50と20)を加えたものを変数xに代入するという意味であり，代入後のxの値は90となる．例題 3.1.6 図3.2(a)に示すgif画像aを位置(10, 10)に描画するプログラムを作成せよ． 2 a_{ここで用いる画像は「牛飼いとアイコンの部屋」(http://ushikai.com/index.htm) の画像を利用している．各自，画像を自} 作するか，web 上から入手可能な画像をその利用条件を理解した上で使用すること．プログラム 3.1.3 画像の描画するプログラム(1)(ImagePut.java) import javax.swing.JApplet; import javax.swing.ImageIcon; import java.awt.Graphics;

public class ImagePut extends JApplet{ 5

ImageIcon icon;

public void init(){

icon = new ImageIcon(getImage(getCodeBase(), "den1s.gif"));

} 10

public void paint(Graphics g){

icon.paintIcon(this, g, 10, 10); } } 15 2 (a) 画像 (den1s.gif) (b) プログラム 3.1.3 の実行結果 (c) プログラム 3.1.4 の実行結果図3.2 画像表示 appletに表示するための画像は，プログラム3.1.3の9行目に示すように，ImageIconクラスのオブジェクトとし

(5)

3.1 いくつかのブロックを書いてみよう!! 23

て扱うことができる．initメソッドは，appletが実行される際に，最初に一度実行される初期化メソッドである．

画像の取得には，絶対URL(Uniform Resource Locator)とそのURLから見た画像ファイルの位置を指定する*1_．

getCodeBaseメソッドは，applet自身のURLの基底URL *2_{を返すメソッドである．この}_ImageIcon_{クラスのオ}

ブジェクトを描画するために，paintIconメソッドを用いる．thisは，自分自身のオブジェクトであり，ここでの thisは，appletを指す．例題 3.1.7 図3.2(a)に示すgif画像を位置(10, 10)に描画し，その画像の周囲を枠で囲うプログラムを作成せよ． 2 プログラム 3.1.4 画像の描画するプログラム(2)(ImagePutBox.java) import javax.swing.JApplet; import javax.swing.ImageIcon; import java.awt.Graphics;

public class ImagePutBox extends JApplet{ 5

ImageIcon icon; int w, h;

public void init(){

icon = new ImageIcon(getImage(getCodeBase(), "den1s.gif")); 10

w = icon.getIconWidth(); h = icon.getIconHeight();

}

icon.paintIcon(this, g, 10, 10); g.drawRect(10, 10, w, h); } } 2 例題 3.1.8 図3.2(a)に示すgif画像を縦に等間隔で5個並べて表示するプログラムを作成せよ． 2 例題 3.1.9 図3.2(a)に示すgif画像を枠で囲み，縦に等間隔で5個並べて表示するプログラムを作成せよ． 2 例題 3.1.10 変数を用いて，幅50画素，高さ20画素の長方形を20画素の幅をおいて10個縦に並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする． 2 例題 3.1.11 変数を用いて，幅50画素，高さ10画素の長方形を10画素の幅をおいて10個縦に並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする． 2 *1_{例えば，http://www.img.cs.titech.ac.jp/˜rocky/lecture/java/src/den1s.gif} _{に画像があったとする．絶対} _URL _を "http://www.img.cs.titech.ac.jp/˜rocky/lecture/java/src/" で指定した場合，そこから見た画像は，"den1s.gif"である．また，絶対 URL を"http://www.img.cs.titech.ac.jp/˜rocky/lecture/java/" で指定した場合，そこからの画像位置は， "./src/den1s.gif"となる．

*2_{例えば，http://www.img.cs.titech.ac.jp/˜rocky/lecture/java/src/imageput.html で applet を実行した場合，基底 URL は，}

(6)

例題 3.1.12 変数を用いて，図3.2(a)に示すgif画像を枠で囲み横に等間隔で10個並べて表示するプログ

ラムを作成せよ． 2

3.2 繰り返しブロックを書いてみよう

!!

変数を用いることで，値の変化に対して修正の手間を省くことができたが，処理数が変化した場合には，同じ文を何

度もプログラム中に書く必要がある．Javaでは，このような繰り返し処理を行う仕組みとして，while文，for文，

do-while文がある．ここでは，for文とwhile文について説明を行う．

3.2.1 ある回数繰り返し

例題 3.2.1 for文を用いて，プログラム3.1.2を書き直せ． 2

プログラム 3.2.1 長方形を並べて描画するプログラム(3)(Blocks3.java)

int w = 50, h = 20, x = 20, y = 20, space = 20, i; for(i = 0; i < 5; i++){ g.drawRect(x, y, w, h); x = x + w + space; 10 } } } 2

プログラム3.2.1は，for文を用いて繰り返し処理を行うプログラムである．for文では，for文の後に続く3つの

式によって，繰り返し処理の動作を制御することができる． for文 ¶ ³ ¨ § ¥ ¦ for (初期設定;評価式; 更新式)文初期設定: for文に入る前に一度だけ実行される評価式: 評価式が真の間，処理を繰り返す更新式: for文のブロックの処理を実行する度に，更新式によって値が更新される．文評価式 true false 更新式初期設定図3.3 for文の構造 µ ´ 初期設定は，for文に入る前に一度だけ実行される文であり評価式で用いられることが多いループ変数などを初期化

(7)

3.2 繰り返しブロックを書いてみよう!! 25 する．for文では，評価式が満たされている間，ブロックの内の処理を繰り返し行う．また，ブロック内の処理が実行されるたびに更新式が処理される． for(i = 0; i < 5; i++){ 処理; } 上の例では，変数iを繰り返しの回数を数えるループ変数として用いている．初期設定でループ変数を0に初期化し，ブロック内の処理が行われるたびに更新式にしたがってループ変数iが1だけインクリメントされる．この繰り返し処理は，評価式が満たされている間，つまり，iが5未満の間繰り返される．評価式で用いられている<は，値の大

小関係を比較する関係演算子であり，iが5未満であれば，式の結果は真(true)，5以上であれば偽(false)となる．

他の関係演算子を表F.4に示す．更新文で用いられている++は，整数値を1だけ増やす演算を行うインクリメント演算子である．Javaの場合，ループ変数は0からはじめることが多い．例題 3.2.2 for文を用いて幅50画素，高さ20画素の長方形を20画素の幅をおいて5個縦に並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする． 2 例題 3.2.3 for文を用いて幅50画素，高さ10画素の長方形を10画素の幅をおいて10個縦に並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする． 2

例題 3.2.4 for文を用いて，図3.2(a)に示すgif画像を枠で囲み横に等間隔で5 個並べて表示するプログ

ラムを作成せよ． 2

3.2.2 条件を満たす間繰り返し

例題 3.2.5 幅50画素，高さ20画素の長方形を20画素の幅をおいて描画範囲いっぱいに横に並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする．また，描画範囲は，HTML で指定すること． 2 プログラム 3.2.2 長方形を横に並べて充填する描画するプログラム(4)(Blocks4.java) import javax.swing.JApplet; import java.awt.Graphics; import java.awt.Dimension;

public class Blocks4 extends JApplet{ 5

public void paint(Graphics g){

int w = 50, h = 20, x = 20, y = 20, space = 20; Dimension d = getSize(); while(x + w < d.width){ 10 g.drawRect(x, y, w, h); x = x + w + space; } } } 15 2

(8)

プログラム 3.2.3 プログラム3.2.2のhtmlファイル(幅200画素)(blocks4-200.html)

<html>

<applet code="Blocks4.class" width=200 height=60> </applet> </htlm>

2

プログラム 3.2.4 プログラム3.2.2のhtmlファイル(幅800画素)(blocks4-800.html)

<html>

<applet code="Blocks4.class" width=800 height=60> </applet> </htlm> 2 while文は，評価式が満たされている間，ブロックに記述されている処理を実行する．プログラム3.2.2は，8行目のgetSizeメソッドで描画領域の大きさを取得し，11行目から14行目までのwhile文で描画範囲内に書けるだけの矩形を横に並べて書いている．現在の矩形の描画位置xと矩形の幅wの和が描画領域の幅d.widthよりも小さい場合，矩形を描画している． while文 ¶ ³ ¨ § ¥ ¦ while(評価式) 文 • 最初に，評価式を評価する． • while文は評価式が真の間，文を実行する． • 評価式が満たされなくなった場合，つまり偽になった場合，while文を抜ける．文評価式 true false 図3.4 while文の構造 µ ´ 例題 3.2.6 幅50画素，高さ20画素の長方形を20画素の幅をおいて描画範囲いっぱいに縦に並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする．また，描画範囲は，HTML で指定すること． 2 例題 3.2.7 幅50画素，高さ10画素の長方形を横20画素，縦10画素の幅をおいて描画範囲いっぱいに斜めに並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする．また，描画範囲は，HTMLで指定すること． 2 例題 3.2.8 図3.2(a)に示すgif画像を枠で囲み横に等間隔で描画範囲いいぱいに並べて表示するプログラムを作成せよ． 2

3.3 たくさんのブロックを書いてみよう

!!

例題 3.3.1 幅50画素，高さ20画素の長方形を横20画素，縦10画素の幅をおいて，縦横5_{× 5}個並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする． 2

(9)

3.4 練習問題 27

プログラム 3.3.1 長方形を縦横に並べて描画するプログラム(5)(Blocks5.java)

int w = 50, h = 20, xs = 20, ys = 10; for(int j = 0, y = 20; j < 5; j++, y += (h + ys)){ for(int i = 0, x = 20; i < 5; i++, x += (w + xs)){ g.drawRect(x, y, w, h); 10 } } } } 2

for文やwhile文を複数入れ子にして用いることができる．プログラム3.3.1の8_∼12行目では，for文が2つ入れ

子構造になっている．9_∼11行目のfor文では，横方向に5個長方形を描画する処理を行っている．この処理では，最初のx座標が20で，w + xs = 70画素平行移動しながら長方形を描画している．9行目の初期設定では，変数i, xを整数型の変数であることを宣言するとともに，それぞれ0, 20の値で初期化している．Javaでは，このようにfor文の初期化設定部分で変数の宣言をすることが可能であるが，宣言した変数の有効範囲は，for文の内部に限定される．つまり，変数i, xは，9_∼11行目だけで利用可能な変数である．同様に，9行目で宣言された変数j, yは，9_∼11行目の範囲でのみ有効な変数である．また，9行目の更新文では，ループ変数iをインクリメントするとともに，変数x に(w + xs)の値を加える処理をしている．この演算子を複合代入演算子とよび，x += (w + xs)は，x = x + (w + xs)と同様の処理を行っている．9_∼11行目では，内側のfor文で横に5個長方形を描画し，その一連の繰り返し処

理が終了した後，外側のfor文でyの値を(h + ys)だけ増やし，再び内側のfor文で横に5個長方形を描画してい

る．この横に5個長方形を描画する処理を外側のfor文で5回繰り返すことで，最終的に5_{× 5}個の長方形を描画することができる．例題 3.3.2 幅50画素，高さ10画素の長方形を横20画素，縦10画素の幅をおいて描画範囲いっぱいに並べるプログラムを作成せよ．ただし，左端の長方形の左上の座標値は(20, 20)とする．また，描画範囲は， HTMLで指定すること． 2 例題 3.3.3 図3.2(a)に示すgif画像を枠で囲み縦横等間隔で描画範囲いいぱいに並べて表示するプログラムを作成せよ． 2

3.4 練習問題

問題 3.1 図3.5(a)に示す画像を描画するプログラムを作成せよ．問題 3.2 図3.5(b)に示す画像を描画するプログラムを作成せよ．

問題 3.3 図3.2(a)に示すgif画像を枠で囲み図3.5(a)と同じ配置になるように表示するプログラムを作成せよ．実行

例を図3.6(a)に示す．

問題 3.4 図3.2(a)に示すgif画像を枠で囲み図3.5(b)と同じ配置になるように表示するプログラムを作成せよ．実行

(10)

(a) (b) 図3.5 繰り返し図形 (a) (b) 図3.6 画像の繰り返し描画問題 3.5 図3.7(a)に示す画像を描画するプログラムを作成せよ．問題 3.6 図3.7(b)に示す画像を描画するプログラムを作成せよ．問題 3.7 図3.8(a)に示す画像を描画するプログラムを作成せよ．問題 3.8 図3.8(b)に示す画像を描画するプログラムを作成せよ．

(11)

3.4 練習問題 29

(a) (b)

図3.7 大きさ，位置が変わる矩形描画

(a) (b)