JavaScriptで "Cubic Hermite Spline補間関数" を作りました。 [プログラミング]
現在も制作中の、インタラクティヴ ディジタル アート作品の為に、JavaScriptで三次補間関数を作成致しました。
この関数に補間対象の1次元のデータ配列と拡大倍率の値を渡すと、 " 三次Hermite スプライン補間法 " (Cubic Hermite Spline Interpolator / キュービック エルミート スプライン補間法)でデータの内挿を行い、渡された値の間を滑らかに繋ぐ新たな値を生成して、1次元の新たなデータ配列を返却します。
https://c1.staticflickr.com/9/8752/28065573983_d53a4c160a_o.png
これはグラフをHTML5のCanvas要素内に描画した際のスクリーンショット画像です。
水色の角ばった線が与えたデータを表しております。
橙色の曲線が補間されたデータを表しております。
与えたデータの点を通り、滑らかな曲線を描いております。
このグラフのデータの補間による拡大倍率は12倍です。
オーヴァーシュートとアンダーシュートが出ますので、値域に関しては適切な処理が必要です。
->->
[2016年8月2日追記]
" 三次Hermite スプライン補間関数 " のオプションを追加致しました。
与えられたデータ配列の最初の要素の値と最後の要素の値が滑らかに繋がり、循環するように指定出来ます。
https://c1.staticflickr.com/9/8654/28701035475_245787f389_o.png
このスクリーンショット画像に描かれている歪んだ円環は、乱数による一様なノイズを複数回、スケールを変えながら滑らかにデータ補間しつつ合成して行ったものを円形に繋いだ曲線です。
円の始点と終点が滑らかに繋がるようにする為に、データ補間のオプションで、ノイズの最初のデータの値と最後のデータの値が循環するように指定したものです。
<-<-
->->
[2017年5月22日追記]
データを循環させる場合の繋げ方が適切でなかったので修正致しました。
データの最初と最後が補間により滑らかに繋がります。
<-<-
私のこのプログラムは行列計算などにはしていないので処理速度は速くはない筈ですが、綺麗に補間出来ます。
また、このコードはもしかすると間違っているかもしれません。
私のブログ記事: とても美しいディジタル アートになりました。
http://crater.blog.so-net.ne.jp/2016-07-26
私のブログ記事: HTML5のCamvasと "JavaScript" で音声処理と画像描画。
http://crater.blog.so-net.ne.jp/2016-06-30
私のブログ記事: "JavaScript" で音と画像を生成するプログラムのソースコード。
http://crater.blog.so-net.ne.jp/2016-06-30-1
この関数の作成の為にWikipediaなどを参照させて頂きました。
"Wikipedia" (English)の "Cubic Hermite spline" のページのURL:
https://en.wikipedia.org/wiki/Cubic_Hermite_spline
以下に自作のソース コードを掲載致します。
自己責任の上で御自由にお使い下さいませ。
当ソース コードには間違いがあるかもしれません。
もし当ソース コードを使用した事による如何なる問題につきましても、私は責任を取る事が出来ません。
御了承下さいませ。
引数は、以下のものと致します。
dataArray:
補間対象の1次元データ配列。
dataArrayLength:
データ配列の最初の要素から数えての補間対象とするデータの要素数。
dataArray[0]からdataArray[15]までを対象とする場合、16という数値を渡す。
scaleFactor:
拡大倍率。
8倍に拡大したい場合、8という数値を渡す。
isDataLoop:
データの最初と最後を循環させる場合、trueを渡し、循環させない場合、falseを渡す。
この関数に補間対象の1次元のデータ配列と拡大倍率の値を渡すと、 " 三次Hermite スプライン補間法 " (Cubic Hermite Spline Interpolator / キュービック エルミート スプライン補間法)でデータの内挿を行い、渡された値の間を滑らかに繋ぐ新たな値を生成して、1次元の新たなデータ配列を返却します。
https://c1.staticflickr.com/9/8752/28065573983_d53a4c160a_o.png
これはグラフをHTML5のCanvas要素内に描画した際のスクリーンショット画像です。
水色の角ばった線が与えたデータを表しております。
橙色の曲線が補間されたデータを表しております。
与えたデータの点を通り、滑らかな曲線を描いております。
このグラフのデータの補間による拡大倍率は12倍です。
オーヴァーシュートとアンダーシュートが出ますので、値域に関しては適切な処理が必要です。
->->
[2016年8月2日追記]
" 三次Hermite スプライン補間関数 " のオプションを追加致しました。
与えられたデータ配列の最初の要素の値と最後の要素の値が滑らかに繋がり、循環するように指定出来ます。
https://c1.staticflickr.com/9/8654/28701035475_245787f389_o.png
このスクリーンショット画像に描かれている歪んだ円環は、乱数による一様なノイズを複数回、スケールを変えながら滑らかにデータ補間しつつ合成して行ったものを円形に繋いだ曲線です。
円の始点と終点が滑らかに繋がるようにする為に、データ補間のオプションで、ノイズの最初のデータの値と最後のデータの値が循環するように指定したものです。
<-<-
->->
[2017年5月22日追記]
データを循環させる場合の繋げ方が適切でなかったので修正致しました。
データの最初と最後が補間により滑らかに繋がります。
<-<-
私のこのプログラムは行列計算などにはしていないので処理速度は速くはない筈ですが、綺麗に補間出来ます。
また、このコードはもしかすると間違っているかもしれません。
私のブログ記事: とても美しいディジタル アートになりました。
http://crater.blog.so-net.ne.jp/2016-07-26
私のブログ記事: HTML5のCamvasと "JavaScript" で音声処理と画像描画。
http://crater.blog.so-net.ne.jp/2016-06-30
私のブログ記事: "JavaScript" で音と画像を生成するプログラムのソースコード。
http://crater.blog.so-net.ne.jp/2016-06-30-1
この関数の作成の為にWikipediaなどを参照させて頂きました。
"Wikipedia" (English)の "Cubic Hermite spline" のページのURL:
https://en.wikipedia.org/wiki/Cubic_Hermite_spline
以下に自作のソース コードを掲載致します。
自己責任の上で御自由にお使い下さいませ。
当ソース コードには間違いがあるかもしれません。
もし当ソース コードを使用した事による如何なる問題につきましても、私は責任を取る事が出来ません。
御了承下さいませ。
引数は、以下のものと致します。
dataArray:
補間対象の1次元データ配列。
dataArrayLength:
データ配列の最初の要素から数えての補間対象とするデータの要素数。
dataArray[0]からdataArray[15]までを対象とする場合、16という数値を渡す。
scaleFactor:
拡大倍率。
8倍に拡大したい場合、8という数値を渡す。
isDataLoop:
データの最初と最後を循環させる場合、trueを渡し、循環させない場合、falseを渡す。
|
2016-07-31 12:14
コメント(0)
トラックバック(0)
コメント 0