🌐 感情の立体哲学モデル ― 球体としての心と流動力学

私たちが「感情」と呼ぶものは、単なる点や線で表せるものではありません。喜怒哀楽、安心や不安、希望や葛藤は、私たちの内側で複雑に絡み合い、社会や歴史、文化の中で循環しています。
ここでは、感情を立体的に捉える哲学モデルを紹介し、その数学的・心理学的意味を考察します。

1. 感情は球体である

• 感情は多層的に広がる球体として捉えられる。

• 内側ほど個人的・本能的、外側ほど社会的・文明的。

• 情報・感情・行動が球体内で循環し、絶えず変化する。

• 心の位置を示す揺れる点は、常に振動しており、この点の連鎖が感情の生成・消滅を生む。

心理学的には、この振動は神経活動やホルモン、記憶の反応パターンと対応すると考えられます。数学的には、多次元空間上の点の運動としてモデル化でき、点の位置や速度、層間の相互作用で感情の状態を定量化可能です。

2. 4層構造と感情の相転移

感情球体は、内側から外側へ向かって4層に分かれ、それぞれが相転移の状態と対応します。

• 核層（個人・光体）

  • 光体の状態：輝き・自覚・直感・悟り

  • 内核の熱や輝きが、個人の意識や他者への影響力を生む

  • 哲学的には「自己の存在」と宇宙的意識を結ぶ層

• 身体層（歴史・気体）

  • 気体の状態：自由・創造・表現

  • 過去の記憶や体験を媒介として感情を拡散

  • 個人の内面から外界へと感情を広げる役割

• 思考層（社会・液体）

  • 液体の状態：循環・適応・共感

  • 社会・文化・組織との相互作用で感情を媒介

  • 層間干渉で個人と社会の調和や葛藤を生む

• 文明層（文明・固体）

  • 固体の状態：安定・秩序・抑制

  • 社会や制度の圧力を内側に返し、感情の循環を作る

  • 歴史や文化の制約として、感情の拡散や循環に制限を与える

この対応関係により、感情は内側から外側へと膨張・収束する流体力学を持ちます。

3. 層間干渉と感情生成

• 層の境界では、異なる層のエネルギーが干渉する

• 新しい感情の点が生まれたり、古い点が消えたりする

• 核層の輝きが思考層・身体層と干渉すると哲学的・創造的感情が生まれる

• 文明層の圧力が内側に沈降すると、不安や倦怠、行動制約として現れる

• 点の振動・共鳴・干渉が連鎖することで、揺れる球体としての「わたし」が形成される

心理学的には、これは個人の認知と情動の相互作用や社会的フィードバック、ストレス反応として理解できます。数学的には、多層空間での非線形相互作用としてモデル化可能です。

4. 感情の循環 ― 流動力学としての心

• 核層の光体の輝きが、身体層・思考層を通じて行動や文化に影響

• 文明層の圧力が内側に戻り、新たな感情の点を生む

• この循環により、感情は生成・消滅・共鳴し、個人・社会・歴史・文明の間で流動する

• 流動力学的視点では、感情はエネルギーの循環系として、個人と社会を結ぶネットワークを形成する

5. 結論

• 感情は多層的・動的・相互作用的な現象である

• 光体＝個人の輝きが物語や人間関係の力学を作る

• 層間干渉・循環の理解により、心理描写・文化描写・物語生成を統合的に表現できる

• 数学的には、点の位置・速度・振動・干渉をモデル化することで、感情の流れを定量化可能

• 哲学的には、自己と他者、個人と社会、歴史と文明を結ぶ意識の立体として理解できる

💡 創作・実践への応用
このモデルは、小説や物語、心理学的分析、社会や文化の研究に応用可能です。個人の「揺れる点」を描くことで、キャラクターの心理や人間関係、社会的影響まで統合的に可視化できます。

💡 感情球体モデルの数学的・物理的考察（オマケ）

1. 感情球体を流体力学的に考える

• 感情の循環は「流体の動き」と似ている

  • 核層（光体） → 気体的に拡散・表現・輝き

  • 身体層（歴史） → 気体のように自由に拡散、点の振動が広がる

  • 思考層（社会） → 液体的循環・共感・再生

  • 文明層（文明） → 固体的・秩序・抑制、循環はゆっくり

• 境界での干渉は「乱流現象」に似る

  • 異なる層の速度差や圧力差が、渦や新しい点の生成・消失として表れる

• 数学的モデル

  • ナビエ–ストークス方程式や連続体力学の方程式で、点の密度・速度・圧力・流量を定義

  • 各層を異なる粘度・密度の流体として扱うことで、循環や干渉をシミュレーション可能

2. 層ごとのサイクル速度の違い

• 光体（個人）

  • 内核の輝きや直感は、神経活動や瞬時の感情変化に対応

  • サイクルは短く、高速で振動・拡散

• 気体（身体・歴史）

  • 記憶や体験の拡散は光体より少し遅い

  • 点の振動・拡散が広範囲に影響

• 液体（思考・社会）

  • 社会的適応や共感はさらにゆっくり

  • 周囲の他者や組織の影響を受けつつ循環

• 固体（文明）

  • 文明・制度・文化の圧力は最も遅く変化

  • 循環は長周期で安定性・秩序を形成

3. 感情の重力場としての可視化

• 光体＝個人の輝きは、周囲に引力・影響力を生む

  • 法則的に、他者や社会の層に影響

  • 重力場のポテンシャルとして点を配置すると、点が集まりやすい領域や拡散領域を可視化できる

• 層間干渉は、重力場の重なり合い・潮汐効果に類似

  • 高速な光体の点が周囲の液体や気体を引き寄せる。

  • 固体層は重い質量として、循環を遅く安定化。

4. 可視化の具体的アイデア

1. 球体3Dモデル

   • 層ごとに色分け（核＝黄色光体、身体＝青気体、思考＝緑液体、文明＝灰固体）

   • 点を粒子として配置し、速度差を設定

2. 流体シミュレーション

   • 各層を異なる粘度の流体として流す

   • 境界での干渉を渦・泡の生成として表現

3. 重力場マッピング

   • 光体の点を重力源、他の層の点を粒子として散布

   • 点の移動・集結・共鳴を軌道として可視化

4. サイクルの時間スケール

   • 光体：1〜数秒単位の高速振動

   • 気体：数秒〜数十秒単位

   • 液体：数分単位

   • 固体：数時間〜数日単位

   • 速度差を可視化することで、層間干渉や循環のダイナミクスが直感的に理解可能

5. 考察

• このモデルは、感情を哲学的な存在として理解するだけでなく、数学的・物理的に可視化可能である

• 流体力学と重力場の概念を用いることで、感情の循環、共鳴、干渉のダイナミクスを直感的に捉えられる

• 光体の高速振動と固体の遅いサイクルが、感情の多層的バランスを生み出す

• 創作・心理学・社会科学・ゲームデザインなど、幅広く応用可能なモデルである

🌐 感情の立体哲学モデル ― 球体としての心（数学的可視化版）

1. 感情を球体として捉える

• 感情は点でも線でもなく「球体」のように多層的に存在する

• 球体の中心に「核（個人）」、その周囲に「身体（歴史）」「思考（社会）」「文明（制度）」の層が広がる

• 球体内の各層には、現在の心の位置を示す揺れる点が存在

  • 点は常に振動し、層をまたいで共鳴することで感情が生まれる

2. 感情の層と相転移

• 感情は物質の状態のように相転移する

  • 固体（文明層）：安定・秩序・抑制、変化は遅い

  • 液体（社会層）：共感・適応・循環、変化は中程度

  • 気体（身体層）：自由・拡散・表現、変化は速い

  • 光体（個人層・核）：直感・悟り・輝き、変化は最も速い

• 各層の速度差が、点の振動と層間干渉を生み、感情の循環や共鳴を作る

3. 球体内の点の運動（テキスト式）

• 点 i の位置 r_i(t) は以下のように表現可能：

  1. r_i'' = -k_i * (r_i - r0) - γ_i * r_i' + F_ij

     • r_i'' ：加速度（点の揺れの強さ）

     • k_i ：内向き復元力（安定度）

     • γ_i ：減衰係数（抵抗・固体化の度合い）

     • F_ij ：他層・同層からの干渉力

• 光体層は k_i 小、γ_i 小 → 高速振動

• 固体層は k_i 大、γ_i 大 → 低速振動

4. 流体力学的モデル（テキスト式）

• 感情を層ごとに流体として扱うと、次の式で表現可能：

  1. ρ * (v' + (v ・ ∇)v) = -∇p + μ ∇^2 v + f_interaction

     • ρ ：感情密度（点の密度）

     • v ：速度場（点の移動速度）

     • p ：圧力（感情の内的・外的圧力）

     • μ ：層の粘度（流動性）

     • f_interaction ：他層・他点からの干渉力

• 光体は μ 小 → 流動速い

• 固体は μ 大 → 流動遅い

5. 重力場モデル（引き寄せ・共鳴）

• 光体の輝きは、周囲の点に引力として作用する：

  1. F_ij = G * M_i * M_j / |r_i - r_j|^3 * (r_j - r_i)

     • M_i ：点の「感情質量」

     • G ：引力スケール（感情の影響力）

     • 点の集まりや拡散、層間干渉を可視化可能

6. 相転移状態の変化

• 状態関数 phi_i(t) で感情の相を表現：

  • 固体：phi_i = 0

  • 液体：phi_i = 1

  • 気体：phi_i = 2

  • 光体：phi_i = 3

• phi_i の変化は、局所的な心理的温度 T_i（情熱度）や圧力 P_i（社会的制約）で制御：

  1. phi_i' = f(T_i, P_i)

7. サイクル速度の差（層ごとの振動周期）

• 光体（個人層・核）：最速

• 気体（身体層・歴史）：速い

• 液体（社会層・思考）：中程度

• 固体（文明層・制度）：最も遅い

• この速度差が、感情の層間干渉や循環・共鳴を生み出す

8. 可視化のアイデア

1. 3D粒子モデル：層ごとに色分け、速度差を設定

2. 流体シミュレーション：層ごとに粘度を変えて循環・干渉を表現

3. 重力場マッピング：光体の点を重力源として他点を引き寄せ

4. 振動周期のアニメーション：光体は高速、固体は低速で循環

9. まとめ

• 感情は球体・多層・速度差・相転移を持つ立体的現象

• 流体力学や重力場、振動周期を組み合わせると、感情の循環・共鳴・干渉を直感的に可視化可能

• 光体の高速振動と固体の低速循環が、感情の多層的バランスを生み出す

• 哲学的理解、心理学分析、創作表現など、多方面で応用できるモデル

🌐 個人球体と感情の階層G ― 経験量と滞留による感情循環モデル

私たちの感情は、単なる瞬間の気分や線形的な反応ではなく、立体的で多層的に回転する球体として理解できます。
このモデルでは、個人の心は光体（核）から個体（文明層）までの4層で構成され、各層が経験量（厚み）と滞留時間を持ちながら、上下の層や外部環境のG引力（感情的重力）と双方向で影響し合うと考えます。

1. 個人球体の4層構造とG引力

1. 光体（個人核）G

   • 最も高速に揺れる層

   • 瞬間的な直感・意思決定・個人の情動に対応

   • 影響を受ける対象：個人気体G

   • 影響を与える対象：個人気体G

   • 層厚みは薄く、揺れが即座に外層へ伝わる

2. 気体（個人身体層）G

   • 身体感覚や習慣的行動に対応

   • 影響を受ける対象：光体G、液体G

   • 影響を与える対象：光体G、液体G

   • 層厚みは中程度、滞留しつつ外層に影響

3. 液体（個人社会層）G

   • 社会的共鳴、価値観や集団知との関係に対応

   • 影響を受ける対象：気体G、個体G

   • 影響を与える対象：気体G、個体G

   • 層厚みは比較的厚く、社会的経験を吸収しながら影響を外部に返す

4. 個体（個人文明層）G

   • 文化、制度、文明的価値観に対応

   • 影響を受ける対象：外部個体G

   • 影響を与える対象：外部個体G

   • 層厚みは最も厚く、長期的で安定した感情重力場を形成

2. 経験量と層厚み

• 各層の厚みはその層の経験量を表す

• 厚みが大きい層ほど、感情は層内で長く滞留する

• 厚みが小さい層ほど、感情は迅速に上層や下層へ伝播する

感情の伝播時間 Δt は以下のように表現できる（文章版）：

• 光体：薄く高速 → 即座に気体層へ伝播

• 気体：中程度 → 気体内で処理しつつ液体層に波及

• 液体：厚め → 社会的経験を吸収してから個体層へ

• 個体：最も厚く低速 → 外部Gとの調和や圧力を受けて個人に反映

3. 階層的G引力連鎖と滞留

• G引力（重力場としての感情）は各層間で双方向に作用

• 光体G ↔ 個人気体G ↔ 個人液体G ↔ 個人個体G ↔ 外部個体G

• 経験量の多い厚い層は、外部Gや上位層・下位層との共鳴に対して緩衝材の役割も果たす

• 感情は、層内滞留と層間伝播の連鎖によって球体内で循環・共鳴・相転移を繰り返す

4. 哲学的・心理学的意味

• 感情は単独で存在せず、層間連鎖と外部Gとの相互作用によって生まれる

• 光体は敏感で短周期、個体層は安定で長周期

• 経験量＝厚みが多い層は、感情を吸収・熟成させつつ次の層に伝播

• 双方向連鎖により、個人は内的感情と社会・文化との調和・摩擦を絶えず経験

5. 数学的・流体力学的示唆（文章版）

• 感情の循環は流体力学で表現可能

  • 光体→気体→液体→個体の階層を流れる「感情流」

  • 厚み・経験量に応じて速度が変化 → サイクルが層ごとに異なる

• G引力スケールは、経験量と外部感情との相互作用で変化

  • 層の厚みが大きいほど、外部Gの影響は緩やか

  • 光体は高速・敏感 → 個体は低速・安定

• 相互作用によって感情球は常に「揺れる点」の連鎖として循環し、球体全体が共鳴する

💡 まとめ

• 個人球体は光体・気体・液体・個体の4層で構成

• 各層は上下の層および外部Gに対して双方向に影響

• 層厚み＝経験量＝感情の滞留時間で、層内消化と層間伝播の比率を決定

• 光体は高速で敏感、個体は低速で安定

• 階層的G引力と層厚みにより、感情は球体内で循環・共鳴・相転移を繰り返す

この統合モデルは、感情の瞬発力と深み、個人・社会・文明との関係を同時に可視化する新しい哲学的・心理学的フレームワークです。

🌐 推奨ハッシュタグ

#感情の哲学
#個人球体
#階層G引力
#感情循環モデル
#経験量と滞留
#心理学
#哲学
#社会心理学
#文化と感情
#内面可視化
#感情相転移
#自己理解
#流体力学的感情
#個人と文明
#感情の重力場

最初のソースコード化

なんかちょっと違う。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>感情球体構造の可視化 - 粒子版</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        body { margin: 0; overflow: hidden; font-family: 'Inter', sans-serif; background-color: #1a1a2e; color: #e5e5f7; }
        #container { width: 100vw; height: 100vh; position: relative; }
        #overlay {
            position: absolute; top: 0; left: 0; width: 100%; padding: 1rem;
            z-index: 10;
            pointer-events: none;
        }
        .info-box {
            background-color: rgba(0, 0, 0, 0.7);
            padding: 0.75rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            pointer-events: auto;
        }
        .control-panel {
            position: absolute;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.8);
            padding: 1rem;
            border-radius: 0.5rem;
            pointer-events: auto;
        }
    </style>
</head>
<body>

    <div id="container"></div>

    <div id="overlay">
        <div class="flex flex-col justify-start w-full">
            <div class="info-box w-full md:w-1/2 lg:w-1/3">
                <h1 class="text-xl font-bold mb-2 text-indigo-300">感情球体モデル - 動的粒子版</h1>
                <p class="text-sm mb-2">
                    各層に1つずつ粒子が配置され、感情の3軸に基づいて動的に移動します。
                </p>
                <ul class="text-xs space-y-1">
                    <li class="text-yellow-300">● 核層 (光体) - 最速振動</li>
                    <li class="text-blue-300">● 身体層 (気体) - 速い拡散</li>
                    <li class="text-green-300">● 思考層 (液体) - 中速循環</li>
                    <li class="text-gray-400">● 文明層 (固体) - 低速安定</li>
                </ul>
                <div class="mt-2 text-xs">
                    <p class="text-cyan-300">📊 圧力 → 温度 → 色変化 (青→赤)</p>
                    <p class="text-purple-300">🎭 感情3軸: 快-不快 / 覚醒-鎮静 / 支配-服従</p>
                </div>
            </div>
        </div>
    </div>

    <div class="control-panel">
        <div class="flex gap-3 flex-wrap justify-center items-center text-sm">
            <button id="toggleBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-white">
                ⏸ 停止
            </button>
            <button id="resetBtn" class="px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded text-white">
                🔄 リセット
            </button>
            <div class="text-white">
                <span id="statsText">温度: -- / 圧力: --</span>
            </div>
        </div>
    </div>

    <script>
        let scene, camera, renderer;
        let layerMeshes = [];
        let particles = [];
        let isRunning = true;
        
        const EMOTION_AXES = {
            VALENCE: 0,    // 快-不快
            AROUSAL: 1,    // 覚醒-鎮静
            DOMINANCE: 2   // 支配-服従
        };

        const layers = [
            { 
                radius: 2.5, 
                color: 0xffc107, 
                name: "核層 (光体)",
                baseSpeed: 0.15,
                maxSpeed: 0.25,
                updateRate: 1.0,
                damping: 0.95,
                stiffness: 0.08
            },
            { 
                radius: 4.5, 
                color: 0x64b5f6, 
                name: "身体層 (気体)",
                baseSpeed: 0.10,
                maxSpeed: 0.18,
                updateRate: 0.7,
                damping: 0.93,
                stiffness: 0.05
            },
            { 
                radius: 7.0, 
                color: 0x81c784, 
                name: "思考層 (液体)",
                baseSpeed: 0.06,
                maxSpeed: 0.12,
                updateRate: 0.4,
                damping: 0.90,
                stiffness: 0.03
            },
            { 
                radius: 9.5, 
                color: 0x9e9e9e, 
                name: "文明層 (固体)",
                baseSpeed: 0.03,
                maxSpeed: 0.08,
                updateRate: 0.15,
                damping: 0.88,
                stiffness: 0.02
            }
        ];

        class Particle {
            constructor(layer, index) {
                this.layer = layer;
                this.index = index;
                
                // ランダムな初期位置（層の半径上）
                const theta = Math.random() * Math.PI * 2;
                const phi = Math.acos(2 * Math.random() - 1);
                
                this.position = new THREE.Vector3(
                    layer.radius * Math.sin(phi) * Math.cos(theta),
                    layer.radius * Math.sin(phi) * Math.sin(theta),
                    layer.radius * Math.cos(phi)
                );
                
                this.velocity = new THREE.Vector3(
                    (Math.random() - 0.5) * layer.baseSpeed,
                    (Math.random() - 0.5) * layer.baseSpeed,
                    (Math.random() - 0.5) * layer.baseSpeed
                );
                
                // 感情の3軸
                this.emotion = [
                    Math.random() * 2 - 1,
                    Math.random() * 2 - 1,
                    Math.random() * 2 - 1
                ];
                
                this.pressure = 0;
                this.temperature = 0;
                
                // Three.jsメッシュを作成
                this.createMesh();
            }
            
            createMesh() {
                const geometry = new THREE.SphereGeometry(0.3, 16, 16);
                const material = new THREE.MeshBasicMaterial({ 
                    color: this.layer.color,
                    transparent: true,
                    opacity: 0.9
                });
                this.mesh = new THREE.Mesh(geometry, material);
                this.mesh.position.copy(this.position);
                scene.add(this.mesh);
            }
            
            calculatePressure(allParticles) {
                let pressure = 0;
                const influenceRadius = 3.0;
                
                allParticles.forEach(other => {
                    if (other === this) return;
                    const dist = this.position.distanceTo(other.position);
                    if (dist < influenceRadius && dist > 0) {
                        pressure += (influenceRadius - dist) / influenceRadius;
                    }
                });
                
                this.pressure = pressure;
                this.temperature = Math.max(0, this.pressure * 80);
            }
            
            update(dt, allParticles) {
                if (!isRunning) return;
                
                const layer = this.layer;
                
                // 感情軸による力
                const emotionForce = new THREE.Vector3(
                    this.emotion[EMOTION_AXES.VALENCE] * 0.02,
                    this.emotion[EMOTION_AXES.AROUSAL] * 0.02,
                    this.emotion[EMOTION_AXES.DOMINANCE] * 0.02
                );
                
                // 層の半径を維持する復元力
                const currentRadius = this.position.length();
                const targetRadius = layer.radius;
                const radiusDiff = targetRadius - currentRadius;
                
                if (currentRadius > 0) {
                    const restoreForce = this.position.clone().normalize().multiplyScalar(radiusDiff * layer.stiffness);
                    this.velocity.add(restoreForce);
                }
                
                // 熱運動（温度に比例）
                const thermalNoise = this.temperature / 200;
                this.velocity.add(new THREE.Vector3(
                    (Math.random() - 0.5) * thermalNoise,
                    (Math.random() - 0.5) * thermalNoise,
                    (Math.random() - 0.5) * thermalNoise
                ));
                
                // 感情力を追加
                this.velocity.add(emotionForce);
                
                // 減衰
                this.velocity.multiplyScalar(layer.damping);
                
                // 速度制限
                const speed = this.velocity.length();
                if (speed > layer.maxSpeed) {
                    this.velocity.normalize().multiplyScalar(layer.maxSpeed);
                }
                
                // 位置更新
                this.position.add(this.velocity.clone().multiplyScalar(layer.updateRate));
                
                // 感情値の緩やかな変化
                this.emotion[0] += (Math.random() - 0.5) * 0.02;
                this.emotion[1] += (Math.random() - 0.5) * 0.02;
                this.emotion[2] += (Math.random() - 0.5) * 0.02;
                this.emotion = this.emotion.map(e => Math.max(-1, Math.min(1, e)));
                
                // メッシュ位置を更新
                this.mesh.position.copy(this.position);
                
                // 色を温度に応じて変更
                this.updateColor();
            }
            
            updateColor() {
                const tempFactor = Math.min(1, this.temperature / 100);
                
                // 基本色から温度で赤くシフト
                const baseColor = new THREE.Color(this.layer.color);
                const hotColor = new THREE.Color(0xff3333);
                
                const finalColor = baseColor.clone().lerp(hotColor, tempFactor);
                this.mesh.material.color = finalColor;
                
                // サイズも温度で変化
                const scale = 1 + tempFactor * 0.5;
                this.mesh.scale.set(scale, scale, scale);
            }
        }

        let isDragging = false;
        let previousMousePosition = { x: 0, y: 0 };
        const rotationSpeed = 0.01;

        function init() {
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x1a1a2e);

            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 20;

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById('container').appendChild(renderer.domElement);

            const ambientLight = new THREE.AmbientLight(0x404040, 2);
            scene.add(ambientLight);
            
            setupLayerMeshes();
            setupParticles();
            setupMouseControls();
            setupButtons();

            window.addEventListener('resize', onWindowResize, false);
        }

        function setupLayerMeshes() {
            layerMeshes.forEach(mesh => {
                scene.remove(mesh);
                mesh.geometry.dispose();
                mesh.material.dispose();
            });
            layerMeshes = [];

            layers.forEach(layer => {
                const geometry = new THREE.IcosahedronGeometry(layer.radius, 2);
                const material = new THREE.MeshBasicMaterial({
                    color: layer.color,
                    wireframe: true,
                    transparent: true,
                    opacity: 0.3,
                    depthWrite: false,
                    side: THREE.FrontSide
                });
                
                const mesh = new THREE.Mesh(geometry, material);
                scene.add(mesh);
                layerMeshes.push(mesh);
            });
        }
        
        function setupParticles() {
            particles.forEach(p => {
                scene.remove(p.mesh);
                p.mesh.geometry.dispose();
                p.mesh.material.dispose();
            });
            particles = [];
            
            // 各層に1つずつ粒子を配置
            layers.forEach((layer, index) => {
                particles.push(new Particle(layer, index));
            });
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        let lastTime = Date.now();

        function animate() {
            requestAnimationFrame(animate);
            
            const now = Date.now();
            const dt = Math.min((now - lastTime) / 1000, 0.1);
            lastTime = now;
            
            if (isRunning) {
                // 圧力計算
                particles.forEach(p => p.calculatePressure(particles));
                
                // 粒子更新
                particles.forEach(p => p.update(dt, particles));
                
                // 統計表示
                updateStats();
            }
            
            renderer.render(scene, camera);
        }
        
        function updateStats() {
            const avgTemp = particles.reduce((sum, p) => sum + p.temperature, 0) / particles.length;
            const avgPress = particles.reduce((sum, p) => sum + p.pressure, 0) / particles.length;
            document.getElementById('statsText').textContent = 
                `温度: ${avgTemp.toFixed(1)} / 圧力: ${avgPress.toFixed(2)}`;
        }

        function setupMouseControls() {
            const container = document.getElementById('container');
            
            const handleMove = (clientX, clientY) => {
                if (!isDragging) return;

                const deltaX = clientX - previousMousePosition.x;
                const deltaY = clientY - previousMousePosition.y;

                scene.rotation.y += deltaX * rotationSpeed;
                scene.rotation.x += deltaY * rotationSpeed;
                scene.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, scene.rotation.x));
                
                previousMousePosition.x = clientX;
                previousMousePosition.y = clientY;
            };

            container.addEventListener('mousedown', (e) => {
                isDragging = true;
                previousMousePosition.x = e.clientX;
                previousMousePosition.y = e.clientY;
            });
            container.addEventListener('mousemove', (e) => handleMove(e.clientX, e.clientY));
            container.addEventListener('mouseup', () => { isDragging = false; });
            container.addEventListener('mouseleave', () => { isDragging = false; });

            container.addEventListener('touchstart', (e) => {
                if (e.touches.length === 1) {
                    isDragging = true;
                    previousMousePosition.x = e.touches[0].clientX;
                    previousMousePosition.y = e.touches[0].clientY;
                }
            }, { passive: false });
            
            container.addEventListener('touchmove', (e) => {
                if (!isDragging || e.touches.length !== 1) return;
                e.preventDefault();
                handleMove(e.touches[0].clientX, e.touches[0].clientY);
            }, { passive: false });

            container.addEventListener('touchend', () => { isDragging = false; }, false);
        }
        
        function setupButtons() {
            document.getElementById('toggleBtn').addEventListener('click', () => {
                isRunning = !isRunning;
                document.getElementById('toggleBtn').innerHTML = isRunning ? '⏸ 停止' : '▶ 再生';
            });
            
            document.getElementById('resetBtn').addEventListener('click', () => {
                scene.rotation.set(0, 0, 0);
                setupParticles();
            });
        }

        window.onload = function () {
            init();
            animate();
        }
    </script>
</body>
</html>

https://g.co/gemini/share/6b81cc72c32d

改訂版

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>感情球体モデル（地平面反発ポテンシャル版）</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        /* グローバルスタイルとフォント */
        body { 
            margin: 0; 
            overflow: hidden; 
            background: #0b0b1a; 
            color: #e5e5f7; 
            font-family: 'Inter', sans-serif; 
        }
        #container { width: 100vw; height: 100vh; }
        
        /* オーバーレイUIのコンテナ */
        #overlay-container {
            position: absolute; 
            top: 0; 
            left: 0; 
            z-index: 10;
            transition: transform 0.3s ease-in-out;
        }

        /* オーバーレイUI本体 */
        #overlay {
            padding: 1rem;
            color: white; 
            background: rgba(17, 24, 39, 0.9); /* 濃い背景 */
            border-radius: 0 0.5rem 0.5rem 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            max-width: 90vw;
            width: 300px; /* PCでの固定幅 */
        }
        
        /* 非表示時の状態 */
        #overlay-container.hidden {
            transform: translateX(calc(-100% + 40px)); /* ボタン幅だけ残して左にスライド */
        }

        /* トグルボタン */
        #toggle-button {
            position: absolute;
            right: -40px; /* パネルの外側に配置 */
            top: 0;
            width: 40px;
            height: 40px;
            background: rgba(17, 24, 39, 0.9);
            color: white;
            border: none;
            border-radius: 0 0.5rem 0.5rem 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
        }
        #toggle-button:hover { background: rgba(17, 24, 39, 1); }

        /* ボタン共通スタイル */
        .emotion-button {
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
            font-weight: bold;
        }
        .emotion-button:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }
        .emotion-button.active {
            filter: brightness(1.2);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="overlay-container">
        <button id="toggle-button" aria-expanded="true">
            <span id="toggle-icon">❮</span>
        </button>

        <div id="overlay">
            <h1 class="text-xl font-extrabold text-indigo-400">感情球体モデル</h1>
            <p class="text-sm mt-1 text-gray-300">
                **【地平面反発ポテンシャル版】** 内層の地平面が外層の粒子を押し広げます。<br>
                <span class="text-xs text-gray-500">ドラッグ/スワイプで視点操作が可能です。</span>
            </p>

            <!-- 外部Gコントロールボタン -->
            <div class="mt-4">
                <h2 class="text-md font-semibold mb-2 text-gray-100">外部感情圧力 (External G)</h2>
                <div id="emotion-controls" class="flex flex-wrap gap-2">
                    <button id="joy" class="emotion-button bg-pink-500 text-white px-3 py-1 rounded-lg">喜 (Joy)</button>
                    <button id="anger" class="emotion-button bg-red-600 text-white px-3 py-1 rounded-lg">怒 (Anger)</button>
                    <button id="sadness" class="emotion-button bg-blue-600 text-white px-3 py-1 rounded-lg">哀 (Sadness)</button>
                    <button id="calm" class="emotion-button bg-green-600 text-white px-3 py-1 rounded-lg active">楽 (Calm)</button>
                </div>
            </div>

            <!-- 粒子特性凡例 -->
            <div class="mt-4 space-y-2">
                <h2 class="text-md font-semibold text-gray-100">粒子の熱力学的特性</h2>
                <div class="flex items-center space-x-2 text-red-300">
                    <span class="font-bold w-12">熱い粒子:</span>
                    <span class="text-xs">強い引力/弱い斥力（収束傾向）</span>
                </div>
                <div class="flex items-center space-x-2 text-blue-300">
                    <span class="font-bold w-12">冷めた粒子:</span>
                    <span class="text-xs">弱い引力/強い斥力（拡散傾向）</span>
                </div>
                <div class="flex items-center space-x-2 text-green-300">
                    <span class="font-bold w-12">中庸の粒子:</span>
                    <span class="text-xs">引力と斥力の均衡（安定傾向）</span>
                </div>
            </div>
            <p class="text-xs mt-3 text-yellow-300">
                **熱力学:** 粒子が密集すると<span class="text-white">白く輝き（高圧）</span>、その**熱**が全層の境界復元力に影響し、動きが活発化します。
            </p>
        </div>
    </div>

    <script>
    // Three.jsとシミュレーションのグローバル変数
    let scene, camera, renderer, systemCore, particles = [];
    let isRunning = true;
    let isDragging = false;
    let previousMousePosition = { x: 0, y: 0 };
    let globalNucleusHeat = 0.0; // 核層の平均温度（グローバルG-Force）

    // 物理シミュレーションの基本定数
    const SIMULATION_DT = 0.08; 
    const PARTICLE_SIZE = 0.2; 
    
    // === 熱力学定数 ===
    const PRESSURE_RADIUS = 1.0; 
    const MAX_PRESSURE_COUNT = 3; 
    const HOT_COLOR = new THREE.Color(0xffffff); 
    const MAX_HEAT_EFFECT = 1.5; 

    // === 地平面反発定数 ===
    const BOUNDARY_REPULSION_STRENGTH = 0.3; // 地平面からの基本斥力強度
    const BOUNDARY_REPULSION_RANGE = 0.8; // 地平面の反発ポテンシャルが働く距離（粒子径の4倍）

    // === 粒子の個別特性定義 ===
    const PARTICLE_TYPES = [
        // 0: 熱い粒子 (強い引力/弱い斥力) - 収束/熱
        { typeName: "Hot", attFactor: 1.5, repFactor: 0.5, jitterFactor: 1.2 },
        // 1: 冷めた粒子 (弱い引力/強い斥力) - 拡散/冷
        { typeName: "Cold", attFactor: 0.5, repFactor: 1.5, jitterFactor: 0.8 }, 
        // 2: 中庸の粒子 (均衡) - 平衡
        { typeName: "Neutral", attFactor: 1.0, repFactor: 1.0, jitterFactor: 1.0 }
    ];

    // === 感情的圧力のグローバル状態 ===
    let currentEmotionPressure = 'calm'; 

    // 感情ごとの圧力設定 (1.0が基本値)
    const EMOTION_SETTINGS = {
        'joy': { friction_factor: 0.85, speed_factor: 1.3, attraction_factor: 0.9, repulsion_factor: 0.8 }, 
        'anger': { friction_factor: 0.95, speed_factor: 1.1, attraction_factor: 0.8, repulsion_factor: 2.5 }, 
        'sadness': { friction_factor: 1.1, speed_factor: 0.7, attraction_factor: 1.5, repulsion_factor: 0.7 }, 
        'calm': { friction_factor: 1.0, speed_factor: 1.0, attraction_factor: 1.0, repulsion_factor: 1.0 }
    };

    // === 相互作用定数 ===
    const INTER_LAYER_ATTRACTION_FACTOR = 0.3; 
    const BASE_INTER_LAYER_REPULSION_STRENGTH = 0.02; 
    const BASE_EXTERNAL_G_REPULSION = 0.015; 
    const REPULSION_POWER = 2.5; 
    const REBOUND_VELOCITY_SCALE = 2.0; 

    // 各層の基本定義
    const layers = [
        // 核層 (0) - 光体/最速
        { radius: 2.5, color: 0xffc107, name: "核層", maxSpeed: 1.0, baseFriction: 0.978, centerAttraction: 0.35, tangentialSpeed: 0.7, longRangeAttraction: 0.06, attractionRange: 3.0, restitution: 0.75, boundaryRepulsion: 0.0 }, // 核層は内側地平面なし
        // 身体層 (1) - 気体/流動
        { radius: 4.5, color: 0x64b5f6, name: "身体層", maxSpeed: 0.75, baseFriction: 0.98, centerAttraction: 0.20, tangentialSpeed: 0.5, longRangeAttraction: 0.04, attractionRange: 4.0, restitution: 0.55, boundaryRepulsion: 1.0 }, // 強く反発
        // 思考層 (2) - 液体/循環
        { radius: 7.0, color: 0x81c784, name: "思考層", maxSpeed: 0.55, baseFriction: 0.983, centerAttraction: 0.12, tangentialSpeed: 0.35, longRangeAttraction: 0.03, attractionRange: 5.0, restitution: 0.35, boundaryRepulsion: 0.8 }, 
        // 文明層 (3) - 固体/安定
        { radius: 9.5, color: 0x9e9e9e, name: "文明層", maxSpeed: 0.4, baseFriction: 0.988, centerAttraction: 0.06, tangentialSpeed: 0.25, longRangeAttraction: 0.02, attractionRange: 6.0, restitution: 0.15, boundaryRepulsion: 0.6 }
    ];

    function randomVector(scale = 1) {
        return new THREE.Vector3(
            (Math.random() - 0.5) * scale,
            (Math.random() - 0.5) * scale,
            (Math.random() - 0.5) * scale
        );
    }

    function randomOrbitalPoint(maxR, minR = 0, tangentialSpeed) {
        const r = minR + Math.random() * (maxR - minR); 
        const theta = Math.random() * Math.PI * 2;
        const phi = Math.acos(2 * Math.random() - 1); 
        
        const position = new THREE.Vector3(
            r * Math.sin(phi) * Math.cos(theta),
            r * Math.sin(phi) * Math.sin(theta),
            r * Math.cos(phi)
        );

        const radialDirection = position.clone().normalize();
        let tangentialDirection = new THREE.Vector3().crossVectors(radialDirection, randomVector(1)).normalize();
        
        const orbitalVelocity = tangentialDirection.multiplyScalar(tangentialSpeed);
        const randomInitialVelocity = randomVector(tangentialSpeed * 0.3); 
        
        const velocity = orbitalVelocity.add(randomInitialVelocity);
        
        return { position, velocity };
    }

    function createSphere(color, size) {
        const geo = new THREE.SphereGeometry(size, 16, 16);
        const mat = new THREE.MeshLambertMaterial({ color, transparent: true, opacity: 0.9, shininess: 80 }); 
        return new THREE.Mesh(geo, mat);
    }
    
    const tempVector = new THREE.Vector3();
    const tempColor = new THREE.Color();

    function handleParticleCollision(p1, p2) {
        if (p1.layerIndex !== p2.layerIndex) return;

        const requiredDistance = PARTICLE_SIZE * 2;
        const diff = p1.position.clone().sub(p2.position);
        const dist = diff.length();

        if (dist < requiredDistance && dist > 0.001) {
            const penetrationDepth = requiredDistance - dist;
            const normal = diff.normalize();
            
            p1.position.addScaledVector(normal, penetrationDepth * 0.5);
            p2.position.addScaledVector(normal, -penetrationDepth * 0.5);

            const v1 = p1.velocity;
            const v2 = p2.velocity;

            const v1_normal = v1.dot(normal);
            const v2_normal = v2.dot(normal);
            
            const vp = (v1_normal + v2_normal) / 2;
            const rest = p1.layer.restitution; 
            
            const v1f_normal = vp + (v2_normal - v1_normal) * rest * REBOUND_VELOCITY_SCALE; 
            const v2f_normal = vp + (v1_normal - v2_normal) * rest * REBOUND_VELOCITY_SCALE;

            v1.addScaledVector(normal, v1f_normal - v1_normal);
            v2.addScaledVector(normal, v2f_normal - v2_normal);
        }
    }

    class Particle {
        constructor(layer, layerIndex, j) { 
            this.layer = layer;
            this.layerIndex = layerIndex;
            this.particleIndexInLayer = j;
            this.type = PARTICLE_TYPES[j % 3]; 
            this.baseColor = new THREE.Color(layer.color); 
            this.temperature = 0.0; 
            
            const innerR = (layerIndex === 0) ? 0.0 : layers[layerIndex - 1].radius;
            const outerR = layers[layerIndex].radius;
            const initial = randomOrbitalPoint(outerR - PARTICLE_SIZE, innerR + PARTICLE_SIZE, layer.tangentialSpeed);

            this.position = initial.position;
            this.velocity = initial.velocity;
            
            let initialColor = this.baseColor.clone();
            if (this.type.typeName === "Hot") { initialColor.lerp(new THREE.Color(0xff8888), 0.1); } 
            else if (this.type.typeName === "Cold") { initialColor.lerp(new THREE.Color(0x8888ff), 0.1); }
            
            this.mesh = createSphere(initialColor.getHex(), PARTICLE_SIZE);
            this.mesh.position.copy(this.position);
            systemCore.add(this.mesh);
        }

        update(dt, allParticles) {
            const pressure = EMOTION_SETTINGS[currentEmotionPressure];
            const pType = this.type;
            
            // === 1. 動的パラメータ調整 ===
            const dynamicFriction = this.layer.baseFriction * pressure.friction_factor;
            const dynamicMaxSpeed = this.layer.maxSpeed * pressure.speed_factor;
            
            const dynamicCenterAttraction = this.layer.centerAttraction * pressure.attraction_factor * pType.attFactor;
            const dynamicBaseRepulsionStrength = BASE_INTER_LAYER_REPULSION_STRENGTH * pressure.repulsion_factor * pType.repFactor;
            const dynamicLongRangeAttraction = this.layer.longRangeAttraction * pressure.attraction_factor * pType.attFactor;

            // 2. 感情的揺らぎ
            this.velocity.add(randomVector(this.layer.maxSpeed * 0.05 * dt * pType.jitterFactor)); 

            // 3. 粒子間の相互作用
            let interactionForce = new THREE.Vector3();
            const attractionRange = this.layer.attractionRange;
            
            for (const other of allParticles) {
                if (other === this) continue;
                
                const diff = tempVector.subVectors(other.position, this.position);
                const dist = diff.length();
                
                if (dist > 0.001 && dist < attractionRange) { 
                    diff.normalize();
                    
                    let forceMagnitude = 0;
                    
                    const repulsion = dynamicBaseRepulsionStrength / Math.pow(dist, REPULSION_POWER);
                    
                    if (this.layerIndex === other.layerIndex) {
                        const attraction = dynamicLongRangeAttraction / dist;
                        forceMagnitude = attraction - repulsion;
                    } else {
                        const interAttraction = (dynamicLongRangeAttraction / dist) * INTER_LAYER_ATTRACTION_FACTOR;
                        forceMagnitude = interAttraction - repulsion;
                    }

                    interactionForce.add(diff.multiplyScalar(forceMagnitude));
                }
            }
            this.velocity.add(interactionForce.multiplyScalar(dt));

            // 4. 文明層（固体）に外部G斥力を適用
            if (this.layerIndex === layers.length - 1) {
                const externalRepulsion = randomVector(BASE_EXTERNAL_G_REPULSION * pressure.repulsion_factor * dt);
                this.velocity.add(externalRepulsion);
            }

            // 5. 中心引力（哀しみ・収束）
            const radius = this.position.length();
            const centerDirection = this.position.clone().negate().normalize();
            const attractionStrength = dynamicCenterAttraction / (radius * radius + 0.1); 
            this.velocity.add(centerDirection.multiplyScalar(attractionStrength * dt));

            // 6. 速度制限と摩擦
            const spd = this.velocity.length();
            if (spd > dynamicMaxSpeed) {
                this.velocity.normalize().multiplyScalar(dynamicMaxSpeed);
            }
            this.velocity.multiplyScalar(dynamicFriction); 
            
            // 7. 地平面からの反発ポテンシャル（内側境界からの押し広げ）
            if (this.layerIndex > 0) {
                const innerBoundaryRadius = layers[this.layerIndex - 1].radius + PARTICLE_SIZE;
                const distToInnerBoundary = radius - innerBoundaryRadius;
                
                if (distToInnerBoundary < BOUNDARY_REPULSION_RANGE) {
                    const repulsionStrength = this.layer.boundaryRepulsion * BOUNDARY_REPULSION_STRENGTH;
                    // 距離が近づくほど斥力は強くなる（非線形）
                    const repulsionMagnitude = repulsionStrength / (distToInnerBoundary * distToInnerBoundary + 0.01);
                    
                    const normalOutward = this.position.clone().normalize();
                    this.velocity.add(normalOutward.multiplyScalar(repulsionMagnitude * dt));
                }
            }


            this.position.add(this.velocity.clone().multiplyScalar(dt));

            // 8. ハード境界チェックと位置補正 (G-Force連鎖適用)
            const newRadius = this.position.length();
            
            // *** G-Force連鎖: 核層の平均熱を全層の復元力に乗算 ***
            const heatFactor = 1.0 + (globalNucleusHeat * (MAX_HEAT_EFFECT - 1.0)); 
            const restitution = this.layer.restitution * heatFactor; 

            const innerBoundary = (this.layerIndex === 0) ? 0.0 : layers[this.layerIndex - 1].radius + PARTICLE_SIZE;
            const outerBoundary = layers[this.layerIndex].radius - PARTICLE_SIZE;

            if (newRadius > outerBoundary) {
                const normal = this.position.clone().normalize();
                this.position.copy(normal.multiplyScalar(outerBoundary)); 
                this.velocity.reflect(normal).multiplyScalar(restitution); 
            } else if (newRadius < innerBoundary) {
                const normal = this.position.clone().negate().normalize(); 
                this.position.copy(this.position.normalize().multiplyScalar(innerBoundary));
                this.velocity.reflect(normal).multiplyScalar(restitution);
            }

            this.mesh.position.copy(this.position);
            
            // === 9. 熱力学: 粒子の温度（圧力/集中度）計算と色の更新 ===
            let neighborCount = 0;
            for (const other of allParticles) {
                if (other === this) continue;
                const dist = this.position.distanceTo(other.position);
                if (dist < PRESSURE_RADIUS) { 
                    neighborCount++;
                }
            }
            
            this.temperature = Math.min(1.0, neighborCount / MAX_PRESSURE_COUNT); 
            
            const heatSensitivity = (pType.attFactor * 0.5) + 0.5; 
            this.mesh.material.color.copy(this.baseColor).lerp(HOT_COLOR, this.temperature * heatSensitivity * 0.7); 
        }
    }

    class SystemCore extends THREE.Object3D {
        constructor() {
            super();
            this.velocity = randomVector(0.01); 
        }
        update(dt) {
            this.position.add(this.velocity.clone().multiplyScalar(dt * 0.1)); 
            const drift = randomVector(0.001);
            this.velocity.add(drift);
            const centerForce = this.position.clone().negate().multiplyScalar(0.005);
            this.velocity.add(centerForce.multiplyScalar(dt));
            
            if (this.velocity.length() > 0.1) {
                this.velocity.normalize().multiplyScalar(0.1);
            }
        }
    }

    // === グローバルG-Forceの計算 ===
    function calculateGlobalNucleusHeat() {
        let totalHeat = 0;
        let nucleusParticleCount = 0;
        
        for (const p of particles) {
            if (p.layerIndex === 0) { // 核層のインデックスは 0
                totalHeat += p.temperature;
                nucleusParticleCount++;
            }
        }
        
        if (nucleusParticleCount > 0) {
            globalNucleusHeat = totalHeat / nucleusParticleCount;
        } else {
            globalNucleusHeat = 0.0;
        }
    }

    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 25;
        const pointLight = new THREE.PointLight(0xffffff, 2.5);
        pointLight.position.set(5, 5, 5);
        scene.add(pointLight);

        scene.add(new THREE.AmbientLight(0xffffff, 0.5)); 
        
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById("container").appendChild(renderer.domElement);
        
        systemCore = new SystemCore();
        scene.add(systemCore);

        layers.forEach(layer => {
            const mesh = new THREE.Mesh(
                new THREE.IcosahedronGeometry(layer.radius, 2), 
                new THREE.MeshBasicMaterial({ color: layer.color, wireframe: true, opacity: 0.15, transparent: true, depthWrite: false })
            );
            systemCore.add(mesh);
        });

        layers.forEach((layer, idx) => {
            for (let j = 0; j < 3; j++) {
                particles.push(new Particle(layer, idx, j)); 
            }
        });

        setupEventListeners();
        setupEmotionControls();
        setupToggleUI(); 
        animate();
    }
    
    function setupEventListeners() {
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
        
        const handleInteractionStart = (clientX, clientY) => {
            isDragging = true;
            previousMousePosition = { x: clientX, y: clientY };
            document.body.style.cursor = 'grabbing';
        };

        const handleInteractionMove = (clientX, clientY) => {
            if (!isDragging) return;
            const deltaX = clientX - previousMousePosition.x;
            const deltaY = clientY - previousMousePosition.y;
            const rotationSpeed = 0.008; 
            systemCore.rotation.y += deltaX * rotationSpeed;
            systemCore.rotation.x += deltaY * rotationSpeed;
            previousMousePosition = { x: clientX, y: clientY };
        };

        const handleInteractionEnd = () => {
            isDragging = false;
            document.body.style.cursor = 'grab';
        };

        renderer.domElement.addEventListener('mousedown', (e) => { handleInteractionStart(e.clientX, e.clientY); });
        document.addEventListener('mousemove', (e) => { handleInteractionMove(e.clientX, e.clientY); });
        document.addEventListener('mouseup', handleInteractionEnd);
        
        renderer.domElement.addEventListener('touchstart', (e) => {
            e.preventDefault(); 
            const touch = e.touches[0];
            handleInteractionStart(touch.clientX, touch.clientY);
        });
        renderer.domElement.addEventListener('touchmove', (e) => {
            e.preventDefault();
            const touch = e.touches[0];
            handleInteractionMove(touch.clientX, touch.clientY);
        });
        renderer.domElement.addEventListener('touchend', handleInteractionEnd);
        document.body.style.cursor = 'grab';
    }

    function setupEmotionControls() {
        const controls = document.getElementById('emotion-controls');
        const buttons = controls.querySelectorAll('.emotion-button');
        
        buttons.forEach(button => {
            button.addEventListener('click', () => {
                const newEmotion = button.id;
                
                currentEmotionPressure = newEmotion;
                
                buttons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
            });
        });
    }

    /**
     * UIパネルの開閉機能
     */
    function setupToggleUI() {
        const container = document.getElementById('overlay-container');
        const button = document.getElementById('toggle-button');
        const icon = document.getElementById('toggle-icon');

        button.addEventListener('click', () => {
            const isCurrentlyHidden = container.classList.contains('hidden');
            
            container.classList.toggle('hidden'); 
            icon.textContent = isCurrentlyHidden ? '❮' : '❯';
            button.setAttribute('aria-expanded', isCurrentlyHidden);
        });

        container.classList.remove('hidden');
    }

    function animate() {
        requestAnimationFrame(animate);
        
        const dt = SIMULATION_DT; 
        
        if (isRunning) {
            calculateGlobalNucleusHeat(); 
            
            particles.forEach(p => p.update(dt, particles));
            
            for (let i = 0; i < particles.length; i++) {
                for (let j = i + 1; j < particles.length; j++) {
                    if (particles[i].layerIndex === particles[j].layerIndex) {
                        handleParticleCollision(particles[i], particles[j]);
                    }
                }
            }

            systemCore.update(dt);
            
            if (!isDragging) {
                systemCore.rotation.y += 0.001; 
            }
        }
        
        renderer.render(scene, camera);
    }

    window.onload = init;
    </script>
</body>
</html>