波のアニメーションを表現する[正弦波][sin][canvas]2017年4月29日JavaScript波のアニメーションを表現してみます。前回は「静止している正弦波」(下記関連ページ参照)を表現してみましたが、今回はその「静止している正弦波」をアニメーションし、実際に波として動いているような挙動を表現してみます。関連ページ波を表現する[正弦波][角速度ω][sin][Math.PI]イメージとしては、下記のイラストのように「静止している正弦波」の各点を少しづつずらして描写しています。各点において単振動させている感じです。ブラウザが対応しておりません。height="500">ブラウザが対応しておりません。角度を増やしているのは、イラストでは↑↓の矢印の部分です。各点における単振動のy軸の位置を変化させています。下記のデモ画面2では波の下の部分を、半透明の緑色で塗りつぶしています(42〜47行目を追加)。ブラウザが対応しておりません。height="500">ブラウザが対応しておりません。