initial commit

assets/js/functions.js

@@ -0,0 +1,205 @@
+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';
+    });
+
+};