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

こんにちは!

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

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

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

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

ところで・・・

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

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

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

プログラミング教室で実際に使用している、学習成果のある教材を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);
}

関数を調べる

今回は四角形や画像を回転する方法をお伝えしました。

いろんな関数が飛び交いましたね。

今回お伝えしたいことは、回転させる方法、ということだけではなく、

やりたいことができる関数がある場合が多いということです。

これってどうやるんだろう?と思った時、

こういうことが実現できる関数があるかも?

と思うよれば一歩前進です。

プログラミングは変数と関数の組み合わせです。

そして関数がほとんどの役割を担っているわけです。

やりたいことが出てきたとき、

やりたいことが実現できる関数を探してみましょう。

kobakoではプロセッシングを教えています

プログラミング教室kobakoではプロセッシングを使ったゲーム作りを主に教えています。

プロセッシングは早い子であれば小学4年生くらいで使い始められる、とっつきやすいテキストプログラミング言語です。

kobakoでプロセッシングを学んでみませんか?

無料体験へのお申し込みはこちらから!

kobakoのゲームプログラミング教材もYouTubeで無料配信中です!

初回の授業料(体験)は無料です。

※現在はオンライン授業でのみ対応しています。通学型ではありません。

InspiredImagesによるPixabayからの画像