topical media & game development

topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
mobile-graphic-easel-examples-Filters.htm / htm

  <!DOCTYPE html>
  <html>
  <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title>EaselJS Example: Filters test file.</title>
  
          <link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
  
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-UID.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Matrix2D.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-EventDispatcher.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DisplayObject.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Container.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Stage.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-MouseEvent.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Bitmap.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Rectangle.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-Filter.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-BoxBlurFilter.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-ColorFilter.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-ColorMatrixFilter.js"></script>
  
          <!-- We also provide hosted minified versions of all CreateJS libraries.
            http://code.createjs.com -->
  
          <script>
          var img;
  
          function init() {
                  //wait for the image to load
                  img = new Image();
                  img.onload = handleImageLoad;
                  img.src = "mobile-graphic-easel-examples-assets-photo.jpg";
          }
  
          function handleImageLoad() {
                  //find canvas and load images, wait for last image to load
                  var canvas = document.getElementById("testCanvas");
  
                  // create a new stage and point it at our canvas:
                  stage = new createjs.Stage(canvas);
  
                  var bmp = new createjs.Bitmap(img);
                  bmp.x = (canvas.width-2*img.width)/3;
                  bmp.y = (canvas.height-2*img.height)/3;
                  stage.addChild(bmp);
  
                  var blurFilter = new createjs.BoxBlurFilter(32, 2, 2);
                  var margins = blurFilter.getBounds();
                  bmp = bmp.clone();
                  bmp.filters = [blurFilter];
                  // filters are only displayed when the display object is cached
                  // later, you can call updateCache() to update changes to your filters
                  bmp.cache(margins.x,margins.y,img.width+margins.width,img.height+margins.height);
                  bmp.x += bmp.x+img.width;
                  stage.addChild(bmp);
  
                  var greyScaleFilter = new createjs.ColorMatrixFilter([
                          0.33,0.33,0.33,0,0, // red
                          0.33,0.33,0.33,0,0, // green
                          0.33,0.33,0.33,0,0, // blue
                          0,0,0,1,0  // alpha
                  ]);
                  bmp = bmp.clone();
                  bmp.filters = [greyScaleFilter];
                  bmp.cache(0,0,img.width,img.height); // color filters don't change the bounds.
                  bmp.y += bmp.y+img.height;
                  stage.addChild(bmp);
  
                  var removeRedFilter = new createjs.ColorFilter(0,1,1,1); // red, green, blue, alpha
                  bmp = bmp.clone();
                  bmp.filters = [removeRedFilter];
                  bmp.cache(0,0,img.width,img.height); // color filters don't change the bounds.
                  bmp.x = (canvas.width-2*img.width)/3;
                  stage.addChild(bmp);
  
                  // draw to the canvas:
                  stage.update();
          }
  
          </script>
  </head>
          
  <body onload="init();">
          <header id="header" class="EaselJS">
              <h1><span class="text-product">Easel<strong>JS</strong></span> Filters</h1>
              <p>Demonstrates using filters. Top-left: original. Top-right: <strong>BoxBlurFilter</strong>. Bottom-left: <strong>ColorFilter</strong>. Bottom-right: <strong>ColorMatrixFilter</strong>.</p>
          </header>
  
          <div class="canvasHolder">
                  <canvas id="testCanvas" width="960" height="400"></canvas>
          </div>
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
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.