P5.js (Processing)

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

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

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

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

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

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

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

『P5.js』で移動させる〜 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()で原点をリセットして、

というような流れになります。

『P5.js』で回転させる〜 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』リファレンス

Sponsored link

『P5.js』で拡大・縮小させる〜 scale関数

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

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

  • scale・・拡大・縮小

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

『P5.js』で移動・回転・拡大縮小する技術の裏側

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

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

その裏側では、

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

参考記事

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

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

『P5.js』で移動・回転・拡大縮小させるまとめ

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

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

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

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

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

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

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

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

アオキ
どうせなら動かしながら楽しくやりたいもんですね〜
created by Rinker
¥1,944 (2019/06/19 19:42:02時点 Amazon調べ-詳細)

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

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

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

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

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

5. 加速度をわかりやすくするために実際に動かしてみる【まずは2Dから】(5)【P5.js】

6. 配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり【P5.js】(6)

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

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

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

10. プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

コメント

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

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

CAPTCHA


Sponsored link

関連記事

  1. P5.js (Processing)

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

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

  2. クリエイティブコーディング

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

    2020年から小学校でもプログラミング教育が義務化になり、子ども向…

  3. P5.js (Processing)

    配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり【P5.js】(6)

    今回のお題は『配列』。『プログラミング』を始めたばかりの頃を思い出…

  4. HTML/CSS

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

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

  5. クリエイティブコーディング

    プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

    前回の記事で、プログラミングを使って数学がわかるという『コー…

  6. P5.js (Processing)

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

    プログラミングでアートだったりデザインを作ることを『クリエイティブコ…

Sponsored link

最近の記事

Sponsored link
  1. 検索システム

    新しいホテルを探すサービスをつくってみました【楽天トラベルAPI】【条件付】
  2. Laravel

    【Django】【Laravel】【RubyOnRails】を比較してみた【初心…
  3. クリエイティブコーディング

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

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  5. 検索システム

    【検索システム】をつくってみた【実際にログインしてさわれます】
PAGE TOP