#author("2019-07-12T16:07:47+09:00","default:takataka","takataka")
#author("2019-07-12T16:08:16+09:00","default:takataka","takataka")
*グラフィックス基礎及び実習 2019年度 第13回 [#e9701092]

#contents

//&color(#ff0000){工事中}; 
**お知らせ [#notice]

&color(red){''次回の実習のページはすでに公開しています''};([[Graphics/2019/ex14]]).早めにとりかかることをおすすめします.

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


前回講義資料のプログラム ShapeSample.java を作って動作確認しよう.
ShapeSample.java は[[こちら>https://gist.github.com/takatakamanbou/20a153ac9a6467270d5e5e0145e41e34]]


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

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


講義資料を読み,そこに載っているプログラム CanvasSample.java を作って動作確認しよう.
CanvasSample.java は[[こちら>https://gist.github.com/takatakamanbou/70ad58bc2c73a34cba3fbee14fb0a2b9]]

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


+ 23-25行目の canvas1, canvas2, canvas3 を適当に入れ替えてみよう.
-- &color(white,blue){check}; ShapeSample の場合と同様のことが言えますね.この場合,GraphicsContext の描画メソッドで使う座標系は,GraphicsContext を取得した Canvas オブジェクトのローカル座標系ですね.
+ 47行目を50行目と51行目の間に移動させてみよう.
-- &color(white,blue){check}; 2つの図形の重なり方を観察しよう.
+ 60行目の setOnMouseDragged を setOnMouseMoved に変えてみよう.
-- &color(white,blue){check}; Dragged でも Moved でも,カーソルを速く移動させると●がとびとびに描かれますね.
 
**課題C(TA) 締切:  次回実習開始直後 [#kadaiC]


***Step1 Doraを描く [#g9529a1f]

+ 次の内容のソースファイル DoraPane.java を作ろう.
#pre{{
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){
        // 今はまだ空っぽ
    }
}
}}
+ 次の内容のソースファイル G13Dora.java を作ろう.
#pre{{
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);
    }
}
}}
+ G13Dora.java をコンパイルして G13Dora を実行しよう.この時点では 300x300 の真っ白なキャンバスが描かれるはずである.
+ draw メソッドの中身を書いて,Doraを描こう.ただし,
-- ソースには,どこがどの部分を描いているのか分かるように,コメントをたくさんつけること.
-- Dora は DoraPaneSample のものより簡略化しないこと.頭部は角が丸い矩形として描くこと.これらの条件を守れば好きにカスタマイズしてよい.口やらひげやら描くとか,妹の方にするとか,[[きれいなジャイアン>https://www.google.co.jp/search?q=%E3%81%8D%E3%82%8C%E3%81%84%E3%81%AA%E3%82%B8%E3%83%A3%E3%82%A4%E3%82%A2%E3%83%B3&tbm=isch&tbo=u&source=univ&sa=X&ved=0ahUKEwj9_dugtILcAhWBvrwKHTflDY8QsAQIJg&biw=1595&bih=1755]] にするとか. 
+ G13Dora.java に書き足して,G12Dora のようにイベント処理するものにしよう.

*** Step2 仕上げよう [#v3a4aee7]

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

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

の成果を見ます?

- [[2017年度TAのみなさん>Graphics:G11Dora-ta2017.png]]
- [[2018年度TAのみなさん>Graphics:G12Dora-ta2018.png]]
- 大学院楽しいよ
**課題S(omake)  [#kadaiS]

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

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS