Graphics/2021/ex04

グラフィックス基礎及び実習 2021年度 第04回 実習と宿題 †[edit]

実習課題A 締切: 当日15:15 †[edit]

以下のことをやって，作ったソースファイルを moodle の該当の場所へ提出してください． ファイル名の間違いに注意

次のことをやりなさい．

1. 上記のプログラムを作成する（画像の白字の指示どおり，クラス名は G04Kamegame にしてください）
2. 6行目を修正して自分の学籍番号と名前を出力するようにする
3. 7行目の hoge を書き換えて，「右下に向かうかめを表すインスタンスの変数名」を表す文字列にしてください
4. 12行目を以下のように修正する．また，これにあわせて2行目に1文追加する（行番号が変わらないようにすること）

   kame.setColor(Color.CHOCOLATE);

5. 以下の4箇所にそれぞれ指定された処理を行う文を書きなさい（「// アイウエ」というコメントの前に各文を書き，行番号がずれないようにすること）
   • 16行目: speedAllメソッドを呼び出してかめの速さを低速にする
   • 17行目: speedメソッドを呼び出して kame の速さを変える（引数には10を指定すること）
   • 18行目: game の絵の大きさを 0.2 に変更する
   • 22行目: withTurtleAllの値を変化させる
6. 上記の4箇所は以下のアイウエのいずれかにあてはまる．各行の「// アイウエ」というコメントを修正して，「//ア」や「//エ」のように，あてはまる記号のみを残しなさい．
   • ア：インスタンスメソッドを呼び出している
   • イ：インスタンス変数に値を代入している
   • ウ：クラスメソッドを呼び出している
   • エ：クラス変数に値を代入している

実習課題B 締切: 当日16:10 †[edit]

以下のことをやって，作ったソースファイルを moodle の該当の場所へ提出してください． ファイル名の間違いに注意

★ HogeTurtleクラスのAPI仕様

HogeTurtleは，Turtleを拡張したクラス（「拡張したクラス」とはどういう意味かは次回学びます）．

• コンストラクタ Turtleクラスと同様なので説明は省略．
• メソッド 以下のものの他，Turtle クラスのAPI仕様（p.13）に記されたメソッドも利用可能．

  void draw()

  現在のかめの位置でやつの絵を描く．やる気に応じて絵の描き方が少し変化する．

  static void setBonusAll(int bonus)

  全てのかめのやる気を bonus だけアップさせる．

• フィールド 以下のものの他，Turtle クラスのAPI仕様（p.13）に記されたフィールドも利用可能．

  int yaruki

  かめのやる気．0以下ならやる気なし，1なら普通，2以上なら数が大きいほどやる気あり．初期値は1．

  static boolean rainbowAll

  true ならペンを虹色に変化させる．false なら従来どおり．初期値は false．

step0 †[edit]

1. Graphics2021チーム上に HogeTurtle.class というファイルが置いてあります（詳しくはチーム内の記事参照）．ダウンロードしてこの科目のディレクトリに置きなさい．
2. 上記の内容の G04HogeTurtle.java を作成し，実行しなさい．3匹のかめが出てくるはず．G04HogeTurtle クラスは HogeTurtle クラスを利用するので，1. の作業が正しくできてないと「HogeTurtle の定義が見つからない」というエラーが出るだろう．

VSCode で表示したソースコード中の HogeTurtle に赤い波線が引かれて注意されるかもしれません．これが出ないように VSCode を設定することもできますが，込み入った変更になるため，この授業の Setup では説明していません．気にしないで構いません．

step1 †[edit]

G04HogeTurtle.java の 12, 15, 16行目にそれぞれ m1, m2, m3 のインスタンスメソッドを呼び出す文を書き，動作を確認しなさい．ただし，ここで呼ぶインスタンスメソッドは上記の HogeTurtle クラスのAPI仕様に示されたものとする．

step2 †[edit]

G04HogeTurtle.java の10,11行目にそれぞれ m2, m3 のインスタンス変数に値を代入する文を書き，動作を確認しなさい．ただし，m2 のやる気が 2 に，m3 のやる気が 0 になるようにすること．

step3 †[edit]

G04HogeTurtle.java の13行目にクラスメソッドを呼び出す文を書き，動作を確認しなさい．ただし，かめ全員のやる気が +3 されるようにすること．

step4 †[edit]

G04HogeTurtle.java の14行目にクラス変数に値を代入する文を書き，動作を確認しなさい．ただし，この行以降はかめ全員のペンの色が虹色になるようにすること．

step5 †[edit]

19行目にコメントとして自分の名前と学籍番号を記し，できたプログラムのソースファイルをこの科目の Moodle コース上の当該の場所へ提出しなさい．

宿題 †[edit]

次回授業までに必ずやっておくこと

次回の授業の資料（PDFや動画）等は こちら からどうぞ．

1. 講義資料を入手．紙でほしい方は各自で印刷してください．

   キャンパス内各所に設置されたプリンタで印刷することもできます．くわしくは「ポータル > 情報環境 > マニュアル > 印刷利用マニュアル」参照．

2. 授業動画を視聴する

   学内の実習室等に設置の PC ではスピーカから音が出ませんので，イヤフォン/ヘッドフォンを用意する必要あり

3. 講義資料・授業動画に出てくるプログラムを実際に作って実行してみる

実習課題S(omake) 締切: 次回実習時間終了時 †[edit]

これはおまけ課題です．やらなくても減点になりません．やったら加点かも 作ったソースファイルを moodle の該当の場所へ提出してください．

import tg.*;

public class G04Graph{

    // クラス変数の宣言と初期化
    public static final int WIDTH  = 500;
    public static final int HEIGHT = 500;
    public static double XMAX = 1.0;
    public static double YMAX = 1.0;

    // 描画する関数
    public static double f(double x){
	return x*x;
    }

    // ピクセル単位のx座標の値（左端が0，右端がWIDTH）を
    // グラフのx座標の値（真ん中が0，左端が -XMAX，右端がXMAX）に変換
    public static double toGraphX(int pixelX){
	return XMAX * (double)(pixelX - WIDTH/2) / (WIDTH/2);
    }

    // グラフのy座標の値（真ん中が0，上端が YMAX，下端が-YMAX）を
    // ピクセル単位のy座標の値（上端が0，下端がHEIGHT）に変換
    public static int toPixelY(double graphY){
	return (int)(-graphY / YMAX * (HEIGHT/2)) + HEIGHT/2;
    }
	
    // mainメソッド
    public static void main(String[] args){
	TurtleFrame f = new TurtleFrame(WIDTH, HEIGHT);
	Turtle m = new Turtle();
	f.add(m);
	m.speed(5);
	// X軸を描く
	m.up();
	m.moveTo(0, HEIGHT/2);
	m.down();
	m.moveTo(WIDTH - 1, HEIGHT/2);
	// Y軸を描く
	m.up();
	m.moveTo(WIDTH/2, 0);
	m.down();
	m.moveTo(WIDTH/2, HEIGHT - 1);
	// 曲線を描く
	for(int px = 0; px <= WIDTH; px += 5){
	    double x = /* (a) px に対応するグラフの x 座標の値を求める */;
	    int py = /* (b) グラフの y 座標の値を求め，それをピクセル単位の y 座標の値に変換する */;
	    if(px == 0){
		m.up();
		m.moveTo(px, py);
		m.down();
	    }else{
		m.moveTo(px, py);
	    }
	}
    }
}

1. 上記のプログラムを作成し，実行してみなさい．ただし，(a), (b) の箇所には，2つのクラスメソッド toGraphX, toPixelY のいずれかの呼び出しが入る．コメントを参考にそれぞれを書き，正しく動くようにしなさい．正しくできれば二次関数のグラフが描かれるはずある．
2. このプログラムの動作を理解し，説明できるようにしなさい．
3. このプログラムを修正して，下図のようなグラフが描かれるようにしなさい．ただし，
   • 描画する関数が \( \sin(2\pi x) \) となるようにメソッド f を修正すること．
   • ペンを虹色にするのは，Turtle クラスのかわりに HogeTurtle クラスを使うことで実現すればよい．
   • main メソッド内は，上記の書き換えと

     HogeTurtle.rainbowAll = true;

     の追加以外にはいじらないこと．
   • toGraphX, toPixelY メソッドも変更しないこと

少しFrameからはみ出すせいでかめは本当はスクロールバーに隠れるのだが，わかりやすくするためにウィンドウ幅を広げてキャプチャしてある．本当は，Frame の少し内側の領域だけに描画するように工夫するとよい．