From 98a6ce1ddc295ba329093ea1c7b1f72de7c6d66a Mon Sep 17 00:00:00 2001 From: Andres Adjimann Date: Fri, 18 Sep 2015 15:06:40 -0300 Subject: [PATCH 1/3] A demo based on http://www.barbafan.de/html5video?video=tron --- demos/extron.html | 491 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 491 insertions(+) create mode 100644 demos/extron.html diff --git a/demos/extron.html b/demos/extron.html new file mode 100644 index 0000000..35eaf9c --- /dev/null +++ b/demos/extron.html @@ -0,0 +1,491 @@ + + + + + + + + + + + Video + + + + + + + + +
+
+ +
+ +
+ +
+
CSS + +
+ + From 12a70315ff2e8443d82b2f508a4ec7f5fd2ee040 Mon Sep 17 00:00:00 2001 From: Andres Adjimann Date: Fri, 18 Sep 2015 15:16:56 -0300 Subject: [PATCH 2/3] I broke the color option --- demos/extron.html | 414 +++++++++++++++++++++++----------------------- 1 file changed, 207 insertions(+), 207 deletions(-) diff --git a/demos/extron.html b/demos/extron.html index 35eaf9c..6ddb800 100644 --- a/demos/extron.html +++ b/demos/extron.html @@ -72,235 +72,235 @@ }); }; })(jQuery); - $(document).ready(function() { - function videoChange(cssname, cssvalue) { - if(cssname=='-webkit-transform') { - //alert(cssvalue); - $('#output').webkitTransform(cssvalue); - } else { - $('#output').css(cssname,cssvalue); - } + function videoChange(cssname, cssvalue) { + if(cssname=='-webkit-transform') { //alert(cssvalue); - return true; + $('#output').webkitTransform(cssvalue); + } else { + $('#output').css(cssname,cssvalue); } - var toBlackWhitePA = function(inputPA, outputPA, w, h) { - //var A = $.inim.canvasIoFactory(canvas); - //var ctx = A[0]; - var inputData = inputPA.data; - var outputData = outputPA.data; - //var w = input.width; - //var h = input.height; - for (var y = 0; y < h; y += 1) { - for (var x = 0; x < w; x += 1) { - var pixel = (y*w + x)*4; - var factor = ((inputData[pixel] *.3 + inputData[pixel+1]*.59 + inputData[pixel+2]*.11) ); - outputData[pixel] = factor * 1; - outputData[pixel+1] = factor * 1; - outputData[pixel+2] = factor * 1; - outputData[pixel+ 3] = inputData[pixel+ 3]; - } + //alert(cssvalue); + return true; + } + var toBlackWhitePA = function(inputPA, outputPA, w, h) { + //var A = $.inim.canvasIoFactory(canvas); + //var ctx = A[0]; + var inputData = inputPA.data; + var outputData = outputPA.data; + //var w = input.width; + //var h = input.height; + for (var y = 0; y < h; y += 1) { + for (var x = 0; x < w; x += 1) { + var pixel = (y*w + x)*4; + var factor = ((inputData[pixel] *.3 + inputData[pixel+1]*.59 + inputData[pixel+2]*.11) ); + outputData[pixel] = factor * 1; + outputData[pixel+1] = factor * 1; + outputData[pixel+2] = factor * 1; + outputData[pixel+ 3] = inputData[pixel+ 3]; } - return outputPA; } - var toSepiaPA = function(inputPA, outputPA, w, h) { - //var A = $.inim.canvasIoFactory(canvas); - //var ctx = A[0]; - var inputData = inputPA.data; - var outputData = outputPA.data; - //var w = input.width; - //var h = input.height; - var sr; var sg; var sb; - var rr; var rg; var rb; - for (var y = 0; y < h; y += 1) { - for (var x = 0; x < w; x += 1) { - var pixel = (y*w + x)*4; - sr = inputData[pixel]; - sg = inputData[pixel+1]; - sb = inputData[pixel+2]; - rr = (sr * 0.393 + sg * 0.769 + sb * 0.189); - rg = (sr * 0.349 + sg * 0.686 + sb * 0.168); - rb = (sr * 0.272 + sg * 0.534 + sb * 0.131); - if (rr < 0) rr = 0; if (rr > 255) rr = 255; - if (rg < 0) rg = 0; if (rg > 255) rg = 255; - if (rb < 0) rb = 0; if (rb > 255) rb = 255; - outputData[pixel] = Math.round(rr*cr); - outputData[pixel+1] = Math.round(rg*cg); - outputData[pixel+2] = Math.round(rb*cb); - outputData[pixel+ 3] = inputData[pixel+3]; - /* var pixel = (y*w + x)*4; - var factor = ((inputData[pixel] *.3 + inputData[pixel+1]*.59 + inputData[pixel+2]*.11) ); - outputData[pixel] = factor * 1; - outputData[pixel+1] = factor * 1; - outputData[pixel+2] = factor * 1; - outputData[pixel+ 3] = inputData[pixel+ 3];*/ - } + return outputPA; + } + var toSepiaPA = function(inputPA, outputPA, w, h) { + //var A = $.inim.canvasIoFactory(canvas); + //var ctx = A[0]; + var inputData = inputPA.data; + var outputData = outputPA.data; + //var w = input.width; + //var h = input.height; + var sr; var sg; var sb; + var rr; var rg; var rb; + for (var y = 0; y < h; y += 1) { + for (var x = 0; x < w; x += 1) { + var pixel = (y*w + x)*4; + sr = inputData[pixel]; + sg = inputData[pixel+1]; + sb = inputData[pixel+2]; + rr = (sr * 0.393 + sg * 0.769 + sb * 0.189); + rg = (sr * 0.349 + sg * 0.686 + sb * 0.168); + rb = (sr * 0.272 + sg * 0.534 + sb * 0.131); + if (rr < 0) rr = 0; if (rr > 255) rr = 255; + if (rg < 0) rg = 0; if (rg > 255) rg = 255; + if (rb < 0) rb = 0; if (rb > 255) rb = 255; + outputData[pixel] = Math.round(rr*cr); + outputData[pixel+1] = Math.round(rg*cg); + outputData[pixel+2] = Math.round(rb*cb); + outputData[pixel+ 3] = inputData[pixel+3]; + /* var pixel = (y*w + x)*4; + var factor = ((inputData[pixel] *.3 + inputData[pixel+1]*.59 + inputData[pixel+2]*.11) ); + outputData[pixel] = factor * 1; + outputData[pixel+1] = factor * 1; + outputData[pixel+2] = factor * 1; + outputData[pixel+ 3] = inputData[pixel+ 3];*/ } - return outputPA; } - var r = 255; - var g = 255; - var b = 255; - var cr = r/255; + return outputPA; + } + var r = 255; + var g = 255; + var b = 255; + var cr = r/255; + var cg = g/255; + var cb = b/255; + var changeR = function(newr) { r = newr; cr = r / 255; } + var changeG = function(newg) { g = newg; cg = g / 255; } + var changeB = function(newb) { b = newb; cb = b / 255; } + var toInvertPA = function(inputPA, outputPA, w, h) { + var inputData = inputPA.data; + var outputData = outputPA.data; + /*var cr = r/255; var cg = g/255; - var cb = b/255; - var changeR = function(newr) { r = newr; cr = r / 255; } - var changeG = function(newg) { g = newg; cg = g / 255; } - var changeB = function(newb) { b = newb; cb = b / 255; } - var toInvertPA = function(inputPA, outputPA, w, h) { - var inputData = inputPA.data; - var outputData = outputPA.data; - /*var cr = r/255; - var cg = g/255; - var cb = b/255;*/ - for (var y = 1; y < h-1; y += 1) { - for (var x = 1; x < w-1; x += 1) { - var pixel = (y*w + x)*4; - /*for (var c = 0; c < 3; c += 1) { - outputData[pixel+c] = 255 - inputData[pixel+c]; - }*/ - outputData[pixel] = Math.round((255 - inputData[pixel]) * cr); - outputData[pixel+1] = Math.round((255 -inputData[pixel+1]) * cg); - outputData[pixel+2] = Math.round((255 - inputData[pixel+2]) * cb); - outputData[pixel+ 3] = inputData[pixel+ 3]; - } + var cb = b/255;*/ + for (var y = 1; y < h-1; y += 1) { + for (var x = 1; x < w-1; x += 1) { + var pixel = (y*w + x)*4; + /*for (var c = 0; c < 3; c += 1) { + outputData[pixel+c] = 255 - inputData[pixel+c]; + }*/ + outputData[pixel] = Math.round((255 - inputData[pixel]) * cr); + outputData[pixel+1] = Math.round((255 -inputData[pixel+1]) * cg); + outputData[pixel+2] = Math.round((255 - inputData[pixel+2]) * cb); + outputData[pixel+ 3] = inputData[pixel+ 3]; } - return outputPA; } - var toRgbPA = function(inputPA, outputPA, w, h) { - //var A = $.inim.canvasIoFactory(canvas); - //var ctx = A[0]; - var inputData = inputPA.data; - var outputData = outputPA.data; - //var w = input.width; - //var h = input.height; - /*var cr = r/255; - var cg = g/255; - var cb = b/255;*/ - for (var y = 0; y < h; y += 1) { - for (var x = 0; x < w; x += 1) { - var pixel = (y*w + x)*4; - outputData[pixel] = Math.round(inputData[pixel] * cr); - outputData[pixel+1] = Math.round(inputData[pixel+1] * cg); - outputData[pixel+2] = Math.round(inputData[pixel+2] * cb); - outputData[pixel+ 3] = inputData[pixel+ 3]; - } + return outputPA; + } + var toRgbPA = function(inputPA, outputPA, w, h) { + //var A = $.inim.canvasIoFactory(canvas); + //var ctx = A[0]; + var inputData = inputPA.data; + var outputData = outputPA.data; + //var w = input.width; + //var h = input.height; + /*var cr = r/255; + var cg = g/255; + var cb = b/255;*/ + for (var y = 0; y < h; y += 1) { + for (var x = 0; x < w; x += 1) { + var pixel = (y*w + x)*4; + outputData[pixel] = Math.round(inputData[pixel] * cr); + outputData[pixel+1] = Math.round(inputData[pixel+1] * cg); + outputData[pixel+2] = Math.round(inputData[pixel+2] * cb); + outputData[pixel+ 3] = inputData[pixel+ 3]; } - return outputPA; } - var toBWOutlinePA = function(inputPA, outputPA, w, h) { - var inputData = inputPA.data; - var outputData = outputPA.data; - outputData = doEdgeDetectionAlgorithm(inputData,255, 1, outputData,w,h, 8); - var pixel = 0; - for (var y = 0; y < h; ++y) { - for (var x = 0; x < w; ++x) { - if( outputData[pixel] < 240 ) { - outputData[pixel] = 0; - outputData[++pixel] = 0; - outputData[++pixel] = 0; - } else { - outputData[pixel] = 255; - outputData[++pixel] = 255; - outputData[++pixel] = 255; - } + return outputPA; + } + var toBWOutlinePA = function(inputPA, outputPA, w, h) { + var inputData = inputPA.data; + var outputData = outputPA.data; + outputData = doEdgeDetectionAlgorithm(inputData,255, 1, outputData,w,h, 8); + var pixel = 0; + for (var y = 0; y < h; ++y) { + for (var x = 0; x < w; ++x) { + if( outputData[pixel] < 240 ) { + outputData[pixel] = 0; + outputData[++pixel] = 0; + outputData[++pixel] = 0; + } else { + outputData[pixel] = 255; + outputData[++pixel] = 255; outputData[++pixel] = 255; - ++pixel; } + outputData[++pixel] = 255; + ++pixel; } - return outputPA; } - var matrixrange = 7.7; - var toMatrixOutlinePA = function(inputPA, outputPA, w, h) { - var inputData = inputPA.data; - var outputData = outputPA.data; - outputData = doEdgeDetectionAlgorithm(inputData,255, 1, outputData,w,h, matrixrange); - var pixel = 0; - for (var y = 0; y < h; ++y) { - for (var x = 0; x < w; ++x) { - if( outputData[pixel] < 240 ) { - outputData[pixel] = 0; - outputData[++pixel] = 0; - outputData[++pixel] = 0; - } else { - outputData[pixel] = 0; - outputData[++pixel] = 192; - outputData[++pixel] = 0; - } - outputData[++pixel] = 255; - ++pixel; + return outputPA; + } + var matrixrange = 7.7; + var toMatrixOutlinePA = function(inputPA, outputPA, w, h) { + var inputData = inputPA.data; + var outputData = outputPA.data; + outputData = doEdgeDetectionAlgorithm(inputData,255, 1, outputData,w,h, matrixrange); + var pixel = 0; + for (var y = 0; y < h; ++y) { + for (var x = 0; x < w; ++x) { + if( outputData[pixel] < 240 ) { + outputData[pixel] = 0; + outputData[++pixel] = 0; + outputData[++pixel] = 0; + } else { + outputData[pixel] = 0; + outputData[++pixel] = 192; + outputData[++pixel] = 0; } + outputData[++pixel] = 255; + ++pixel; } - return outputPA; } - var doEdgeDetectionAlgorithm = function (inputData, baseColor, grey, outputData, w, h, range) { - if (range == null){range=9} - var bytesPerRow = w * 4; - var pixel = bytesPerRow + 4; // Start at (1,1) - var hm1 = h - 1; - var wm1 = w - 1; - var d = new Date; - for (var y = 1; y < hm1; ++y) { - // Prepare initial cached values for current row - var centerRow = pixel - 4; - var priorRow = centerRow - bytesPerRow; - var nextRow = centerRow + bytesPerRow; - var r1 = - inputData[priorRow] - inputData[centerRow] - inputData[nextRow]; - var g1 = - inputData[++priorRow] - inputData[++centerRow] - inputData[++nextRow]; - var b1 = - inputData[++priorRow] - inputData[++centerRow] - inputData[++nextRow]; - var rp = inputData[priorRow += 2]; - var rc = inputData[centerRow += 2]; - var rn = inputData[nextRow += 2]; - var r2 = - rp - rc - rn; - var gp = inputData[++priorRow]; - var gc = inputData[++centerRow]; - var gn = inputData[++nextRow]; - var g2 = - gp - gc - gn; - var bp = inputData[++priorRow]; - var bc = inputData[++centerRow]; - var bn = inputData[++nextRow]; - var b2 = - bp - bc - bn; - // Main convolution loop - for (var x = 1; x < wm1; ++x) { - centerRow = pixel + 4; - priorRow = centerRow - bytesPerRow; - nextRow = centerRow + bytesPerRow; - var r = baseColor + r1 - rp - (rc * (range*-1)) - rn; - var g = baseColor + g1 - gp - (gc * (range*-1)) - gn; - var b = baseColor + b1 - bp - (bc * (range*-1)) - bn; - r1 = r2; - g1 = g2; - b1 = b2; - rp = inputData[priorRow]; - rc = inputData[centerRow]; - rn = inputData[nextRow]; - r2 = - rp - rc - rn; - gp = inputData[++priorRow]; - gc = inputData[++centerRow]; - gn = inputData[++nextRow]; - g2 = - gp - gc - gn; - bp = inputData[++priorRow]; - bc = inputData[++centerRow]; - bn = inputData[++nextRow]; - b2 = - bp - bc - bn; - if( !grey ) { - outputData[pixel] = r + r2; - outputData[++pixel] = g + g2; - outputData[++pixel] = b + b2; - } else { - factor = .3* (r+r2) + .59*(g+g2) +.11*(b+b2); - outputData[pixel] = factor; - outputData[++pixel] = factor; - outputData[++pixel] = factor; - } - outputData[++pixel] = 255; // alpha - ++pixel; + return outputPA; + } + var doEdgeDetectionAlgorithm = function (inputData, baseColor, grey, outputData, w, h, range) { + if (range == null){range=9} + var bytesPerRow = w * 4; + var pixel = bytesPerRow + 4; // Start at (1,1) + var hm1 = h - 1; + var wm1 = w - 1; + var d = new Date; + for (var y = 1; y < hm1; ++y) { + // Prepare initial cached values for current row + var centerRow = pixel - 4; + var priorRow = centerRow - bytesPerRow; + var nextRow = centerRow + bytesPerRow; + var r1 = - inputData[priorRow] - inputData[centerRow] - inputData[nextRow]; + var g1 = - inputData[++priorRow] - inputData[++centerRow] - inputData[++nextRow]; + var b1 = - inputData[++priorRow] - inputData[++centerRow] - inputData[++nextRow]; + var rp = inputData[priorRow += 2]; + var rc = inputData[centerRow += 2]; + var rn = inputData[nextRow += 2]; + var r2 = - rp - rc - rn; + var gp = inputData[++priorRow]; + var gc = inputData[++centerRow]; + var gn = inputData[++nextRow]; + var g2 = - gp - gc - gn; + var bp = inputData[++priorRow]; + var bc = inputData[++centerRow]; + var bn = inputData[++nextRow]; + var b2 = - bp - bc - bn; + // Main convolution loop + for (var x = 1; x < wm1; ++x) { + centerRow = pixel + 4; + priorRow = centerRow - bytesPerRow; + nextRow = centerRow + bytesPerRow; + var r = baseColor + r1 - rp - (rc * (range*-1)) - rn; + var g = baseColor + g1 - gp - (gc * (range*-1)) - gn; + var b = baseColor + b1 - bp - (bc * (range*-1)) - bn; + r1 = r2; + g1 = g2; + b1 = b2; + rp = inputData[priorRow]; + rc = inputData[centerRow]; + rn = inputData[nextRow]; + r2 = - rp - rc - rn; + gp = inputData[++priorRow]; + gc = inputData[++centerRow]; + gn = inputData[++nextRow]; + g2 = - gp - gc - gn; + bp = inputData[++priorRow]; + bc = inputData[++centerRow]; + bn = inputData[++nextRow]; + b2 = - bp - bc - bn; + if( !grey ) { + outputData[pixel] = r + r2; + outputData[++pixel] = g + g2; + outputData[++pixel] = b + b2; + } else { + factor = .3* (r+r2) + .59*(g+g2) +.11*(b+b2); + outputData[pixel] = factor; + outputData[++pixel] = factor; + outputData[++pixel] = factor; } - pixel += 8; + outputData[++pixel] = 255; // alpha + ++pixel; } - //alert((new Date - d) / 1000); - return outputData; + pixel += 8; } + //alert((new Date - d) / 1000); + return outputData; + } + $(document).ready(function() { var switchi =0; var w = 640; var h = 360; From 339da015f162460c004fc729841e4c4dd16e5566 Mon Sep 17 00:00:00 2001 From: Andres Adjimann Date: Fri, 18 Sep 2015 15:40:19 -0300 Subject: [PATCH 3/3] Better placement. --- demos/extron.html | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/demos/extron.html b/demos/extron.html index 6ddb800..cb5036f 100644 --- a/demos/extron.html +++ b/demos/extron.html @@ -302,10 +302,12 @@ $(document).ready(function() { var switchi =0; - var w = 640; - var h = 360; + var h = $("#my_camera").height(); + var w = $("#my_camera").width(); function play () { + $("#output").height( h ); + $("#output").width( w ); var out = $('#output').get(0); var ot = out.getContext('2d'); try { @@ -451,10 +453,12 @@ -
-
- -
+
+
+
+
+
+