topical media & game development

talk show tell print

mobile-query-three-plugins-glfx-examples-index.htm / htm



  <!-- # Integration with glfx.js -->
  <!-- This is a short example to show how to use glfx.js and tQuery together. -->
  
  <!-- ## Init the page -->
  <!doctype html><title>Minimal tQuery Page</title>
  <!-- add dependencies -->
  <script src="../../../build/tquery-bundle.js"></script>
  <script src="./glfx.js"></script>
  <!-- Add a body and add a title -->
  <body style="margin:0;padding:0;overflow:'hidden';"><div id="info" style="z-index: 2">
          Example of interaction with <a href="http://evanw.github.com/glfx.js/">glfx.js</a> post processing library<br/>
          <a href="../../../www/vendor/doccoviewer/#../../../plugins/glfx/examples/" target="_blank">Annotated Source</a>
  </div>
          <script>
          // ## Let's get Started
          
          // init tQuery
          var world        = tQuery.createWorld({
                  renderW        : 320,
                  renderH        : 240
          }).start().addBoilerplate({
                  windowResize        : false
          });
          
          world.tCamera().position.z        = 2;
  
          // add an object
          var object	= tQuery.createTorus().addTo(world);        
  
          
          
          var sourceEl        = world.tRenderer().domElement;
          var canvas        = fx.canvas();
          var texture        = canvas.texture(sourceEl);
  
          canvas.style.position        = "absolute";
          canvas.style.left        = "0";
          canvas.style.top        = "0";
          canvas.style.width        = "100%";
          canvas.style.height        = "100%";
          document.body.appendChild(canvas);
          world.loop().hook(function(){
                  texture.loadContentsOf(sourceEl);
                  canvas.draw(texture)
                          //.swirl(canvas.width/2, canvas.height/2, 100, -2)
                          .ink(0.3)
                          .zoomBlur(canvas.width/2, canvas.height/2, 0.3)
                          //.dotScreen(canvas.width/2, canvas.height/2, 1.1, 3)
                          .vignette(.5, 0.5)
                          //.hexagonalPixelate(canvas.width/2, canvas.height/2, 20)
                          .update();
          });
  </script></body>
  


(C) Æliens 04/09/2009

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.