シミュレーション＆ ビジュアライゼーション演習

第1日目
シミュレーション＆
ビジュアライゼーション演習
担当：泉 聡志 教授，志賀 拓麿 助教，波田野 明日可 助教
TA: 手島 健志，松嶋 直人
Supervised by 酒井教授
1
シミュレーション＆
ビジュアライゼーション演習
• Microso(VisualStudio2012を使用
(※現在は version2015が無償配布)
１、動くもののシミュレーション
• 球の衝突、振動など
• 分子動力学
• 熱流体・拡散
２、 シミュレーション結果を可視化
2
計算機使用の注意
• 2種類の計算機があります。
• どちらもVisualStudioのバージョンは同じ。
スクリーン
mpc:1～50
version2012を使用
スクリーン
演習室入口
mpc:51～100
version2012を使用
3
スケジュール
http://www.phonon.t.u-tokyo.ac.jp/teaching/SV2016/sv.html
第1日目（10/31（月））
(前半)Visual C++/CLIの導入演習、(後半)プログラム構造の説明
第2日目（11/4（金））
(前半)MDのプログラム演習、(後半)DEMのプログラム演習
第3日目（12/22（木））
自主課題
第4日目（1/5（木））
自主課題
第5日目（1/6（金））
自主課題
中間課題（第2日目）と最終課題（第5日目)があります。
4
VisualC++を使った簡単なフォー
ムアプリケーションの作り方
5
家のパソコンにもインストールできる
（VisualC++2012ExpressEdiAonは無料）
URL：
hFp://www.microso(.com/ja-jp/download/details.aspx?id=34673
もしくは検索エンジンでVC++Express2012などのキーワードで検索
(注：無料なのはExpressEdiAonのみ,他バージョンは有料)
他のVisualC++ExpressEdiAonは下記から
ダウンロードできます。
URL：
hFp://www.visualstudio.com/ja-jp/products/visual-studio-express-vs.aspx
家に持って帰るときはソリューションファイル（拡張子sln）の
含まれるディレクトリごと持って帰ろう！（互換性の問題もあ
るので他のバージョンを使う場合には気をつけましょう）
6
VisualC++（VC++）の起動
※以降、2012のバージョンで説明します。
1.講義ページ(http://www.phonon.t.u-tokyo.ac.jp/teaching/SV2015/lecture_SV.html)から
code_form.zipをダウンロードし，解凍しておく．
3.Visual　C++が起動
2.スタートメニュー ⇒ VisualC++2012Express
7
プロジェクトの読み込み
1.  ファイル⇒プロジェクトを開く
2.  code_form_v2012内の
Watch.slnファイルを選択
8
Form1のコード（ソース）表示
１．ソリューションエクスプ
ローラ⇒ヘッダーファイル
⇒Form1.hを右クリックメ
ニュー⇒コードの表示
２．Form1.hのソールファイルが表示さ
れた（今後要編集）
9
ボタンの追加
１．ソリューションエ
クスプローラー→
ヘッダーファイル
→Form1.hを右ク
リック→デザイナー
の表示
２．ツールボックス→
コモンコントロール→
「BuFon」をクリックする
３．Form１上で左クリッ
クするとボタンが追加
される
10
ピクチャーボックスの追加
１．ツールボックスを選
び,PictureBoxをクリッ
クする
２．Form1上に追加して、
大きさや位置を変える
３．右端のプロパティウィン
ドウで大きさや色を変える
11
ビルドと実行
１．ビルド⇒ソリューションのビルド
２．出力ウィンドウでビルドを確認
３.　デバッグ⇒デバッグなしで開始
４．フォームの確認
12
フォーム上への図形の描画
（ライン描画）
13
イベントハンドラの設定
１．追加したボタンをデザイン上
でダブルクリックする
２．ソースコード上にボタン用のイベントハ
ンドラが追加されていることを確認
14
描画用オブジェクトの宣言
ソースコード上で以下のように２行追加する
publicrefclassForm1:publicSystem::Windows::Forms::Form
{
private:Graphics^myGraphics;//追加!!!
private:Pen^myPen;//追加!!!
public:
Form1(void)
15
描画用オブジェクトの作成
ソースコード上で以下のように２行追加する
public:Form1(void)
{
IniAalizeComponent();
//
//TODO:ここにコンストラクタコードを追加します
//
myGraphics=pictureBox1->CreateGraphics();//グラフィック追加
myPen=gcnewPen(Brushes::Black);//黒色ペン追加
}
16
アクションの設定（ライン描画）
先ほど追加したボタン用のイベントハンドラにライン描画メソッドを設
定（下の例は(50,50)から(150,150)へのライン）
private:System::VoidbuFon1_Click(System::Object^sender,System::EventArgs^
e){
myGraphics->DrawLine(myPen,50,50,150,150);//ライン描画メソッド追加
}
17
ビルドと実行
１．ビルド⇒ソリューションのビルド
３．フォームの確認とボタンをクリック
２.　デバッグ⇒デバッグなしで開始
４．ライン描画を確認
18
アニメーションの描画
19
Timerの追加
１．ツールボックスを選び
Timerをクリックする
２．Form1上に追加して,Fmer1をダブ
ルクリック
20
時刻用変数の宣言
最初にオブジェクトの宣言をした場所に時刻用整数型変数myTimeを宣言する
publicrefclassForm1:publicSystem::Windows::Forms::Form
{
private:Graphics^myGraphics;
private:System::Windows::Forms::Timer^Amer1;
private:Pen^myPen;
private:intmyTime;//時刻用変数追加
public:
Form1(void)
21
アクションの設定（Amer1スタート）
• ボタン用のイベントハンドラにライン描画メソッドを消して,タイマーの
スタートメソッドを設定
• 時刻を初期化する
private:System::VoidbuFon1_Click(System::Object^sender,System::EventArgs^
e){
Fmer1->Start();//タイマーのスタートメソッド追加
myTime=0;//時刻を初期化
}
22
アニメーションの設定
• 一定時間ごとに呼ばれるメソッドに以下の3行を追加
• 白で塗りつぶす（myGraphics->Clear(Color::White);）
• 時刻に応じた線を描画する（座標（時刻,時刻）から座標（100,100）
への線）
• 時刻を更新する(myTime++)
private:System::VoidAmer1_Tick(System::Object^sender,System::EventArgs^e){
myGraphics->Clear(Color::White);//白で塗りつぶし
myGraphics->DrawLine(myPen,myTime,myTime,100,100);//線の描画
myTime++;//時刻の更新
}
23
ビルドと実行
１．ビルド⇒ソリューションのビルド
３．フォームの確認とボタンをクリック
２.　デバッグ⇒デバッグなしで開始
４．アニメーションを確認
24
課題（時計のアニメーション）
25
時計
x
内側半径(rad1)
1
文字盤半径(rad2)
y
2
中心座標(cx,cy)
3
外側半径(rad3)
θ
秒針：先端座標は
(rad1×cos(θ)+cx,rad1×sin(θ)+cy)
4
5
6
26
ヘッダの追加
stdafx.cppにstdio.h,math.hを追加
（必ず”stdafx.h”の上に追加のこと!!）
27
フォントの宣言と確保
publicrefclassForm1:publicSystem::Windows::Forms::Form
{
private:Graphics^myGraphics;
private:System::Windows::Forms::Timer^Amer1;
private:Pen^myPen;
private:intmyTime;
private:System::Drawing::Font^myFont; 文字盤用フォントの宣言
～中略～
myGraphics=pictureBox1->CreateGraphics();
myPen=gcnewPen(Brushes::Black);
フォントはサンセリフ,14pt,ボールド
myFont=gcnewSystem::Drawing::Font(FontFamily::GenericSansSerif,14,FontStyle::Bold);
}
28
時計の描画（タイマーイベント全体）
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=3.1415926535;
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++;
}
29
時計の描画（説明その１）
cx=100.0;cy=100.0; 中心座標
rad1=50.0;rad2=65.0;rad3=95.0;
内側半径,文字盤半径,外側半径
pi=3.1415926535; 円周率
th=(double)(myTime-90)/180.0*pi;
時間を角度（ラジアン）に変換（1回呼び出されるごとに1度進む）　-90度（文字盤12）からスタート
myGraphics->Clear(Color::White); 背景を白でクリア
30
時計の描画（説明その２）
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)文字盤を文字盤半径位置に描画
（印刷の都合上２行ですが、かならず続けて書いてください。）
31
ビルドと実行
１．ビルド⇒ソリューションのビルド
３．ボタンをクリック
２.　デバッグ⇒デバッグなしで開始
４．秒針の回転を確認
32
関数needle()の作成
33
funcAons.cpp
Form1.h ・・・button，時計，針の表示
functions.cpp内に新しい関数needle()
・・・次の時刻の針先端の位置を計算
functions.cpp
Form1.h
角度など
針先端の座標
（position[]）
関数needle()
針先端の位置
を計算
funcAons.cppの作成
ソースファイル⇒右クリック
⇒追加⇒新しい項目
C++ファイル（.cpp）を選択し，ファイ
ル名（functions.cpp）を入力
⇒追加
⇒functions.cppが作成される
35
変数posiAonの宣言(Form1.h内)
追加
36
関数needle()の宣言と作成
Form1.hの先頭
部分に追加
functions.cppに
関数needle()を作成
37
関数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);
ビルドと実行！
38
課題（第1日目）
以下のプログラムが完成したらTAを呼び，動作確
認をしてもらって下さい．
①　ボタンを押しライン描画（p.17）
②　ボタンを押しラインを移動（p. 23）
③　時計のアニメーション（p. 31）
④　関数needle()を用いた時計のアニメーション
（p. 37）
39