Filter Tweaks
Displacement Map Filter tweaked Demos created
This commit is contained in:
Mat Groves
parent
429851493c
commit
a46b74f8ca
40 changed files with 1809 additions and 756 deletions
|
|
@ -38,7 +38,6 @@
|
|||
|
||||
var graphics = new PIXI.Graphics();
|
||||
|
||||
|
||||
// set a fill and line style
|
||||
graphics.beginFill(0xFF3300);
|
||||
graphics.lineStyle(10, 0xffd900, 1);
|
||||
|
|
|
|||
BIN
examples/example 15 - Filters/displacementMAP.jpg
Normal file
BIN
examples/example 15 - Filters/displacementMAP.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
BIN
examples/example 15 - Filters/displacement_fish3.png
Normal file
BIN
examples/example 15 - Filters/displacement_fish3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
BIN
examples/example 15 - Filters/displacement_map.jpg
Normal file
BIN
examples/example 15 - Filters/displacement_map.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
161
examples/example 15 - Filters/indexAll.html
Normal file
161
examples/example 15 - Filters/indexAll.html
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>pixi.js example 15 - Filters</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../bin/pixi.dev.js"></script>
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
var renderer = PIXI.autoDetectRenderer(630, 410);
|
||||
renderer.view.style.position = "absolute"
|
||||
renderer.view.style.width = window.innerWidth + "px";
|
||||
renderer.view.style.height = window.innerHeight + "px";
|
||||
renderer.view.style.display = "block";
|
||||
|
||||
// add render view to DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0xFFFFFF, true);
|
||||
|
||||
var pondContainer = new PIXI.DisplayObjectContainer();
|
||||
stage.addChild(pondContainer);
|
||||
|
||||
stage.interactive = true;
|
||||
|
||||
var bg = PIXI.Sprite.fromImage("displacement_BG.jpg");
|
||||
pondContainer.addChild(bg);
|
||||
|
||||
//var fish = PIXI.Sprite.fromImage("displacement_fish2.jpg");//
|
||||
//littleDudes.position.y = 100;
|
||||
var padding = 100;
|
||||
var bounds = new PIXI.Rectangle(-padding, -padding, 630 + padding * 2, 410 + padding * 2)
|
||||
var fishs = [];
|
||||
|
||||
|
||||
for (var i = 0; i < 20; i++)
|
||||
{
|
||||
var fishId = i % 4;
|
||||
fishId += 1;
|
||||
|
||||
//console.log("displacement_fish"+fishId+".png")
|
||||
var fish = PIXI.Sprite.fromImage("displacement_fish"+fishId+".png");
|
||||
fish.anchor.x = fish.anchor.y = 0.5;
|
||||
pondContainer.addChild(fish);
|
||||
|
||||
//var direction
|
||||
//var speed =
|
||||
fish.direction = Math.random() * Math.PI * 2;
|
||||
fish.speed = 2 + Math.random() * 2;
|
||||
fish.turnSpeed = Math.random() - 0.8;
|
||||
|
||||
fish.position.x = Math.random() * bounds.width;
|
||||
fish.position.y = Math.random() * bounds.height;
|
||||
//fish.speed = new PIXI.Point(0,0)
|
||||
|
||||
fish.scale.x = fish.scale.y = 0.8 + Math.random() * 0.3;
|
||||
fishs.push(fish);
|
||||
|
||||
};
|
||||
|
||||
var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("zeldaWaves.png"), 630, 410);
|
||||
overlay.alpha = 0.2
|
||||
pondContainer.addChild(overlay);
|
||||
|
||||
|
||||
var displacementTexture = PIXI.Texture.fromImage("displacement_map.jpg");
|
||||
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
|
||||
|
||||
|
||||
pondContainer.filters = [displacementFilter];
|
||||
|
||||
|
||||
|
||||
displacementFilter.scale.x = 50;
|
||||
displacementFilter.scale.y = 50;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var count = 0;
|
||||
var switchy = false;
|
||||
|
||||
/*
|
||||
* Add a pixi Logo!
|
||||
*/
|
||||
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
|
||||
stage.addChild(logo);
|
||||
|
||||
logo.anchor.x = 1;
|
||||
logo.anchor.y = 1;
|
||||
|
||||
logo.position.x = 630
|
||||
logo.scale.x = logo.scale.y = 0.5;
|
||||
logo.position.y = 400;
|
||||
logo.interactive = true;
|
||||
logo.buttonMode = true;
|
||||
|
||||
logo.click = logo.tap = function()
|
||||
{
|
||||
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
|
||||
}
|
||||
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
function animate() {
|
||||
|
||||
count += 0.1;
|
||||
|
||||
var blurAmount = Math.cos(count) ;
|
||||
var blurAmount2 = Math.sin(count * 0.8) ;
|
||||
|
||||
|
||||
|
||||
for (var i = 0; i < fishs.length; i++)
|
||||
{
|
||||
var fish = fishs[i];
|
||||
|
||||
fish.direction += fish.turnSpeed * 0.01;
|
||||
fish.position.x += Math.sin(fish.direction) * fish.speed;
|
||||
fish.position.y += Math.cos(fish.direction) * fish.speed;
|
||||
|
||||
fish.rotation = -fish.direction - Math.PI/2;
|
||||
|
||||
// wrap..
|
||||
|
||||
if(fish.position.x < bounds.x)fish.position.x += bounds.width;
|
||||
if(fish.position.x > bounds.x + bounds.width)fish.position.x -= bounds.width
|
||||
|
||||
if(fish.position.y < bounds.y)fish.position.y += bounds.height;
|
||||
if(fish.position.y > bounds.y + bounds.height)fish.position.y -= bounds.height
|
||||
}
|
||||
|
||||
|
||||
displacementFilter.offset.x = count * 10//blurAmount * 40;
|
||||
displacementFilter.offset.y = count * 10
|
||||
|
||||
overlay.tilePosition.x = count * -10//blurAmount * 40;
|
||||
overlay.tilePosition.y = count * -10
|
||||
|
||||
renderer.render(stage);
|
||||
requestAnimFrame( animate );
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</style>
|
||||
|
||||
<script src="../../bin/pixi.dev.js"></script>
|
||||
<script src="pixi.js"></script>
|
||||
<!--<script src="pixi.js"></script>-->
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
@ -99,8 +99,8 @@
|
|||
var blurAmount2 = Math.sin(count) ;
|
||||
|
||||
|
||||
blurFilter1.blur = 1/300 * (blurAmount);
|
||||
blurFilter2.blur = 1/300 * (blurAmount2);
|
||||
blurFilter1.blur = 20 * (blurAmount);
|
||||
blurFilter2.blur = 20 * (blurAmount2);
|
||||
renderer.render(stage);
|
||||
requestAnimFrame( animate );
|
||||
}
|
||||
|
|
|
|||
161
examples/example 15 - Filters/indexDisplacement.html
Normal file
161
examples/example 15 - Filters/indexDisplacement.html
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>pixi.js example 15 - Filters</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../bin/pixi.dev.js"></script>
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
var renderer = PIXI.autoDetectRenderer(630, 410);
|
||||
renderer.view.style.position = "absolute"
|
||||
renderer.view.style.width = window.innerWidth + "px";
|
||||
renderer.view.style.height = window.innerHeight + "px";
|
||||
renderer.view.style.display = "block";
|
||||
|
||||
// add render view to DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0xFFFFFF, true);
|
||||
|
||||
var pondContainer = new PIXI.DisplayObjectContainer();
|
||||
stage.addChild(pondContainer);
|
||||
|
||||
stage.interactive = true;
|
||||
|
||||
var bg = PIXI.Sprite.fromImage("displacement_BG.jpg");
|
||||
pondContainer.addChild(bg);
|
||||
|
||||
//var fish = PIXI.Sprite.fromImage("displacement_fish2.jpg");//
|
||||
//littleDudes.position.y = 100;
|
||||
var padding = 100;
|
||||
var bounds = new PIXI.Rectangle(-padding, -padding, 630 + padding * 2, 410 + padding * 2)
|
||||
var fishs = [];
|
||||
|
||||
|
||||
for (var i = 0; i < 20; i++)
|
||||
{
|
||||
var fishId = i % 4;
|
||||
fishId += 1;
|
||||
|
||||
//console.log("displacement_fish"+fishId+".png")
|
||||
var fish = PIXI.Sprite.fromImage("displacement_fish"+fishId+".png");
|
||||
fish.anchor.x = fish.anchor.y = 0.5;
|
||||
pondContainer.addChild(fish);
|
||||
|
||||
//var direction
|
||||
//var speed =
|
||||
fish.direction = Math.random() * Math.PI * 2;
|
||||
fish.speed = 2 + Math.random() * 2;
|
||||
fish.turnSpeed = Math.random() - 0.8;
|
||||
|
||||
fish.position.x = Math.random() * bounds.width;
|
||||
fish.position.y = Math.random() * bounds.height;
|
||||
//fish.speed = new PIXI.Point(0,0)
|
||||
|
||||
fish.scale.x = fish.scale.y = 0.8 + Math.random() * 0.3;
|
||||
fishs.push(fish);
|
||||
|
||||
};
|
||||
|
||||
var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("zeldaWaves.png"), 630, 410);
|
||||
overlay.alpha = 0.2
|
||||
pondContainer.addChild(overlay);
|
||||
|
||||
|
||||
var displacementTexture = PIXI.Texture.fromImage("displacement_map.jpg");
|
||||
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
|
||||
|
||||
|
||||
pondContainer.filters = [displacementFilter];
|
||||
|
||||
|
||||
|
||||
displacementFilter.scale.x = 50;
|
||||
displacementFilter.scale.y = 50;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var count = 0;
|
||||
var switchy = false;
|
||||
|
||||
/*
|
||||
* Add a pixi Logo!
|
||||
*/
|
||||
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
|
||||
stage.addChild(logo);
|
||||
|
||||
logo.anchor.x = 1;
|
||||
logo.anchor.y = 1;
|
||||
|
||||
logo.position.x = 630
|
||||
logo.scale.x = logo.scale.y = 0.5;
|
||||
logo.position.y = 400;
|
||||
logo.interactive = true;
|
||||
logo.buttonMode = true;
|
||||
|
||||
logo.click = logo.tap = function()
|
||||
{
|
||||
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
|
||||
}
|
||||
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
function animate() {
|
||||
|
||||
count += 0.1;
|
||||
|
||||
var blurAmount = Math.cos(count) ;
|
||||
var blurAmount2 = Math.sin(count * 0.8) ;
|
||||
|
||||
|
||||
|
||||
for (var i = 0; i < fishs.length; i++)
|
||||
{
|
||||
var fish = fishs[i];
|
||||
|
||||
fish.direction += fish.turnSpeed * 0.01;
|
||||
fish.position.x += Math.sin(fish.direction) * fish.speed;
|
||||
fish.position.y += Math.cos(fish.direction) * fish.speed;
|
||||
|
||||
fish.rotation = -fish.direction - Math.PI/2;
|
||||
|
||||
// wrap..
|
||||
|
||||
if(fish.position.x < bounds.x)fish.position.x += bounds.width;
|
||||
if(fish.position.x > bounds.x + bounds.width)fish.position.x -= bounds.width
|
||||
|
||||
if(fish.position.y < bounds.y)fish.position.y += bounds.height;
|
||||
if(fish.position.y > bounds.y + bounds.height)fish.position.y -= bounds.height
|
||||
}
|
||||
|
||||
|
||||
displacementFilter.offset.x = count * 10//blurAmount * 40;
|
||||
displacementFilter.offset.y = count * 10
|
||||
|
||||
overlay.tilePosition.x = count * -10//blurAmount * 40;
|
||||
overlay.tilePosition.y = count * -10
|
||||
|
||||
renderer.render(stage);
|
||||
requestAnimFrame( animate );
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
162
examples/example 15 - Filters/indexDisplacement_2.html
Normal file
162
examples/example 15 - Filters/indexDisplacement_2.html
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>pixi.js example 15 - Filters</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../bin/pixi.dev.js"></script>
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
var renderer = PIXI.autoDetectRenderer(630, 410);
|
||||
renderer.view.style.position = "absolute"
|
||||
renderer.view.style.width = window.innerWidth + "px";
|
||||
renderer.view.style.height = window.innerHeight + "px";
|
||||
renderer.view.style.display = "block";
|
||||
|
||||
// add render view to DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0xFFFFFF, true);
|
||||
|
||||
var pondContainer = new PIXI.DisplayObjectContainer();
|
||||
stage.addChild(pondContainer);
|
||||
|
||||
stage.interactive = true;
|
||||
|
||||
var bg = PIXI.Sprite.fromImage("displacement_BG.jpg");
|
||||
pondContainer.addChild(bg);
|
||||
|
||||
//var fish = PIXI.Sprite.fromImage("displacement_fish2.jpg");//
|
||||
//littleDudes.position.y = 100;
|
||||
var padding = 100;
|
||||
var bounds = new PIXI.Rectangle(-padding, -padding, 630 + padding * 2, 410 + padding * 2)
|
||||
var fishs = [];
|
||||
|
||||
|
||||
for (var i = 0; i < 20; i++)
|
||||
{
|
||||
var fishId = i % 4;
|
||||
fishId += 1;
|
||||
|
||||
//console.log("displacement_fish"+fishId+".png")
|
||||
var fish = PIXI.Sprite.fromImage("displacement_fish"+fishId+".png");
|
||||
fish.anchor.x = fish.anchor.y = 0.5;
|
||||
pondContainer.addChild(fish);
|
||||
|
||||
//var direction
|
||||
//var speed =
|
||||
fish.direction = Math.random() * Math.PI * 2;
|
||||
fish.speed = 2 + Math.random() * 2;
|
||||
fish.turnSpeed = Math.random() - 0.8;
|
||||
|
||||
fish.position.x = Math.random() * bounds.width;
|
||||
fish.position.y = Math.random() * bounds.height;
|
||||
//fish.speed = new PIXI.Point(0,0)
|
||||
|
||||
fish.scale.x = fish.scale.y = 0.8 + Math.random() * 0.3;
|
||||
fishs.push(fish);
|
||||
|
||||
};
|
||||
|
||||
var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("zeldaWaves.png"), 630, 410);
|
||||
overlay.alpha = 0.2
|
||||
pondContainer.addChild(overlay);
|
||||
|
||||
|
||||
var displacementTexture = PIXI.Texture.fromImage("displacement_map.jpg");
|
||||
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
|
||||
|
||||
var pixelFilter = new PIXI.PixelateFilter();
|
||||
pixelFilter.size.x = pixelFilter.size.y = 3;
|
||||
pondContainer.filters = [displacementFilter, pixelFilter];
|
||||
|
||||
|
||||
|
||||
displacementFilter.scale.x = 50;
|
||||
displacementFilter.scale.y = 50;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var count = 0;
|
||||
var switchy = false;
|
||||
|
||||
/*
|
||||
* Add a pixi Logo!
|
||||
*/
|
||||
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
|
||||
stage.addChild(logo);
|
||||
|
||||
logo.anchor.x = 1;
|
||||
logo.anchor.y = 1;
|
||||
|
||||
logo.position.x = 630
|
||||
logo.scale.x = logo.scale.y = 0.5;
|
||||
logo.position.y = 400;
|
||||
logo.interactive = true;
|
||||
logo.buttonMode = true;
|
||||
|
||||
logo.click = logo.tap = function()
|
||||
{
|
||||
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
|
||||
}
|
||||
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
function animate() {
|
||||
|
||||
count += 0.1;
|
||||
|
||||
var blurAmount = Math.cos(count) ;
|
||||
var blurAmount2 = Math.sin(count * 0.8) ;
|
||||
|
||||
|
||||
|
||||
for (var i = 0; i < fishs.length; i++)
|
||||
{
|
||||
var fish = fishs[i];
|
||||
|
||||
fish.direction += fish.turnSpeed * 0.01;
|
||||
fish.position.x += Math.sin(fish.direction) * fish.speed;
|
||||
fish.position.y += Math.cos(fish.direction) * fish.speed;
|
||||
|
||||
fish.rotation = -fish.direction - Math.PI/2;
|
||||
|
||||
// wrap..
|
||||
|
||||
if(fish.position.x < bounds.x)fish.position.x += bounds.width;
|
||||
if(fish.position.x > bounds.x + bounds.width)fish.position.x -= bounds.width
|
||||
|
||||
if(fish.position.y < bounds.y)fish.position.y += bounds.height;
|
||||
if(fish.position.y > bounds.y + bounds.height)fish.position.y -= bounds.height
|
||||
}
|
||||
|
||||
|
||||
displacementFilter.offset.x = count * 10//blurAmount * 40;
|
||||
displacementFilter.offset.y = count * 10
|
||||
|
||||
overlay.tilePosition.x = count * -10//blurAmount * 40;
|
||||
overlay.tilePosition.y = count * -10
|
||||
|
||||
renderer.render(stage);
|
||||
requestAnimFrame( animate );
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
examples/example 15 - Filters/zeldaWaves.png
Normal file
BIN
examples/example 15 - Filters/zeldaWaves.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -23,6 +23,7 @@
|
|||
<script src="../../src/pixi/filters/BlurFilter.js"></script>
|
||||
<script src="../../src/pixi/filters/BlurYFilter.js"></script>
|
||||
<script src="../../src/pixi/filters/SmartBlurFilter.js"></script>
|
||||
<script src="../../src/pixi/filters/PixelateFilter.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
@ -30,11 +31,11 @@
|
|||
var renderer = PIXI.autoDetectRenderer(800, 600);
|
||||
|
||||
|
||||
var f2 = new PIXI.BlurYFilter()//new PIXI.Filter();
|
||||
var f2 = new PIXI.BlurFilter()//new PIXI.Filter();
|
||||
var f = new PIXI.GreyFilter()//new PIXI.Filter();
|
||||
var blurX = new PIXI.BlurXFilter()//new PIXI.Filter();
|
||||
var blurY = new PIXI.BlurYFilter();
|
||||
var smart = new PIXI.SmartBlurFilter();
|
||||
var smart = new PIXI.PixelateFilter();
|
||||
|
||||
var blur = new PIXI.BlurFilter();
|
||||
|
||||
|
|
@ -59,7 +60,6 @@
|
|||
|
||||
var mapTexture = new PIXI.RenderTexture(800, 600);
|
||||
|
||||
var filter = new PIXI.DisplacementFilter(mapTexture);
|
||||
|
||||
var container = new PIXI.DisplayObjectContainer();
|
||||
container.position.x = 800/2;
|
||||
|
|
@ -68,11 +68,16 @@
|
|||
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
|
||||
bgFront.anchor.x = 0.5;
|
||||
bgFront.anchor.y = 0.5;
|
||||
//bgFront.filters = [blur]//, blurY];
|
||||
bgFront.filters = [f2]//, blurY];
|
||||
//smart
|
||||
|
||||
var filter = new PIXI.DisplacementFilter(PIXI.Texture.fromImage("SceneRotate.jpg"));
|
||||
|
||||
|
||||
stage.addChild(bgFront);
|
||||
bgFront.position.x = 800/2;
|
||||
bgFront.position.y = 600/2;
|
||||
|
||||
bgFront.scale.y = 0.3;
|
||||
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
|
||||
light2.anchor.x = 0.5;
|
||||
light2.anchor.y = 0.5;
|
||||
|
|
@ -84,7 +89,7 @@
|
|||
container.addChild(light1);
|
||||
|
||||
var panda = PIXI.Sprite.fromImage("panda.png");
|
||||
panda.anchor.x = 1.5;
|
||||
panda.anchor.x = 0.5;
|
||||
panda.anchor.y = 0.5;
|
||||
|
||||
|
||||
|
|
@ -106,7 +111,7 @@
|
|||
//container.filters = [smart]//f, f2];
|
||||
|
||||
//panda.filters = [f2];
|
||||
// container.filters = [filter]
|
||||
panda.filters = [filter]//,f2]
|
||||
var count = 0;
|
||||
var switchy = false;
|
||||
|
||||
|
|
@ -116,7 +121,7 @@
|
|||
|
||||
if(!switchy)
|
||||
{
|
||||
container.filters = [f];//
|
||||
container.filters = [smart];//
|
||||
// container.filters = [filter]//,blurX, blurY];
|
||||
}
|
||||
else
|
||||
|
|
@ -125,7 +130,7 @@
|
|||
// container.filters = null;
|
||||
}
|
||||
|
||||
PIXI.runList(stage);
|
||||
//PIXI.runList(stage);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -153,33 +158,43 @@
|
|||
stage.addChild(help);
|
||||
|
||||
//stage.filters = [filter];
|
||||
stage.addChild(new PIXI.Sprite(mapTexture))
|
||||
//stage.addChild(new PIXI.Sprite(mapTexture))
|
||||
|
||||
PIXI.runList(stage);
|
||||
//PIXI.runList(stage);
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
var position = new PIXI.Point(800/2 , 600/2 );
|
||||
var position = new PIXI.Point(0, 0);
|
||||
|
||||
var pixelSize = new PIXI.Point(2,2);
|
||||
smart.size = pixelSize;
|
||||
|
||||
function animate() {
|
||||
|
||||
mapTexture.render(container, position, true);
|
||||
mapTexture.render(panda, position, true);
|
||||
|
||||
|
||||
filter.scale.x = Math.sin(count) * 100;
|
||||
filter.scale.y = Math.cos(count) * 100;
|
||||
bg.rotation += 0.01;
|
||||
bgFront.rotation -= 0.01;
|
||||
// filter.scale.x = Math.sin(count) * 100;
|
||||
//filter.scale.y = Math.cos(count) * 100;
|
||||
panda.rotation += 0.01;
|
||||
// bgFront.rotation -= 0.01;
|
||||
|
||||
light1.rotation += 0.02;
|
||||
light2.rotation += 0.01;
|
||||
|
||||
panda.scale.x = 1 + Math.sin(count) * 0.04;
|
||||
panda.scale.y = 1 + Math.cos(count) * 0.04;
|
||||
|
||||
panda.scale.x = 1+ Math.sin(count * 0.1) * 0.4;
|
||||
panda.scale.y = (1 + Math.cos(count * 0.1) * 0.4) //* 0.2;
|
||||
panda.position.x = count;
|
||||
count += 0.1;
|
||||
|
||||
// blurX.blur = Math.sin(count) * 1/128;
|
||||
pixelSize.x = 20 + Math.sin(count * 0.1) * 20;
|
||||
pixelSize.y = 20 + Math.sin(count * 0.1) * 20;
|
||||
|
||||
var val = 16;
|
||||
f2.blur = 16// * val// 0.5 * 0.5//Math.sin(count) * 1/512//128// * 2;
|
||||
bgFront.scale.y = 0.5 //+ Math.sin(count * 0.1) * 0.4;
|
||||
bgFront.scale.x = 0.5 //+ Math.sin(count * 0.2) * 0.4;
|
||||
|
||||
|
||||
// blurY.blur = Math.cos(count) * 1/128;
|
||||
// filter.matrix = colorMatrix;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue