Playing with JavaScript, photos and 3D LUTS (lookup tables)

Talking about Javascript.

Today I am showing you an experiment I made by messing around with JavaScript, photos and 3D lookup tables. First: what is a 3D lookup table? From Wikipedia: In the film industry, 3D lookup tables (3D LUTs) are used to map one color space to another. They are commonly used to calculate preview colors for a monitor or digital projector of how an image will be reproduced on another display device, typically the final digitally projected image or release print of a movie. Long story short, a 3D lookup table can be used to process the colors of your photos – or movies – just like Instagram does. Source image is processed pixel by pixel and the color of each pixel is changed according to the lookup table (LUT from now on), and that’s it. A LUT can be a series of numbers of a PNG image, usually made by 512×512 divided in blocks of 64×64 pixels, like this one: And can make you modify your photos this way, on the fly, only with JavaScript: I found this simple script on GitHub and modified a bit to create the result you can see at this page. The source code is also very easy to understand: 
<html>
    <head>
    </head>
    <body>
        <div style = "text-align:center">
            <p>This image...</p>
            <canvas id = "imageCanvas" width="640" height="480" style = "border:2px solid black"></canvas>
        </div>
        <div style = "text-align:center">
            <p>...with this lookup table...</p>
            <canvas id="lutCanvas" width="512" height="512" style = "border:2px solid black"></canvas>
        </div>
        <div style = "text-align:center">
            <p>... gives this result!</p>
            <canvas id="resultCanvas" width="640" height="480" style = "border:2px solid black"></canvas>
        </div>
        <script>
            var imagesLoaded = 0;

            function URLToCanvas(url, id){
                var theCanvas = document.getElementById(id);
                var context = theCanvas.getContext("2d");
                var img = new Image;
                img.src = url;
                img.onload = function(){
                    context.drawImage(img, 0, 0);
                    imagesLoaded ++;
                    if(imagesLoaded == 2){
                        applyLUT("imageCanvas", "lutCanvas", "resultCanvas");
                    }
                }
            }

            URLToCanvas("car.png", "imageCanvas");
            URLToCanvas("lut.png", "lutCanvas");

            function applyLUT(imageID, lutID, resultID) {
                var imageContext = document.getElementById(imageID).getContext("2d");
                var lutContext = document.getElementById(lutID).getContext("2d");
                var imageData = imageContext.getImageData(0, 0, 640, 480);
                var lutData = lutContext.getImageData(0, 0, 512, 512);
                for (var i = 0; i < imageData.data.length; i += 4) {
                    var r = Math.floor(imageData.data[i] / 4);
                    var g = Math.floor(imageData.data[i + 1] / 4);
                    var b = Math.floor(imageData.data[i + 2] / 4);
                    var lutX = (b % 8) * 64 + r;
                    var lutY = Math.floor(b / 8) * 64 + g;
                    var lutIndex = (lutY * 512 + lutX) * 4;
                    imageData.data[i] = lutData.data[lutIndex];
                    imageData.data[i + 1] = lutData.data[lutIndex + 1];;
                    imageData.data[i + 2] = lutData.data[lutIndex + 2];;
                }
                document.getElementById(resultID).getContext("2d").putImageData(imageData, 0, 0);
            }
        </script>
    </body>
</html>
And as you can imagine, the most difficult part is not applying a LUT, it’s creating a LUT which turns your photos into something interesting. This was only an experiment, but it would be interesting to do something a bit more complex with a HTML5 engine, still playing with it, you can download the source code of the example and play on your own.