topical media & game development

talk show tell print

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



  /*
   * Pixastic Lib - Pointillize filter - 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.pointillize = {
  
          process : function(params) {
                  var radius = Math.max(1,parseInt(params.options.radius,10));
                  var density = Math.min(5,Math.max(0,parseFloat(params.options.density)||0));
                  var noise = Math.max(0,parseFloat(params.options.noise)||0);
                  var transparent = !!params.options.transparent;
  
                  if (Pixastic.Client.hasCanvasImageData()) {
                          var rect = params.options.rect;
                          var w = rect.width;
                          var h = rect.height;
                          var w4 = w*4;
                          var y = h;
  
                          var ctx = params.canvas.getContext("2d");
  
                          var pixel = document.createElement("canvas");
                          pixel.width = pixel.height = 1;
                          var pixelCtx = pixel.getContext("2d");
  
                          var copy = document.createElement("canvas");
                          copy.width = w;
                          copy.height = h;
                          var copyCtx = copy.getContext("2d");
                          copyCtx.drawImage(params.canvas,rect.left,rect.top,w,h, 0,0,w,h);
  
                          var diameter = radius * 2;
  
                          if (transparent)
                                  ctx.clearRect(rect.left, rect.top, rect.width, rect.height);
  
                          var noiseRadius = radius * noise;
  
                          var dist = 1 / density;
  
                          for (var y=0;y<h+radius;y+=diameter*dist) {
                                  for (var x=0;x<w+radius;x+=diameter*dist) {
                                          rndX = noise ? (x+((Math.random()*2-1) * noiseRadius))>>0 : x;
                                          rndY = noise ? (y+((Math.random()*2-1) * noiseRadius))>>0 : y;
  
                                          var pixX = rndX - radius;
                                          var pixY = rndY - radius;
                                          if (pixX < 0) pixX = 0;
                                          if (pixY < 0) pixY = 0;
  
                                          pixelCtx.drawImage(copy, pixX, pixY, diameter, diameter, 0, 0, 1, 1);
                                          var data = pixelCtx.getImageData(0,0,1,1).data;
                                          ctx.fillStyle = "rgb(" + data[0] + "," + data[1] + "," + data[2] + ")";
                                          ctx.beginPath();
                                          ctx.arc(rect.left + rndX,rect.top + rndY, radius, 0, Math.PI*2, true);
                                          ctx.closePath();
                                          ctx.fill();
                                  }
                          }
  
                          params.useData = false;
  
                          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.