topical media & game development
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.