複数の図形をたくさん描画してみようimg2.hc.uec.ac.jp/~rocky/lecture/java/manuscripts/chap04.pdf31...

31

第 4章

複数の図形をたくさん描画してみよう!!

条件によって異る処理を行う仕組みとして，Javaでは，条件分岐を行う if 文，if-else 文，switch 文がある．こ

こでは，if 文と if-else 文について説明する．

4.1 チェッカーフラグを書いてみよう!!

例題 4.1.1 図 4.1(a)に示すように，描画領域 (400, 300)の範囲に，幅 20画素の縦縞模様を描画するプロ

グラムを作成せよ． 2

プログラム 4.1.1 縞模様を描画するプログラム (Stripe.java)

import javax.swing.JApplet;

import java.awt.Graphics;

import java.awt.Color;

public class Stripe extends JApplet { 5

public void paint(Graphics g) {g.setColor(Color.white);

g.fillRect(0, 0, 400, 300);

int i = 0, x = 0, w = 20; 10

g.setColor(Color.black);

while(x < 400){if(i % 2 == 0) g.fillRect(x, 0, w, 300);

x += w;

i++; 15

}g.drawRect(0, 0, 399, 299);

}}

2

if 文は，条件を表す式を評価し，その評価結果が真 (true)ならば if 文に続く文あるいはブロックを実行する．評

価結果が偽 (true)ならば，なにもせずに次の処理を行う．

評価式には，関係演算子，等値演算子，論理演算子を用いて条件判断を行うことが多い．プログラム 4.1.1では，13

行目でカウンタとして用いている変数 iが偶数の場合，黒の矩形を描画する処理を実行している．算術演算子 %は，第

一オペランド (operand; 被演算数)を第二オペランドで割った剰余を計算する演算子である．つまり，i % 2は変数 i

の値を 2で割った時の剰余であり，i が 3の時，i % 2は 1となり，iが 4の時，i % 2は 0となる．また，等値演算

子==は，第一オペランドと第二オペランドが等しい場合に真 (true)となり，異なる場合に偽 (false)となる演算子で

32 第 4 章複数の図形をたくさん描画してみよう!!

(a) 縦縞 (b) 横縞

図 4.1 縞模様

if 文¶ ³

§̈ ¥¦if (評価式) 文

§̈ ¥¦if (評価式) ブロック文 orブロック

評価式

true

false

図 4.2 if 文の構造µ ´ある．13行目の if 文の評価式は，変数 iを 2で割った剰余が 0の場合，つまり，iが偶数の場合に黒塗の矩形を描画

する．

例題 4.1.2 図 4.1(b)に示すような，描画領域 (400, 300)の範囲に，幅 20画素の横縞模様を描画するプロ

グラムを作成せよ． 2

例題 4.1.3 図 4.3(a)に示すように，描画領域 (400, 300)の範囲に，縦横 20画素の矩形を持つチェッカー

フラグを描画するプログラムを作成せよ． 2

4.1 チェッカーフラグを書いてみよう!! 33

プログラム 4.1.2 チェッカーフラグを描画するプログラム (Checker.java)




public class Checker extends JApplet { 5


g.fillRect(0, 0, 400, 300);

int j = 0, y = 0, w = 20; 10

g.setColor(Color.black);

while(y < 300){int x = 0, i = 0;

while(x < 400){if((i + j) % 2 == 0) g.fillRect(x, y, w, w); 15

x += w;

i++;

}y += w;

j++; 20

}g.drawRect(0, 0, 399, 299);

}}

2

プログラム 4.1.2の 15行目では，変数 iを横方向の矩形の数，変数 jを縦方向の矩形の数として，i + jが偶数の

場合に黒塗の矩形を描画する処理を行うことでチェッカーフラグを描画している．

(a) (b)

図 4.3 チェッカーフラグ


例題 4.1.4 図 4.3(b)に示すように，プログラム 4.1.2の白黒を反転させたチェッカーフラグを描画するプ

ログラムを作成せよ． 2

例題 4.1.5 図 4.4に示すように，ひとつおきに画像を枠で囲うプログラムを作成せよ． 2

図 4.4 交互に画像を枠で囲う

4.2 複数の図形を交互に書いてみよう!!

例題 4.2.1 図 4.5(a)に示すような，□と○を交互に 10個，横に並べて描画するプログラムを作成せよ．

2

プログラム 4.2.1 □と○を交互に描画するプログラム (CircleBox1.java)



public class CircleBox1 extends JApplet {public void paint(Graphics g){ 5

int w = 30, sp = 20, y = 20;

for(int i = 0, x = 20; i < 10; i++, x += (w + sp)){if(i % 2 == 0)

g.drawRect(x, y, w, w); 10

else

g.drawArc(x, y, w, w, 0, 360);

}}

} 15

2

条件分岐を行う場合，if-else文を用いる．評価式が真，すなわち，評価式の値が 0でなければ，文-1が実行される．

一方，評価式が偽，すなわち，評価式の値が 0であれば，文-2が実行される．プログラム 4.2.1の 9行目 ∼12行目で

4.2 複数の図形を交互に書いてみよう!! 35

(a) (b)

(c) (d)

図 4.5 □と○の描画

は，ループ変数 iが偶数 (i % 2 == 0)の時，正方形を描画し，それ以外の場合には円を描画する処理を行っている．

²±

¯°

if(評価式) 文 1

else 文 2Â

Á

¿

À

if(評価式 1) 文 1

else if(評価式 2) 文 2

....

else 文 n

文1

評価式

true

false

文2

図 4.6 if-else 文の構造 1

文1

評価式 1

true

false

文2

評価式 2

true

false

評価式 3false

文3

true

図 4.7 if-else 文の構造 2

例題 4.2.2 図 4.5(b)に示すような，□を一つ描いた後に○を 2個描く操作を繰り返し，横に図形を 10個

並べて描画するプログラムを作成せよ． 2

例題 4.2.3 図 4.8に示すように，2つの画像を交互に 10個並べて描画するプログラムを作成せよ． 2

図 4.8 画像の交互描画


例題 4.2.4 図 4.5(c)に示すような，□，○，■を交互に 10個，横に並べて描画するプログラムを作成せ

よ． 2

プログラム 4.2.2 □，○，■を交互に描画するプログラム (CircleBox3.java)




int w = 30, sp = 20, y = 20;

for(int i = 0, x = 20; i < 10; i++, x += (w + sp)){if(i % 3 == 0)


else if(i % 3 == 1)


else

g.fillRect(x, y, w + 1, w + 1);

} 15

}}

2

プログラム 4.2.2の 9行目 ∼14行目では，if-else 文の後にさらに if-else 文が繋がっている．これは，9行目の

if 文で iが 3で割り切れた場合，10行目の正方形を描画し，3で割り切れない場合には，次の 11行目の if 文の評価

式を評価することになる．11行目では，iを 3で割った剰余が 1の場合に円を描画し，それ以外，つまり，iが 3で割

り切れず剰余も 1でない場合に，14行目の処理，塗りつぶした正方形を描画している．

例題 4.2.5 図 4.5(d)に示すような，□，○，■，●を交互に 10個，横に並べて描画するプログラムを作

成せよ． 2

4.3 複数の図形を少し複雑に配置してみよう!!

例題 4.3.1 図 4.9(a)に示すように，□と○を交互に並べ，一行おきに色を変えて描画するプログラムを作

成せよ． 2

このプログラムでは，iを列番号，jを行番号を数える変数として，14行目 ∼17行目の処理で列と行の番号の和 i +

jが偶数であれば正方形を，奇数であれば円を描画する処理を行っている．また，10,11行目で，行番号 jが偶数の場合

に色を赤に設定し，奇数の場合には黒に設定することで，一行おきに異なる色で図形を描画する処理を実現している．

4.3 複数の図形を少し複雑に配置してみよう!! 37

プログラム 4.3.1 □と○を交互に，一行おきに色を変える描画するプログラム (CircleBox5.java)




public class CircleBox5 extends JApplet { 5

public void paint(Graphics g){int w = 30, sp = 20;

for(int j = 0, y = 20; j < 5; j++, y += (w + sp)){if(j % 2 == 0) g.setColor(Color.red); 10

else g.setColor(Color.black);

for(int i = 0, x = 20; i < 5; i++, x += (w + sp)){if((i + j) % 2 == 0)


else


}}

} 20

}

2

例題 4.3.2 図 4.9(b)に示すように，□と○，●と■を交互に並べて描画するプログラムを作成せよ． 2

プログラム 4.3.2 □と○，●と■を交互に描画するプログラム (CircleBox6.java)




int w = 30, sp = 20;

for(int j = 0, y = 20; j < 5; j++, y += (w + sp)){if(j % 2 == 0){

for(int i = 0, x = 20; i < 5; i++, x += (w + sp)){ 10

if(i % 2 == 0) g.drawRect(x, y, w, w);

else g.drawArc(x, y, w, w, 0, 360);

}}else{ 15

for(int i = 0, x = 20; i < 5; i++, x += (w + sp)){if(i % 2 == 0) g.fillArc(x, y, w, w, 0, 360);

else g.fillRect(x, y, w + 1, w + 1);

}} 20

}}

}

2


9行目と 15行目の if-else 文で，行番号 jが偶数か奇数かで，それぞれ 10∼13行目の処理，16∼19行目の処理を

行うように条件分岐している．行番号 jが偶数の場合，□と○を交互に描画するので，11,12行目の処理で，列番号 i

が偶数の場合正方形を描画し，奇数の場合円を描画している．一方，行番号 jが奇数の場合，●と■を交互に描画する

ので，17,18行目の処理で，列番号 iが偶数の場合塗りつぶし円を，奇数の場合塗りつぶし正方形を描画している．

例題 4.3.3 図 4.9(c)に示すように，□と○を交互に並べ，一列おきに色を変えて描画するプログラムを作

成せよ． 2

例題 4.3.4 図 4.9(d)に示すように，□と●，○と■を交互に並べて描画するプログラムを作成せよ． 2

例題 4.3.5 図 4.10に示すような模様を描画するプログラムを作成せよ． 2

プログラム 4.3.3 色付きチェッカーフラグ (CheckerColor.java)




public class CheckerColor extends JApplet { 5


g.fillRect(0, 0, 400, 300);

int j = 0, y = 0, w = 20; 10

while(y < 300){int x = 0, i = 0;

while(x < 400){if((i + j) % 2 == 0){

if((i % 2 == 0) && (j % 2 == 0)) g.setColor(Color.black); 15

else g.setColor(Color.red);

g.fillRect(x, y, w, w);

}x += w;

i++; 20

}y += w;

j++;

}g.setColor(Color.black); 25

g.drawRect(0, 0, 399, 299);

}}

2

基本的な処理はプログラム 4.1.2と同じであるが，色分けをする処理を 15,16行目で行っている．15行目では，iと

jがともに偶数の場合色を黒に設定し，奇数の場合赤に設定している．この if 文では，i % 2 == 0と j % 2 == 0

の二つの式で，それぞれ i が偶数であるか，j が偶数であるかを評価している．そして，これらの評価結果を論理積

を計算する論理演算子&&で最終的に判断している．論理積&&は，2つのオペランド a, bに対し，aが真 true, bが真

trueの時のみ a && bが真 trueとなる演算である．命題論理に関しては E.4節，論理演算子に関しては F.3.6小節を

参照すること．

4.3 複数の図形を少し複雑に配置してみよう!! 39

(a) (b)

(c) (d)

図 4.9 □と○の描画


図 4.10 色付きチェッカーフラグ

図 4.11 縞模様の充填

4.4 練習問題

問題 4.1 図 4.11に示すように，htmlで与えられた描画領域の範囲に，幅 20画素の縦縞模様を描画するプログラムを

作成せよ．

問題 4.2 図 4.12(a)に示すように図形を配置するプログラムを作成せよ．

問題 4.3 図 4.12(b)に示すように図形を配置するプログラムを作成せよ．

問題 4.4 図 4.13に示すように画像を配置するプログラムを作成せよ．

4.4 練習問題 41

(a) (b)

図 4.12 □，○，■，●の配置

図 4.13 画像の配置

複数の図形をたくさん描画してみようimg2.hc.uec.ac.jp/~rocky/lecture/java/manuscripts/chap04.pdf31...

Documents