遊ぶようにプログラミングができる『クリエイティブコーディング』の中でも
もっとも取り組みやすいのではと思っているのが『P5.js(ProcessingのJavaScript版)』。
今回は『P5.js(ProcessingのJavaScript版)』でtransform系(変形)
と言われている下記の3つの関数と、
- translate()・・トランスレート
- rotate()・・ロテート
- scale()・・スケール
3つの関数に合わせて使うことが多い、『push()』と『pop()』についてまとめています。
プログラムで移動させる方法〜 translate関数
まずは普通に円を描いてみます。
See the Pen
p5.js ellipse by aoki_monpro (@suica)
on CodePen.
作り方はこちらの記事を参考にしてみてください。
『ellipse()』関数はだ円形を描く関数で、下記の引数をとります。
- ellipse(x座標, y座標, 横幅, 縦幅);
『P5.js(ProcessingのJavaScript版)』の原点は左上になるので、
- ellipse(100, 100, 30, 30);
の場合は、
左上から、
- 右に100px
- 下に100px
- 横幅30px
- 縦幅30px
ということになります。
別の書き方として、『translate(トランスレート)』関数を使うと、
原点を移動させて図形をつくることができます。
コードはこちら。
See the Pen
p5.js translate-test2 by aoki_monpro (@suica)
on CodePen.
だ円を書く前に、『translate』関数で原点を(X100, Y100)に移動しています。
- translate()・・原点移動 (x, y)
原点を移動しているので、
『ellipse』関数の引数は、(0, 0, 30, 30) と書いても、
画面の中心に描画されるようになっています。
注意点として、『translate()』関数は原点の位置をリセットしないので、
続けて『translate()』関数を書くと、
動かした原点 から さらに原点を動かすということになります。
See the Pen
p5.js translate-double by aoki_monpro (@suica)
on CodePen.
最初に原点を(100,100)動かしてだ円を描画して、
そこからさらに(20, 20)動かしています。
原点を保存・リセットするために、『push()』関数と『pop()』関数をセットで使います。
See the Pen
p5.js translate-test3 by aoki_monpro (@suica)
on CodePen.
- push()・・原点を保持
- pop()・・原点をリセット
『push()』で紙の位置を固定して、(原点はX30, Y30)
だ円を描いて、
『pop()』で原点をリセットしています。
もう一度、
『push()』で紙の位置を固定して、(原点はX60, Y60)
だ円を描いて、
『pop()』で原点をリセットして、
というような流れになります。
プログラムで回転させる方法〜 rotate関数
物体を回転させる方法として『rotate』関数があります。
See the Pen
p5.js translate-test3 by aoki_monpro (@suica)
on CodePen.
『push()』で紙を移動する準備をして、
『translate()』で原点を(X100, Y100)に移動した後に、
『rotate()』で回転させて、
『pop()』で原点リセットしています。
- rotate()・・ 角度を指定して回転させる。標準だと『ラジアン』。
参考記事
原点の周りを回るような動きになります。
『rotate()』関数に似た関数として3次元用の、
- rotateX()
- rotateY()
- rotateZ()
といった関数もあります。
参考：
『P5.js』リファレンス
プログラムでその場で回転させる〜 translate + rotate
その場で回転させるためには少しコツがいります。
- 『translate』・・場所を移動
- 『rotate』・・物体を回転(場所が動く)
- 再び『translate』・・動いた場所を戻す
という流れになり、『rotate』関数を『translate』関数でサンドイッチすればOKです。
『rectMode(CENTER)』として、四角形の中心を原点とするのもポイントです。
See the Pen
p5.js rotate-test3 by aoki_monpro (@suica)
on CodePen.
プログラムで拡大・縮小させる方法〜 scale関数
『scale』関数を使うと、図形を拡大・縮小することができます。
See the Pen
p5.js translate-scale by aoki_monpro (@suica)
on CodePen.
- scale・・拡大・縮小
『push()』と『pop()』で囲んで、
『translate()』で原点を決めて、
拡大縮小(今回は2倍)としてから、
だ円を描いている形になります。
プログラムで移動・回転・拡大縮小する方法の裏側
『P5.js(ProcessingのJavaScript版)』で用意されているこれらの関数を使うと、
簡単に原点の位置を移動したり、回転させたり、拡大縮小できたりしますが、
その裏側では、
実は『線形代数・・(行列+ベクトル)』の技術が思いっきり使われています。
参考記事
ちょうど『P5.js(ProcessingのJavaScript版)』を題材にした、
とても丁寧な解説記事があったので、興味があれば読んでみてください。
【p5.js】transformを正しく理解するためのベクトル・行列講座
プログラムで移動・回転・拡大縮小させるまとめ
『P5.js(ProcessingのJavaScript版)』のサンプルコードをいろいろみていると、
いたるところに今回の関数が使われていることがわかります。
これらの関数の意味を知っておくと、
サンプルコードを読み解いて、自分なりにアレンジすることもできるようになるし、
実は『線形代数・・行列+ベクトル』で動いているという裏側もわかれば、
学校の数学や物理の勉強にも活かせるんじゃないかなと思います。
教科書の問題だけ解いていてもなかなか身につかないと思ったりするので、
遊びながら楽しく位置関係がわかるようになると、学校の勉強も楽しくなるんじゃないかなと思います。
『クリエイティブコーディング』関係ではこんな記事も読まれています。
1. 【P5.js】初心者向けの動画をリリースしました(プログラミング×数学物理)【Udemy】2. 【JavaScript】初心者向けの動画をリリースしました【Udemy】
3. プログラミング実況をやってみた その1【P5.js】
4. 【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっぽ〜(1)
5. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】
6. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい(3)【P5.js】
7. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】
8. プログラムで【加速度】【速度】の使い方をわかりやすく (5)【P5.js】
9. プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】
10. プログラムの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】
11. プログラムで色や大きさをランダムにして遊んでみる(8)【P5.js】
12. 【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】
13. プログラムで図形の描き方～頂点と【バラ曲線】を使って〜 (10)【P5.js】
14. 【三角関数】をプログラムで使う方法をまとめてみた(11)【P5.js】
15. プログラムで数学も身につく 一石四鳥なクリエイティブコーディング
アオキのツイッターアカウント。
この記事へのコメントはありません。