球面らせんに興味を持ったら、この可視化が生まれた！
引用元：https://news.ycombinator.com/item?id=44962066
球面らせんに沿って物を配置する方法を学んで、パラメトリック方程式を再学習したんだ。その学びを可視化するためにこれを作ったよ。見て感想を教えてね！
https://visualrambling.space/moving-objects-in-3d/
航海では常に一定の方位を保つのが楽だから、ロクソドローム曲線（航程線）が昔は超重要だったんだ。メルカトル図法も方位計算を簡単にしたよね。
https://en.m.wikipedia.org/wiki/Rhumb_line
https://en.m.wikipedia.org/wiki/Mercator_projection
この形状は数学的に奥深くて、横から見ると対数螺旋や波束にも見えるし、Erdosも研究してたんだって！今日はHNも球面幾何学デーみたいだね。
https://news.ycombinator.com/item?id=44956297
https://news.ycombinator.com/item?id=44939456
https://news.ycombinator.com/item?id=44938622
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
10代の頃、正距円筒図法みたいなのを描こうとしてたんだよね。正方形の窓の反射を球に描いたり、球をチェック柄で覆ったりしてた。これが見れて最高だよ、ありがとう！
正距円筒図法っていうのは、緯度と経度を長方形にプロットするってことだよ。君が言ってるのは、僕が球に投影した斜めグリッドのことかな？それには名前がないと思うな。
会えて嬉しいよ。幾何学、多変数解析、回転についての君のコメントを楽しみにしてるね。追記：グラフィックも素晴らしいよ。他の作品もHNに投稿すべきだね。
OPのらせん曲線はロクソドロームじゃないよ。表面で等間隔に線があるけど、ロクソドロームは定義上、子午線と常に同じ角度で交わるから、極に近づくほど密になるんだ。数式で見ても、d(λ)/d(φ)が定数になるから、φに依存するロクソドロームの条件を満たさないんだよ。 varying intersection anglesについてはこれを見て！
https://beta.dwitter.net/d/34223
まさにその通り。これはよく知られた球面螺旋やSeiffert螺旋の一つだよ。
ロクソドロームなどの議論が盛り上がった、この投稿も忘れないでね！
https://news.ycombinator.com/item?id=44962767
これは見逃してた！ありがとう。本当に今日は球面幾何学の日だね。
Erdosの言葉を借りるなら、球面上を一定速度で動き、固定された直径に対して一定の角速度を保つと、パスはヤコビ楕円関数で記述されるってことらしいよ。なんか難しそうだね！
マジかよErdos。どんだけ多作だったんだ。死んでからも4年間も論文出してたって！？すげぇ！
可視化は最高！だけど、どうやって一定速度で動かしてるのかが知りたかったな。始めと終わりでめっちゃ遅くなるじゃん？これ、一定速度にしたり、Easing関数を適用したりできないのかな？多分、数式を微分して、ピタゴラスの定理で再パラメータ化する感じなのかなぁ？数学苦手だから自信ないけど。
一定速度で動かすには「Euclidean parameterization」ってのが必要だよ。これは通常、閉じた形で解けないから、数値的に計算するしかないんだ。実際には、一度計算して結果を保存しちゃって、等間隔の点を持つPolylineとして曲線近似するのが一般的な方法だよ。
パスに沿ってdsを変えるこのパターンは、Control Theoryでよく使われるんだよ。Motorの既知のAcceleration Profileに基づいてds/dtの比率を変えて、Jerkを最小限に抑え、目的地に最速で到達させたりするんだ。これは一般的に「Motion Profiling」って呼ばれてるよ。詳細はここ見てね：https://www.motioncontroltips.com/what-is-a-motion-profile/
君が求めてるのは「Arc Length Parameterization」ってやつだよ。基本的には、曲線をそのArc Length Functionの逆関数と合成する必要があるんだ。いくつかの特殊な曲線を除けば、閉形式の解は存在しないよ。
tを遅くするって直感は正しいよ。なんでかって言うと、Governing Functionsがtに対してAngular Velocityを維持してるけど、Radiusもtに対してScalingされてるからなんだ。Archimedean Spiralみたいなもんかな。だから、VelocityをParameterizeして一定にすれば、もっと良くなるよ。簡単なPath Following Approximationなら、Z軸に沿って繰り返しPathとTangent Targetsを与えて、VelocityにConstraintをかけるだけでもいいかもね。
ありがとう！現状はtが一定速度で進むようにしてるから、Cubeは同じ時間で一周しちゃうんだ。だから、Loopの距離が短い始めと終わりで遅く見えるんだよね。正直に言うと、実装がシンプルだからそうしたんだ。でも、みんなが解決策をいくつか教えてくれたから、試してみるつもりだよ！
”それが実際にはChaosじゃない”って部分だけど、ChaosってDeterministicなMathematical Functionsから生まれるものなんだよ。もしかして筆者は「Random」とか「Non-deterministic」って言いたかったんじゃないかな？
おいおい、これはマジで過小評価されてる細かい指摘だぜ。HNの読者なら、この区別には興味を持つべきだよな。数学的にカオスってのは、初期条件に対する超敏感さのことで、決定論的なシステムとちゃんと一直線上にあるんだ。結果はランダムに見えるけど、数学的にも概念的にも本当のランダムネスとは別物なんだよ。
‘実際の’とか‘真の’ランダムネスって、深掘りするとマジで沼なんだよな。
https://en.wikipedia.org/wiki/Randomness
「ランダム」を何で定義するかで全然変わってくる。数学的な意味で、真のランダムネスがあるって証明はまだないんだ。
ランダムネスを測るための洗練されたテストはたくさんあるんだ。プラトン的な意味で絶対的なランダムネスを証明するのは無理だけど、アプリケーションで必要とされるいろんな特性について、ソースを評価することは確実にできるよ。この例（球面らせん）では、フーリエ変換で調和成分が特定できるから、形式的な意味でのカオスでもランダムでもないんだ。
俺は「ランダム」って言葉を、初期条件が未知（または知り得ない）なカオス（初期条件に極端に敏感な状態）って意味で使ってるよ。
その使い方は理解できるし、君がその区別をわかってるのは伝わるよ。でも、形式的には違う概念だから、場合によっては混乱を招くかもしれないね。システムのカオス性と、俺たちが統治法則や初期条件が不明で、シミュレーションが困難なために確率論的なツール（つまりランダムネス）を使って不確実性を記述するのとは別の話なんだ。
これ、なんで重要かっていうと、「二重倒立振子がランダムに振る舞う」なんて言ったら、理論上サイコロを振らずにシミュレーションすらできないってことになっちゃうから。でも、誰かが「すごく良い」精度で初期位置と速度を教えてくれて、5秒後の状態を予測しろって言われても、かなり広がった確率密度関数を扱うことになるのは、誰もが認めるところだよね。
カオスが決定論的な数学関数の創発的特性だっていうのは信じるよ。でも、口語的な定義（今辞書を見てるんだけど）は「完全な無秩序と混乱」とか「偶然が最高潮な状態」とか「複雑な自然系の挙動における固有の予測不可能性」って書いてある。あのパスは、その見た目の定義に合ってるよね。この記事は素人向けに書かれてるんだから、数学者じゃない人が期待するような話し方／書き方をするのは理にかなってると思うな。
あのパスが「実際にはカオスではない」って言うのは、一般の人の理解とはズレてるよね。その意見の食い違いも説明されてないし（技術的な定義を説明するか、しないか）。
俺は、「非決定論的」とか「ランダム」って言葉に置き換えた方が、一般の人にもっとわかりやすいし、上級者にとってもより正確になると思うんだけどな。
俺は「stochastic」って単語に脳内変換して読み進めたよ。それが記事のメインポイントじゃなかったからね。でも、君の言う通りだ。カオスシステムって、同じ初期条件を与えれば毎回同じ結果が出るんだけど、初期条件をほんの少しだけ変えると、次にどこに行くかなんて保証できなくなっちゃうんだ（以前のシミュレーションから状態を選んだ場合は別だけど、それはズルだよね；）。
ありがとう。これは主題へのかなり基本的な入門書だけど、数学を学ぶ子供たちには良いね。円の式（x = r cos (t) と y = r sin (t)）みたいな数学の概念にちょっと言及すると、もっと良くなるかも。極座標や線形代数の基礎（ベクトル、変換、3D空間での変換）なんかも、さらに深掘りできるトピックだね。もし筆者がそういうトピックに詳しくないなら、3blue1brownのYouTube動画をおすすめするよ。プログラマー向けというよりは、こっちの方がいいかもね（コードや使ってるライブラリとか、実際に3Dオブジェクトを操作する方法（頂点、伸縮、モーフィングなど）については何も含まれてないから）。
ありがとう。俺にとっての役立つフィードバックは、ナビゲーションが期待を裏切ったことだね。モバイルで見てたんだけどさ。何をすればいいかわからなくて、スクロールしようとしたら、画面をタッチしただけで次のパネルに飛んじゃったから、「ああ、なるほどね」って感じだった。たまたま右側をタッチしたから進んだんだと思って、後でうっかり余計にクリックしちゃった時、戻るために左側をクリックしようとしたんだ（右から左へ読む人とか、上から下へ読む人だと、直感が違うかもしれないけどね）。残念ながら、それもまた次の画面に飛んじゃって、2画面連続で飛ばしちゃったよ。致命的じゃなかったけど、がっかりしたし、ちょっと悲しかったな。もうちょっと微妙なガイドがあれば、曖昧さがなくなって、もっと集中して記事を楽しめたと思うよ。
最初のスライドに説明はあるけど、SNSの「カードスタック」みたいにスワイプ操作も追加すると良いかもね（個人的にはタップ派だけど）！
もっとコメントを表示（1）
球面らせんのZ軸の動きって、いろんな関数が選べるよね。今の式は見た目はいいけど、螺旋の間隔とか、分割される面積の均一性ってどうなの？この関数は、何か根拠があって選ばれたの、それとも単に見た目が気に入ったから？
この関数は、プログラミングしやすくて見た目も良かったから使われたんじゃないかな。本当は船みたいに3D空間で等速にするのが「正しい」んだろうけど、それはかなり大変だよ。
const degrees = Math.PI / 180;
const bearing = 5 * degrees; // or it might be 85 degrees? Not sure off the top of my head
const k = Math.tan(bearing);
const v = 0.001 // some velocity, adjust as needed
const phi = (t) =＞ vt/Math.sqrt(1 + kk) // the sqrt is not strictly needed
const theta = (t) =＞ k*Math.ln(Math.tan(phi(t)/2)) // this is the annoying one haha
with outputs,
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}の式を積分すると出てくるものなんだ。
zを線形にしても球体にはならないんだよね。球体にするには、他の軸と円になるように調整しないと。この図ではsin(0.02 * πt) と cos(0.02 * πt) の部分がそれをやってるよ。Desmosでインタラクティブなのがあって、自分でz関数を変えて試せるから見てみて！
https://www.desmos.com/3d/t66etxi1y8
パスの速度を一定にする方法もいいかもね。導関数を使って定数に設定したり、t’ = f(t)で再パラメータ化したりしてzを求めればできそう。z = c * tを選ぶのは、パスのパラメータ化と、球面上に描かれるパスの両方に影響するんだよね。
これ最高だね！学生に座標系や幾何学を見せるのにぴったりの教材だよ。探求して、こんな素晴らしいものを見せてくれてありがとう！パラメトリック方程式での幾何学的図形については、Joseph Chomaの「Morphing」って本が超おすすめだよ。
https://www.quercusbooks.co.uk/titles/joseph-choma/morphing/…
3D Desmosで方程式をいじれるよ！
https://www.desmos.com/3d/t66etxi1y8
面白いことに、このらせんのパラメトリック方程式って、球面座標だと線形なんだよね。
https://en.wikipedia.org/wiki/List_of_common_coordinate_tran…
いいね、ありがとう！
アニメーションがすごくスムーズだね！最近、複雑な形を生成しようとしてて「球面上にN個の点を分散させる」って難しい問題にぶつかったんだ。その時、Fibonacci-sphereっていう球体の周りにらせんを作るシンプルなアルゴリズムを見つけたんだよ。点群の分散に使えるらしい。この論文[1]で詳しく説明されてるよ！
[1] - https://arxiv.org/pdf/0912.4540
なぜか分からないけど、LinuxとBraveでめちゃくちゃパフォーマンスが悪いんだよね。アクセスするとすぐにCPUが跳ね上がるんだ。32 GiB RAM、Intel i9 w/ 24 coresっていうハイスペックなマシンを使ってるのに。
UbuntuでFirefoxとChromeでも同じような問題に遭遇したよ。Firefoxのパフォーマンスレポートをサッと見たら、ほとんどの時間がフレーム処理みたいな機能に費やされてるみたいだね。時間計算の兆候もある。たぶん、フィンガープリンティングを防ぐための時間解像度の制限で、次のフレーム計算が意図したタイムアウトを待たずにすぐに始まっちゃってるんじゃないかなって推測してるよ。
正直、Firefoxでは問題なく動くみたい。僕にとってはBraveの問題だね。
「なぜか分からない」って言うけど、原因を探そうよ！LinuxとBraveについては調べるつもりだよ。でも「32 GiB RAM、Intel i9 w/ 24 cores」って部分は関係ないと思うな。
君は僕の32 GiBに嫉妬してるだけだろ。
Mac miniの声で泣いてるよ。
なんでそれが関係ないの？
だって、ちゃんと動くブラウザとソフトウェアの組み合わせなら、今世紀に作られたどのPCでも動くからだよ。僕のひどいAtom Chromebookでも問題なく動いてるしね。
めっちゃクールで綺麗だけど、ちょっと物足りないな。3Dプロットの基本から最後のすごいパターンへの飛躍が大きすぎると思う。ある程度知ってる人は理解できるけど、背景知識がない人には難しすぎるんじゃないかな。
最後の複雑なプロットは、意図的にああいう形にしたんじゃなくて、前のパラメータ方程式でサインやコサインのパラメータを変えたらああいうのができちゃうよっていう例だと思うな。球体にぴったり合わせようとしなかった結果って感じ。
すごくいい感じ！でも、キューブのドレイン/フィル効果をどうやって作ったのか気になるな。
これいいね、友達にもシェアするよ。でもTwitterアカウントはもうないし、再登録もしないな。ウェブサイトにRSSかJSONフィードを追加するとか、Mastodonアカウントを作るとか考えてくれない？MastodonはデフォルトでRSSフィードがあるよ。
「RSSとかJSONフィードを俺のために作ってくれ」なんて要求は、まるでRichard Stallmanが後で印刷するために自分にウェブページをメールしてるみたいだ。著者がTwitterだろうと何だろうと好きな媒体を使わせろよ。
それはかなり悪意ある解釈だね。低労力で汎用的、無制限で簡単に自動化できる代替手段を追加するっていう丁寧な提案が、著者が今使ってるものに何か影響するわけないだろ。著者はフォローしてほしいって言ってるんだから、人々がどうしたいか知らせるのは良いことだよ。
でも「俺のため」じゃないし、OPからの定期的な更新が欲しいみんなのためだよ。Twitterは、たとえアカウントがあっても、情報を受け取るには最悪の方法だよ。
めっちゃクールだけど、ちょっと目が混乱するな。ポイントがパスに沿って動く様子を、本来なら向きが変わるべきなのに固定されたキューブで可視化してるからだよ。キューブの中心が動いてるけど、キューブ自体の向きは固定されてるんだね。
君のミッションだよ ;-)
https://en.wikipedia.org/wiki/Frenet–Serret_formulas
みんながシンプルな数学でオタクになるのが大好き！特に三角関数のアニメーションパワーとか、現代のインタラクティブなものの基礎にある数学を発見するのとか最高だね。何ができるかを知るのと、そのツールのパワーを理解するのとは違うんだ。
俺も前に「blob」の作成について似たような記事を書いたよ:
https://www.hailpixel.com/articles/generative-art-simple-mat…
こんにちは、うわー、素敵な記事だね！シンプルでわかりやすいよ。シェアしてくれてありがとう！間違いなくインスピレーションになったし、次のプロジェクトで使うかも :D
内容はいいんだけど、変なディザー効果がマジで頭痛の種だよ！作ったのはすごいし（アイデアが形になるのはいつでも最高だよね！）、これからもクールなものを作り続けてくれることを期待してる。でも、お願いだから使ってるエフェクトはオフにしてほしいな。
ディザリングは素敵だし、OPは絶対触るべきじゃないね。でも、切り替えオプションは用意してくれるかもね、って感じ。
個人的には、f(シータ, r) = r (cos(シータ), sin(シータ)) って考えるのがシンプルだよ。シータを方位、rを大円に沿った距離と解釈するんだ。すると g(t) = polar_to_R3(f(t k, t l)) になる。kとlの相対サイズを変えるとヘリックスの巻き具合が変わるんだよね。
これ、すごく見やすいね。どうやって作ったのか教えてくれない？Rotation Matricesで似たようなものを作ってみたいんだ。
もっとコメントを表示（2）
3blue1brownがアニメーションライブラリを持ってるかもね、彼が動画で使ってるのと同じやつ。それが役立つかもしれないよ。
彼がManimっていう可視化ライブラリを作ったんだけど、それがすごくいいよ。
アニメーションの作り方について、もっと詳しく知りたかったな。すごい良いね。カメラの視点が変わるところが特に好きだよ。
AnimeJSと、たぶんThree.jsを使ってるんじゃないかな。
”これらの関数で球面らせんが作られるんだ…それだけ！”って説明は、なんか逆の推論に感じるな。関数→球面らせんじゃなくて、球面らせん→関数が知りたいんだよ。1. 他の形を作りたい時、どうすればいいか分からないし。2. 球面らせんについて何も学んでないって感じ。
これ、クールそうなんだけど、背景アニメーションとリソースを食いすぎるせいで、読むのに苦労してるよ。テキスト版はどこかにないかな？
最初開いたら、ただの意味不明なページだったんだ。なんでHNで1位？って思ったよ。昔の”Netscape Navigatorで見るのがベスト”ってやつみたいに、これは”Google Chromeで見るのがベスト”ってことだね。Firefoxじゃ動かないんだから、ちゃんと確認するか教えてほしいな。
Firefox（dev edition, v142.0b9）を使ってるけど、ちゃんと動くよ。
dev edition v143.0b2を使ってるけど、みんなが見てるのとは違うみたい。軸のタグが簡単な計算で動いてるだけに見えるんだ。明らかに何か動いてないし、見逃してるみたい。Firefoxの回帰かな？
Firefox 142 on Linuxで問題なく動いたよ。コンソールに何かエラーはあった？
モバイルSafariでちゃんと動くよ。
Arch Linux上のFirefox 142.0で完璧に動いたよ。
Librewolf 142だと完全に動かないね（テキストと、真っ黒な画面でタグがいくつか動くだけ）。でもFirefox Nightlyだと動くよ。
Firefox/Win11でちゃんと動いたよ。
デスクトップSafariでちゃんと動いたよ。
Firefoxで動くよ。
Firefox macOSで動いたよ。
最近p5jsに興味があるんだ。これ系のものを探索するのに楽しくて簡単な方法だよ。もし自分で試してみたいって思ってるなら、ここを試してみて！ https://p5js.org/tutorials/setting-up-your-environment/
これ、めちゃくちゃすごかった！ニューラルネットワークの記事もチェックしたよ。そっちの次のパートも楽しみにしてるね。これからも良い仕事続けて！
いいね！俺も記事を読んでて興味が湧いたから、テキストに書かれてたことを試せる簡単なパラメトリックビジュアライザーを作ってみたよ（Claudeありがとう！）：https://codepen.io/CaptainKeyframe/pen/zxvWVNo
もうAcko.netがコメントに挙がってないのが意外だなー。彼はブログ記事で似たようなツールを使って複素数や最終的にはフラクタルを解説してるよ。たぶん君の好みだと思う！https://acko.net/blog/how-to-fold-a-julia-fractal/
これが好きなら、たぶんShadertoyとThe Book of Shadersも楽しめると思うよ！ https://www.shadertoy.com/ と https://thebookofshaders.com/
これを見ると、MRIで信号を得るためにスピンがどう操作されるかを思い出すよ。スピンの先端を追うと、似たような経路を描くんだ。 https://m.youtube.com/watch?v=vapJRr6gAds&t=2786s
https://www.johndcook.com/blog/2023/08/12/fibonacci-lattice/もし、均等な間隔のサンプルで球を覆う螺旋が欲しいなら、このアプローチを検討してみて。
それから、Matt ParkerのStand-up Maths動画「ゴルフボール：ホールインワンは何回？」も見てみてね。 https://www.youtube.com/watch?v=dNTnk1VFoJY
