YouTube でプログラミング を学習!【趣味プロch】

【JavaScript】プログラミングでフーリエ級数を視覚化!

JavaScript
スポンサーリンク

本記事ではフーリエ級数をプログラミングで可視化する方法について紹介しています。

 

フーリエ級数の可視化プログラムの実装について。

 

矩形波、三角波、のこぎり波を視覚化するものを作ったのでぜひ遊んでみてください。

 

言語はJavaScriptを使っています。

 

↓YouTube に動画もアップしてあるので、そちらもぜひご覧ください。

 

【早送り】プログラミングでフーリエ級数を視覚化!【JavaScript】

 

スポンサーリンク

フーリエ級数の視覚化

DEMO

まず始めにこちらが完成品です。

 

 

矩形波は周期の異なる無数の正弦波の和で表すことができる!

 

今回は矩形波だけではなく、三角波、のこぎり波もボタンを押し切り替えることで可視化できるようにしてみました。

 

また、Speed の目盛りを変えることで描画の速度を変え、下の目盛りで項数 N を変更できるようにしました。

HTML / CSS ファイルの作成

 

まず、下記のようなHTMLファイルを作成します。

 

 

そして外観をよくするため CSS ファイルにも色々書きます。

 

 

choices クラスでは display:inline-block; を使用して3つの choice (矩形波、三角波、のこぎり波) の画像が綺麗に横並びで表示できるようにしています。

 

三種類の画像は同じディレクト内に置きます。

JavaScript ファイルの作成

 

以下のように、JavaScript ファイルを書きます。

 

 

おまけパート内で、スライダで目盛りを変更できるようにしたり、矩形波や三角波などタイプを選択できるようにしています。

 

drawStrokeCircle() という関数では、外枠だけの円の描画をしています。塗りつぶされていない円を表示しています。

 

一方、drawFillCircle() では、中心座標の(x,y) と半径 r を受け取って、塗りつぶされた円の描画を行っています。

 

 drawLine() で、線を引いています。

 

switch 文を使い、ボタンが押されたら、タイプを変更するようにしています。

デフォルトは矩形波にしています。

 

for 文を使用し、項数を増やしています。

 

以上がフーリエ級数を可視化するプログラムのソースコードです。

 

 

【独学】フーリエ解析とラプラス変換-海外理系学生がおすすめする参考書
フーリエ解析、ラプラス変換のおすすめ参考書紹介。フーリエ解析、ラプラス変換の本。フーリエ展開の証明、フーリエ変換とは?、ラプラス変換とは?などを分かりやすく解説している本です。例題もたくさんあり、複素数型のフーリエ級数展開もバッチリ。独学で問題なしのかなりおすすめ大学数学入門書。

参考資料

 

 

【JavaScript】モンテカルロ法で円周率を求める
モンテカルロ法で円周率を求めるプログラムをJavaScript で実装。乱数というランダムな数を使い、円周率の近似値を求めています。

ご質問・ご感想は

ツイッターお問い合わせからいただけるとうれしいです。

 

最後まで読んでくれてありがとうございます。

ツイッターのフォローもお願いします。

それではまた!
 
 


YouTubeチャンネルを開設しました。
主にプログラミングについて配信をしています。

 

 
 

JavaScript勉強数学プログラミング
スポンサーリンク
この記事をSNSでシェアする
フォローする
スポンサーリンク

コメント