canvasとjsで、動く波を描く

キャンバス（canvas）の幅を30ピクセル毎に分割し、各点毎にサインカーブの計算をし、キャンバスのlineTo()関数を使って繋いでいます。正確にはサインカーブでは無く、多数の直線で構成する折れ線になっています。

波の動きは、4つの波の各々に、初期位置（位相）、波長、速度、高さなど少しずつ変えて指定し、その値をもとに各点毎の高さを計算し、ブラウザーの各表示フレーム毎（約17ミリ秒）に書き換えています。

更新：2022.11.10