add example for AddTraps, SetPictureTransform and SetPictureFilter

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;

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);
     }
 });