(一日目前半)2017SV演習C++CLI

Transcription

1 第 1 日目 シミュレーション & ビジュアライゼーション演習 担当 : 泉教授 志賀助教 波田野助教 吉本助教 TA: 山脇 岩本 Supervised by 酒井教授 1

2 シミュレーション & ビジュアライゼーション演習 Microsoft Visual Studio 2012 を使用 現在は version 2017 が無償配布 1 動くもののシミュレーション 球の衝突 振動など 分子動力学 熱流体 拡散 2 シミュレーション結果を可視化 2

3 スケジュール 第 1 日目 (11/6( 月 )) ( 前半 )Visual C++/CLIの導入演習 ( 後半 ) プログラム構造の説明第 2 日目 (11/9( 木 )) ( 前半 )MDのプログラム演習 ( 後半 )DEMのプログラム演習第 3 日目 (1/5( 金 )) 自主課題第 4 日目 (1/11( 木 )) 自主課題第 5 日目 (1/15( 月 )) 自主課題 注意 : 中間課題 ( 第 2 日目 ) と最終課題 ( 第 5 日目 ) があります 4

4 Visual C++ を使った簡単なフォー ムアプリケーションの作り方 4

5 家のパソコンにもインストールできる (Visual C の入手方法 ) 家に持って帰るときはソリューションファイル ( 拡張子 sln) の含まれるディレクトリごと持って帰ろう!( 互換性の問題もあるので他のバージョンを使う場合には気をつけましょう ) 1. 次の web ページにアクセス 下にスクロールして 2012 バージョンのダウンロードボタンをクリック. 5

6 3. マイクロソフトアカウントでサインインする. 4. ダウンロードできないと表示されるので, 特典 をクリックして Visual Studio Dev Essentials に参加する. 6

7 5. 再びダウンロードを表示し, 検索欄に 2012 と入力 2012 と入力 6. 下にスクロールし, 言語を Japanese 形式を EXE にして Download ボタンを押す. 7

8 Visual C++(VC++) の起動 以降 2012 のバージョンで説明します 1. 講義ページ ( から code_form.zip をダウンロードし, 解凍しておく. 3. Visual C++ が起動 2. スタートメニュー Visual C Express 8

9 プロジェクトの読み込み 1. ファイル プロジェクトを開く 2. code_form_v2012 内の Watch.slnファイルを選択 9

10 Form1 のコード ( ソース ) 表示 1. ソリューションエクスプローラ ヘッダーファイル Form1.h を右クリックメニュー コードの表示 2.Form1.h のソールファイルが表示された ( 今後要編集 ) 10

11 ボタンの追加 1. ソリューションエクスプローラー ヘッダーファイル Form1.h を右クリック デザイナーの表示 2. ツールボックス コモンコントロール Button をクリックする 3.Form1 上で左クリックするとボタンが追加される 11

12 ピクチャーボックスの追加 1. ツールボックスを選び, PictureBox をクリックする 2.Form1 上に追加して 大きさや位置を変える 3. 右端のプロパティウィンドウで大きさや色を変える 12

13 ビルドと実行 1. ビルド ソリューションのビルド 3. デバッグ デバッグなしで開始 2. 出力ウィンドウでビルドを確認 4. フォームの確認 13

14 フォーム上への図形の描画 ( ライン描画 ) 14

15 イベントハンドラの設定 1. 追加したボタンをデザイン上でダブルクリックする 2. ソースコード上にボタン用のイベントハンドラが追加されていることを確認 15

16 描画用オブジェクトの宣言 ソースコード上で以下のように 2 行追加する public ref class Form1 : public System::Windows::Forms::Form { private:graphics^ mygraphics;// 追加!!! private:pen^ mypen;// 追加!!! public: Form1(void) 16

17 描画用オブジェクトの作成 ソースコード上で以下のように 2 行追加する public:form1(void) { InitializeComponent(); // //TODO: ここにコンストラクタコードを追加します // mygraphics = picturebox1->creategraphics();// グラフィック追加 mypen = gcnew Pen(Brushes::Black);// 黒色ペン追加 } 17

18 アクションの設定 ( ライン描画 ) 先ほど追加したボタン用のイベントハンドラにライン描画メソッドを設定 ( 下の例は (50,50) から (150,150) へのライン ) private: System::Void button1_click(system::object^ sender, System::EventArgs^ e) { mygraphics->drawline(mypen,50,50,150,150);// ライン描画メソッド追加 } 18

19 ビルドと実行 1. ビルド ソリューションのビルド 3. フォームの確認とボタンをクリック 2. デバッグ デバッグなしで開始 4. ライン描画を確認 19

20 アニメーションの描画 20

21 Timer の追加 1. ツールボックスを選び Timer をクリックする 2.Form1 上に追加して, timer1 をダブルクリック 21

22 時刻用変数の宣言 最初にオブジェクトの宣言をした場所に時刻用整数型変数 mytime を宣言する public ref class Form1 : public System::Windows::Forms::Form { private:graphics^ mygraphics; private: System::Windows::Forms::Timer^ timer1; private:pen^ mypen; private:int mytime;// 時刻用変数追加 public: Form1(void) 22

23 アクションの設定 (timer1 スタート ) ボタン用のイベントハンドラにライン描画メソッドを消して, タイマーのスタートメソッドを設定 時刻を初期化する private: System::Void button1_click(system::object^ sender, System::EventArgs^ e) { timer1->start();// タイマーのスタートメソッド追加 mytime = 0;// 時刻を初期化 } 23

24 アニメーションの設定 一定時間ごとに呼ばれるメソッドに以下の 3 行を追加 白で塗りつぶす (mygraphics->clear(color::white);) 時刻に応じた線を描画する ( 座標 ( 時刻, 時刻 ) から座標 (100,100) への線 ) 時刻を更新する (mytime++) private: System::Void timer1_tick(system::object^ sender, System::EventArgs^ e) { mygraphics->clear(color::white);// 白で塗りつぶし mygraphics->drawline(mypen,mytime,mytime,100,100);// 線の描画 mytime++;// 時刻の更新 } 24

25 ビルドと実行 1. ビルド ソリューションのビルド 3. フォームの確認とボタンをクリック 2. デバッグ デバッグなしで開始 4. アニメーションを確認 25

26 課題 ( 時計のアニメーション ) 26

27 時計 x 内側半径 (rad1) 1 文字盤半径 (rad2) y 中心座標 (cx,cy) 2 3 外側半径 (rad3) θ 4 秒針 : 先端座標は (rad1 cos(θ)+cx, rad1 sin(θ)+cy)

28 ヘッダの追加 stdafx.cpp に stdio.h, math.h を追加 ( 必ず stdafx.h の上に追加のこと!!) 28

29 フォントの宣言と確保 public ref class Form1 : public System::Windows::Forms::Form { private:graphics^ mygraphics; private:system::windows::forms::timer^ timer1; private:pen^ mypen; private:int mytime; private:system::drawing::font^ myfont; ~ 中略 ~ mygraphics = picturebox1->creategraphics(); mypen = gcnew Pen(Brushes::Black); フォントはサンセリフ, 14pt, ボールド 文字盤用フォントの宣言 myfont = gcnew System::Drawing::Font(FontFamily::GenericSansSerif, 14, FontStyle::Bold); } 29

30 時計の描画 ( タイマーイベント全体 ) private: System::Void timer1_tick(system::object^ sender, System::EventArgs^ e) { int i; double cx,cy,rad1,rad2,rad3,pi,th; char ci[1000]; cx=100.0; cy=100.0; rad1=50.0; rad2=65.0; rad3=95.0; pi= ; th=(double)(mytime-90)/180.0*pi; mygraphics->clear(color::white); mygraphics->drawline(mypen,(int)(cx+rad1*cos(th)),(int)(cy+rad1*sin(th)),(int)cx,(int)cy); mygraphics->drawellipse(mypen,(int)(cx-rad1),(int)(cy-rad1),(int)(rad1*2.0),(int)(rad1*2.0)); mygraphics->drawellipse(mypen,(int)(cx-rad3),(int)(cy-rad3),(int)(rad3*2.0),(int)(rad3*2.0)); for (i=1;i<=12;i++){ sprintf(ci,"%d",i); String^ ts= gcnew String(ci); th = (270.0+(double)i*30.0)/180.0*pi; mygraphics->drawstring(ts,myfont,brushes::blue, (int)(cx+(15.0+rad2)*cos(th)-10.0),(int)(cy+(15.0+rad2)*sin(th)-10.0)); } mytime++; } 30

31 時計の描画 ( 説明その 1) cx = 100.0;cy = 100.0; 中心座標 rad1 = 50.0;rad2 = 65.0;rad3 = 95.0; pi = ; 円周率 th = (double)(mytime-90)/180.0*pi; 内側半径, 文字盤半径, 外側半径 時間を角度 ( ラジアン ) に変換 (1 回呼び出されるごとに 1 度進む ) -90 度 ( 文字盤 12) からスタート mygraphics->clear(color::white); 背景を白でクリア 31

32 時計の描画 ( 説明その 2) mygraphics->drawline(mypen,(int)(cx+rad1*cos(th)),(int)(cy+rad1*sin(th)),(int)cx,(int)cy); 秒針の描画 中心から (rad1*cos(th),rad2*sin(th)) の位置へライン描画 mygraphics->drawellipse(mypen,(int)(cx-rad1),(int)(cy-rad1),(int)(rad1*2.0),(int)(rad1*2.0)); 内側半径を持つ ( 楕 ) 円描画 ( 引数は左上 x 座標 左上 y 座標 x 方向幅 y 方向幅 mygraphics->drawellipse(mypen,(int)(cx-rad3),(int)(cy-rad3),(int)(rad3*2.0),(int)(rad3*2.0)); 外側半径をもつ ( 楕 ) 円の描画 for (i=1;i<=12;i++){ 文字盤の描画 (1から12まで) sprintf(ci,"%d",i); String^ ts= gcnew String(ci); th = (270.0+(double)i*30.0)/180.0*pi; 文字盤位置 ( 角度 ) をラジアンに変換 (30 度ごと ) mygraphics->drawstring(ts,myfont,brushes::blue, (int)(cx+(15.0+rad2)*cos(th)-10.0),(int)(cy+(15.0+rad2)*sin(th)-10.0)); 青 (Brushes::Blue) で指定したフォント (myfont) 文字盤を文字盤半径位置に描画 ( 印刷の都合上 2 行ですが かならず続けて書いてください ) 32

33 ビルドと実行 1. ビルド ソリューションのビルド 3. ボタンをクリック 2. デバッグ デバッグなしで開始 4. 秒針の回転を確認 33

34 関数 needle() の作成 34

35 functions.cpp Form1.h button, 時計, 針の表示 functions.cpp 内に新しい関数 needle() 次の時刻の針先端の位置を計算 Form1.h 角度など 針先端の座標 (position[]) functions.cpp 関数 needle() 針先端の位置を計算

36 functions.cpp の作成 ソースファイル 右クリック 追加 新しい項目 C++ ファイル (.cpp) を選択し, ファイル名 (functions.cpp) を入力 追加 functions.cpp が作成される 35

37 変数 position の宣言 (Form1.h 内 ) 追加 37

38 関数 needle() の宣言と作成 Form1.h の先頭部分に追加 functions.cpp に関数 needle() を作成 38

39 関数 needle() を使う Form1.h の時計の描画部分 (private: System::Void timer1_tick(system::object^ sender, System::EventArgs^ e)) mygraphics->drawline(mypen, (int)(cx+rad1*cos(th)), (int)(cy+rad1*sin(th)), (int)cx, (int)cy); を, 以下のように書き換える needle(rad1,th, cx, cy, position); mygraphics->drawline(mypen, (int)position[0], (int)position[1], (int)cx, (int)cy); ビルドと実行! 39

40 課題 ( 第 1 日目 ) 以下のプログラムが完成したら TA を呼び, 動作確認をしてもらって下さい. 1 ボタンを押しライン描画 (p.17) 2 ボタンを押しラインを移動 (p. 23) 3 時計のアニメーション (p. 31) 4 関数 needle() を用いた時計のアニメーション (p. 37) 40