CG関連

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

サインコサインなどの『三角関数』を使う事で、

  • 大きさを変える
  • 色を変える
  • ふわふわした動きをつくる
  • 円を描く

などの動きを簡単に表現できるようになります。

『サイン(sin)』はこんな動きをします。

『コサイン(cos)』はこんな動きをします。

なめらかに動かすとこんな動き方になります。

アオキ
サインコサインの詳細はこちらの記事も参考にしてみてください。

『三角関数』の関連記事

『スクラッチ』で『三角関数』の関連記事

今回は、遊ぶようにプログラミングできる、
『P5.js(ProcessingのJavaScript版)』でいろいろと試してみることにしました。

Sponsored link

三角関数をプログラムで 大きさを変えてみる

『サイン(sin)』の特徴として、半径を1とすると、

$-1 \leqq \sin \leqq 1$

の間をなめらかに動くという特徴があります。

これを利用して、まずは大きさを変えてみます。

こんな動き方になります。

See the Pen
p5.js sin-test1
by aoki_monpro (@suica)
on CodePen.

コードはこうなりました。

角度を表すには大きく2つの方法があります。

  • 度数法・・90度とか180度とか(ちょっとずれる)
  • 弧度法・・ラジアン。パイで表す(正確)

より正確に1周を表すために、
『度数』→『ラジアン』
に変換して使うようにします。

『ラジアン』の関連記事

『P5.js』には、
『ラジアン』に変換するためのユーザー関数も用意されています。

『サイン(sin)』は、
$-1 \leqq \sin \leqq 1$

の範囲で動くのですが、

$-1 ~ 1$だと幅が小さすぎるので、

数字をかけて(今回は半径(100))、

$-100 ~ 100 $ という範囲に大きくしています。

アオキ
数字をかけて値をコントロールできるようになると、より面白い動きができるようになってきます。

三角関数をプログラムで 色を変えてみる

『三角関数』を使うことで、色を変えることもできます。

色にもいくつかの指定方法があるのですが、

  • RBGモード・・赤・青・緑の3色で指定する
  • HSLモード・・色相・彩度・輝度の3要素で指定する

色を変更する場合は『HSL』
の方が使いやすいので、こちらで設定します。

『HSL』の参考記事

こんな色の変わり方をします。

See the Pen
p5.js sin-test-hsl
by aoki_monpro (@suica)
on CodePen.

コードはこうなりました。

ポイントは下記2点。

  • 色相(Hue)をサインで変える
  • 絶対値を使う

『HSL』色相(Hue)は0~360の範囲で指定する必要があります。

『サイン』に360をかけることで、
$-360 ~ 360 $ の範囲になるのですが、

マイナスの範囲の間は色が変わらないので、

abs()関数を使って『絶対値(英語でabsolute(アブソリュート))』にすることで、

マイナスをプラスに変換して、

$ 0 ~ 360 $ の範囲で変化するようにしています。

アオキ
『HSL』だと色を変化させやすいなと思いますね。
Sponsored link

三角関数をプログラムで ふわふわさせてみる

『三角関数』を使うことで、

ふわふわする動きを簡単に作ることができるようになります。

動かすとこう。

See the Pen
p5.js sin-test2
by aoki_monpro (@suica)
on CodePen.

コードはこう。

何かしら物体を動かす場合は、

2次元の場合は『X(横軸)』と『Y(縦軸)』の2つの値がセットで必要になります。

『ベクトル』を使うことで、

2つ以上の複数の値をまとめて扱うことができるようになります。

『ベクトル』の関連記事

  • 『X』の移動するスピード(今回は3)
  • 『Y』の『サイン(sin)』の大きさ(今回は5)
  • 変化させる角度(今回は10)

の値を変えることで、
スピードが早くなったり、波の動きが激しくなったりするので、
ぜひ色々と試してもらえればと思います。

アオキ
『ベクトル』は3Dでもしょっちゅう使うので、2つ以上の値だと積極的に『ベクトル』使うようにしたいところです。

三角関数をプログラムで 円を描いてみる

Y軸を『サイン(sin)』で動かしつつ、
X軸を『コサイン(cos)』で動かすことで、

円を描くような軌道をつくることができます。

動きはこう。

See the Pen
p5.js sin-test-circle
by aoki_monpro (@suica)
on CodePen.

コードはこう。

ポイントはこのコードで、

  • X軸・・コサイン(cos)
  • Y軸・・サイン(sin)

で指定しています。

アオキ
当面は『サイン』はY軸、『コサイン』はX軸で動かすと覚えておいたらOKと思います。
Sponsored link

三角関数をプログラムで らせんを描いてみる

円の動きをちょっと細工することで、
様々な動きを作ることができます。

例えば少しずつ半径の値を増やしていくことで、

『らせん』のような動きをさせることができます。

動きはこう。

See the Pen
p5.js sin-test-spiral
by aoki_monpro (@suica)
on CodePen.

コードはこう。

『radius』という変数をつくり、少しずつ増やすことで、
中心から少しずつ軌道が大きくなるようにしています。

アオキ
他にもいろんな動かし方ができそうですな。

三角関数をプログラムで 3Dで使ってみる

最後は公式サンプルでも記載されている3D映像のシンプル版。

動きはこう。

See the Pen
p5.js sin-test-3d
by aoki_monpro (@suica)
on CodePen.

コードはこう。

  • 円弧を描く動き
  • Y軸の回転
  • Z軸の回転

と、いくつかの動き方を混ぜることで、

とてもおもしろい動きがつくれるようになっています。

『translate』『rotate』『push/pop』の参考記事

『3D』の参考記事

アオキ
以前はなんのこっちゃなコードだったんですが、続けるうちにちょっとずつ読み解けるようになってきておもしろくなってくると思います。
Sponsored link

三角関数をプログラムで使う方法をまとめてみて

高校生で勉強はするものの、
一体何に使うのか検討もつかなかった『三角関数』。

『プログラム』と組み合わせて、
実際にいろいろと動かしてみることで、

実は現実世界に役に立っているというのが肌でわかるようになればと思います。

アオキ
『プログラム』と組み合わせてちょっとでも学校での勉強が楽しくなればなぁと思います。

参考記事
メディアアート系で重要な数式・概念 & p5.jsで遊ぶ

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

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. プログラムで数学も身につく 一石四鳥なクリエイティブコーディング


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

コメント

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

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

CAPTCHA


最近の記事

  1. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  2. CG関連

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

    【WebGL】入門 わかりやすく【図解】してみた
  4. オンライン教材

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

    【三角関数】とは わかりやすくまとめてみた【動画あり】
PAGE TOP