speed;}またサイン値に数値を加えると、その数値分だけ曲線全体を上に移動させることができます。これは曲線の最小値を引き上げることになります。上の例の場合、最小値は0なので円は見えなくなりますが、適当な数値を加えることで、円の最小サイズを決めることができます。button;}sin()関数に与える引数に手を加えると、サインの曲線をずらすことができます。これを円の描画に利用すると、大きくなり小さくなる複数の円のアニメーションのタイミングのずれが表現できます。sin()関数にはデフォルトで、ラジアン値を与えます。speed;}変数angleに足す変数speedの値を変えると、サイン値の1周期の長さを変えることができます。これは、心臓の鼓動にたとえると、「ドク、ドク」と鳴っていたものが「ドクドクドクドク」と速く鳴るようなものです。speed2;}サイン、コサインsin()とcos()関数を使った線形運動のサンプル。sin()とcos()は、0からPI*2(TWP_PI,約6.28度)までの数値を受け取り、-1から1までの数値を返します。この値を拡大するとより大きな運動を生み出すことができます。次のコードは、分かりやすくするため、関数にまとめるなど、p5.jsのコードから少し変更しています。diameter);}解説コサインの値も-1から1の間の滑らかな曲線を描きますが、始まりが1であることがサインと異なります。0からスタートしたい多くのアニメーションではcos()ではなくsin()が使用されます。2)と同等なので、この意味において大きな違いはないとも言えます。次のコードは、左右に動く円と上下に動く円のアニメーションの基本的なコードです。上下に動くか左右に動くかはellipse()関数の引数に何を与えるかで決まります。300...と変化するので、その結果円が上下に動くアニメーションになる。300...と変化するので、その結果円が左右に動くアニメーションになる。単純なサイン波をレンダリングします。オリジナルはダニエルシフマン。}}解説このサンプルは、単にサイン波を描画しているのではなく、数珠つながりに見える円をサイン波に沿って動かす、というものです。具体的にいうと、1回の描画で使用するサイン値をキャンバスの幅分ほど用意し、それをy値として、適切なx値と合わせて位置(x,y)に、毎フレーム、円を描画します。このサンプルのコードは洗練されていて理解しづらいので、以降に段階を追って見ていくことにします。本格的に述べようとすると物理の難しい話になるので、以下では基本的な概念を見ていきます。物理学的な波については「わかりやすい高校物理の部屋」の「単振動」などが参考になるかと思います。JavaScript」で示したようなコードを記述すると、半径aの円周上を移動する赤丸のアニメーションと、変化しつづけるサインの波を描画することができます。下図のグラフの横軸はp5.jsのframeCountプロパティ値、つまり時間で、縦軸は半径*sin(角度)、つまり増幅したサイン値です。半径の値はサイン波のグラフでは、波の高さ(振幅)に当たります。右の円周上の赤丸は0度の位置からスタートし時計回りに移動して、やがて円を1周しますが、これは周期と呼ばれます。0)からスタートして上に進み、振幅値を境に下降し、y値0を過ぎて、マイナスの振幅値で上昇に転じて、y値0に戻るまでに当たります。右の円の赤丸は1フレーム進むと、次の位置に進みます。このとき前の位置と次の位置との間に生まれる角度は角速度と呼ばれます。記述していますが、この変数speedが角速度に当たります。角速度は、進んだ角度を単位時間で割ることで計算できます。数珠つながりの円を描画するではいったん、サイン波から離れ、数珠つながりの円を描画する方法を見ていきます。変数xspacingは0,16,32,48と16刻みで704まで変化するので、順に横並びになります。ここでのポイントは配列のyvalues変数です。これは、setup()内の次のコードで作成されます。Array()には45が渡されます。Array()に整数を与えると、その数分を要素数とする空の配列が作成できます。今の場合は、要素数が45個の配列が作成され、変数yvaluesに割り当てられます。空の配列とはこんなものです。[,,,,,,,...]。実行して、この配列に数値の1を45個入れているので、円はキャンバスの高さから1引いた高さに描画されることになります。円をサイン波の形状に並べて描く並べる要素(円)が描けたので、円をサイン波の形状に並べる方法を見ていきます。これは、sin()関数を使って適切な値をyvalues配列に入れていく、ということです。角度は角速度*その時の時間。}}変数amplitudeは振幅で、a*sinθのaに当たる変数です。yvalues配列には、setup()内で次のようにして値を入れています。角度は角速度*その時の時間。周期(T)」の方法で求めています。TWO_PIは360度を意味するp5.jsの定数です。変数periodはキャンバスの幅よりもxspacingだけ大きい、サイン波をキャンバス一杯に描くための周期と見なせます。0.0086、度単位で0.4958ほどです。angularVelocityにiとxspacingを掛けて変数xに代入しています。sin()関数に与えたい角度は角速度にそのときの時間を掛けたものです。forループの変数iは時間を掛けて繰り返される中で値が1ずつ大きくなるので、時間と見なすことができます。今の場合は、瞬間瞬間のサイン波を描くのではなく、ある時間内(周期)でのサイン値をまとめて1度に描くので、時間変化を取り込む必要があります。これをx値としてsin()関数に与え、それに振幅を掛けた結果をy値としてyvalues配列のi番めの値として指定します。アニメーションさせる円をサイン波の形状に並べることができたので、後はこれを動かします。そのためには、setup()内に記述したyvalues配列に値を入れるforループを取り出し、draw()から呼び出すようにします。今の場合必要なのは一瞬一瞬のサイン値なので、forループの変数(i)は掛けません。}}波の足し合わせ2つの波を足し合わせることで、より複雑な波が作成できます。オリジナルはダニエルシフマン。Xをインクリメントする値。periodとxspacingの機能として計算される。シフマンオリジナルによるこのサンプルも非常に複雑に思えますが、元のアイデアはただ1つ、波の高さを表す数値の配列を用意し、そこにsin()とcos()を別々に適用し積算することで、複雑に変化する複数の波を作り出す、というものです。下図の左は通常のサイン波です。amplitudeを描くのでそれを=演算子でy値に代入します。下図の右は、これを+=演算子を使ってy値に積算しています。これにより波の形に変化が現れます。なく、実際に4つの波の計算を行い、それをつなぎ合わせようとしたのが次の例です。波ごとに周期や振幅、角速度を計算し、各配列に収めて、最後にそれらを連結して、値を円のy値として描画します。rsin(theta)です。オリジナルはダニエルシフマン。平面上の点の位置は,二つの数字を使うことで表現できます。