アニメーションで"大きさの違う"図形を描く方法【 Processing 入門編 No.7 】
こんにちはみおです。
今回はアニメーションを使って、大きさがバラバラの図形を描いていきたいと思います。
まずProcessingって何？という方はよかったらこちらを見てみてください！
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
それでは早速やっていきましょう！
今日の作品
今日の紹介するコードを使って出来る作品がこちら
画像にするとこんな感じです。
それではやっていきましょう！
1.前回のコードを使って準備をしよう！
まずは前回のコードの一部を利用して、準備をしたいと思います。
前回が分からないよという方はこちらをご覧ください。
【 Processing 入門編 No.6 】〜アニメーションを作ってみよう〜 - Processingの基礎と応用
入力してもらいたいコードはこちらです。
ここまで書けたら早速アニメーションを作っていきましょう！
2.大きさのバラバラなアニメーション作品を作ろう
『 diameter 』を使って大きさを変える設定をしよう
まずは大きさを変える単語の『 diameter 』と距離を求める単語の『 dist 』を使って大きさを変えるための設定をしていきます。
float diameter = 30 - dist / 10.0;
このように入力してみてください。
distが分からないという方
【 Processing 入門編 No.6 】〜アニメーションを作ってみよう〜 - Processingの基礎と応用
diameterが分からないという方
【 Processing 入門編 No.4 】〜変数を使って複数の円を描く方法〜 - Processingの基礎と応用
これをすると何を設定出来るのかというと、
描画する点の直径を距離から算出して、大きさをそれぞれ変えてくれます。
ここまでのコードはこちら
大丈夫ですか？
ここまで出来たら次に進みましょう！
『 if 』を使って条件をつけよう
今度は『 if 』を使っていきたいと思います。
if が分からないという方
【 Processing 入門編 No.5 】〜ランダムに図形を描く方法〜 - Processingの基礎と応用
if ( diameter > 0 ) {
stroke(255, 255, 0);
ellipse(x, y, diameter, diameter);
}
}
と入力してみてください。
ここで注意なんですが、最後に『 } 』を2個つけるという事を忘れないでください。
1個目は『 if 』のかっこで、
2個目は『 draw 』のかっこです。
そしてこれの意味は、もし直径が０以上だったら色を指定して円を描画するという事になります。
私はこの色で設定していますが、自分の好きな色にしてもらって大丈夫です。
ここまで書けたら完成です。
コードはこうなっていますか？
これが書けたらプログラムを実行してみてください。
こうなっていたら大丈夫です。
これで今日の作業は以上になります。
基礎がしっかりと出来ていれば、非常に簡単だったのではないかなと思います。
今日の作品のコード紹介
最後に今日の作品のコードを紹介していきたいと思います。
今日の作品とは最初にお見せした動画の事です。
まだ見てないよという方は、ぜひ先にそちらを見てみてください。
コードはこちら
今日のまとめ
今回は大きさのバラバラな図形をアニメーションで描くという事でやってきました。
いかがだったでしょうか。
これから見始めたという方は少しむずかしく感じたかもしれませんが、入門編の最初から見直すと、非常に簡単に思えると思います。
特に今日は新しい単語が無かったので、より簡単でしたね。
皆さんもぜひ自分なりにアレンジして作ってみてください！
という事で今回はこの辺で終わりにしたいと思います。
最後まで見てくださり本当にありがとうございました。
また次回も見てもらえると嬉しいです。
合わせて見たい
【 Processing 番外編 】〜今読みたい用途別オススメ参考書４選〜 - Processingの基礎と応用
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
【 Processing 入門編 No.4 】〜変数を使って複数の円を描く方法〜 - Processingの基礎と応用
