CG関連

プログラムで移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

遊ぶようにプログラミングができる『クリエイティブコーディング』の中でも

もっとも取り組みやすいのではと思っているのが『P5.js(ProcessingのJavaScript版)』。

今回は『P5.js(ProcessingのJavaScript版)』でtransform系(変形)
と言われている下記の3つの関数と、

  • translate()・・トランスレート
  • rotate()・・ロテート
  • scale()・・スケール

3つの関数に合わせて使うことが多い、『push()』と『pop()』についてまとめています。

アオキ
これらの関数はしょっちゅう使われてますね〜
Sponsored link

プログラムで移動させる方法〜 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.

Sponsored link

プログラムで拡大・縮小させる方法〜 scale関数

『scale』関数を使うと、図形を拡大・縮小することができます。

See the Pen
p5.js translate-scale
by aoki_monpro (@suica)
on CodePen.

  • scale・・拡大・縮小

『push()』と『pop()』で囲んで、
『translate()』で原点を決めて、
拡大縮小(今回は2倍)としてから、
だ円を描いている形になります。

アオキ
push, translate, popはもはや兄弟みたいにセットで使いますね。

プログラムで移動・回転・拡大縮小する方法の裏側

『P5.js(ProcessingのJavaScript版)』で用意されているこれらの関数を使うと、

簡単に原点の位置を移動したり、回転させたり、拡大縮小できたりしますが、

その裏側では、

実は『線形代数・・(行列+ベクトル)』の技術が思いっきり使われています。

参考記事

ちょうど『P5.js(ProcessingのJavaScript版)』を題材にした、
とても丁寧な解説記事があったので、興味があれば読んでみてください。

【p5.js】transformを正しく理解するためのベクトル・行列講座

プログラムで移動・回転・拡大縮小させるまとめ

『P5.js(ProcessingのJavaScript版)』のサンプルコードをいろいろみていると、

いたるところに今回の関数が使われていることがわかります。

これらの関数の意味を知っておくと、

サンプルコードを読み解いて、自分なりにアレンジすることもできるようになるし、

実は『線形代数・・行列+ベクトル』で動いているという裏側もわかれば、

学校の数学や物理の勉強にも活かせるんじゃないかなと思います。

教科書の問題だけ解いていてもなかなか身につかないと思ったりするので、

遊びながら楽しく位置関係がわかるようになると、学校の勉強も楽しくなるんじゃないかなと思います。

アオキ
どうせなら動かしながら楽しくやりたいもんですね〜
created by Rinker
¥1,980 (2019/10/15 11:13:43時点 Amazon調べ-詳細)

『クリエイティブコーディング』関係ではこんな記事も読まれています。

1. 【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっぽ〜(1)

2. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

3. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい(3)【P5.js】

4. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

5. プログラムで【加速度】【速度】の使い方をわかりやすく (5)【P5.js】

6. プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

7. プログラムの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

8. プログラムで色や大きさをランダムにして遊んでみる(8)【P5.js】

9. 【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】

10. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

11. 【三角関数】をプログラムで使う方法をまとめてみた(11)【P5.js】

12. プログラムで数学も身につく 一石四鳥なクリエイティブコーディング

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  2. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラムの覚え方
  3. 数学

    【三角関数】とは わかりやすくまとめてみた【動画あり】
  4. バックエンド

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  5. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
PAGE TOP