image-matrix-transform.html

<!DOCTYPE html>
<html>
<head>
    <title>Image Matrix Color Transformer (4x4)</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.27.1/plotly.min.js"></script>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .matrix-input {
            display: grid;
            grid-template-columns: repeat(4, 80px);
            gap: 5px;
            margin: 20px 0;
        }
        .matrix-input input {
            width: 70px;
            padding: 5px;
            text-align: center;
        }
        .images-and-plot {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 20px;
        }
        .images {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        canvas {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 10px 0;
        }
        button:hover {
            background: #0056b3;
        }
        label {
            display: block;
            margin-bottom: 10px;
        }
        .preset-buttons {
            margin: 20px 0;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        #gamutPlot {
            height: 600px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Image Matrix Color Transformer (4x4)</h1>
        
        <label for="imageInput">Select an image:</label>
        <input type="file" id="imageInput" accept="image/*">
        
        <h3>Transformation Matrix (4x4)</h3>
        <div class="matrix-input">
            <input type="number" value="1" step="0.1">
            <input type="number" value="0" step="0.1">
            <input type="number" value="0" step="0.1">
            <input type="number" value="0" step="0.1">
            
            <input type="number" value="0" step="0.1">
            <input type="number" value="1" step="0.1">
            <input type="number" value="0" step="0.1">
            <input type="number" value="0" step="0.1">
            
            <input type="number" value="0" step="0.1">
            <input type="number" value="0" step="0.1">
            <input type="number" value="1" step="0.1">
            <input type="number" value="0" step="0.1">
            
            <input type="number" value="0" step="0.1">
            <input type="number" value="0" step="0.1">
            <input type="number" value="0" step="0.1">
            <input type="number" value="1" step="0.1">
        </div>

        <div class="preset-buttons">
            <button onclick="setIdentityMatrix()">Identity</button>
            <button onclick="setGrayscaleMatrix()">Grayscale</button>
            <button onclick="setSepiaMatrix()">Sepia</button>
            <button onclick="setInvertMatrix()">Invert</button>
        </div>

        <div class="images-and-plot">
            <div class="images">
                <div>
                    <h3>Original Image</h3>
                    <canvas id="originalCanvas"></canvas>
                </div>
                <div>
                    <h3>Transformed Image</h3>
                    <canvas id="transformedCanvas"></canvas>
                </div>
            </div>
            <div>
                <h3>Color Gamut Visualization</h3>
                <div id="gamutPlot"></div>
            </div>
        </div>
    </div>

    <script>
        let originalImage = null;
        const imageInput = document.getElementById('imageInput');
        const originalCanvas = document.getElementById('originalCanvas');
        const transformedCanvas = document.getElementById('transformedCanvas');
        const originalCtx = originalCanvas.getContext('2d');
        const transformedCtx = transformedCanvas.getContext('2d');

        // Add input event listeners for real-time updates
        document.querySelectorAll('.matrix-input input').forEach(input => {
            input.addEventListener('input', () => {
                applyTransformation();
            });
        });

        function setIdentityMatrix() {
            const values = [
                1, 0, 0, 0,
                0, 1, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 1
            ];
            setMatrixValues(values);
        }

        function setGrayscaleMatrix() {
            const values = [
                0.299, 0.587, 0.114, 0,
                0.299, 0.587, 0.114, 0,
                0.299, 0.587, 0.114, 0,
                0, 0, 0, 1
            ];
            setMatrixValues(values);
        }

        function setSepiaMatrix() {
            const values = [
                0.393, 0.769, 0.189, 0,
                0.349, 0.686, 0.168, 0,
                0.272, 0.534, 0.131, 0,
                0, 0, 0, 1
            ];
            setMatrixValues(values);
        }

        function setInvertMatrix() {
            const values = [
                -1, 0, 0, 255,
                0, -1, 0, 255,
                0, 0, -1, 255,
                0, 0, 0, 1
            ];
            setMatrixValues(values);
        }

        function setMatrixValues(values) {
            const inputs = document.querySelectorAll('.matrix-input input');
            inputs.forEach((input, i) => {
                input.value = values[i];
            });
            applyTransformation();
        }

        function sampleColors(imageData) {
            const pixels = imageData.data;
            const sampledColors = new Set();
            const originalColors = [];
            const transformedColors = [];
            const matrix = getTransformationMatrix();

            // Sample colors from the image
            for (let i = 0; i < pixels.length; i += 4) {
                const r = pixels[i];
                const g = pixels[i + 1];
                const b = pixels[i + 2];
                
                // Create a color key to ensure uniqueness
                const colorKey = `${r},${g},${b}`;
                
                if (!sampledColors.has(colorKey)) {
                    sampledColors.add(colorKey);
                    originalColors.push([r, g, b]);
                    
                    // Calculate transformed color
                    const transformed = transformPixel(r, g, b, 255, matrix);
                    transformedColors.push([transformed.r, transformed.g, transformed.b]);
                }
            }

            return { originalColors, transformedColors };
        }

        function updateGamutPlot(imageData) {
            const { originalColors, transformedColors } = sampleColors(imageData);

            const originalTrace = {
                type: 'scatter3d',
                mode: 'markers',
                name: 'Original',
                x: originalColors.map(c => c[0]),
                y: originalColors.map(c => c[1]),
                z: originalColors.map(c => c[2]),
                marker: {
                    size: 3,
                    color: originalColors.map(c => `rgb(${c[0]},${c[1]},${c[2]})`),
                    opacity: 0.7
                }
            };

            const transformedTrace = {
                type: 'scatter3d',
                mode: 'markers',
                name: 'Transformed',
                x: transformedColors.map(c => c[0]),
                y: transformedColors.map(c => c[1]),
                z: transformedColors.map(c => c[2]),
                marker: {
                    size: 3,
                    color: transformedColors.map(c => `rgb(${c[0]},${c[1]},${c[2]})`),
                    opacity: 0.7
                }
            };

            const layout = {
                margin: { l: 0, r: 0, b: 0, t: 0 },
                scene: {
                    xaxis: { title: 'R', range: [0, 255] },
                    yaxis: { title: 'G', range: [0, 255] },
                    zaxis: { title: 'B', range: [0, 255] }
                }
            };

            Plotly.newPlot('gamutPlot', [originalTrace, transformedTrace], layout);
        }

        imageInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    originalImage = new Image();
                    originalImage.onload = function() {
                        // Set canvas sizes
                        originalCanvas.width = originalImage.width;
                        originalCanvas.height = originalImage.height;
                        transformedCanvas.width = originalImage.width;
                        transformedCanvas.height = originalImage.height;
                        
                        // Draw original image
                        originalCtx.drawImage(originalImage, 0, 0);
                        // Apply initial transformation
                        applyTransformation();
                    };
                    originalImage.src = event.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        function getTransformationMatrix() {
            const inputs = document.querySelectorAll('.matrix-input input');
            const matrix = [];
            for (let i = 0; i < 16; i += 4) {
                matrix.push([
                    parseFloat(inputs[i].value),
                    parseFloat(inputs[i + 1].value),
                    parseFloat(inputs[i + 2].value),
                    parseFloat(inputs[i + 3].value)
                ]);
            }
            return matrix;
        }

        function transformPixel(r, g, b, a, matrix) {
            // Apply 4x4 matrix transformation
            const newR = matrix[0][0] * r + matrix[0][1] * g + matrix[0][2] * b + matrix[0][3] * 1;
            const newG = matrix[1][0] * r + matrix[1][1] * g + matrix[1][2] * b + matrix[1][3] * 1;
            const newB = matrix[2][0] * r + matrix[2][1] * g + matrix[2][2] * b + matrix[2][3] * 1;
            const newA = matrix[3][0] * r + matrix[3][1] * g + matrix[3][2] * b + matrix[3][3] * a;

            // Clamp values between 0 and 255
            return {
                r: Math.min(255, Math.max(0, newR)),
                g: Math.min(255, Math.max(0, newG)),
                b: Math.min(255, Math.max(0, newB)),
                a: Math.min(255, Math.max(0, newA))
            };
        }

        function applyTransformation() {
            if (!originalImage) {
                alert('Please select an image first!');
                return;
            }

            const matrix = getTransformationMatrix();
            
            // Get image data
            const imageData = originalCtx.getImageData(0, 0, originalCanvas.width, originalCanvas.height);
            const pixels = imageData.data;
            
            // Create new image data for transformed image
            const transformedImageData = new ImageData(
                new Uint8ClampedArray(pixels.length),
                originalCanvas.width,
                originalCanvas.height
            );
            
            // Apply transformation to each pixel
            for (let i = 0; i < pixels.length; i += 4) {
                const transformed = transformPixel(
                    pixels[i],
                    pixels[i + 1],
                    pixels[i + 2],
                    pixels[i + 3],
                    matrix
                );
                
                transformedImageData.data[i] = transformed.r;
                transformedImageData.data[i + 1] = transformed.g;
                transformedImageData.data[i + 2] = transformed.b;
                transformedImageData.data[i + 3] = transformed.a;
            }
            
            // Draw transformed image
            transformedCtx.putImageData(transformedImageData, 0, 0);

            // Update the gamut plot
            updateGamutPlot(imageData);
        }
    </script>
</body>
</html>