topical media & game development

talk show tell print

graphic-canvas-util-pixastic-actions-glow.js / js



  /*
   * Pixastic Lib - Glow - v0.1.0
   * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
   * MIT License [http://www.opensource.org/licenses/mit-license.php]
   */
  
  Pixastic.Actions.glow = {
          process : function(params) {
  
                  var amount = (parseFloat(params.options.amount)||0);
                  var blurAmount = parseFloat(params.options.radius)||0;
  
                  amount = Math.min(1,Math.max(0,amount));
                  blurAmount = Math.min(5,Math.max(0,blurAmount));
  
                  if (Pixastic.Client.hasCanvasImageData()) {
                          var rect = params.options.rect;
  
                          var blurCanvas = document.createElement("canvas");
                          blurCanvas.width = params.width;
                          blurCanvas.height = params.height;
                          var blurCtx = blurCanvas.getContext("2d");
                          blurCtx.drawImage(params.canvas,0,0);
  
                          var scale = 2;
                          var smallWidth = Math.round(params.width / scale);
                          var smallHeight = Math.round(params.height / scale);
  
                          var copy = document.createElement("canvas");
                          copy.width = smallWidth;
                          copy.height = smallHeight;
  
                          var clear = true;
                          var steps = Math.round(blurAmount * 20);
  
                          var copyCtx = copy.getContext("2d");
                          for (var i=0;i<steps;i++) {
                                  var scaledWidth = Math.max(1,Math.round(smallWidth - i));
                                  var scaledHeight = Math.max(1,Math.round(smallHeight - i));
          
                                  copyCtx.clearRect(0,0,smallWidth,smallHeight);
          
                                  copyCtx.drawImage(
                                          blurCanvas,
                                          0,0,params.width,params.height,
                                          0,0,scaledWidth,scaledHeight
                                  );
          
                                  blurCtx.clearRect(0,0,params.width,params.height);
          
                                  blurCtx.drawImage(
                                          copy,
                                          0,0,scaledWidth,scaledHeight,
                                          0,0,params.width,params.height
                                  );
                          }
  
                          var data = Pixastic.prepareData(params);
                          var blurData = Pixastic.prepareData({canvas:blurCanvas,options:params.options});
                          var w = rect.width;
                          var h = rect.height;
                          var w4 = w*4;
                          var y = h;
                          do {
                                  var offsetY = (y-1)*w4;
                                  var x = w;
                                  do {
                                          var offset = offsetY + (x*4-4);
  
                                          var r = data[offset] + amount * blurData[offset];
                                          var g = data[offset+1] + amount * blurData[offset+1];
                                          var b = data[offset+2] + amount * blurData[offset+2];
          
                                          if (r > 255) r = 255;
                                          if (g > 255) g = 255;
                                          if (b > 255) b = 255;
                                          if (r < 0) r = 0;
                                          if (g < 0) g = 0;
                                          if (b < 0) b = 0;
  
                                          data[offset] = r;
                                          data[offset+1] = g;
                                          data[offset+2] = b;
  
                                  } while (--x);
                          } while (--y);
  
                          return true;
                  }
          },
          checkSupport : function() {
                  return Pixastic.Client.hasCanvasImageData();
          }
  }
  
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.