<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 1</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame(animate);
// create a texture from an image path
var texture = PIXI.VideoTexture.fromUrl("testVideo.mp4");
// create a new Sprite using the texture
var moveSprite = new PIXI.Sprite(texture);
// center the sprites anchor point
moveSprite.anchor.x = 0.5;
moveSprite.anchor.y = 0.5;
// move the sprite to the center of the screen
moveSprite.position.x = window.innerWidth/2;
moveSprite.position.y = window.innerHeight/2;
var colorMatrix = [1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1];
var filter = new PIXI.ColorMatrixFilter();
moveSprite.shader = filter;
moveSprite.width = window.innerWidth;
moveSprite.height = window.innerHeight;
stage.addChild(moveSprite);
count = 0;
function animate() {
requestAnimFrame(animate);
count += 0.1;
colorMatrix[1] = Math.sin(count) * 3;
colorMatrix[2] = Math.cos(count);
colorMatrix[3] = Math.cos(count) * 1.5;
colorMatrix[4] = Math.sin(count / 3) * 2;
colorMatrix[5] = Math.sin(count / 2);
colorMatrix[6] = Math.sin(count / 4);
filter.matrix = colorMatrix;
filter.syncUniforms();
// just for fun, let's rotate mr rabbit a little
// render the stage
renderer.render(stage);
}
</script>
</body>
</html>
