Processingで図形や画像を回転させるには？プロセッシング入門

2022 8/11

2021.07.07 2022.08.11

こんにちは！

小学生から高校生をサポートするプログラミング教室kobakoスタッフです。

Processing（プロセッシング）はデザイナーなどのノンプログラマー向けのプログラミング言語として誕生し、

その性質から子供やプログラミング初心者にもとっつきやすいプログラミング言語です。

今日はプロセッシングで図形や画像を回転させる方法をお伝えします。

ところで・・・

この記事を書いている人はだれ？

子供向けプログラミング教室です！

JavaScriptを使ったゲームプログラミング、ゲーム企画が得意な教室です。

プログラミング教室で実際に使用している、学習成果のある教材をYouTube無料配信しています。

YouTubeチャンネルをチェック!

動画で学ぶ

2022/08追記：YouTubeチャンネルで解説してみました。

僕のチャンネルではProcessing / p5.jsを使って、さまざまなゲームジャンルの作り方を解説しています。

ぜひチャンネル登録をお願いします。

回転させる命令

Processingに限らず、プログラミング言語には「関数」と呼ばれる命令があります。

四角形を描け！という命令は、rectという関数で実現できるわけです。

今回やりたい回転も、回転せよ！という関数があるわけです。

それが、rotate（ローテート）関数です。

rotate関数の使い方

では早速rotate関数を使い方をみていきます。

まずは四角形を描く

まずは基本となる四角形を描きましょう。まだ回転はさせません。

float x = 300;
float y = 200;
void setup(){
 size(600, 400);
}
void draw(){
 background(0);
 fill(255);
 rect(x, y, 50, 50);
}

rotate関数を使ってみる

ではrotate関数を使ってみましょう。

そうですね、45度くらい傾けてみましょうか。

float x = 300;
float y = 200;
void setup(){
 size(600, 400);
}
void draw(){
 background(0);
 fill(255);

 // rotate関数を使う！ 
 rotate(45);

 rect(x, y, 50, 50);
}

実行すると・・・おかしいですね。四角形が消えてしまいました。

ラジアン値に変える

Processingの公式ドキュメントを見てみると、「ラジアン値」を与えなさいとあります。

実は私たちが慣れ親しんでいる45度のような度数とはちょっと違う、ラジアンという値を使わないといけません。

どうやってラジアン値を求めるのか？

大丈夫です。度数をラジアンに変換する関数もあります。それがradians関数です。

float x = 300;
float y = 200;
void setup(){
 size(600, 400);
}
void draw(){
 background(0);
 fill(255);

 // radian値にしてrotate関数を使う！ 
 float rad = radians(45);
 rotate(rad);

 rect(x, y, 50, 50);
}

実行してみると、ちょっと変わりました。

ですがまだまだおかしいですね。

回転軸を変更する

実はProcessingの回転は、画面左上を軸に回転してしまいます。

これを避けるために、回転軸を四角形の位置に設定します。

ではどうやって？

もちろん、回転軸を設定するtranslate関数があるわけです。

float x = 300;
float y = 200;
void setup(){
 size(600, 400);
}
void draw(){
 background(0);
 fill(255);

 // 四角形の位置を回転軸に、radian値にしてrotate関数を使う！ 
 translate(x, y);
 float rad = radians(45);
 rotate(rad);

 // 回転軸を設定したので、(0, 0)の位置に表示させる
 rect(0, 0, 50, 50);
}

どうでしょうか？それっぽくなってきたんじゃないでしょうか？

translateすると、軸がxとyになるので、rect関数には(0, 0)を渡す点に注意です（これ、わかりづらいですよね）。

四角形の中央で回転させる

ところで、四角形の位置がちょっとずれていることに気が付きましたか？

これは四角形の左上が回転軸になっているからです。

そこで四角形の中央を回転位置に設定したいと思います。

もちろん、関数があります。rectMode関数です。

float x = 300;
float y = 200;
void setup(){
 size(600, 400);
}
void draw(){
 background(0);
 fill(255);

 // rectMode関数を使って四角形の中央を基準にする
 rectMode(CENTER);

 // 四角形の位置を回転軸に、radian値にしてrotate関数を使う！ 
 translate(x, y);
 float rad = radians(45);
 rotate(rad);

 // 回転軸を設定したので、(0, 0)の位置に表示させる
 rect(0, 0, 50, 50);
}

これで回転が実現できました。

画像を回転させる

画像の回転も同じです。

imageMode関数を使って画像の中央を基準にしてあげればOKです。

float x = 300;
float y = 200;
PImage gazo;
void setup(){
 size(600, 400);
 gazo = loadImage("yourfile.png");
}
void draw(){
 background(0);
 fill(255);

 // imageMode関数を使って画像の中央を基準にする
 imageMode(CENTER);

 // 画像の位置を回転軸に、radian値にしてrotate関数を使う！ 
 translate(x, y);
 float rad = radians(45);
 rotate(rad);

 // 回転軸を設定したので、(0, 0)の位置に表示させる
 image(gazo ,0, 0, 50, 50);
}