この記事は Qiita p5js アドベントカレンダー11日目の記事です。

これはなに

p5.jsが用意している関数について理解を深める記事です。
今回は三角関数のsin()について。

sin()

三角関数のsin()です。sin, cos, tanのsinです。懐かしい。
渡された角度のsinθを計算して出力するというものです。
これを利用することで周期を利用した表現が可能となります。

リファレンスより

角度のサインを計算します。この関数は、現在の angleMode を考慮します。値は -1 から 1 の範囲で返されます。（DeepL翻訳）

sin()では角度(angle)を引数に渡すのですが、angleModeというものがあるのを知りました。
リファレンスをみてみるとRADIANSとDEGREESの二つがあるようです。
これはラジアン(弧度法)と度(度数法)の違いみたいで、例えば360度はラジアンに直すと6.28...となります。
setup()内で使いやすい方を選択しましょう。

Type

sin(angle: number): number;

引数

angle sinθを計算するための角度

よく分からないのでリファレンスのコードをみる

sin()の仕組みが全然分からないのでリファレンスのサンプルコードを読み解いていくことにします。

let a = 0.0;
let inc = TWO_PI / 25.0;
for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}

実行結果

まずsin()の引数angleとなる変数aを定義しています。

let a = 0.0;

続いてincという変数を定義しています。
多分incはincremental（増加分）の略。

let inc = TWO_PI / 25.0;

さて、TWO_PIがよく分からないのでリファレンスを読みます。

TWO_PIは、値が6.28318530717958647693の数学定数です。これは、円の円周とその直径の比率の2倍です。これは、三角関数sin（）およびcos（）と組み合わせて使用すると便利です。

ということでこれは円周率(3.14....)の２倍の数であるということが分かりました。
つまり度数法に直せば0~360°の一周期分、そしてそれを25等分しているのが分かります。

次にfor文が入ります。
25回繰り返しているのは周期を25等分しているので、その数だけline()を実行するためです。
なんとなく25は定数化してほしい。

for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
}

for内のline()からみていきましょう。

line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);

まずx座標をみると、x1, x2共に変数iに4をかけた値が渡されています。
この4という数字は線の隙間をいい感じに空けるためにあると思われます。

次はy座標。y1は50ですがy2はsin(a) * 40.0)という数式が渡されています。
sinは-1から1の間で値が返るので、* 40でy座標を調節しているのもポイント。

ではsin(a) * 40がどんな数値になっているのかをコンソールに出力してみましょう。
なお一度通るごとにa = a + incでaに1周期を25等分した度数が足されていきます。

for (let i = 0; i < 25; i++) {
  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);
  a = a + inc;
  // コンソールに出力
  console.log(`${i + 1}回目: ${sin(a) * 40.0}`)
}

出力結果がこちら

1回目: 9.947595486594192 
2回目: 19.270146964068612 
3回目: 27.38188423714755 
4回目: 33.773117020080605 
5回目: 38.04226065180614 
6回目: 39.921069137130864 
7回目: 39.291490029147546 
8回目: 36.19308209864079 
9回目: 30.82052971103158 
10回目: 23.51141009169894 
11回目: 14.724982107387142 
12回目: 5.013329342572199 
13回目: -5.013329342572137 
14回目: -14.724982107387083 
15回目: -23.51141009169889 
16回目: -30.820529711031554 
17回目: -36.19308209864077 
18回目: -39.291490029147546 
19回目: -39.921069137130864 
20回目: -38.04226065180613 
21回目: -33.77311702008058 
22回目: -27.381884237147503 
23回目: -19.27014696406855 
24回目: -9.94759548659411 
25回目: 9.67842359708362e-14

プラスからマイナスへ数値が緩やかな規則正しい波を描いていることが分かります。
このy座標をline()に当てることで、上記画像のような形がつくられているのですね。

あとがき

いろいろ調べていたらsin()はcos()と併用して(x, y)を求めると表現の幅が広がることが分かってきました。
ですがTWO_PIを組み合わせることによって1周期を作成している点など、数学的な知識を求められます。
一回この辺を勉強しなおそう...。

参考

p5.js reference | sin()
p5.js reference | angleMode()