海さんぽ演出「長靴」

1. 長靴
海さんぽ 1

2. 目次
1.表紙
2.目次
3.仕様
4.仕様するクラス
5〜9.ofAppクラス
10〜19.D_bootsクラス
20〜25.使用した書き方一覧 2

3. 仕様
 長靴が漂っている。
 マウスをクリックしているとマウスカーソルの方へ長靴が近づいてくる。
 ある範囲まで近づいて10/60秒経過したら、長靴が沈んでいく<小さく透明になっていく>。
 長靴が完全に消えてからしばらくして、画面の端から長靴が再登場する。
3

4. 使用するクラス
ofApp.h
ofApp.cpp<基となるクラス>
D_boots.hpp
D_boots.cpp<長靴についてのクラス>
4

5. ofApp.h
変数を宣言する。
• 自作クラスを参照する型
• mboots<D_bootsクラスを参照する変数>
• bool型
• MouseClicked<マウスがクリックされたか
どうか>
5

6. ofApp.cpp/setup
• 背景は青っぽい色にする
• フレームレートは60回/秒
• MouseClickedの初期値はfalse
• D_bootsクラスのsetupD_boots関数を呼び出す
6

7. ofApp.cpp/update
• マウスの座標を測定して、変数mousePosition
に入れる
• D_bootsクラスのupdateD_boots関数を呼び出す
7

8. ofApp.cpp/draw
• D_bootsクラスのdrawD_boots関数を呼び出す
8

9. ofApp.cpp/mousePressed
ofApp.cpp/mouseReleased
[mousePressed]
• 変数MouseClickedにtrueを代入する
[mouseReleased]
• 変数MouseClickedにfalseを代入する
9

10. D_boots.hpp
引数を指定する。
• updated_bootsには
mouseX,mouseY,mousePosition,MouseClicked
をofAppから持ってくる。
変数を宣言する。
• int型
• mTime1<演出開始から終了までカウントする>
• mNumber
<長靴か登場する時にどの端から出てくるか>
10

11. • float型
• mWidth<画像の幅>
• mHeight<画像の高さ>
• mRadius1~5<波紋1~5の半径>
• mAlphaBlending<画像の透明度>
• ofVec2f型
• mPosition<画像の座標>
• mVelocity<画像の動く速度>
• ofImage型
• mD_boots<長靴の画像>
• bool型
• mIsSpeedError<画像がマウスの座標に向かっているかどうか>
11
D_boots.hpp(続き)

12. D_boots.cpp/setup D_boots
• 長靴の画像を読み込む<loadメソッド>
• mTime1の初期値は0
• 画像が画面上に登場する時の初期座標
をmPositionに代入。
Ex.mNumberが0の時は画面左端、
2の時は画面上端
12

13. D_boots.cpp/setup D_boots
• 画像の速度をー1〜1の間でランダムにとる。
動きが遅すぎないように、速度がー0.8〜0.8
をとった時は再度、速度をー1〜1の間で
ランダムにとる。
値が決まったら、mVelocityに代入する。
• 画像の大きさは幅100,高さ100
• 波紋!〜5の半径の初期値は全て0
• 画像の透明度の初期値は255<不透明>
• 最初は画像は漂っているだけなので
mIsSpeedErrorの初期値はfalse
13

14. D_boots.cpp/
update D_boots
• もしMouseClickedがtrueなら
mTime1のカウント<演出中のカウント>について
• もしマウスカーソルが画像近くの範囲にあるなら
• mTime1でカウントする
• もしそうでない<近くの範囲にない>なら
• もしmTime1で10までカウントしているなら
カウントを続ける
14

15. mTime1>=10の時の長靴と波紋について
• もしmTime1が10以上なら
• 画像は縮小、透明になっていく
• タイミングをずらして、波紋1〜5の半径をそれぞれ拡大する。
タイミングはmTime1で調節する。
15
D_boots.cpp/
update D_boots(続き)

16. D_boots.cpp/
update D_boots
<もしMouseClickedがtrueなら
→もしmTime1が10以上なら>の中の続き
• もし画像が透明なら
演出終了して、値の再設定
• mTime1に0を代入<カウント終了>
• 波紋1〜5の半径は全て0
16

17. • 画像の座標の再設定
変数mNumberの値を0〜3の間でランダムにとる。
値によって、画像の初期座標がどの端から出てくるか決まる。
Ex. mNumber = 0の時は画面左端から画像が登場。
• 画像の動く速度の再設定
• 画像の大きさの初期化<幅100,高さ100>
• 画像の透明度の初期化<255>
17
D_boots.cpp/
update D_boots(続き)

18. D_boots.cpp/
update D_boots
<もしMouseClickedがtrueなら>の中の続き
mTime1 < 10の時
• もしそうでない<mTime1が10未満>なら
• 画像がマウスカーソルの座標に
向かってくる。
向かってくる速さが距離によって
変わらないように
カーソルの座標と画像の座標の差分
を<距離×0.05>で割った値を
変数mVelocityに代入する。
18

19. ＊場合分けをして<ー1>を掛ける位置を変えているのは、
割る数が負にならないようにするため。
＊距離に<0.05>を掛けているのは速さが小さすぎないように。
• 変数mIsSpeedErrorにtrueを代入
19
D_boots.cpp/
update D_boots

20. D_boots.cpp/
update D_boots
• もしMouseClickedがfalseなら
• もしmTime1が10未満なら
• もしmIsSpeedErrorがtrueなら
• 画像の動く速度を再設定
• mIsSpeedErrorにfalseを代入
• 反射
• mTime1に0を代入
20

21. D_boots.cpp/
update D_boots
<もしMouseClickedがfalseなら>の続き
• もしmTime1が10以上なら
演出を続ける
• mTime1のカウントを続ける
• <もしMouseClickedがtrueなら
→もしmTime1が10以上なら>
の中身と同じ
21

22. D_boots.cpp/
update D_boots
<もしMouseClickedがfalseなら
→もしmTime1が10以上なら>の続き
• <もしMouseClickedがtrueなら
→もしmTime1が10以上なら>の中身と同じ
「もしMouseClickedが＊＊なら・・・」のIf分の外で
• もしmTime1が10未満なら
• mPositionにmVelocityを加えて画像を動かす。
＊mTime1が10以上の時は演出が始まっているので
動かさない。
22

23. D_boots.cpp/draw
D_boots
• タイミングをそれぞれずらして波紋1〜5を表
示する。
mTime1で各タイミングを調節する。
• 波紋の色は青<RGBのB = 255>
• 枠のみ図形にする
• 円を各半径で、画像の大きさと座標を考
慮した座標に表示
• 画像の透明度に変数mAlphaBlendingを指定
• 画像を幅mWidth,高さmHeightで座標
mPositionに表示 23

24. 24
完成！

25. 使用した書き方一覧①
 変数の宣言 ： 型 変数名;
 ＊型の例1. intは整数型、floatは実数型、ofVec2fは2次元のベクトルデータ型、boolは真偽値を入れる型
 ＊型の例2.ofImage型はofImageクラスを使う変数の型
 ＊型の例3.ofSoundPlayer型はofSoundPlayerクラスを使う変数の型
 ＊型の例4.自分が作ったクラスを使う変数の型の名前はクラス名
25

26. 使用した書き方一覧②
 静的変数であることの宣言 ： static const 型 変数名;
 配列の宣言 ： 型 変数名[個数];
 関数orメソッドの宣言 ： 型 関数orメソッド名（引数）;
 ＊C++にはプロパティという機能はない。
26

27. 使用した書き方一覧③
 クラスの関数orメソッドを呼び出す ： <クラス名型の>変数名 関数orメソッド名（引数）;
 ＊関数の例<ofAppクラスの場合> ： setup、update、draw
 ＊メソッドの例<ofImageクラスの場合>： load<ファイル読み込み>、draw<表示>
 ＊メソッドの例<ofSoundPlayerクラスの場合)>：
setVolume<音量調節>、play<サウンド再生>、setLoop<ループ再生するかどうか>
27

28. 使用した書き方一覧④
 フレームレートの指定 ： ofSetFrameRate<1秒間に何回実行するか>;
 背景の指定 ： ofSetBackgroundColor(R, G, B); ： ＊RGBの各値は0〜255
 ランダムな値の取得 ： ofRandom(最小値, 最大値); ： ＊ 最小値と最大値の間の乱数を取る
 2次元のベクトルデータの値の指定の例 ： 「<ofVec2f型の>変数.x 」 が変数のx座標を表す
28

29. 使用した書き方一覧⑤
 透明度をつける<AlphaBlendingをONにする>： ofEnableAlphaBlending（）;
＊OFバージョン0.8.0以降はデフォルトでONになっている
 描画色と透明度の設定 ： ofSetColor（R, G, B,透明度）; ： ＊ RGB、透明度の各値は0〜255
 コードで描画した図の枠のみ ： ofNoFill();
 演算子の例 ：&&は「かつ」、||は「または」を意味する。
++は「+1」、変数 += 数は「変数に数を足した値を、変数に代入する」の意味。
29

30. 使用した書き方一覧⑥
 条件分岐(if文)： if（条件）{
処理
}else if（条件）{
処理
}else（条件）{
処理
}
 繰り返し処理(while文)：while(条件){
処理
}
条件に当てはまる間は繰り返し処理を実行
30