〇〇を付け足すだけの簡単作業!! 画面の中心を軸に図形を回す方法 【 Processing 入門編 No.11 】
こんにちはみおです！
今回は入門編No.10やった図形を回す方法のコードを利用して、画面の中心を軸に図形を回す方法をご紹介していきたいと思います。
入門編No.10の記事をまだ見てないという方はこちらからご覧ください。
図形が回る?! 図形を回転させる方法 【 Processing 入門編 No.10 】 - Processingの基礎と応用
そして、「Processingってなに？」と思った方はこちらをご覧ください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
それでは早速やっていきましょう！
今日の作品
まずは今日紹介するコードを少しだけ応用して作れる作品がこちら
静止画にしてみるとこのような感じになります。
コードは最後に紹介するので、ぜひ最後まで見ていってください。
今日使う新しい単語
まずは今日使っていく新しい単語について紹介をしていきます。
詳しい説明はまた出てきた時にするので、軽く見流す程度で大丈夫です！
- translate : 座標全体を移動させる
今回はこの1つだけです。
それではやっていきましょう！！
1. 入門編No.10のコードを入力してみよう
まずは入門編No.10のコードを入力していきます。
前回の記事
図形が回る?! 図形を回転させる方法 【 Processing 入門編 No.10 】 - Processingの基礎と応用
下のように入力してみてください。
2. 画面の中心を軸に図形を回してみよう
『 translate 』を使って座標全体を移動させよう
それではいよいよやっていきたいと思います。
（注意）
その前に、今回の作業はNo.10が分かっていたら本当に簡単で単純な作業です。
ただ、No.10のコードをほぼそのまま使用しているため、No.10が分かっていないと、説明が少ないので分からない可能性があります。
No.10をやった上で、今回のコードをやってみてください。
それではやっていきましょう！
結論から言うと、画面の中心を軸にするのは、座標全体を動かすだけで出来ます。
考え方としては、座標の原点を自分の好きな場所に移動させるという事です。
そして座標全体を動かす時に使われる単語が、『 translate 』です。
コードに起こしてみましょう！
background(0); の下に
translate (width/2, height/2 ) ;
と入力してみてください。
- width / height が分からない方はここからチェック
変数を使って複数の円を描く方法【 Processing 入門編 No.4 】 - Processingの基礎と応用
これで、座標を画面の中心に移動させる事が出来ました！
『 rect 』のX座標、Y座標を変更しよう
さっきのコードで回転の軸を変える事が出来ました。
ではそれに合わせて rect のX座標とY座標を少しだけ変更して、画面の中心で回るように設定しましょう。
- rect が分からないという方はここからチェック
意外と簡単⁉︎ 基本図形の描画の描画方法 【 Processing 入門編 No.2 】 - Processingの基礎と応用
今のコードは
rect ( 400, 300, 300, 300 ) ; になっていますよね。
これを
rect (0, 0, 300, 300 ) ;
に変更してください。
これで今日のコードを全て書く事が出来ました。
全体コードがこちら
チェックして間違いが無かったら、プログラムを実行してみてください。
このようになっていたら完成です。
今日の作品のコード紹介
最後に冒頭でお見せした今日の作品のコードを紹介していきたいと思います。
今日のまとめ
今回は画面の中心を軸に回転させる方法をご紹介していきました。
本当に簡単に出来るので、皆さんもぜひやってみてください！
この記事が少しでも参考になれば良いなと思います。
という事で今回はこの辺で終わりにしたいと思います。
最後まで見てくださり本当にありがとうございました！
また次回も見てもらえると嬉しいです。
合わせて読みたい
図形が回る?! 図形を回転させる方法 【 Processing 入門編 No.10 】 - Processingの基礎と応用
メディアアートとデジタルアートの違いは意外な〇〇だった!? 【 Processing 番外編 】 - Processingの基礎と応用
【 Processing 入門編 No.6 】〜アニメーションを作ってみよう〜 - Processingの基礎と応用
Processingを始めたいor始めたばかりの方へ 〜性格や用途別オススメ参考書４選【 Processing 番外編 】 - Processingの基礎と応用
