拡張機能研究所

おすすめのブラウザ拡張機能をマンガ形式で紹介!

2025/09/29 12:00

プログラムでリアルなブラックホールを作るには?アクリションディスクのコツも紹介!

「ただの円盤じゃ物足りない…」そんな人のために、プログラムでリアルなブラックホールを作るポイントをやさしく解説。 光のグラデーションや星の吸収表現も一緒に考えてみよう!
プログラムでリアルなブラックホールを作るには?アクリションディスクのコツも紹介!

プログラミングでブラックホールを作ろうとしたとき、ただの丸い円盤じゃなんか物足りないな〜って思ったこと、ない?
わたしも「これでいいか!」と思ったんだけど、やっぱりリアルな感じにしたくて調べてみたよ💭

そもそも「アクリションディスク」って何?

ブラックホールの周りにある明るい円盤のことなんだけど、これがただの丸じゃなくて、光がねじれたり、熱く燃えてたりする感じがリアルさのポイントなんだって🥺💡
だから、単に円を描くだけじゃなくて、グラデーションや回転の動きを加えるといい感じになるよ

プログラムでリアルな円盤を作るコツ

  1. 色のグラデーションを工夫する
    円の中心に近づくほど明るくしたり、色を徐々に変えたりすると、熱く燃えてる感じが出るよ🌈
    たとえば、黄色→オレンジ→赤→黒、みたいにね🧑‍🎨

  2. 円盤の回転を表現する
    黒い穴に吸い込まれる感じを出すなら、円盤を少しずつ回したり、星が吸い込まれる動きをアニメーションで付けるのが効果的だよ🎡✨

  3. 星の色に応じて光の色を変える
    吸収される星ごとに、円盤の光のグラデーションが変わるのはめちゃくちゃいいアイデア!👌
    これで「ブラックホールが周囲の星のエネルギーを吸い取ってる」って感じがぐっと増すよね💗

  4. 光の歪み(重力レンズ効果)を意識する
    実はブラックホールの近くでは光が強く曲がるから、円盤もゆがんだりぼやけたりして見えるんだって👀
    プログラムで難しいけど、円盤の内側を少し伸ばしたりぼかしたりすると、リアル感が出るかも!

わたしが考えた簡単な作り方

  • 円盤を複数の細いリングに分けて、それぞれに色や明るさを変える
  • 吸い込む星の色を取得して、円盤の色味を少し変化させる
  • 星が吸い込まれるときに、円盤の輝きが強くなったり弱くなったりするアニメーションをつける

これだけでも、ずいぶんリアルなブラックホールの雰囲気が作れると思うよ😆✨

まとめ:ちょっとした工夫でグッとリアルに!

プログラムでブラックホールを作るとき、「ただの丸」から一歩踏み出すことが大事🌸
光のグラデーションや星の色の影響、吸い込みの動きを組み合わせるだけで、見た目のリアル度がグンとアップするから、ぜひ試してみてね🫶💡

ブラックホールの神秘って、まさにプログラミングの面白さを引き出す素材かも?って思ったよ💭✨
挑戦してみると、意外な発見があるかもしれないね🥰

ひとことアニメーション表示ON
リアルに作れてうれしいねっ✨

コメント

アバター

ハンナ

中心にあるから無理だよ、中心揃えできるプログラマーなんて見たことない。

アバター

エイダン

three.jsの神、本人の作品だよ [https://github.com/brunosimon/webgl-black-hole]

アバター

ノーラン

ゼロで割ればいいんだよ。

アバター

ロバート

「円盤作った」って、宿題サボりたかった頃を思い出すなあ。

アバター

キンバリー

three.jsとカスタムシェーダーで作れるよ。

アバター

リリー

精度次第だね。 『インターステラー』は何百ものコアとGPUで数ヶ月かけてたよ。

アバター

クリス

まず宇宙の物理法則をプログラムして、しばらく動かせばブラックホールができる、簡単だよ。

アバター

ワット

npmでインストールするだけ。

アバター

レオ

node使ってるなら簡単、`node_modules/`にブラックホールがもうあるよ。

アバター

ベン

ほんの数個のdivとCSSだけで十分だよ。

アバター

ジャック

WebGLでできるけど、どのくらい難しいかはわからないな [https://blackhole.starfree.app]


PICKUP
関連記事