"大きさ" と "色" が変化していくアニメーションの作り方【 Processing 入門編 No.9 】
こんにちはみおです！
今回はProcessing入門編No.9という事で、大きさと色がどんどん変化していくアニメーション作品の作り方を紹介したいと思います。
まずProcessingってなに？と思った方は是非こちらを読んでみてください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
今日の作品
今日紹介するコードで作れる作品がこちら
静止画にしてみるとこんな感じです。
これのコードは最後に紹介するので、是非最後まで見ていってください！
それでは早速やっていきましょう！
今日使う新しい単語
まずは今日使う新しい単語について軽く説明をしていきいたいと思います。
詳しくはまた出てきた時に説明するので、軽く見流す程度で大丈夫です。
- hue : 色の指定の時によく使われる置き換えの単語
- sin : 三角関数の正弦を求める
- frameCount : 現在のフレーム数
1.前回までのコードを使って準備をしよう
まずは前回までに使ったコードを使って準備をしたいと思います。
こちらのコードを入力してみてください。
ここまでは大丈夫でしょうか。
もし分からないコードなどがあれば、下からチェックしてみてください。
- sizeが分からない方はこちら
意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】 - Processingの基礎と応用
- background / noStroke が分からない方はこちら
作品をもっとカラフルに！ 色の設定方法【 Processing 入門編 No.3 】 - Processingの基礎と応用
- void setup / void draw / frameRate が分からない方はこちら
【 Processing 入門編 No.6 】〜アニメーションを作ってみよう〜 - Processingの基礎と応用
ここまでが入力出来たら、いよいよコードを書いていきましょう！
 |
 |
 |
 |
|
|||||||
2.大きさと色が変化するアニメーション作品を作ろう
『 float 』で変数を宣言しよう
まずは、『 float 』を使って今日使う変数を宣言してきたいと思います。
『 float 』が分からないという方はこちらをチェック
変数を使って複数の円を描く方法【 Processing 入門編 No.4 】 - Processingの基礎と応用
今回宣言していくのは、大きさを表す変数の『 diameter 』と色相を表す変数の『 hue 』です。
diamterが分からないという方は先ほどの記事をみてみてください。
hue は今日初めて出てきた変数です。
hue は、diameterと似ていて、数値を代入する変数です。
diameterが図形の大きさを変える変数なのに対し、 hue は図形の色相を変える変数になります。
hueの数値を少しずつ変える事により、色相が変化していきます。
それではコードに書いてみましょう。
void setup() { の上に行を空けて、そこに
float diameter ;
float hue ;
と入力してみてください。
こんな感じになりましたか？
それでは次にいきたいと思います！
『 diameter 』と『 sin 』を使って図形の直径を変化させよう
今度は先ほど宣言した diameter を使って、アニメーション内で図形の直径を変化させていく設定をしたいと思います。
まず、sin とは三角関数の正弦を求める変数です。
数学で習ったという方もいるのではないでしょうか。
サイン( sin )、コサイン( cos )、タンジェント( tan )の sin です。
この sin をプログラミングでは図形の直径を変化させる時に使います。
完璧に理解しないとプログラミングは出来ないというわけでは無いので、なんとなく sin を使うんだなぐらいでも全然大丈夫です。
それでは早速コードに起こしてみましょう。
background(0); の下に、
diameter = 400 + sin ( frameCount * 0.1 ) * 200 ;
と入力してみてください。
ちなみにこっそりと『 frameCount 』という新しい単語が出てきました。
frameCountとは現在のフレーム数を表す変数です。
＊frame (フレーム) というのは、動画を構成する個々の静止画のことです。
frameRateと似ていて見間違いをしやすいので注意してください。
これで図形の直径を変化させるコードが出来ました。
このコードのつくりは、400が元の図形の大きさになります。
そして、sin ( frameCount * 0.1 ) で図形の直径を少しずつ大きくしていきます。
最後の200が図形が広がった時の大きさです。
少し難しいかもしれませんが、完成してプログラムを実行してみると分かりやすいかもしれないので、とりあえず進んでみましょう。
ここまでコードはこのような感じです
『 hue 』と『 sin 』を使って色相を変化させよう
直径の変化が出来たので、次は色相を変化させる設定をしたいと思います。
色相を変化させる時には、『 hue 』と『 sin 』を使っていきます。
コードのつくりは『 diameter 』の時と同じなので、サクサクやっていきましょう！
コードはこうなります。
hue = sin ( frameCount * 0.1 ) * 120 ;
fill ( 150, hue, 100);
まず1行目で色相を変化させるコードを入力しました。
これは先ほどの diameter の時と同じですね。
2行目では実際に色の指定をしています。
今回は緑の所に hue を代入しましたが、hue を代入する場所はどこでも大丈夫です。
- fill が分からないという方はこちらをチェックしてみてください
作品をもっとカラフルに！ 色の設定方法【 Processing 入門編 No.3 】 - Processingの基礎と応用
これで色を変化させるためのコードが入力出来ました。
ここまでのコードはこちら
ここまでは大丈夫ですか？
これで最後なので、あと少し頑張りましょう！！
最後に図形を描こう
どれだけ設定をしてきても、肝心の図形を描かなければ何も実行されません。
という事で最後に図形を書いていきましょう。
今回は円で描いていこうと思います。
円の時に使う単語は『 ellipse 』です。
- ellipse が分からない方はこちらでチェック
意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】 - Processingの基礎と応用
では実際にコードに起こしてみましょう！
ellipse ( width/2, height/2, diameter, diameter ) ;
}
これで円を描くことが出来ました。
- width / height が分からない方はこちらをチェック
変数を使って複数の円を描く方法【 Processing 入門編 No.4 】 - Processingの基礎と応用
最後の } も絶対に忘れないでください。
これでコードが全部書けました！！
コードはこのようになっていますか？
出来ていたら、プログラムを実行してみてください。
出来ましたか？
大きさと色を変化させるアニメーションはこのようして作れます。
今日の作品のコード紹介
最後に今日の作品のコードを紹介したいと思います。
今日の作品のコードはこちら
今日のまとめ
今回は大きさと色が変化していくアニメーションの作り方を紹介してみました。
少しでも参考になれば嬉しいです。
ぜひ、基礎をしっかりとして自分流のアレンジ作品やオリジナル作品を作ってみて下さい。
という事で今回はこの辺で終わりにしたいと思います。
最後までみてくださりありがとうございました。
また次回も見てもらえると嬉しいです。
合わせて読みたい
【 Processing 番外編 】〜今読みたい用途別オススメ参考書４選〜 - Processingの基礎と応用
意外と知らない⁉︎ Processingの歴史・ライセンスは必要？ 【 Processing 番外編 】 - Processingの基礎と応用
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
【 Processing 応用編 No.1 】オリジナル作品を作る前に！〜押さえておきたい5つのポイント〜 - Processingの基礎と応用
