波のアニメーションを表現する[正弦波][sin][canvas]

2017年4月29日

波のアニメーションを表現してみます。

 

前回は「静止している正弦波」(下記関連ページ参照)を表現してみましたが、今回はその「静止している正弦波」をアニメーションし、実際に波として動いているような挙動を表現してみます。

 

関連ページ

波を表現する[正弦波][角速度ω][sin][Math.PI]

 

イメージとしては、下記のイラストのように「静止している正弦波」の各点を少しづつずらして描写しています。つまり各点において単振動させている感じです。

 

 

デモ画面1

 

 

42行目

角度を増やしているのは、イラストでは↑↓の矢印の部分です。各点における単振動のy軸の位置を変化させています。

 

 

下記のデモ画面2では波の下の部分を、半透明の緑色で塗りつぶしています(42〜47行目を追加)。

 

 

デモ画面2

 

 

 

参照ページ


 

『JavaScriptゲームプログラミング 知っておきたい数学と物理の基本』

著者: 田中 賢一郎

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー