完璧なAI切り抜きを「あえて壊す」アナログの美学

1. SVG Displacement Map による「ハサミ跡」の動的生成

AI（MediaPipe）が生成した滑らかなマスク境界を、ランダムなギザギザに変換するために、HTML5のSVGフィルタ機能をCanvas APIと融合させています。

具体的には、feTurbulenceで生成したフラクタルノイズを feDisplacementMap の参照画像として使用し、ピクセルの座標をランダムに「歪ませて」います。これをCanvasの filter プロパティに適用することで、GPU加速を活かしたまま、静的な画像処理では難しい動的なハサミ跡のシミュレーションを実現しました。

// SVGフィルタによる境界線の歪ませ処理（コンセプト）
function applyJaggedEffect(ctx, maskCanvas) {
    // ノイズの粗さを制御するパラメータ
    const baseFreq = // 独自のチューニング値;
    const scale = // 歪みの強さの係数;

    // CanvasにSVGフィルタを適用
    ctx.filter = `url(#jagged-edge-filter)`; 
    ctx.drawImage(maskCanvas, 0, 0);
}

2. 16方向円形オフセットによる「均一なフチ取り」

歪んだ境界線に対して「白いフチ」を付ける際、通常の strokeText や lineWidth では、複雑なノイズ境界において線の太さが不安定になる課題がありました。

そこで、本ツールでは計算幾何学的なアプローチを採用しています。歪ませた後のシルエット画像を、**円状に16分割した各方向へわずかにずらして重ね書き**することで、どんなに複雑なギザギザに対しても、設定したピクセル数通りの均一な太さのフチを生成しています。これにより、アナログな質感を保ちつつ、視覚的な一貫性を担保しています。

// 16方向オフセットによる縁取りアルゴリズム
function drawBorder(ctx, silhouetteCanvas, width) {
    const steps = // チューニングされた分割数;
    
    ctx.globalCompositeOperation = 'source-over';
    for (let i = 0; i < steps; i++) {
        // ここに円周上の座標（cos, sin）に基づくオフセット計算が入ります
        const dx = Math.cos(angle) * width;
        const dy = Math.sin(angle) * width;
        
        ctx.drawImage(silhouetteCanvas, dx, dy);
    }
}

3. Procedural Noise による紙質テクスチャの合成

切り抜いた画像に「印刷された紙」のような手触り感を与えるため、実行時に256x256ピクセルのノイズテクスチャをJavaScriptで動的に生成し、CanvasPattern として利用しています。

このパターンを `source-atop` で切り抜き領域だけに重ね、さらに温かみのあるセピア系のカラーレイヤーを特定のアルファ値でオーバーレイすることで、単なる写真の切り抜きを「古い雑誌から切り出した素材」へと変貌させています。

// 紙の質感をシミュレートするテクスチャ生成
function generatePaperPattern() {
    // 256pxのパターンのピクセルを走査してノイズを生成
    for(let i = 0; i < data.length; i += 4) {
        const noise = Math.random() * // 独自のチューニング値;
        // ...RGB値を計算
        data[i + 3] = // 透明度の最適化;
    }
    return ctx.createPattern(noiseCanvas, 'repeat');
}

Developer's Note

このツールで最もこだわったのは、AIという「最先端の技術」を使って、いかに「アナログでレトロな体験」を作るかというコントラストです。MediaPipeによる人物検知は驚くほど正確ですが、そのままではコラージュとしては「綺麗すぎ」ました。

SVGフィルタのパラメータ調整には数日を費やし、スマホの小さな画面で見ても「あ、これハサミで切ったやつだ」と直感的に伝わる歪み具合を追求しました。また、重い画像処理をブラウザで行うため、オフスクリーンCanvasを活用してメモリ消費を抑え、iPhoneなどのモバイル環境でもストレスなくギザギザが動くパフォーマンスを実現しています。