問題タブ [morphing]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
math - 与えられた点のセットで画像をワープする簡単な方法は何ですか?
画像のモーフィングを実装したいと思います。そのためには、指定された一連のポイントとその目的の位置 (「ドラッグ」される場所) で画像を変形できる必要があります。仕事を終わらせるシンプルで簡単なソリューションを探しています。見栄えがよくなくても、非常に高速である必要もありません。
これは私が必要とする例です:
画像と、目的地が [0.6,0.5] の 1 つの変形ポイント [0.5,0.5] のセットがあるとします (または、移動ベクトルが [0.1,0.0] であると言えます)。これは、画像の中心のピクセルを 0.1 右に移動したいということです。任意の半径 r にある隣接するピクセルは、もちろん、このピクセルと一緒に少し「ドラッグ」する必要があります。
私の考えは、次のようにすることでした：
- 提供された変形ポイント セットに応じて、ソース イメージの位置を目的の位置にマッピングする関数を作成します。
- 次に、この関数の逆関数を見つける必要があります。これは、宛先ピクセルを調べて、「この位置に到達するためにポイントがどこから来なければならなかったか」を確認して変換を実行する必要があるためです。
ステップ 1 の関数は次のようになります。
どこ
- p0 ([x,y] ベクトル) は変形点の位置です。
- p1 ([x,y] ベクトル) は、ソース イメージ内の任意の点です。
- p2 ([x,y] ベクトル) は、p1 が移動される位置です。
- s ([x,y] ベクトル) は変形点の移動ベクトルであり、p0 がドラッグされる方向と距離を示します。
- r (スカラー) は半径で、数値です。
ステップ 2 に問題があります。逆関数の計算は少し複雑すぎるように思われるので、次のように思います。
- 逆関数を見つけるための簡単な解決策がある場合、または
- 逆関数を見つけるのが簡単なより良い関数がある場合、または
- これをすべて行うためのまったく異なる方法があれば、それは簡単ですか?
three.js - 立方体をモーフィングして 3 つの js でコイル状にします
薄い長方形の立方体を と でコイル状に変形させようthree.jsとしましたtween.js。すでに尋ねられた質問を検索しましたが、どれも私を導きません。
どのモーフ機能を使用すればよいですか? また、コイル形状を作成するにはどうすればよいですか?
android - Android での連続遷移 (モーフィング)
Android のアニメーション、シーン、トランジションについてよく読んでいますが、どこにも言及されていないことが 1 つあります。たとえば、ユーザーがスライダーを左から右に移動すると、あるビューから別のビューに「モーフィング」されるため、共有要素は新しい位置に移動するか、新しいレイアウトに存在しない場合はフェードアウトします。Scenes と TransitionManager を使用すると、ボタンのクリックでそのような操作を実行できますが、進行中のトランジションとは対話できないため、ユーザーはアニメーションの速度と方向を制御できます。これは何とかAndroidで可能ですか？そのために組み込みの手法を使用できますか?それとも、すべての翻訳を手動で計算してマッピングする必要がありますか?
javascript - KUTE.js svg パスがモーフィングしない
ご覧のとおり、パスはモーフィングしていません。問題はsvg自体にあり、モーフィングしていないという結論にすでに飛びつきました。何が問題なのですか？形状は非常に単純で、すべて同じサイズとアンカーを持ち、kute.js のドキュメントにあるように、「閉じた形状 (d 属性は z で終わります)」です。
android - Bitmoji はどのように機能しますか?
bitmoji や他の同様のサービスがどのように機能するか、誰かが考えを持っていますか? カスタム アバターが必要なアプリのアイデアがあります。
モーフィングに基づく 3D ゲーム用のライブラリが複数あります。簡単。ただし、すべての 2D キャラクターはスプライトで継ぎ目なく作られています。しかし、bitmoji にいくつのオプションがあるかを考えると、基本的に考えられるすべてのスプライトが描画されたと思いますか? それとも、「黄色いレンガの道」を見つけるのは愚かですか？
アドバイスをありがとう。
javascript - three.js レンダリング中にチューブのパスを変更
私のアプローチには、次の手順が含まれます。
1) チューブの初期パスを作成します (ポイントの位置の配列)
2) パスに基づいてチューブをレンダリングする
3) パス配列の変更
4) ステップ 2 に進みます
したがって、おそらく次のような関数が必要です。
這うヘビをレンダリングしたいとしましょう。
私は美しく、非常に複雑な例を見つけました。私の問題を解決する方法についての基本的な理解を教えてください。
例 - http://codepen.io/tdhooper/full/ZGPOQJ/
この関数を使用してチューブを作成します。
曲線の作成に使用する機能とモーフィングの方法を教えてください (拡大縮小、回転、チューブの移動ではありません)。
ポイントの私の配列は単純です：