generalized-lut/assets/js/functions.js

function initPage(){
	
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
	
	var surface = new Image();
    var source = new Image();
    var shadow = new Image();
    var spec = new Image();
    
    var result = context.getImageData(0, 0, canvas.width, canvas.height);
    
    surface.onload = function() {
        source.onload = function() {
            shadow.onload = function() {
                spec.onload = function() {
                    makeImage(context, surface, source, shadow, spec);
                }
                spec.src = 'specular0000.jpg';
            }
            shadow.src = 'shadows0000.jpg';
        }
        source.src = 'source1.png';
    };
    surface.src = 'surface0000.png';
    
    var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
    
    function handleImage(e){
        var reader = new FileReader();
        reader.onload = function(event){
            var img = new Image();
            img.onload = function(){
                makeImage(context, surface, img, shadow, spec);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);     
    }
    
    function drawImageScaled(img, context, keepaspect) {
        var canvas = context.canvas;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillStyle = "#ffffff";
        context.fillRect(0, 0, canvas.width, canvas.height);
        if (keepaspect) {
            var hRatio = canvas.width / img.width;
            var vRatio = canvas.height / img.height;
            var ratio = Math.min(hRatio, vRatio);
            var centerShift_x = (canvas.width - img.width*ratio) / 2;
            var centerShift_y = (canvas.height - img.height*ratio) / 2;
            context.drawImage(img, 0, 0, img.width, img.height, centerShift_x, centerShift_y, img.width*ratio, img.height*ratio);
        } else {
            context.drawImage(img, 0, 0, canvas.width, canvas.height);
        }
    }
    
    function applyColorGrading(context, colorLUTObj) {
        var canvas = context.canvas;
        
        var lut = {};
        lut.width = 4096;
        lut.height = 4096;
        
        var img = context.getImageData(0, 0, canvas.width, canvas.height);
        var imgdata = img.data;
        
        canvas.width = lut.width;
        canvas.height = lut.height;
        drawImageScaled(colorLUTObj, context);
        var color = context.getImageData(0, 0, canvas.width, canvas.height);
        var colordata = color.data;
        
        canvas.width = img.width;
        canvas.height = img.height;
        
        for(var i = 0; i < imgdata.length; i += 4) {
            var pixelcoords = pixelcoordsFromLUT(imgdata[i], imgdata[i+1], imgdata[i+2], lut.width);
            var pixelpos = (pixelcoords.x+(pixelcoords.y*lut.width))*4;
            imgdata[i] = colordata[pixelpos];
            imgdata[i+1] = colordata[pixelpos+1];
            imgdata[i+2] = colordata[pixelpos+2];
        }
        
        context.putImageData(img, 0, 0);
    }
    
    function pixelcoordsFromLUT(r, g, b, lutsize) {
        var square = {};
        square.width = square.height = lutsize/16;
        var pixelpos = {};
        pixelpos.x = ((r/256)*square.width)+((b*square.width)%lutsize);
        pixelpos.y = (255-((g/256))*square.height)+(Math.floor(b/(lutsize/square.height))*square.height);
        return pixelpos;
    }
    
    function makeImage(context, surfaceObj, imageObj, shadowObj, specObj) {
        var canvas = context.canvas;
        
        var lut = {};
        lut.width = 4096;
        lut.height = 4096;
        
        canvas.width = shadowObj.width;
        canvas.height = shadowObj.height;
        context.drawImage(shadowObj, 0, 0);
        var shadow = context.getImageData(0, 0, canvas.width, canvas.height);
        var shadowdata = shadow.data;
        
        canvas.width = specObj.width;
        canvas.height = specObj.height;
        context.drawImage(specObj, 0, 0);
        var specular = context.getImageData(0, 0, canvas.width, canvas.height);
        var speculardata = specular.data;
        
        canvas.width = lut.width;
        canvas.height = lut.height;
        drawImageScaled(imageObj, context);
        var image = context.getImageData(0, 0, canvas.width, canvas.height);
        var imagedata = image.data;
        
        canvas.width = surfaceObj.width;
        canvas.height = surfaceObj.height;
        drawImageScaled(surfaceObj, context);
        var surface = context.getImageData(0, 0, canvas.width, canvas.height);
        var surfacedata = surface.data;
        
        result = context.getImageData(0, 0, canvas.width, canvas.height);
        var resultdata = result.data;

        for(var i = 0; i < surfacedata.length; i += 4) {
            resultdata[i] = 255;
            resultdata[i+1] = 255;
            resultdata[i+2] = 255;
            
            if (surfacedata[i]+surfacedata[i+1]+surfacedata[i+2] > 0 && surfacedata[i]+surfacedata[i+1]+surfacedata[i+2]<(3*255)) {
                var pixelcoords = pixelcoordsFromLUT(surfacedata[i], surfacedata[i+1], surfacedata[i+2], lut.width);
                var pixelpos = (pixelcoords.x+(pixelcoords.y*lut.width))*4;
                resultdata[i] = imagedata[pixelpos];
                resultdata[i+1] = imagedata[pixelpos+1];
                resultdata[i+2] = imagedata[pixelpos+2];
            }
            
            resultdata[i] -= 255-shadowdata[i];
            resultdata[i+1] -= 255-shadowdata[i+1];
            resultdata[i+2] -= 255-shadowdata[i+2];
            
            resultdata[i] += speculardata[i];
            resultdata[i+1] += speculardata[i+1];
            resultdata[i+2] += speculardata[i+2];
            
            var imagenoise = Math.round(Math.random()*5);
            
            resultdata[i] += imagenoise;
            resultdata[i+1] += imagenoise;
            resultdata[i+2] += imagenoise;
        }
        
        context.putImageData(result, 0, 0);
        $('#result, #result2, #result3, #result4').attr('src', canvas.toDataURL());
    }
    
    $('img').wrap('<span class="imglabel"></span>');
    $('.imglabel').each(function() {
        $(this).append('<span>'+$(this).find('img').attr('id')+'</span>');
    });
    
    $('.textureselect').click(function(e) {
        e.preventDefault();
        $('.textureselect').removeClass('active');
        $(this).addClass('active');
        var img = new Image();
        img.onload = function(){
            makeImage(context, surface, img, shadow, spec);
        }
        img.src = $(this).attr('href');
    });
    
    $('.calcgrading').click(function(e) {
        e.preventDefault();
        var color = new Image();
        var color2 = new Image();
        var color3 = new Image();
        color.onload = function() {
            context.putImageData(result, 0, 0);
            applyColorGrading(context, color);
            $('#result2').attr('src', canvas.toDataURL());
        }
        color.src = 'colors0000.png';
        color2.onload = function() {
            context.putImageData(result, 0, 0);
            applyColorGrading(context, color2);
            $('#result3').attr('src', canvas.toDataURL());
        }
        color2.src = 'colors0001.png';
        color3.onload = function() {
            context.putImageData(result, 0, 0);
            applyColorGrading(context, color3);
            $('#result4').attr('src', canvas.toDataURL());
        }
        color3.src = 'colors0002.png';
    });

};