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

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 {
public void paint(Graphics g) {
5
int i = 0, x = 0, w = 20;
10
g.setColor(Color.white);
g.fillRect(0, 0, 400, 300);
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) となる演算子で
第 4 章 複数の図形をたくさん描画してみよう!!
32
(a) 縦縞
(b) 横縞
図 4.1 縞模様
¶
¨
¥
if (評価式) 文
§
¦
¥
¨
if (評価式) ブロック
§
¦
µ
³
if 文
評価式
false
true
文 or
ブロック
´
図 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)
import javax.swing.JApplet;
import java.awt.Graphics;
import java.awt.Color;
public class Checker extends JApplet {
public void paint(Graphics g) {
5
g.setColor(Color.white);
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);
x += w;
15
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 章 複数の図形をたくさん描画してみよう!!
34
例題 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)
import javax.swing.JApplet;
import java.awt.Graphics;
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);
else
10
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
false
true
評価式
¿
文1
false
false
true
true
文1
評価式 2
文2
評価式 3
false
true
文2
文3
図 4.6 if-else 文の構造 1
À
図 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 章 複数の図形をたくさん描画してみよう!!
36
例題 4.2.4 図 4.5(c) に示すような，□，○，■を交互に 10 個，横に並べて描画するプログラムを作成せ
2
よ．
プログラム 4.2.2 □，○，■を交互に描画するプログラム (CircleBox3.java)
import javax.swing.JApplet;
import java.awt.Graphics;
public class CircleBox3 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 % 3 == 0)
g.drawRect(x, y, w, w);
else if (i % 3 == 1)
10
g.drawArc(x, y, w, w, 0, 360);
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)
import javax.swing.JApplet;
import java.awt.Graphics;
import java.awt.Color;
public class CircleBox5 extends JApplet {
public void paint(Graphics g){
5
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)
g.drawRect(x, y, w, w);
else
15
g.drawArc(x, y, w, w, 0, 360);
}
}
}
}
20
2
例題 4.3.2 図 4.9(b) に示すように，□と○，●と■を交互に並べて描画するプログラムを作成せよ．
2
プログラム 4.3.2 □と○，●と■を交互に描画するプログラム (CircleBox6.java)
import javax.swing.JApplet;
import java.awt.Graphics;
public class CircleBox6 extends JApplet {
public void paint(Graphics g){
5
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)){
if (i % 2 == 0) g.drawRect(x, y, w, w);
else
10
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
第 4 章 複数の図形をたくさん描画してみよう!!
38
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)
import javax.swing.JApplet;
import java.awt.Graphics;
import java.awt.Color;
public class CheckerColor extends JApplet {
public void paint(Graphics g) {
5
g.setColor(Color.white);
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);
else g.setColor(Color.red);
15
g.fillRect(x, y, w, w);
}
x += w;
i++;
20
}
y += w;
j++;
}
g.setColor(Color.black);
g.drawRect(0, 0, 399, 299);
}
25
}
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 章 複数の図形をたくさん描画してみよう!!
40
図 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 画像の配置