feat: K-meansクラスタリングによる高品質な色量子化を実装

- K-means++初期化による最適な初期重心選択
- 10回反復のK-meansアルゴリズム実装
- サンプリングによるパフォーマンス最適化（最大10000ピクセル）
- 画像の色分布に基づいた自然な代表色選択

参考: https://zenn.dev/3w36zj6/articles/a1bd35a3c867a8

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ayutaz

src/js/app-v3.js

@@ -659,23 +659,134 @@
         quantizeColors(canvas, colorCount) {
             const ctx = canvas.getContext('2d');
             const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-            const data = imageData.data;
-            const factor = 256 / Math.cbrt(colorCount);
 
-            for (let i = 0; i < data.length; i += 4) {
-                data[i] = Math.round(data[i] / factor) * factor;
-                data[i + 1] = Math.round(data[i + 1] / factor) * factor;
-                data[i + 2] = Math.round(data[i + 2] / factor) * factor;
-            }
+            // Use K-means clustering for better color selection
+            const palette = this.kMeansClustering(imageData, colorCount);
+            const quantizedData = this.applyPaletteToImageData(imageData, palette);
 
             const resultCanvas = document.createElement('canvas');
             resultCanvas.width = canvas.width;
             resultCanvas.height = canvas.height;
             const resultCtx = resultCanvas.getContext('2d');
-            resultCtx.putImageData(imageData, 0, 0);
+            resultCtx.putImageData(quantizedData, 0, 0);
 
             return resultCanvas;
         }
+        
+        kMeansClustering(imageData, k) {
+            const data = imageData.data;
+            const pixels = [];
+            
+            // Extract unique pixels (sample for performance)
+            const step = Math.max(1, Math.floor(data.length / (4 * 10000))); // Sample up to 10000 pixels
+            for (let i = 0; i < data.length; i += 4 * step) {
+                pixels.push([data[i], data[i + 1], data[i + 2]]);
+            }
+            
+            // Initialize centroids using K-means++ method
+            const centroids = this.initializeCentroidsKMeansPlusPlus(pixels, k);
+            
+            // K-means iterations
+            const maxIterations = 10;
+            for (let iter = 0; iter < maxIterations; iter++) {
+                // Assign pixels to clusters
+                const clusters = Array(k).fill(null).map(() => []);
+                
+                for (const pixel of pixels) {
+                    let minDist = Infinity;
+                    let bestCluster = 0;
+                    
+                    for (let j = 0; j < k; j++) {
+                        const dist = this.colorDistanceSquared(pixel, centroids[j]);
+                        if (dist < minDist) {
+                            minDist = dist;
+                            bestCluster = j;
+                        }
+                    }
+                    
+                    clusters[bestCluster].push(pixel);
+                }
+                
+                // Update centroids
+                let converged = true;
+                for (let j = 0; j < k; j++) {
+                    if (clusters[j].length > 0) {
+                        const newCentroid = [
+                            Math.round(clusters[j].reduce((sum, p) => sum + p[0], 0) / clusters[j].length),
+                            Math.round(clusters[j].reduce((sum, p) => sum + p[1], 0) / clusters[j].length),
+                            Math.round(clusters[j].reduce((sum, p) => sum + p[2], 0) / clusters[j].length)
+                        ];
+                        
+                        if (this.colorDistanceSquared(centroids[j], newCentroid) > 1) {
+                            converged = false;
+                        }
+                        
+                        centroids[j] = newCentroid;
+                    }
+                }
+                
+                if (converged) break;
+            }
+            
+            return centroids;
+        }
+        
+        initializeCentroidsKMeansPlusPlus(pixels, k) {
+            const centroids = [];
+            
+            // Choose first centroid randomly
+            centroids.push([...pixels[Math.floor(Math.random() * pixels.length)]]);
+            
+            // Choose remaining centroids
+            for (let i = 1; i < k; i++) {
+                const distances = pixels.map(pixel => {
+                    let minDist = Infinity;
+                    for (const centroid of centroids) {
+                        const dist = this.colorDistanceSquared(pixel, centroid);
+                        if (dist < minDist) {
+                            minDist = dist;
+                        }
+                    }
+                    return minDist;
+                });
+                
+                // Choose pixel with probability proportional to squared distance
+                const totalDist = distances.reduce((sum, d) => sum + d, 0);
+                let random = Math.random() * totalDist;
+                
+                for (let j = 0; j < pixels.length; j++) {
+                    random -= distances[j];
+                    if (random <= 0) {
+                        centroids.push([...pixels[j]]);
+                        break;
+                    }
+                }
+            }
+            
+            return centroids;
+        }
+        
+        colorDistanceSquared(color1, color2) {
+            const dr = color1[0] - color2[0];
+            const dg = color1[1] - color2[1];
+            const db = color1[2] - color2[2];
+            return dr * dr + dg * dg + db * db;
+        }
+        
+        applyPaletteToImageData(imageData, palette) {
+            const data = new Uint8ClampedArray(imageData.data);
+            
+            for (let i = 0; i < data.length; i += 4) {
+                const pixel = [data[i], data[i + 1], data[i + 2]];
+                const nearestColor = this.findNearestColor(pixel, palette);
+                
+                data[i] = nearestColor[0];
+                data[i + 1] = nearestColor[1];
+                data[i + 2] = nearestColor[2];
+            }
+            
+            return new ImageData(data, imageData.width, imageData.height);
+        }
 
         applyDithering(canvas, method, palette) {
             const ctx = canvas.getContext('2d');