uTorrentの「About window」のアニメーションで使用されているアルゴリズムは何ですか?


8


あなたが開いた場合のuTorrentの最新バージョンでは、ウィンドウを、あなたは親切永遠に行く波のあるアニメーションの背景を、表示されます。
どうすればこれを達成できますか?これはよく知られたアルゴリズム/アルゴリズムのクラスですか?
ありがとう。
ここに画像の説明を入力してください


1
@trichoplax写真を削除してGIFを追加しました。ありがとう。
Wfi Okly 2016

パレットのサイクリング効果のように見えます。画像自体は静的です。
PaulHK 2016

回答:


9

自己回答で発見して言及したように、背景のパターンは正弦波勾配の合計のように見えます。

ただし、回答でリンクされている例は、µTorrentで使用されている例よりも複雑です。アバウトウィンドウの背景は、プラズマポストで使用されるアニメーション化された正弦波パターンではなく、静的パターンのように見えます。

いくつかの正弦波勾配が合計されて単一の画像が得られ、動きの錯覚は、多数の異なる画像を生成するのではなく、その1つの画像の色を単に循環させることで得られます。これは、色のリングの1つの中心に焦点を合わせると最も顕著になります。µTorrentパターンでは、各リングが1か所に留まり、カラーがリングの内外に流れていることに気付くでしょう。対照的に、完全にアニメーション化されたパターンの色の輪は動き回ったり、ときどき分割したりマージしたりします。

µTorrentが使用する簡略化されたアプローチは、各フレームの正弦波パターンを再計算することが現実的でなかったときに過去に使用されたアニメーションを連想させます。



2

効果は、2つ(またはそれ以上)の放射状正弦波を一緒に追加し、別の正弦関数を介して結果として得られる位相をアニメーション化することにより、大まかに再現できます。

確認するには、www.shadertoy.comを使用してください。

   void mainImage( out vec4 fragColor, in vec2 fragCoord )
   {
       vec2 uv = fragCoord.xy / iResolution.xy;
       float d = sin(length(uv - vec2(0.5)) * 35.0) + sin(length(uv - vec2(0.2,0.3)) * 45.0);
       d = sin(d * 4.0 + iGlobalTime * 4.0)*0.5+1.0;
       fragColor = vec4(d,d,d,1.0);
   }

1
さらに興味深いものとして、放射状の形状の原点をアニメーション化することもできます。-> float d = sin(length(uv-vec2(0.5))* 35.0)+ sin(length(uv-vec2(0.2 + sin(iGlobalTime)、0.3))* 45.0);
PaulHK 2016
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.