フーリエ級数を用いて絵を描くという試みをいろんなところで見かけます。
一番有名なのは以下の動画でしょうか。
初音ミクを描いちゃったという方もいらっしゃいます。
Bad Apple Curve!! 〜フーリエ記述子でアニメーション作ってみた〜
車輪の再発明でいいじゃないかというスタンスでやっておりますので自分も実装します。用いる数式は下記論文の2.2を参考にしました。
Fourier descriptors for broken shapes | SpringerLink
以下、作成したプログラムのデモ動画になります。
実行の様子は下記サイトからでも確認できます。
http://riverta.net/gallery/trigonometry/contour_representation/index.html
参考
【JavaScript】桁指定して四捨五入・切り上げ・切り捨て - Qiita
lineTo(x, y)－Canvasリファレンス
レンジ入力欄(スライダー)の現在値を表示する方法 – beizのノート
<input type="range"> - HTML: HyperText Markup Language | MDN
<input type="range">－HTML5タグリファレンス
HTML DOM Input Range max Property
Javascript でドラック＆ドロップを実装 (ライブラリ使わない) - Qiita
マウスイベントでのドラッグ&ドロップ
Element: mousemove event - Web API | MDN
