ハクソク

世界を動かす技術を、日本語で。

HNに表示: 球面ヘリックスに興味を持ち、このビジュアライゼーションを作成しました

278日前原文(visualrambling.space)

概要

  • 3D空間でオブジェクトを動かす方法の探求
  • パラメトリック方程式を使ったパスの定義
  • 円、スパイラル、球面ヘリックスの実装例
  • 数学的関数で複雑な動きを実現
  • 創造的な3Dパス設計の基礎解説

3D空間でオブジェクトを動かす方法

  • 3D空間 でオブジェクトを動かすには、 x, y, z座標 を設定
  • x軸 は左右方向、 y軸 は上下方向、 z軸 は奥行き方向を表現
  • オブジェクトの動きを制御するには、 時間t を使った数式で各座標を定義
    • 例：x = 10 * cos(πt/2) により、x軸上で周期的に移動
  • cos関数やsin関数 を使うことで、円運動や振動運動を実現
  • xとyに異なる関数を設定することで、2次元のパス（例：円）を作成

円運動とスパイラルの実装

  • x = 10 * cos(πt/2)、y = 10 * sin(πt/2) で円軌道を描画
    • xが10のときyは0、xが0のときyは10という位相差を持つ
  • xやyの関数に 0.03 * t を掛けると、半径が時間と共に拡大
    • 半径が増加することで スパイラルパス を形成

球面ヘリックスの動き

  • 球面ヘリックス は3次元空間で螺旋状に動くパス
  • z座標に 10 * cos(0.02 * πt) を使い、z軸上で円運動
  • x, y座標には sin(0.02 * πt) を掛けて、半径が途中で大きくなり、端で小さくなる
    • これにより、球面上を巻きつくような螺旋運動を実現
  • 3つの関数を組み合わせて、オブジェクトの位置を随時更新

パラメトリック方程式と応用

  • 各座標を 時間などの変数で表現する関数 を パラメトリック方程式 と呼称
  • パラメトリック方程式を使えば、どんな複雑なパスでも設計可能
    • 単純な円、スパイラル、球面ヘリックス、さらにはカオス的に見えるパスまで
  • すべては数学的な関数で定義されたパス

まとめと参考情報

  • 3D空間でのオブジェクト移動は 座標を関数で制御 することで実現

  • パラメトリック方程式 の理解が創造的なパス設計の鍵

  • 詳細は Wikipediaのパラメトリック方程式 の記事も参照

  • さらに学びたい場合は visualrambling.space や DamarのTwitter もおすすめ

    • visualrambling.space: https://visualrambling.space/moving-objects-in-3d/
    • Twitter: https://twitter.com/damarberlari_blank

付記

  • 本記事は Damar による個人プロジェクト
  • 3D数学、Three.js、WebGL、球面座標、ヘリックス形状、数学的可視化などをカバー
  • 興味があればTwitterのフォローや友人へのシェアも歓迎

Hackerたちの意見

これは基本的な入門書だけど、数学を学ぶ子供にはいいと思う。円の方程式（x = r cos(t) と y = r sin(t)）みたいな数学の概念に戻る部分があったらもっと良かったかも。さらに掘り下げるトピックとしては、極座標や線形代数の基礎（ベクトル、変換、3次元空間での変換）なんかが考えられるね。もし著者がそういうトピックに自信がないなら、3blue1brownのYouTube動画をおすすめするよ。プログラマー向けというよりはそっちの方がいいかも（コードやライブラリ、3Dオブジェクトの操作については触れてないからね）。

これらは初期の海洋航海においてすごく重要だったんだ。航海中に一定の進行方向を保つ方が楽だから、船乗りたちはそれに近づこうとするんだよね。これがロクソドロミック曲線やランブラインにつながったんだ。 https://en.m.wikipedia.org/wiki/Rhumb_line メルカトル図法のおかげで、その進行方向を計算するのが簡単になった。 https://en.m.wikipedia.org/wiki/Mercator_projection この構成は、数学の贈り物みたいなもので、見方を変えると対数螺旋が見えるし、横から見ると波パケットが見える。数学って本当に面白いから、エルデシュも手を出したんだよね。[0] メタな話だけど、今日はHNで球面幾何学の日みたいだね。 https://news.ycombinator.com/item?id=44956297 https://news.ycombinator.com/item?id=44939456 https://news.ycombinator.com/item?id=44938622 [0] C.G.J.ヤコビによる地球の螺旋。ポール・エルデシュ https://pubs.aip.org/aapt/ajp/article-abstract/68/10/888/105...

└

あなたに触発されて、2022年のプロジェクトの一つを提出したよ！ https://observablehq.com/@jrus/spheredisksample https://news.ycombinator.com/item?id=44963521 今日はそのトレンドに合わせてね。みんなも https://observablehq.com/@jrus/sphere-resample を楽しめるかも。

球面ヘリックスのz軸の動きの「正しさ」について考えてたんだけど、いろんな関数が選べるよね。単純な線形運動（z = c * t）なんかも含めて。これだと「皮」の厚さや一貫性に影響が出るのは明らかだよね。使われている方程式は視覚的に魅力的な結果を生むけど、スパイラル間の距離の一貫性や、分割された面積の均一性なんかの観点で、良い目標は何だろう？この特定の関数はどうやって選ばれたの？何かの方法で導出されたのか、それとも見た目が良いから手選びされたのかな？

└

この特定の関数が選ばれたのは、プログラムするのが便利だったからで、視覚効果が十分に良かったからだと思う。実際に「正しい」ことをするなら、実際のボートが地球上を航行するように、3D空間で一定の速度を保つべきだよね？でもそれはかなり大変な作業だね。const degrees = Math.PI / 180; const bearing = 5 * degrees; // もしかしたら85度かも？ちょっと自信ない const k = Math.tan(bearing); const v = 0.001 // 速度、必要に応じて調整 const phi = (t) => vt/Math.sqrt(1 + kk) // sqrtは厳密には必要ない const theta = (t) => k*Math.ln(Math.tan(phi(t)/2)) // これが面倒くさいやつ haha 出力として、const x = (t) => Math.sin(phi(t)) * Math.cos(theta(t)) const y = (t) => Math.sin(phi(t)) * Math.sin(theta(t)) const z = (t) => Math.cos(phi(t)) ただ、彼らがln(tan(phi/2))のことをやったとは思えないけど、ここにあるk d{phi} = sin{phi} d{theta}の方程式を積分すると得られるものだよ。

もしこれが気に入ったら、Twitterでフォローしたり、友達とシェアしてくれると嬉しいです。 これ、気に入ったから友達にシェアするよ。でも、もうTwitterアカウントは持ってないし、再登録するつもりもないよ。RSSかJSONフィードをサイトに追加することを考えてくれない？それかMastodonアカウントを作るといいよ、あれはデフォルトでRSSフィードを提供してるから。

すごくいいビジュアライゼーションだね。期待してたけど見られなかった部分は、どうやって一定の速度で動くのかってこと。物体をパスに沿って配置する元々の目的には関係ないけど、動いてるときは最初と最後でかなり遅く動いてるのが見える（主に半径によって決まる）。一定の速度で移動させたい場合はどうすればいいの？それとも速度にイージング関数を適用することもできる？きっとそれを実現するための素敵な数学的トリックがあるはず。もっと数学に自信があればなぁ…手描きのスケッチだと、速度関数を計算するために式を微分してdx、dy、dzを得て、それをピタゴラスの定理に通して、t'変数で再パラメータライズする感じかな？多分？自分が理解してない言葉を使ってる気がする。

└

定速で動かすには、いわゆる「ユークリッドパラメータ化」が必要で、tの値が移動したユークリッド距離sに比例するんだ。だから、tの値がどうであれ、dtを足すと必ず同じdsになる。これは、いろんな曲線に沿った動きをアニメーションさせるときにめっちゃ必要になるよね。残念ながら、通常は閉じた形の解がないから、数値的にやらなきゃいけない。で、そのためには、一般的に各tで、欲しいdsに大体対応するdtをバイナリ検索や補間で探すのが一番だよ（前のdtから始めると、かなり良い近似になることが多い）。実際には、それを一度やって結果を保存する感じで、曲線を均等に間隔を空けた点のポリラインとして近似するんだ。まあ、曲線自体が時間とともに変わらないと仮定してね！

└

tを少し遅くするという本能は正しいよ。支配する関数がtに対して角速度を維持しつつ、半径もtに対してスケーリングしてるからね。なんかアルキメデスの螺旋みたいな感じ。だから、速度をパラメータ化してそれを一定にすれば、もっと良い状態になるよ。ただ、半径はゼロから始まるから、何かしら制限に対処しなきゃいけないね。ゲーム用のもっとシンプルな経路追従の近似は、単に反復システムの経路と接線ターゲットをZに対して与えて、何らかの基本的なツイーニングで速度に対する反復制約を設けるって感じかも（例えば、新しい = a * 古い + (1 - a) * ターゲット）。それから、Zに沿ってその物体を引きずる感じで、幼児向けのビーズおもちゃみたいにね。

ありがとう。私の有用なフィードバックは、ナビゲーションが期待を裏切ったことかな。モバイルで見てたんだけど、どうしたらいいかわからなくてスクロールを始めたんだ。画面に触れたら次のパネルに行っちゃって、「あ、そうなんだ」って感じ。右側に触れたから進むと思って、後で余計にクリックしちゃったときに、戻るために左側をクリックしようとしたんだけど（右から左に読んで上から下に読む人は違う直感を持ってるかもしれないし、鈍感なウェブに慣れてるかもしれない）。残念ながら、それでまた別の画面をスキップしちゃって、2つ連続で見逃しちゃった。致命的ではなかったけど、ちょっと残念で微妙に悲しかった。もう少し微妙なガイダンスがあれば、曖昧さがなくなって、もっと集中して楽しめたと思う。

└

最初のスライドには指示があるよ。二次的なスワイプメカニズムを追加するのもいいと思うけど（私はタップの方が好きだけど）、それがソーシャルメディアアプリでの「カードスタック」インターフェースのナビゲーション方法だからね。

なんでかわからないけど、Linux/Braveでパフォーマンスがひどいんだ。訪問するとすぐにCPUがスパイクする。強力なマシン（32 GiB RAM、Intel i9、24コア）を使ってるんだけど。

└

なんでかわからないけど、 どこにこの文が入るか見てみよう！ > Linux それを調べてみるよ。 > Brave それも絶対調べる。 > 32 GiB RAM、Intel i9、24コア この部分は関係ないね。

いいね！最初の直感はスクロールだったよ。スクロールダウンを1スライド進む合図として扱うことをおすすめするよ。

いいね！最初の直感はスクロールだったよ。スクロールダウンを1スライド進む合図として使うことを提案するね。

アニメーションがめっちゃ滑らかだね！最近、複雑な形を生成しようとして、「球面上にN点を分散させる」という複雑な問題にぶつかったんだ。そこで、フィボナッチスフィアっていう、球面の周りに螺旋を生成するすごくクールでシンプルなアルゴリズムが紹介されてたよ。点の分散のためにね。これについてもっと詳しく書いてある論文があるよ。[1] - https://arxiv.org/pdf/0912.4540