グラフィックス基礎及び実習 2019年度 第13回

お知らせ

次回の実習のページはすでに公開していますGraphics/2019/ex14).早めにとりかかることをおすすめします.

課題A(self) 完成目標: 今回の実習終了まで

前回講義資料のプログラム ShapeSample.java を作って動作確認しよう. ShapeSample.java はこちら

動作確認できたら,次のようにいじってみよう.何がどうなっているかよく考えながら実行すること.

  1. 23,24行目の left と right を入れ替えてみよう.
    • check drawRectangles メソッドの中身は一切書き換えてないですね.そのとき,2つの矩形の表示場所は,描画対象の Pane オブジェクトに対して一定ですね.
    • check ということは,Rectangleコンストラクタの引数などで使う座標系は,この Pane オブジェクトのローカル座標系ですね.
    • check 一方,root のローカル座標系で見たら,修正前後で矩形の位置は変化してますね.
  2. 36行目の Rectangle コンストラクタの引数を次のように変えてみよう.
    	Rectangle rect1 = new Rectangle(20, 30, 140, 160);
    • check rect1 と rect2 の重なり方を観察しよう.
  3. 46行目の addAll の引数を次のように変えてみよう.
    	p.getChildren().addAll(rect2, rect1);
    • check rect1 と rect2 の重なり方を観察しよう.
  4. 46行目を元に戻してから,49行目の rect2 を rect1 に変えてみよう(50, 51行目のrect2はそのまま)
    • check どこをクリックすると rect2 の色が変わるかよく観察しよう.
    • check rect2 内部はどう? 結果からすると,rect1 内部でも上に別のオブジェクトが重なってたら「当たり判定」されないようですね.

課題B(self) 完成目標: 今回の実習終了まで

講義資料を読み,そこに載っているプログラム CanvasSample.java を作って動作確認しよう. CanvasSample.java はこちら

動作確認できたら,次のようにいじってみよう.何がどうなっているかよく考えながら実行すること.

  1. 23-25行目の canvas1, canvas2, canvas3 を適当に入れ替えてみよう.
    • check ShapeSample の場合と同様のことが言えますね.この場合,GraphicsContext の描画メソッドで使う座標系は,GraphicsContext を取得した Canvas オブジェクトのローカル座標系ですね.
  2. 47行目を50行目と51行目の間に移動させてみよう.
    • check 2つの図形の重なり方を観察しよう.
  3. 60行目の setOnMouseDragged を setOnMouseMoved に変えてみよう.
    • check Dragged でも Moved でも,カーソルを速く移動させると●がとびとびに描かれますね.

課題C(TA) 締切: 次回実習開始直後

Step1 Doraを描く

  1. 次の内容のソースファイル DoraPane.java を作ろう.
    import javafx.scene.layout.*;
    import javafx.scene.canvas.*;
    import javafx.scene.paint.*;
    
    public class DoraPane extends Pane{
    
        public DoraPane(){
    	Canvas canvas = new Canvas(300, 300);
    	this.getChildren().add(canvas);
            this.setStyle("-fx-background-color: white;");
    	this.draw(canvas);
        }
    
        private void draw(Canvas c){
            // 今はまだ空っぽ
        }
    }
    
  2. 次の内容のソースファイル G13Dora.java を作ろう.
    import javafx.application.Application;
    import javafx.stage.*;
    import javafx.scene.*;
    import javafx.scene.control.*;
    import javafx.scene.layout.*;
    
    public class G13Dora extends Application {
        @Override
        public void start(Stage pstage) {
    	DoraPane dora = new DoraPane();
    	BorderPane root = new BorderPane();
    	root.setCenter(dora);
    	Scene scene = new Scene(root);
    	pstage.setScene(scene);
    	pstage.setTitle("G13Dora");
    	pstage.sizeToScene();
    	pstage.show();
        }
        public static void main(String[] args) {
    	launch(args);
        }
    }
    
  3. G13Dora.java をコンパイルして G13Dora を実行しよう.この時点では 300x300 の真っ白なキャンバスが描かれるはずである.
  4. draw メソッドの中身を書いて,Doraを描こう.ただし,
    • ソースには,どこがどの部分を描いているのか分かるように,コメントをたくさんつけること.
    • Dora は DoraPaneSample のものより簡略化しないこと.頭部は角が丸い矩形として描くこと.これらの条件を守れば好きにカスタマイズしてよい.口やらひげやら描くとか,妹の方にするとか,きれいなジャイアン にするとか.

Step2 仕上げよう

  1. 前回課題CのDoraPaneSampleのAPI を参考に,DoraPane.java に必要なものを追加しよう.onNose メソッドについては,自分の Dora の鼻の位置に合わせるようにしよう.
  2. G12Dora で DoraPaneSample を使っているところを DoraPane に変更して,ちゃんと動くことを確認しよう.

Step3 悪い教員に唆されて青春の無駄遣いをしてしまったTAのみなさん

の成果を見ます?

課題S(omake)

今回出題のおまけ課題はありません.今までやってないのをどうぞ.Graphics/2019/ex12#kadaiS ぜひ.


トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-07-12 (金) 16:08:16