title: "マウスインタラクション" description: "u_mouseユニフォームを使ったマウスインタラクションを学びます。マウス位置に反応するエフェクトを作りましょう。" chapter: "06-animation" order: 3 challenge: description: "マウスの位置で色が変わるグラデーションを作ってください。マウスのx座標で色相が、y座標で彩度が変化するようにしましょう。" hints:

• "u_mouseは画面上のマウス位置（0〜1の範囲）です。u_mouse.xで水平位置、u_mouse.yで垂直位置を取得できます。"
• "色相の変化は cos(6.2832 * (hue + vec3(0.0, 0.33, 0.67))) のパターンで鮮やかな色が作れます。"
• "彩度はグレーとカラーの間を mix(vec3(brightness), hueColor, u_mouse.y) で制御できます。"

マウスインタラクション

u_mouseユニフォーム

u_mouse はマウスの現在位置を受け取るユニフォーム変数です：

uniform vec2 u_mouse; // (x, y) 0.0〜1.0 の範囲

• u_mouse.x：水平位置（0＝左端、1＝右端）
• u_mouse.y：垂直位置（0＝下端、1＝上端）

マウス位置に反応する図形

最もシンプルな使い方は、図形の位置をマウスに追従させることです：

vec2 mouse = u_mouse - vec2(0.5);
mouse.x *= u_resolution.x / u_resolution.y;

float d = length(p - mouse) - 0.1;
float shape = smoothstep(0.005, 0.0, d);

マウスとの距離を利用する

各ピクセルからマウスまでの距離を使って、様々なエフェクトが作れます：

vec2 mouse = u_mouse;
mouse.x *= u_resolution.x / u_resolution.y;

vec2 uv = gl_FragCoord.xy / u_resolution;
uv.x *= u_resolution.x / u_resolution.y;

float dist = distance(uv, mouse);

光の輪

float glow = 0.02 / dist; // 距離に反比例する明るさ
vec3 color = vec3(glow) * vec3(1.0, 0.7, 0.3);

ディストーション

vec2 dir = normalize(uv - mouse);
float strength = 0.05 / (dist + 0.01);
vec2 distorted = uv + dir * strength;

マウスで色を制御

マウスの位置をパラメータとして使い、シーン全体の見た目を変えることもできます：

// マウスXで色相を制御
float hue = u_mouse.x;
vec3 color = 0.5 + 0.5 * cos(6.2832 * (hue + vec3(0.0, 0.33, 0.67)));

// マウスYで明るさを制御
color *= u_mouse.y;

インタラクティブなアート

u_time と u_mouse を組み合わせると、インタラクティブなシェーダーアートが作れます：

// マウス位置を中心に回転するパターン
vec2 center = u_mouse - vec2(0.5);
vec2 rp = rot2(u_time) * (p - center);

まとめ

• u_mouse はマウスの座標（0〜1の範囲）
• マウスとの距離でグロー、ディストーション等のエフェクト
• マウス位置をパラメータとしてシーン全体を制御
• u_time と組み合わせてインタラクティブな作品を作れる