CG関連

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

2020/6/5追記 三角関数に関する動画を追加しました。

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

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

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

『サイン(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.

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

let radius; //半径
let deg = 0; //角度

function setup() {
  createCanvas(200, 200); // 画面の大きさ
  colorMode(HSL, 360, 100, 100, 100); // 色はHSL派
  radius = height / 2 ; //画面高さの半分を半径に
  noStroke();
 }

function draw() {
  background(0);
  let radian = deg * PI / 180; // ラジアンに変換
// let radian = radians(deg) // 変換はこっちでもOK

  let circle = sin(radian) * radius; // サインに半径をかける
  fill(160, 100, 50, 100); //色塗り
  ellipse(width / 2, height / 2, circle, circle); //画面中心に円を描く 
  deg += 1; //角度を1ずつ増やす
}

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

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

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

let radian = deg * PI / 180; // ラジアンに変換

『ラジアン』の関連記事

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

let radian = radians(deg) // 変換はこっちでもOK

『サイン(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.

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

let radius; //半径
let deg = 0; //角度

function setup() {
  createCanvas(200, 200);
  colorMode(HSL, 360, 100, 100, 100); //カラーモードをHSLに
  radius = height / 2 ; //画面高さの半分を半径に
  noStroke();
 }

function draw() {
  background(0);
  let radian = radians(deg) // ラジアンに変換

  let circle = sin(radian) * radius;
  let hue = abs(sin(radian) * 360); //360をかけつつ 絶対値にする
  
  fill(hue, 100, 50, 100); 
  ellipse(width / 2, height / 2, circle, circle); //画面中心に円を描く 
  deg += 1; //角度を1ずつ増やす
}

ポイントは下記2点。

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

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

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

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

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

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

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

let hue = abs(sin(radian) * 360); //360をかけつつ 絶対値にする
アオキ
『HSL』だと色を変化させやすいなと思いますね。
Sponsored link

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

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

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

動かすとこう。

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

コードはこう。

let deg = 0; //角度
let vecLocation; //位置
let vecVelocity; //速度

function setup() {
  createCanvas(300, 200);
  colorMode(HSL, 360, 100, 100, 100);
  vecLocation = createVector(width / 2, height / 2); // 位置ベクトルでXとYまとめて位置を指定
  noStroke();
}

function draw() {
  background(0);
  let radian = radians(deg) ; 
  vecVelocity = createVector(3, sin(radian) * 5); // 速度ベクトルのYにサインをあてる
  vecLocation.add(vecVelocity); //位置ベクトルに速度ベクトルを追加する

  fill(160, 100, 50, 100); 
  ellipse(vecLocation.x, vecLocation.y, 20,20);  
  
  if(vecLocation.x > 300){ // 右端に行ったら左端に移す
    vecLocation.x = 0;  
  }
    
  deg += 10;
}

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

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.

コードはこう。

let deg = 0; //角度
let vecLocation; //位置
let vecVelocity; //速度

function setup() {
  createCanvas(300, 200);
  colorMode(HSL, 360, 100, 100, 100);
  vecLocation = createVector(width / 2, height / 2); // ベクトルとすると、XとYまとめて位置を指定できる
  noStroke();
}

function draw() {
  background(0);
  let radian = radians(deg) ; //ラジアンに変換
  vecVelocity = createVector(cos(radian) * 5, sin(radian) * 5); // X軸をコサイン, Y軸をサインで
  vecLocation.add(vecVelocity);
    
  fill(160, 100, 50, 100); 
  ellipse(vecLocation.x, vecLocation.y, 20,20);  
      
  deg += 10;
}

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

  vecVelocity = createVector(cos(radian) * 5, sin(radian) * 5); // X軸をコサイン, Y軸をサインで
  • X軸・・コサイン(cos)
  • Y軸・・サイン(sin)

で指定しています。

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

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

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

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

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

動きはこう。

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

コードはこう。

let deg = 0; //角度
let radius = 1; //半径
let vecLocation; //位置
let vecVelocity; //速度

function setup() {
  createCanvas(300, 200);
  colorMode(HSL, 360, 100, 100, 100);
  vecLocation = createVector(width / 2, height / 2); // ベクトルとすると、XとYまとめて位置を指定できる
  noStroke();
}

function draw() {
  background(0);
  let radian = radians(deg) ; //ラジアンに変換
  vecVelocity = createVector(cos(radian) * radius, sin(radian) * radius); // 半径をかける
  vecLocation.add(vecVelocity);
  
  fill(160, 100, 50, 100); 
  ellipse(vecLocation.x, vecLocation.y, 20,20);  
      
  deg += 5;
  radius += 0.01; //半径をちょっとずつ増やす
}

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

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

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

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

動きはこう。

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

コードはこう。

function setup() {
  createCanvas(300, 300, WEBGL); //3DはWEBGLと明記する
}

function draw() {
  background(250);
  rotateY(frameCount * 0.01); // Y軸で回す

  for (let j = 0; j < 5; j++) {
    push();
    for (let i = 0; i < 10; i++) {
      translate(
        sin(frameCount * 0.001 + j) * 100,
        sin(frameCount * 0.001 + j) * 100,
        i * 0.1
      );
      rotateZ(frameCount * 0.002); // Z軸で回す
      push();
      sphere(8, 6, 4);
      pop();
    }
    pop();
  }
}
  • 円弧を描く動き
  • Y軸の回転
  • Z軸の回転

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

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

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

『3D』の参考記事

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

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

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

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

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

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

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

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

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


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

コメント

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

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

CAPTCHA


プロフィール

世界のアオキ

教育者/キュレーター。Udemyで講師業してます。問題発見と解決のための新時代の学習を。最終学歴より最新学習歴を。STEAMも、プログラミングも。初心者向けブログ執筆中。尊敬する人はダビンチとクロップ。熊本在住。海外旅行20回以上 ゴルフはできません(汗

最近の記事

アーカイブ

カテゴリー

  1. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  2. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
  3. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  4. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  5. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock