複数の図形が同時に回転！？ あるコード〇〇が成功の秘訣 【 Processing 入門編 No.12 】
こんにちはみおです！
今回は複数の図形を同時に回転させる方法をご紹介していこうと思います。
複数の図形を同時に回転させるには、あるコードが成功の秘訣となります。
なので、今回はそのコードと成功例、そして失敗例を紹介していきます！
まずProcessingって何？と思った方はこちらをチェックしてみてください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
そして、今回は入門編NO.10、No.11の続きとなります。
そちらをまだ見ていないよという方はぜひこちらもチェックしてみてください！
図形が回る?! 図形を回転させる方法 【 Processing 入門編 No.10 】 - Processingの基礎と応用
〇〇を付け足すだけの簡単作業!! 画面の中心を軸に図形を回す方法 【 Processing 入門編 No.11 】 - Processingの基礎と応用
それでは早速やっていきましょう！
- 今日の作品
- 今日使う新しい単語
- 1. No.10 のコードを用いて準備をしよう
- 2. 複数の図形を同時に回転させよう（失敗例）
- 3. 複数の図形を同時に回転させよう (成功例)
- 今日の作品のコード紹介
- 今日のまとめ
今日の作品
今日紹介するコードを応用して作れる作品がこちら
静止画にするとこのような感じになります！
この作品のコードは最後に紹介するので、ぜひ最後まで見ていってください！
こんなに簡単！店舗向けホームページがすぐ始められる「グーペ」 
今日使う新しい単語
ここでは今日使う新しい単語を紹介していきたいと思います。
詳しい説明はまた出てきた時にするので、軽く見流す程度で大丈夫です。
- pushMatrix : 現在の座標の状態をスタックに一度保存する
- popMatrix : スタックに保存されていた状態に座標を復元する
1. No.10 のコードを用いて準備をしよう
まずはNo.10のコードを使って、新しくコードを書くための準備をしていきたいと思います。
No.10はこちらから
図形が回る?! 図形を回転させる方法 【 Processing 入門編 No.10 】 - Processingの基礎と応用
下のようにコードを入力してみてください！
2. 複数の図形を同時に回転させよう（失敗例）
No.11 のコードを使って1つ目の図形を描こう
まずは普通に1つ目の図形を描いていきたいと思います。
No.11 はこちらから
〇〇を付け足すだけの簡単作業!! 画面の中心を軸に図形を回す方法 【 Processing 入門編 No.11 】 - Processingの基礎と応用
background(0); の下に行を空けて、
translate ( width/4, height/4 ) ;
rotate ( angle ) ;
rectMode ( CENTER ) ;
rect ( 0, 0, 100, 100 ) ;
と入力してみてください。
ここまでは大丈夫ですか？
分からない方はNo.11で詳しく説明しているので、ぜひ見てください！
その調子で2つ目の図形も描いてみよう
1つ目の図形も描いていこうと思います！
基本的には先程と同じです。
さっき描いたコードの下に
translate ( width / 2, height / 2 ) ;
rotate ( angle ) ;
rectMode ( CENTER ) ;
rect ( 0, 0, 200, 200) ;
と入力してください。
これで2つの図形が書けました。
draw() { } の中はこんな感じになっていますか？
これで1回プログラムを実行してみてください！
このようになります。
「なんか思っていたのと違う」と思いませんか？
実はこれ失敗例なんです。
1つ目の図形は図形の中心を軸に回転してくれるのですが、2つ目の図形は1つ目の図形を中心に大きく回転してしまっています。
これは、1つ目の図形の移動と回転で変更された座標の状態が、そのまま2つ目の図形を描画する時の基本図形になってしまっているのでこのような事になります。
それでは2つとも図形の中心を軸に回転させるにはどうしたら良いのでしょうか。
3. 複数の図形を同時に回転させよう (成功例)
先ほどのような失敗を防ぐためには、変更する前の座標の状態を一時保存して、描画が終わったらまた元に戻すという作業が必要です。
ちなみに先ほどの失敗コードはこちら
このコードはそのまま使うので、まだ入力していない方は入力してください。
『 pushMatrix 』と『 popMatrix 』を使って修正をしよう
座標を一時保存して、描画が終わったら元に戻すという作業は、
『 pushMatrix 』と『 popMatrix 』をいうコードを使います。
pushMatrix は、現在の座標を一時保存するコードで、
popMatrix は、変更されていた座標を元に戻すコードになります。
コードの形は
pushMatrix () ;
//座標を変更
//描画
popMatrix () ;
となります。
それではコードに起こしてみましょう！
1つ目と2つ目の描画のコードをそれぞれ pushMatrix () ; と popMatrix () ; で囲ってみてください。
pushMatrix () ;
translate ( width / 4, height / 4 ) ;
rotate ( angle ) ;
rectMode ( CENTER ) ;
rect ( 0, 0, 100, 100 ) ;
popMatrix () ;
pushMatrix () ;
translate ( width / 2, height / 2 ) ;
rotate ( angle ) ;
rectMode ( CENTER ) ;
rect ( 0, 0, 200, 200 ) ;
popMatrix () ;
このように入力出来たら完成です。
下のコードと見比べて確認してみてください。
確認が出来たらプログラムを実行してみてください。
これで2つとも図形の中心を軸に回転させる事が出来ました。
今日の作品のコード紹介
最後に冒頭に紹介した今日の作品のコードを紹介したいと思います。
コードはこちら
今日のまとめ
今回は複数の図形を同時に回転させる方法について紹介をしてみました！
少しでも参考になったら良いなと思います。
皆さんもこのコードを使って自分なりにアレンジしてみてください！
という事で今回はこの辺で終わりにしたいと思います。
最後まで見てくださり本当にありがとうございました！
また次回も見てもらえると嬉しいです。
合わせて読みたい
意外と身近!? 日常生活などで使われるプログラミング 【 Processing 番外編 】 - Processingの基礎と応用
アニメーションで"大きさの違う"図形を描く方法【 Processing 入門編 No.7 】 - Processingの基礎と応用
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
オリジナル作品を作る前に！〜押さえておきたい5つのポイント〜【 Processing 応用編 No.1 】 - Processingの基礎と応用
