ベクトルを使って図形をランダムに動かす方法 【 Processing 実践編 No.5 】
こんにちはみおはぴです！
今回はベクトルという物を使って図形をランダムに動かす方法について解説していきたいと思います。
まずProcessingって何？と思った方はこちらからご覧ください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
それでは早速やっていきましょう！
「いたたた...!」エルセーヌのエステ体験行ってみた！【画像あり】 
今日の作品
今回紹介するコードをアレンジして作れる作品はこちらです。
静止画にするとこのような感じになります。
このコードは最後に紹介するので、ぜひ最後まで見ていってください！
今日使う新しい単語
続いて、今日使っていく新しい単語の紹介を軽くしていきたいと思います。
詳しい説明は、また出てきた時にするので、軽く見流す程度で大丈夫です！
- PVector : ベクトルを扱う為の仕組み
- velocity : 速度ベクトル
それではやっていきましょう！
1. 今までのコードを使って準備をしよう
まずは、今までのコードを使って準備をしていきたいと思います。
このように入力してみてください。
ここまでがわからないという方は、下の記事をご覧ください。
- size が分からない方
意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】 - Processingの基礎と応用
- background / noStroke / fill が分からない方
作品をもっとカラフルに！ 色の設定方法【 Processing 入門編 No.3 】 - Processingの基礎と応用
- void setup / void draw / frameRate が分からない方
超簡単!! アニメーション作品を作る方法【 Processing 入門編 No.6 】 - Processingの基礎と応用
- P2D が分からない方
どんどん広がっていく！？ 大量の図形を同時に操作する方法 【 Processing 実践編 No.1 】 - Processingの基礎と応用
2. ベクトルを使って図形をランダムに動かすには
まずベクトルとは、「大きさと向きを持った量」の事です。
詳しい説明は、また番外編でしていきたいと思います！
『 PVector 』を使って宣言文を作ろう
PVectorとは、ベクトルを扱う為の仕組みの単語で、位置ベクトル( location )や、速度ベクトル( velocity )を宣言する時に使います。
それでは、コードに表してみましょう！
void setup () { } の上に行を空けて、
PVector location ;
PVector velocity ;
と入力してみてください。
1行目が、位置ベクトルの宣言、2行目が速度ベクトルの宣言になります。
今のコードはこのような感じになっていますか？
ここまで出来たら次に進みましょう！
各ベクトルの初期設定をしよう
次に、宣言した各ベクトルの初期設定をしていこうと思います。
void setup () { } の中に、
location = new PVector ( random ( width ), random ( height )) ;
velocity = new Pvector ( random ( -4, 4 ), ranodm ( -4, 4 )) ;
と追加してください。
1行目が位置ベクトルの設定で、基準値を縦横ランダムに配置するという設定になります。
2行目が速度ベクトルの設定で、図形の移動速度を -4 から 4 にするという設定になります。
ここまでは大丈夫ですか？
それではどんどん進んでいきましょう！
図形を作画して加算設定をしよう
今度は、実際に図形を書いていきます。
今回は円を使っていこうと思います。
まず、void draw() { } の中に、
ellipse ( location.x, location.y, 20, 20 ) ;
と追加してみてください。
- ellipse って何と思った方はこちらの記事をご覧ください。
意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】 - Processingの基礎と応用
ここでは円を描画する基準点を location にする事によって、ランダムに図形を描画していく事が出来ます。
次に、今書いたコードの下に、
location.add ( velocity ) ;
と追加してください。
このコードは、位置ベクトルに速度のベクトルを加算(ある数に別の数を加える事)するコードになり、次にフレームの位置を決める事が出来ます。
void draw() { } の中はこうなっていますか？
確認出来たらいよいよ最後です！
『 if 』を使ってバウンドさせる設定をしよう
最後に『 if文 』を使って、画面の端で図形をバウンドさせる設定をしたいと思います。
まず、 if文が分からない方はこちらの記事をご覧ください。
実行する度に作品が変わる!! ランダムに図形を描く方法【 Processing 入門編 No.5 】 - Processingの基礎と応用
void draw() { } の中に、
if ( location.x < 0 || location.x > width) {
velosity.x = velocity.x * -1 ;
}
と追加してください。
これは、「もし画面の左端に、または右端に到達したら、X方向のスピードを反転(バウンド)させる。」という意味になります。
『 || 』は、AまたはBという意味です
詳しくはこの記事をご覧ください。
アニメーション基礎 〜図形を動かしてみよう〜【 Processing 入門編 No.8 】 - Processingの基礎と応用
これで左右の設定は終わりました。
次に、上下の設定をしていこうと思います。
先ほど書いたコードの下に、
if ( location.y < 0 || location.y > height ) {
velocity.y = velocity.y * -1 ;
}
と追加してください。
この意味は、「もし画面の下端、または上端に到達したら、Y方向のスピードを反転(バウンド)させる。」となります。
これでバウンドさせる設定が出来ました。
void draw() { } の中はこうなっていますか？
これで全てのコードが打ち終わりました。
コードを一度見直してみてください！
確認が出来たらプログラムを実行してみてください。
このようになっていたら完璧です！
今日の作品のコード紹介
最後に冒頭でもお見せした今日の作品のコードを紹介していこうと思います。
コードはこちらです。
background をsetup に移動した事がポイントです！
今日のまとめ
今回は、ベクトルを使って図形をランダムに動かす方法について紹介していきました。
この記事が少しでも参考になれば良いなと思います。
TwitterのDMとかにもどんどん質問募集しているので、分からない事があれば、ぜひ質問してください！
みおはぴ🐰 @大学生プログラマー (@mio_Processing) | Twitter
という事で今回はこの辺で終わりにしたいと思います。
また次回も見てもらえると嬉しいです！
合わせて読みたい
ランダムなデザインのアニメーションをアレンジしてみよう 【 Processing 応用編 No.3 】 - Processingの基礎と応用
入門編に出てきた単語一覧 No.2 〜 No.12 【 Processing 入門編 No.13 】 - Processingの基礎と応用
"大きさ" と "色" が変化していくアニメーションの作り方【 Processing 入門編 No.9 】 - Processingの基礎と応用
