ゼリーシミュレーションの使い方・活用方法

ゼリーシミュレーションは、クリックで揺れる柔らかいゼリー状のオブジェクトを物理シミュレーションで表現するツールです。この記事では、ゼリーシミュレーションの基本的な使い方から、物理シミュレーションの仕組みまで詳しく解説します。

ゼリーシミュレーションとは

ゼリーシミュレーションは、Matter.jsという物理エンジンを使用して、柔らかいゼリー状のオブジェクトの動きをリアルタイムでシミュレーションするツールです。

主な特徴

• リアルタイム物理シミュレーション: クリックやドラッグに応じて、ゼリーが自然に揺れる
• 柔らかい質感: ばねと制約を使って、柔らかいゼリーの質感を再現
• インタラクティブ: マウス操作でゼリーを操作できる
• 視覚的な魅力: 滑らかなアニメーションで、視覚的に楽しめる

なぜゼリーシミュレーションが面白いのか

ゼリーシミュレーションは、以下のような理由で興味深いツールです：

1. 物理法則の可視化: 物理法則（重力、ばね、制約）が視覚的に理解できる
2. インタラクティブな体験: マウス操作で物理現象を直接体験できる
3. 学習ツール: 物理シミュレーションの仕組みを学べる
4. エンターテイメント: 単純に楽しめる、面白いツール

基本的な使い方

ステップ1: シミュレーションを開始

ページを開くと、ゼリー状のオブジェクトが表示されます。ゼリーは重力の影響を受けて、自然に揺れ動きます。

ステップ2: ゼリーを操作

マウスでゼリーをクリックまたはドラッグすると、ゼリーが反応して揺れます。クリックした位置に応じて、ゼリーの動きが変化します。

ステップ3: パラメータを調整

ツールには、以下のパラメータを調整できるオプションがあります：

• 質点数: ゼリーを構成する点の数（多いほど滑らかだが重い）
• ばねの強さ: ゼリーの柔らかさ（強いほど硬い）
• 減衰: ゼリーの揺れの減衰速度（大きいほど早く止まる）

物理シミュレーションの仕組み

Matter.jsとは

Matter.jsは、JavaScriptで2D物理シミュレーションを実装するための軽量なライブラリです。重力、衝突検出、ばね、制約などの物理現象を簡単に実装できます。

ゼリーの実装方法

ゼリーシミュレーションは、以下のような仕組みで実装されています：

1. 質点の配置: ゼリーの形状に合わせて、複数の質点（ボディ）を配置
2. ばねの接続: 質点同士をばね（制約）で接続
3. 物理エンジンの実行: Matter.jsの物理エンジンで、質点の動きを計算
4. 描画: Canvas APIで、質点とばねを描画

質点とばねの関係

ゼリーは、複数の質点（ボディ）と、それらを接続するばね（制約）で構成されています。

質点（ボディ）:

• 位置、速度、質量などの物理属性を持つ
• 重力や力の影響を受ける

ばね（制約）:

• 2つの質点を接続する
• 自然長、剛性、減衰などの属性を持つ
• 質点間の距離を保つように働く

実際の活用シーン

1. 物理シミュレーションの学習

ゼリーシミュレーションは、物理シミュレーションの仕組みを学ぶための学習ツールとして活用できます。

活用例:

1. 質点とばねの関係を理解
   → ゼリーを操作して、質点とばねの動きを観察
   → ばねの強さを調整して、動きの変化を確認

2. 物理パラメータの影響を理解
   → 質点数を変更して、滑らかさとパフォーマンスの関係を確認
   → 減衰を調整して、揺れの減衰速度を確認

2. インタラクティブなデモンストレーション

ゼリーシミュレーションは、Webサイトやアプリケーションのインタラクティブなデモンストレーションとして活用できます。

活用例:

1. ポートフォリオサイトの装飾
   → ゼリーシミュレーションを背景に配置
   → マウスの動きに応じてゼリーが反応

2. ランディングページの演出
   → ゼリーシミュレーションで視覚的な魅力を追加
   → ユーザーの注意を引く

3. ゲーム開発のプロトタイプ

ゼリーシミュレーションは、ゲーム開発のプロトタイプとして活用できます。

活用例:

1. キャラクターの動きのプロトタイプ
   → ゼリーシミュレーションで柔らかいキャラクターの動きを検証
   → 物理パラメータを調整して、理想の動きを見つける

2. エフェクトのプロトタイプ
   → ゼリーシミュレーションでエフェクトの動きを検証
   → 視覚的な効果を確認

4. デザインのインスピレーション

ゼリーシミュレーションは、デザインのインスピレーションとして活用できます。

活用例:

1. UIアニメーションの参考
   → ゼリーシミュレーションの動きを参考に、UIアニメーションを設計
   → 自然な動きをUIに取り入れる

2. ビジュアルデザインの参考
   → ゼリーシミュレーションの形状や動きを参考に、ビジュアルデザインを設計
   → 有機的なデザインを作成

パラメータの調整方法

質点数

質点数は、ゼリーを構成する点の数です。質点数が多いほど、ゼリーは滑らかになりますが、計算負荷が高くなります。

調整のコツ:

• 少ない質点数（10-20）: 軽量で、低スペック端末でも快適に動作
• 中程度の質点数（30-50）: バランスが良く、多くの端末で快適に動作
• 多い質点数（60-100）: 非常に滑らかだが、高スペック端末が必要

ばねの強さ

ばねの強さは、ゼリーの柔らかさを決定します。ばねが強いほど、ゼリーは硬くなります。

調整のコツ:

• 弱いばね（0.1-0.3）: 非常に柔らかく、大きく揺れる
• 中程度のばね（0.4-0.6）: バランスが良く、自然な動き
• 強いばね（0.7-1.0）: 硬く、小さく揺れる

減衰

減衰は、ゼリーの揺れの減衰速度を決定します。減衰が大きいほど、ゼリーの揺れは早く止まります。

調整のコツ:

• 小さい減衰（0.01-0.05）: 長く揺れ続ける
• 中程度の減衰（0.06-0.1）: バランスが良く、自然な減衰
• 大きい減衰（0.11-0.2）: 早く止まる

ゼリーシミュレーションの技術的な実装

Matter.jsでの実装例

import Matter from 'matter-js';

// 物理エンジンの作成
const engine = Matter.Engine.create();
const world = engine.world;

// 重力の設定
world.gravity.x = 0;
world.gravity.y = 1;
world.gravity.scale = 0.001;

// 質点の作成
const points: Matter.Body[] = [];
const pointCount = 30;
const radius = 5;

for (let i = 0; i < pointCount; i++) {
  const angle = (Math.PI * 2 * i) / pointCount;
  const x = 400 + Math.cos(angle) * 100;
  const y = 300 + Math.sin(angle) * 100;
  
  const point = Matter.Bodies.circle(x, y, radius, {
    mass: 1,
    friction: 0.1,
    restitution: 0.3,
  });
  
  points.push(point);
}

// 質点をワールドに追加
Matter.World.add(world, points);

// ばね（制約）の作成
const constraints: Matter.Constraint[] = [];

for (let i = 0; i < pointCount; i++) {
  const nextIndex = (i + 1) % pointCount;
  const constraint = Matter.Constraint.create({
    bodyA: points[i],
    bodyB: points[nextIndex],
    stiffness: 0.5, // ばねの強さ
    damping: 0.05,  // 減衰
    length: 100,     // 自然長
  });
  
  constraints.push(constraint);
}

// 制約をワールドに追加
Matter.World.add(world, constraints);

// エンジンの実行
const runner = Matter.Runner.create();
Matter.Runner.run(runner, engine);

Canvas APIでの描画例

function drawJelly(
  ctx: CanvasRenderingContext2D,
  points: Matter.Body[],
  constraints: Matter.Constraint[]
) {
  // 背景をクリア
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  
  // ばねを描画
  ctx.strokeStyle = '#FF6B9D';
  ctx.lineWidth = 2;
  ctx.beginPath();
  
  for (const constraint of constraints) {
    const pointA = constraint.bodyA.position;
    const pointB = constraint.bodyB.position;
    
    ctx.moveTo(pointA.x, pointA.y);
    ctx.lineTo(pointB.x, pointB.y);
  }
  
  ctx.stroke();
  
  // 質点を描画
  ctx.fillStyle = '#FF6B9D';
  
  for (const point of points) {
    ctx.beginPath();
    ctx.arc(point.position.x, point.position.y, 5, 0, Math.PI * 2);
    ctx.fill();
  }
  
  // ゼリーの内部を塗りつぶし（オプション）
  ctx.fillStyle = 'rgba(255, 107, 157, 0.3)';
  ctx.beginPath();
  
  if (points.length > 0) {
    ctx.moveTo(points[0].position.x, points[0].position.y);
    
    for (let i = 1; i < points.length; i++) {
      ctx.lineTo(points[i].position.x, points[i].position.y);
    }
    
    ctx.closePath();
    ctx.fill();
  }
}

Reactでの実装例

'use client';

import { useEffect, useRef } from 'react';
import Matter from 'matter-js';

export function JellySimulation() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const engineRef = useRef<Matter.Engine | null>(null);

  useEffect(() => {
    if (!canvasRef.current) return;

    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    // 物理エンジンの作成
    const engine = Matter.Engine.create();
    const world = engine.world;
    engineRef.current = engine;

    // 重力の設定
    world.gravity.x = 0;
    world.gravity.y = 1;
    world.gravity.scale = 0.001;

    // 質点とばねの作成（上記のコードを参照）
    // ...

    // アニメーションループ
    const animate = () => {
      Matter.Engine.update(engine);
      drawJelly(ctx, points, constraints);
      requestAnimationFrame(animate);
    };

    animate();

    // クリーンアップ
    return () => {
      Matter.Engine.clear(engine);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      width={800}
      height={600}
      className="border border-gray-300 rounded"
    />
  );
}

パフォーマンス最適化

適応的質点数調整

低スペック端末でも快適に動作するように、FPSを監視して質点数を自動調整します。

let currentFPS = 60;
let targetFPS = 60;
let pointCount = 30;

function adjustPointCount() {
  if (currentFPS < targetFPS * 0.9) {
    // FPSが低い場合は質点数を減らす
    pointCount = Math.max(10, pointCount - 5);
  } else if (currentFPS > targetFPS * 1.1) {
    // FPSが高い場合は質点数を増やす
    pointCount = Math.min(100, pointCount + 5);
  }
}

スリープモードの有効化

動いていない質点をスリープ状態にして、計算負荷を軽減します。

engine.enableSleeping = true;

まとめ

ゼリーシミュレーションは、物理シミュレーションの仕組みを学ぶための学習ツールとして、また、インタラクティブなデモンストレーションやゲーム開発のプロトタイプとして活用できる、興味深いツールです。

Matter.jsとCanvas APIを組み合わせることで、リアルタイムで物理シミュレーションを実装できます。質点数、ばねの強さ、減衰などのパラメータを調整することで、様々な動きを表現できます。

関連ツール

この記事で解説したゼリーシミュレーションを実際に使ってみてください。マウス操作でゼリーを操作し、物理シミュレーションの動きを体験できます。

関連記事

• Matter.jsを使った物理シミュレーション入門
• TypeScriptで物理シミュレーションを実装する方法（今後公開予定）