インスタなどショート動画で数学的に美しい映像を見て、自分も作ってみたいと思うようになりました。
そこで調べてみるとProcessingというプログラミング（？）をすることで作れそうでした。
そこで今回から英語の勉強と、文章を書く練習としてProcessingの英語の公式サイトを訳していこうと思います。
7割翻訳、3割感想や自分なりの解説を目指します。
今回の参考ページは以下になります。
グリッドを動かす
前回まで、書いたようにprocessingは座標を持っています。長方形などの図形を書く時には、座標の知識が絶対に必要でした。
そして異なる位置に図形を書く時には、長方形の左上の座標の数値を変えればよかったですね。
しかし他にも方法があります。座標軸を動かす方法です。座標軸を動かすことを変形と呼びます。
- pushMatrix()：現在の原点と座標軸の傾きの位置を保存しておく関数
- translate(◯, ◯)：座標軸をX軸方向、Y軸方向にずらす関数
- popMatrix()：最後にpushMatrix()で保存した原点と座標軸の傾きの位置に基準を戻す関数
変形を使うことの利点は以下の関数で見ます。
void house(int x, int y) {
triangle(x + 15, y, x, y + 15, x + 30, y + 15);
rect(x, y + 15, 30, 30);
rect(x + 12, y + 30, 10, 15);
}void house(int x, int y) {
pushMatrix();
translate(x, y);
triangle(15, 0, 0, 15, 30, 15);
rect(0, 15, 30, 30);
rect(12, 30, 10, 15);
popMatrix();
} 両方ともx座標とy座標を指定すると、そこに家の絵を各関数ですが、下が変形を使って書いた関数です。
どちらでも同じような結果が得られますが、下の方がtriangleやrectの部分が読みやすくないですか？
このようにコードの読みやすくなったり、コードを書く時に座標を楽に計算できるようになります。
回転
座標軸は、平行移動も回転もできます。
その時には、ラジアン（弧度法）を使います。ラジアンは、確か高校の数学Ⅱで習います。
数学が苦手でも、覚えちゃえば大丈夫です。。。
そんな無責任なこと書くと怒られそうですが、processingは便利な関数を準備してくれています。
- rotate()：指定したラジアンだけ、原点を中心に、座標軸全体を時計回りに回転させる関数
- radians()：角度をラジアンに変換
- degrees()：ラジアンを角度に変換
void setup() {
size(200, 200);
background(255);
smooth();
noStroke();
}
void draw(){
if (frameCount % 10 == 0) {
fill(frameCount * 3 % 255, frameCount * 5 % 255, frameCount * 7 % 255);
pushMatrix();
translate(100, 100);
rotate(radians(frameCount * 2 % 360));
rect(0, 0, 80, 20);
popMatrix();
}
}拡大縮小（スケーリング）
移動や回転と同様の書き方で、拡大縮小もできます。
拡大縮小はscale()を使います。
例えば、scale(2.0)は原点を中心にすべてのxy座標を2倍の位置に移動させることで、大きさが2倍となります。
scale(3, 0.5)とした場合は、x座標は3倍、y座標は0.5倍となるので横に伸びるような感じですね。
移動のまとめ
ということで、まとめると
原点の位置をずらす
→図形を平行移動
座標軸を回転
→図形を回転移動
座標軸を拡大縮小
→図形を拡大縮小
pushとpopってなんだ？
pushとpopは、基本的なデータ構造であるスタックで使う用語です。
スタックは元々、お皿やトレーを重ねて置いておく機械のことです。
お皿は片付けるとき一番上に重ねておき、使う時には普通一番上から使いますよね。
そのように一番最後に追加したものを、一番最初に取り出してくる構造をスタックと言います。
そしてスタックに追加することをpush、取り出すことをpopと言います。
（一番早くに追加したものを、一番最初に取り出してくる構造はキューと言います。調べてみてください。）
コメント