From 39a9931cbfc690807bbfb8cbf436db96e163516b Mon Sep 17 00:00:00 2001 From: Andrey Sidorov Date: Fri, 6 Nov 2015 13:57:39 +1100 Subject: [PATCH] add example for AddTraps, SetPictureTransform and SetPictureFilter --- examples/smoketest/blur-convolution.js | 51 ++++++++++++++++++++ examples/smoketest/trapezoids.js | 64 +++++++++++++++++++++++--- 2 files changed, 108 insertions(+), 7 deletions(-) create mode 100644 examples/smoketest/blur-convolution.js diff --git a/examples/smoketest/blur-convolution.js b/examples/smoketest/blur-convolution.js new file mode 100644 index 0000000..7d85089 --- /dev/null +++ b/examples/smoketest/blur-convolution.js @@ -0,0 +1,51 @@ +// the code is taken from https://github.com/mattlockyer/iat455/blob/6493c882f1956703133c1bffa1d7ee9a83741cbe/assignment1/assignment/effects/blur-effect-dyn.js +// (c) Matt Lockyer, https://github.com/mattlockyer + +function hypotenuse(x1, y1, x2, y2) { + var xSquare = Math.pow(x1 - x2, 2); + var ySquare = Math.pow(y1 - y2, 2); + return Math.sqrt(xSquare + ySquare); +} + +/* + * Generates a kernel used for the gaussian blur effect. + * + * @param dimension is an odd integer + * @param sigma is the standard deviation used for our gaussian function. + * + * @returns an array with dimension^2 number of numbers, all less than or equal + * to 1. Represents our gaussian blur kernel. + */ +function generateGaussianKernel(dimension, sigma) { + if (!(dimension % 2) || Math.floor(dimension) !== dimension || dimension<3) { + throw new Error( + 'The dimension must be an odd integer greater than or equal to 3' + ); + } + var kernel = []; + + var twoSigmaSquare = 2 * sigma * sigma; + var centre = (dimension - 1) / 2; + + for (var i = 0; i < dimension; i++) { + for (var j = 0; j < dimension; j++) { + var distance = hypotenuse(i, j, centre, centre); + + // The following is an algorithm that came from the gaussian blur + // wikipedia page [1]. + // + // http://en.wikipedia.org/w/index.php?title=Gaussian_blur&oldid=608793634#Mechanics + var gaussian = (1 / Math.sqrt( + Math.PI * twoSigmaSquare + )) * Math.exp((-1) * (Math.pow(distance, 2) / twoSigmaSquare)); + + kernel.push(gaussian); + } + } + + // Returns the unit vector of the kernel array. + var sum = kernel.reduce(function (c, p) { return c + p; }); + return kernel.map(function (e) { return e / sum; }); +} + +module.exports = generateGaussianKernel; diff --git a/examples/smoketest/trapezoids.js b/examples/smoketest/trapezoids.js index 42be062..7361629 100644 --- a/examples/smoketest/trapezoids.js +++ b/examples/smoketest/trapezoids.js @@ -1,9 +1,13 @@ +var _ = require('underscore'); var x11 = require('../../lib'); var Exposure = x11.eventMask.Exposure; var PointerMotion = x11.eventMask.PointerMotion; +var ButtonPress = x11.eventMask.ButtonPress; var draw; +var useConvo3 = true; + x11.createClient({ debug: true}, function(err, display) { var X = display.client; @@ -15,7 +19,7 @@ x11.createClient({ debug: true}, function(err, display) { 0, 0, 800, 600, 0, 0, 0, 0, { - eventMask: Exposure|PointerMotion + eventMask: Exposure|PointerMotion|ButtonPress } ); X.MapWindow(wid); @@ -23,6 +27,8 @@ x11.createClient({ debug: true}, function(err, display) { X.require('render', function(err, Render) { + Render.QueryFilters(console.log); + var pixMask = X.AllocID(); X.CreatePixmap(pixMask, wid, 8, 600, 600); var pictTraps = X.AllocID(); @@ -35,13 +41,44 @@ x11.createClient({ debug: true}, function(err, display) { r = 0.2; g = 0.2; b = 0.2; a = 1; Render.CreateSolidFill(pictSolid, r, g, b, a); - draw = function(x, y) { - var r, g, b, a; + var pixBuff = X.AllocID(); + X.CreatePixmap(pixBuff, wid, 24, 600, 600); + var pictBuff = X.AllocID(); + Render.CreatePicture(pictBuff, pixBuff, Render.rgb24); + + var convo5 = [ 5, 5, 0.0030, 0.0133, 0.0219, 0.0133, 0.0030, + 0.0133, 0.0596, 0.0983, 0.0596, 0.0133, + 0.0219, 0.0983, 0.1621, 0.0983, 0.0219, + 0.0133, 0.0596, 0.0983, 0.0596, 0.0133, + 0.0030, 0.0133, 0.0219, 0.0133, 0.0030]; + var convo3 = [3, 3, 0.01, 0.08, 0.01, 0.08, 0.64, 0.08, 0.01, 0.08, 0.01]; + + var convo5 = [21, 21].concat(require('./blur-convolution')(21, 11)); + + //Render.SetPictureFilter(pictBuff, 'convolution', convo3); + //Render.SetPictureFilter(pictTraps, 'convolution', convo3); + //Render.SetPictureFilter(pictBuff, 'bilinear', []); + Render.SetPictureFilter(pictBuff, 'best', []); + + draw1 = function(x, y) { + console.log('draw 1', x, y); + var r = 3 + 2*Math.floor(x / 100); + var convo = [r, r].concat(require('./blur-convolution')(r, r)); + Render.SetPictureFilter(pictBuff, 'convolution', convo); + + var a = (x-400)/500; + var m = [ + Math.cos(a), Math.sin(a), 0, + -Math.sin(a), Math.cos(a), 0, + 0, 0, 1 + ]; + // Render.SetPictureTransform(pictTraps, m) + + var r, g, b; // fill window - //r = x/1000; g = x/1000; b = x/1000; a = 0.5; r = 1; g = 1; b = 1; a = 0.5; - Render.FillRectangles(1, pictWin, [r, g, b, a], [0, 0, 1000, 1000]) + Render.FillRectangles(1, pictBuff, [r, g, b, a], [0, 0, 1000, 1000]) // fill traps r = 0; g = 0; b = 0; a = 0; @@ -60,16 +97,29 @@ x11.createClient({ debug: true}, function(err, display) { //Render.Composite(Render.PictOp.Over, pictSolid, pictTraps, pictWin, 0, 0, 0, 0, 0, 0, 800, 600); //Render.PictOp.Over - Render.Composite(Render.PictOp.Over, pictSolid, pictTraps, pictWin, 0, 0, 0, 0, 0, 0, 800, 600); + Render.Composite(Render.PictOp.Over, pictSolid, pictTraps, pictBuff, 0, 0, 0, 0, 0, 0, 800, 600); + Render.Composite(Render.PictOp.Over, pictBuff, 0, pictWin, 0, 0, 0, 0, 0, 0, 800, 600); + + }; + + draw = function(x, y) { + var f = _.debounce(function() { + draw1(x, y); + }, 100); + f(); }; }); }).on('error', function(err) { - //console.log(err); + console.log(err); }).on('event', function(ev) { //console.log(ev); if (ev.name == 'MotionNotify') { draw(ev.x, ev.y); + } else if (ev.name == 'ButtonPress') { + useConvo3 = !useConvo3; + draw(ev.x, ev.y); + //console.log(ev); } });