図形が回る?! 図形を回転させる方法 【 Processing 入門編 No.10 】
こんにちはみおです！
今回は入門編No.10という事で、図形を回転させるコードを紹介していきたいと思います。
まずProcessingって何？と思った方はこちらでチェックしてみてください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
今日の作品
まず今日紹介するコードを応用して出来る作品をご紹介します
静止画にするとこのような感じになります。
この全体コードは最後に紹介するので、ぜひ最後まで見ていってください。
それでは早速やっていきましょう！
今日使う新しい単語
今回使う新しい単語を軽く紹介していきたいと思います。
詳しくはまた出てきた時に説明するので、軽く見流す程度で大丈夫です。
- angle : 回転角度
- rotate : 原点を中心に回転
- rectMode : 四角形の描画モードの変更
- CENTER : 基準点を図形の中心にする
1. 前回までのコードを使って準備をしよう
まずは、前回までのコードを使って準備をしていきたいと思います。
このコードを入力してみてください。
ここまでで分からない単語などがある方は下からチェックしてみてください。
- size / rect が分からない方
意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】 - Processingの基礎と応用
- fill / noStroke / background が分からない方
作品をもっとカラフルに！ 色の設定方法【 Processing 入門編 No.3 】 - Processingの基礎と応用
- void setup / void draw / frameRate が分からない方
【 Processing 入門編 No.6 】〜アニメーションを作ってみよう〜 - Processingの基礎と応用
ここまでは入力出来ましたか？
色などは自分好みで設定しても大丈夫です。
2. 図形を回転させるアニメーションを作ろう
『 float 』を使って『 angle 』を宣言をしよう
最初に float を使って angle を宣言して、数値を代入したいと思います。
- float が分からないという方はこちらからチェック
変数を使って複数の円を描く方法【 Processing 入門編 No.4 】 - Processingの基礎と応用
angleとは、回転角度の事を言います。
この数値を変えるだけで、図形が回転する角度を調節する事が出来ます。
それでは早速やってみましょう！
void setup() { の上に行を空けて、
float angle = 0.0 ;
と入力してみてください。
これで angle を宣言し、数値0を代入する事が出来ました。
ここまでは大丈夫でしょうか。
今のコードはこのようになっています。
ここまで出来たら次に進んでいきましょう！
『 rotate 』を使って図形を回す設定をしよう
続いては、いよいよ図形を回す設定をしたいと思います。
使うのは『 rotate 』という単語です。
rotate は、主に「 rotate ( angle ) ; 」という風に使い、意味は原点(0, 0)を中心に座標全体を angle 回転するとなります。
それではコードに起こしてみましょう。
background(0); の下に
rotate ( angle ) ;
と入力してみてください。
これで回す設定が出来ました。
『 rectMode 』と『 CENTER 』を使って基準点を変えよう
次に、『 rectMode 』と『 CENTER 』を使って四角形の基準点を変えていこうと思います。
もともと四角形の基準点は左上で、そこを基準として図形が描かれていました。
それを中心を基準に図形を描くように設定していこうと思います。
rectMode は四角形の作画モードの変更をする事が出来ます。
そしてCENTER は図形の中心を意味します。
＊円の作画モードを変更する時は、ellipseMode を使用します
それではコードに起こしてみましょう。
先程書いたコードの下に、
rectMode ( CENTER ) ;
と入力してみてください。
これで基準を中心にする事が出来ました。
ここまでコードはこうなっていますか？
これが出来たら、いよいよ最後です。
『 angle 』を使って角度を更新して図形を動かす
最後に角度を更新していく設定をします。
これを忘れると、どれだけ色々な設定をしても図形は動いてくれません。
忘れないように注意してください。
コードは非常に簡単です。
rect(400, 300, 300, 300); の下に
angle += 0.1 ;
と入力してください。
＋＝というのは、angle = angle ＋ 0.1 を省略したものだと思ってください。
ここまで書けたら完成です。
最後にコードの見直しをしてみてください。
抜けている所がなければ、プログラムを実行してみてください。
こうなったら完璧です！！
今日の作品のコード紹介
最後に今日の作品のコードを紹介していこうと思います。
コードはこちら
今日のまとめ
今回は図形を回す方法を紹介していきました！
少しでも参考になったらいいなと思います。
皆さんもぜひ自分流のアレンジなどをやってみてください！
という事で今回はこの辺で終わりにしたいと思います。
最後まで見てくださりありがとうございました。
また次回も見てもらえると嬉しいです。
年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─ 
合わせて読みたい
【 Processing 番外編 】〜今読みたい用途別オススメ参考書４選〜 - Processingの基礎と応用
【 Processing 応用編 No.1 】オリジナル作品を作る前に！〜押さえておきたい5つのポイント〜 - Processingの基礎と応用
意外と知らない⁉︎ Processingの歴史・ライセンスは必要？ 【 Processing 番外編 】 - Processingの基礎と応用
アニメーションで"大きさの違う"図形を描く方法【 Processing 入門編 No.7 】 - Processingの基礎と応用
