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

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

CG関連

2019.09.18

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

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

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

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

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

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

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

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

アオキ

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

『三角関数』の関連記事

もんプロ～問題発見と解決のためのプログラミング〜

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

https://coinbaby8.com/trigonometry.html

『なんのために勉強しているかわからないランキング』があったら堂々トップ3には入ってきそうな『三角関数』。高校生の頃は文字通り、なんのためにやっているかまるでわかっていなかったんですが、子ども向け無料プログラミング道場『CoderDojo熊本』向けに、スクラッチのその先へというお題で数学や物理を改めて学習しているうちに、実は『三角関数』ってめっちゃ使われてるやん。。ということに今更ながら気づかされて。高校の頃にこんな感じで説明してもらえてたらよかったのになぁ。という気持ちで、難解と思われる『三角関数』を...

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

もんプロ～問題発見と解決のためのプログラミング〜

【スクラッチ】で【三角関数】の使い方をわかりやすくまとめてみた

https://coinbaby8.com/scratch-trigonometry.html

なんのために勉強しているかわからないランキングがあったら、トップ3には入ってきそうな『三角関数』。実は、現実世界ではこれでもかというくらいいろんな業界で使われています。測量・・GPS、地図、土木工学、精密機械工学、ケーキカット回転・・ゲームプログラミング、CG、航法、機械工学、宇宙機や航空機の姿勢制御波・・音声処理、画像処理、ノイズフィルター、振動工学、量子力学などさまざまな物理学分野その他・・内積、コサイン類似度、ボックス=ミュラー法（正規乱数の生成)、カーネル法における非線形関数としてなど参考三...

今回は、遊ぶようにプログラミングできる、
『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; // ラジアンに変換

『ラジアン』の関連記事

もんプロ～問題発見と解決のためのプログラミング〜

【ラジアン】とはわかりやすくまとめてみた【初心者向け】

https://coinbaby8.com/radian.html

2020/6/5追記ラジアンに関する動画を追加しました。プログラミングを使って、デザインをしたりアートを作ったりすることを、『クリエイティブコーディング』というそうで、子ども向けプログラミング道場『CoderDojo熊本』でも取り入れたいなと思っていまして。今回のお題は『回転』。絵だったり図形だったりを『回転』させたり、相手の方向に向けたいなぁと思ったりして。90度動かしたり、180度動かしたりしてはいたものの、よくよく調査を進めていくと、角度を表現するには2つの方法があるそうです。度数法・・ 60度とか90度とか一般...

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

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

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

の範囲で動くのですが、

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

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

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

アオキ

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

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

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

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

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

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

『HSL』の参考記事

もんプロ～問題発見と解決のためのプログラミング〜

【CSS】色の設定は『RGB』より『HSL』の方が使いやすい件〜ランダムに使いたい(3)...

https://coinbaby8.com/colormode-hsl.html

遊ぶようにプログラミングができる『クリエイティブコーディング』はもちろん、ホームページやウェブサービス、洋服やコスメなどでも、『色』によってずいぶんと雰囲気が変わります。モノクロにしてシックにしてみたり、暖色系であったかくしてみたり、ショッキングピンクで攻めてみたり。『色』の表現範囲を表す用語として『色空間(カラースペース)』というものがあり、インターネットで使う『色空間(カラースペース)』は大きく3つあるのかなと思います。　色空間(カラースペース)　・RGB・・Red、Green、Blueの3原色・・ウェブ・テレ...

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

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つ以上の複数の値をまとめて扱うことができるようになります。

『ベクトル』の関連記事

もんプロ～問題発見と解決のためのプログラミング〜

【ベクトル】をわかりやすくするコツ〜『ベクトル』はただの数値の組み合わせです(...

https://coinbaby8.com/how-to-use-vector.html

2020/6/5追記ベクトルに関する動画を追加しました。遊ぶようにプログラミングができて、デザインやアートをつくれる『クリエイティブコーディング』を、『P5.js(ProcessingのJavaScript版)』を使っていろいろ試しているうちに、もっと自然に、ボールや図形を動かしたいなと思うようになってきて。自然に動かすとなると『数学』や『物理』の知識が必要になってきます。今回のお題は『ベクトル』。できるだけわかりやすく、使えるこなせるようになるために、『ベクトル』についてまとめてみることにしました。『ベクトル』とは、ただの...

『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();
  }
}