...

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

by user

on
Category: Documents
16

views

Report

Comments

Transcript

第 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 画像の配置
Fly UP