グラフィックス基礎及び実習 2019年度 第13回†
お知らせ†
次回の実習のページはすでに公開しています(Graphics/2019/ex14).早めにとりかかることをおすすめします.
課題A(self) 完成目標: 今回の実習終了まで†
前回講義資料のプログラム ShapeSample.java を作って動作確認しよう.
ShapeSample.java はこちら
動作確認できたら,次のようにいじってみよう.何がどうなっているかよく考えながら実行すること.
- 23,24行目の left と right を入れ替えてみよう.
- check drawRectangles メソッドの中身は一切書き換えてないですね.そのとき,2つの矩形の表示場所は,描画対象の Pane オブジェクトに対して一定ですね.
- check ということは,Rectangleコンストラクタの引数などで使う座標系は,この Pane オブジェクトのローカル座標系ですね.
- check 一方,root のローカル座標系で見たら,修正前後で矩形の位置は変化してますね.
- 36行目の Rectangle コンストラクタの引数を次のように変えてみよう.
Rectangle rect1 = new Rectangle(20, 30, 140, 160);
- check rect1 と rect2 の重なり方を観察しよう.
- 46行目の addAll の引数を次のように変えてみよう.
p.getChildren().addAll(rect2, rect1);
- check rect1 と rect2 の重なり方を観察しよう.
- 46行目を元に戻してから,49行目の rect2 を rect1 に変えてみよう(50, 51行目のrect2はそのまま)
- check どこをクリックすると rect2 の色が変わるかよく観察しよう.
- check rect2 内部はどう? 結果からすると,rect1 内部でも上に別のオブジェクトが重なってたら「当たり判定」されないようですね.
課題B(self) 完成目標: 今回の実習終了まで†
講義資料を読み,そこに載っているプログラム CanvasSample.java を作って動作確認しよう.
CanvasSample.java はこちら
動作確認できたら,次のようにいじってみよう.何がどうなっているかよく考えながら実行すること.
- 23-25行目の canvas1, canvas2, canvas3 を適当に入れ替えてみよう.
- check ShapeSample の場合と同様のことが言えますね.この場合,GraphicsContext の描画メソッドで使う座標系は,GraphicsContext を取得した Canvas オブジェクトのローカル座標系ですね.
- 47行目を50行目と51行目の間に移動させてみよう.
- 60行目の setOnMouseDragged を setOnMouseMoved に変えてみよう.
- check Dragged でも Moved でも,カーソルを速く移動させると●がとびとびに描かれますね.
課題C(TA) 締切: 次回実習開始直後†
Step1 Doraを描く†
- 次の内容のソースファイル 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){
// 今はまだ空っぽ
}
}
- 次の内容のソースファイル 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);
}
}
- G13Dora.java をコンパイルして G13Dora を実行しよう.この時点では 300x300 の真っ白なキャンバスが描かれるはずである.
- draw メソッドの中身を書いて,Doraを描こう.ただし,
- ソースには,どこがどの部分を描いているのか分かるように,コメントをたくさんつけること.
- Dora は DoraPaneSample のものより簡略化しないこと.頭部は角が丸い矩形として描くこと.これらの条件を守れば好きにカスタマイズしてよい.口やらひげやら描くとか,妹の方にするとか,きれいなジャイアン にするとか.
Step2 仕上げよう†
- 前回課題CのDoraPaneSampleのAPI を参考に,DoraPane.java に必要なものを追加しよう.onNose メソッドについては,自分の Dora の鼻の位置に合わせるようにしよう.
- G12Dora で DoraPaneSample を使っているところを DoraPane に変更して,ちゃんと動くことを確認しよう.
Step3 悪い教員に唆されて青春の無駄遣いをしてしまったTAのみなさん†
の成果を見ます?
課題S(omake)†
今回出題のおまけ課題はありません.今までやってないのをどうぞ.Graphics/2019/ex12#kadaiS ぜひ.