スクイント・シミュレータ

デモ: https://masamichif.github.io/Squint/

美術の「目を細めて見る（スクイント）」技法をブラウザ上で再現する観察ツールです。画像のディテールを落とし、明暗（バリュー）と大きな形（マッス）だけを残すことで、デッサンやイラスト制作時の「全体を捉える」訓練・確認に使えます。

画像はブラウザ内だけで処理され、サーバーには送信されません。

特徴

• スクイント効果 — ぼかし・コントラスト・彩度・ポスタリゼーション（輝度ベースの階調化）の 4 パラメータをスライダーで調整
• プリセット — 「軽くスクイント」「強くスクイント」「明暗チェック」をワンタップ適用。現在値と一致するプリセットはハイライト表示
• 原画との見比べ — 画像にホバー、または「原画を表示」ボタンで切替。現在の表示状態（スクイント / 原画）を常時表示
• 左右反転 — デッサンの狂いや構図の歪みを確認（鏡像チェック）
• 原寸表示 + パン — 等倍表示に切替え、Photoshop の手のひらツールのようにドラッグでスクロール
• 構図グリッド — 三分割法（rule of thirds）と十字を重ねて表示。背景の明暗を問わず視認できる
• 柔軟な画像読み込み — クリック / ドラッグ&ドロップ / ウィンドウのどこにでもドロップ可能
• レスポンシブ — ワイド画面では画像とコントロールを 2 カラム表示（画像エリアは追従固定）。ダークモード対応

使い方

1. index.html をブラウザで開く
2. 画像をドラッグ&ドロップ、またはクリックして選択
3. スライダーやプリセットでスクイント効果を調整
4. ボタンで原画切替・反転・原寸表示・グリッド表示を利用

ビルド不要の静的サイトなので、ファイルを直接開くだけで動作します。ローカルサーバーで配信する場合の例:

python -m http.server 8000
# http://localhost:8000/ を開く

技術構成

• バニラ HTML / CSS / JavaScript（フレームワーク・ビルドツールなし）
• スクイント効果は単一の SVG フィルタで構成し、適用順は「ぼかし → コントラスト → 彩度 → 階調化」:
  1. ぼかし（feGaussianBlur）— リニア光（linearRGB）で処理し物理的に正しいボケに。横方向をやや強くした異方性ぼかしで「目を細めた時の流れ」を再現
  2. コントラスト（feComponentTransfer）/ 彩度（feColorMatrix）— sRGB で調整
  3. 輝度ベース階調化 — 輝度 Y を抽出して量子化し、差分を全チャンネルへ等量加算。色相を保ったまま明度を N 段にスナップ（明暗マッスの把握に最適）
• ボケのみ linearRGB、トーン処理は sRGB と色空間を使い分け、知覚に近い結果にしている

動作要件

モダンブラウザ（2023 年以降の Chrome / Firefox / Safari / Edge）を想定しています。レイアウト切替に CSS の :has() セレクタ、グリッド線の視認性に mix-blend-mode、フィルタの色空間制御に color-interpolation-filters を使用しています。

ファイル構成

ファイル	役割
index.html	画面構造・SVG フィルタ定義
styles.css	スタイル・レスポンシブ・ダークモード
script.js	画像読み込み・各種操作・状態管理

ライセンス

MIT License