All Filter Exampls Added
Example 16 removed as no longer required added Color step filter added Twist filter added Dot screen
This commit is contained in:
Mat Groves
parent
6c762fb396
commit
932ca80032
19 changed files with 685 additions and 222 deletions
|
|
@ -68,6 +68,10 @@ module.exports = function(grunt) {
|
|||
'<%= dirs.src %>/filters/BlurFilter.js',
|
||||
'<%= dirs.src %>/filters/InvertFilter.js',
|
||||
'<%= dirs.src %>/filters/SepiaFilter.js',
|
||||
'<%= dirs.src %>/filters/TwistFilter.js',
|
||||
'<%= dirs.src %>/filters/ColorStepFilter.js',
|
||||
'<%= dirs.src %>/filters/DotScreenFilter.js',
|
||||
|
||||
'<%= dirs.src %>/Outro.js'
|
||||
], banner = [
|
||||
'/**',
|
||||
|
|
|
|||
247
bin/pixi.dev.js
247
bin/pixi.dev.js
|
|
@ -11713,7 +11713,7 @@ PIXI.BlurFilter = function()
|
|||
*/
|
||||
Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', {
|
||||
get: function() {
|
||||
return this.blurX.blur;
|
||||
return this.blurXFilter.blur;
|
||||
},
|
||||
set: function(value) {
|
||||
this.blurXFilter.blur = this.blurYFilter.blur = value;
|
||||
|
|
@ -11770,7 +11770,7 @@ PIXI.InvertFilter = function()
|
|||
|
||||
// set the uniforms
|
||||
this.uniforms = {
|
||||
invert: {type: 'f', value: 0},
|
||||
invert: {type: 'f', value: 1},
|
||||
};
|
||||
|
||||
this.fragmentSrc = [
|
||||
|
|
@ -11781,7 +11781,7 @@ PIXI.InvertFilter = function()
|
|||
"uniform sampler2D uSampler;",
|
||||
"void main(void) {",
|
||||
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
|
||||
"gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, invert);",
|
||||
"gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);",
|
||||
//"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;",
|
||||
"gl_FragColor = gl_FragColor * vColor;",
|
||||
"}"
|
||||
|
|
@ -11860,6 +11860,247 @@ Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', {
|
|||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* This filter applies a pixlate effect making display objects appear "blocky"
|
||||
* @class PixelateFilter
|
||||
* @contructor
|
||||
*/
|
||||
PIXI.TwistFilter = function()
|
||||
{
|
||||
PIXI.AbstractFilter.call( this );
|
||||
|
||||
this.passes = [this];
|
||||
|
||||
// set the uniforms
|
||||
this.uniforms = {
|
||||
radius: {type: 'f', value:0.5},
|
||||
angle: {type: 'f', value:5},
|
||||
offset: {type: 'f2', value:{x:0.5, y:0.5}},
|
||||
};
|
||||
|
||||
this.fragmentSrc = [
|
||||
"precision mediump float;",
|
||||
"varying vec2 vTextureCoord;",
|
||||
"varying float vColor;",
|
||||
"uniform vec4 dimensions;",
|
||||
"uniform sampler2D uSampler;",
|
||||
|
||||
"uniform float radius;",
|
||||
"uniform float angle;",
|
||||
"uniform vec2 offset;",
|
||||
|
||||
"void main(void) {",
|
||||
"vec2 coord = vTextureCoord - offset;",
|
||||
"float distance = length(coord);",
|
||||
|
||||
"if (distance < radius){",
|
||||
|
||||
"float ratio = (radius - distance) / radius;",
|
||||
"float angleMod = ratio * ratio * angle;",
|
||||
"float s = sin(angleMod);",
|
||||
"float c = cos(angleMod);",
|
||||
"coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);",
|
||||
|
||||
"}",
|
||||
|
||||
"gl_FragColor = texture2D(uSampler, coord+offset);",
|
||||
"}"
|
||||
];
|
||||
}
|
||||
|
||||
PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||
PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter;
|
||||
|
||||
/**
|
||||
*
|
||||
* This point describes the the offset of the twist
|
||||
* @property size
|
||||
* @type Point
|
||||
*/
|
||||
Object.defineProperty(PIXI.TwistFilter.prototype, 'offset', {
|
||||
get: function() {
|
||||
return this.uniforms.offset.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.dirty = true;
|
||||
this.uniforms.offset.value = value;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* This radius describes size of the twist
|
||||
* @property size
|
||||
* @type Number
|
||||
*/
|
||||
Object.defineProperty(PIXI.TwistFilter.prototype, 'radius', {
|
||||
get: function() {
|
||||
return this.uniforms.radius.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.dirty = true;
|
||||
this.uniforms.radius.value = value;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* This radius describes angle of the twist
|
||||
* @property angle
|
||||
* @type Number
|
||||
*/
|
||||
Object.defineProperty(PIXI.TwistFilter.prototype, 'angle', {
|
||||
get: function() {
|
||||
return this.uniforms.angle.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.dirty = true;
|
||||
this.uniforms.angle.value = value;
|
||||
}
|
||||
});
|
||||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* This turns your displayObjects to black and white.
|
||||
* @class GreyFilter
|
||||
* @contructor
|
||||
*/
|
||||
PIXI.ColorStepFilter = function()
|
||||
{
|
||||
PIXI.AbstractFilter.call( this );
|
||||
|
||||
this.passes = [this];
|
||||
|
||||
// set the uniforms
|
||||
this.uniforms = {
|
||||
step: {type: 'f', value: 5},
|
||||
};
|
||||
|
||||
this.fragmentSrc = [
|
||||
"precision mediump float;",
|
||||
"varying vec2 vTextureCoord;",
|
||||
"varying float vColor;",
|
||||
"uniform sampler2D uSampler;",
|
||||
"uniform float step;",
|
||||
"void main(void) {",
|
||||
"vec4 color = texture2D(uSampler, vTextureCoord);",
|
||||
"color = floor(color * step) / step;",
|
||||
"gl_FragColor = color * vColor;",
|
||||
"}"
|
||||
];
|
||||
}
|
||||
|
||||
PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||
PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter;
|
||||
|
||||
/**
|
||||
The number of steps.
|
||||
@property step
|
||||
*/
|
||||
Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', {
|
||||
get: function() {
|
||||
return this.uniforms.step.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.uniforms.step.value = value;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
* original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* This filter applies a pixlate effect making display objects appear "blocky"
|
||||
* @class PixelateFilter
|
||||
* @contructor
|
||||
*/
|
||||
PIXI.DotScreenFilter = function()
|
||||
{
|
||||
PIXI.AbstractFilter.call( this );
|
||||
|
||||
this.passes = [this];
|
||||
|
||||
// set the uniforms
|
||||
this.uniforms = {
|
||||
scale: {type: 'f', value:1},
|
||||
angle: {type: 'f', value:5},
|
||||
dimensions: {type: 'f4', value:[0,0,0,0]}
|
||||
};
|
||||
|
||||
this.fragmentSrc = [
|
||||
"precision mediump float;",
|
||||
"varying vec2 vTextureCoord;",
|
||||
"varying float vColor;",
|
||||
"uniform vec4 dimensions;",
|
||||
"uniform sampler2D uSampler;",
|
||||
|
||||
"uniform float angle;",
|
||||
"uniform float scale;",
|
||||
|
||||
"float pattern() {",
|
||||
"float s = sin(angle), c = cos(angle);",
|
||||
"vec2 tex = vTextureCoord * dimensions.xy;",
|
||||
"vec2 point = vec2(",
|
||||
"c * tex.x - s * tex.y,",
|
||||
"s * tex.x + c * tex.y",
|
||||
") * scale;",
|
||||
"return (sin(point.x) * sin(point.y)) * 4.0;",
|
||||
"}",
|
||||
|
||||
"void main() {",
|
||||
"vec4 color = texture2D(uSampler, vTextureCoord);",
|
||||
"float average = (color.r + color.g + color.b) / 3.0;",
|
||||
"gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);",
|
||||
"}",
|
||||
];
|
||||
}
|
||||
|
||||
PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype );
|
||||
PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter;
|
||||
|
||||
/**
|
||||
*
|
||||
* This describes the the scale
|
||||
* @property scale
|
||||
* @type Number
|
||||
*/
|
||||
Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', {
|
||||
get: function() {
|
||||
return this.uniforms.scale.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.dirty = true;
|
||||
this.uniforms.scale.value = value;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* This radius describes angle
|
||||
* @property angle
|
||||
* @type Number
|
||||
*/
|
||||
Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', {
|
||||
get: function() {
|
||||
return this.uniforms.angle.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.dirty = true;
|
||||
this.uniforms.angle.value = value;
|
||||
}
|
||||
});
|
||||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
94
examples/example 15 - Filters/dat.gui.min.js
vendored
Normal file
94
examples/example 15 - Filters/dat.gui.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -11,6 +11,8 @@
|
|||
</style>
|
||||
|
||||
<script src="../../bin/pixi.dev.js"></script>
|
||||
<script src="dat.gui.min.js"></script>
|
||||
|
||||
<script src="pixi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -22,12 +24,96 @@
|
|||
renderer.view.style.height = window.innerHeight + "px";
|
||||
renderer.view.style.display = "block";
|
||||
|
||||
var filtersSwitchs = [false, false, false, false, false, false, false, false];
|
||||
|
||||
// add render view to DOM
|
||||
document.body.appendChild(renderer.view);
|
||||
|
||||
var gui = new dat.GUI({
|
||||
//height : 5 * 32 - 1,
|
||||
|
||||
width : 350
|
||||
});
|
||||
|
||||
var blurFilter = new PIXI.BlurFilter();
|
||||
|
||||
var blurFolder = gui.addFolder('Blur');
|
||||
blurFolder.add(filtersSwitchs, '0').name("apply");
|
||||
blurFolder.add(blurFilter, 'blurX', 0, 32).name("blurX");
|
||||
blurFolder.add(blurFilter, 'blurY', 0, 32).name("blurY");
|
||||
|
||||
////
|
||||
|
||||
var pixelateFilter = new PIXI.PixelateFilter();
|
||||
|
||||
var pixelateFolder = gui.addFolder('Pixelate');
|
||||
pixelateFolder.add(filtersSwitchs, '1').name("apply");
|
||||
pixelateFolder.add(pixelateFilter.size, 'x', 1, 32).name("PixelSizeX");
|
||||
pixelateFolder.add(pixelateFilter.size, 'y', 1, 32).name("PixelSizeY");
|
||||
|
||||
////
|
||||
|
||||
var invertFilter = new PIXI.InvertFilter();
|
||||
|
||||
var invertFolder = gui.addFolder('Invert');
|
||||
invertFolder.add(filtersSwitchs, '2').name("apply");
|
||||
invertFolder.add(invertFilter, 'invert', 0, 1).name("Invert");
|
||||
|
||||
////
|
||||
|
||||
var greyFilter = new PIXI.GreyFilter();
|
||||
|
||||
var greyFolder = gui.addFolder('Grey');
|
||||
greyFolder.add(filtersSwitchs, '3').name("apply");
|
||||
greyFolder.add(greyFilter, 'grey', 0, 1).name("Grey");
|
||||
|
||||
////
|
||||
|
||||
var sepiaFilter = new PIXI.SepiaFilter();
|
||||
|
||||
var sepiaFolder = gui.addFolder('Sepia');
|
||||
sepiaFolder.add(filtersSwitchs, '4').name("apply");
|
||||
sepiaFolder.add(sepiaFilter, 'sepia', 0, 1).name("Sepia");
|
||||
|
||||
////
|
||||
|
||||
var twistFilter = new PIXI.TwistFilter();
|
||||
|
||||
var twistFolder = gui.addFolder('Twist');
|
||||
twistFolder.add(filtersSwitchs, '5').name("apply");
|
||||
twistFolder.add(twistFilter, 'angle', 0, 10).name("Angle");
|
||||
twistFolder.add(twistFilter, 'radius', 0, 1).name("Radius");
|
||||
|
||||
twistFolder.add(twistFilter.offset, 'x', 0, 1).name("offset.x");;
|
||||
twistFolder.add(twistFilter.offset, 'y', 0, 1).name("offset.y");;
|
||||
|
||||
////
|
||||
|
||||
var dotScreenFilter = new PIXI.DotScreenFilter();
|
||||
|
||||
var dotScreenFolder = gui.addFolder('DotScreen');
|
||||
dotScreenFolder.add(filtersSwitchs, '6').name("apply");
|
||||
dotScreenFolder.add(dotScreenFilter, 'angle', 0, 10);
|
||||
dotScreenFolder.add(dotScreenFilter, 'scale', 0, 1);
|
||||
|
||||
////
|
||||
|
||||
var colorStepFilter = new PIXI.ColorStepFilter();
|
||||
|
||||
var colorStepFolder = gui.addFolder('ColorStep');
|
||||
colorStepFolder.add(filtersSwitchs, '7').name("apply");
|
||||
|
||||
colorStepFolder.add(colorStepFilter, 'step', 1, 100);
|
||||
colorStepFolder.add(colorStepFilter, 'step', 1, 100);
|
||||
|
||||
var filterCollection = [blurFilter, pixelateFilter, invertFilter, greyFilter, sepiaFilter, twistFilter, dotScreenFilter, colorStepFilter];
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0xFFFFFF, true);
|
||||
|
||||
|
||||
|
||||
var pondContainer = new PIXI.DisplayObjectContainer();
|
||||
stage.addChild(pondContainer);
|
||||
|
||||
|
|
@ -123,7 +209,14 @@
|
|||
var blurAmount = Math.cos(count) ;
|
||||
var blurAmount2 = Math.sin(count * 0.8) ;
|
||||
|
||||
|
||||
var filtersToApply = [];
|
||||
|
||||
for (var i = 0; i < filterCollection.length; i++) {
|
||||
|
||||
if(filtersSwitchs[i])filtersToApply.push(filterCollection[i]);
|
||||
};
|
||||
|
||||
stage.filters = filtersToApply.length > 0 ? filtersToApply : null;
|
||||
|
||||
for (var i = 0; i < fishs.length; i++)
|
||||
{
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 209 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
|
|
@ -1,213 +0,0 @@
|
|||
<!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="../../src/pixi/filters/DisplacementFilter.js"></script>
|
||||
<script src="../../src/pixi/renderers/webgl/WebGLRenderGroup.js"></script>
|
||||
<script src="../../src/pixi/renderers/webgl/PixiShader.js"></script>
|
||||
<script src="../../src/pixi/renderers/webgl/WebGLShaders.js"></script>
|
||||
<script src="../../src/pixi/renderers/webgl/filters/Filter.js"></script>
|
||||
<script src="../../src/pixi/renderers/webgl/filters/FilterManager.js"></script>
|
||||
<script src="../../src/pixi/filters/InvertFilter.js"></script>
|
||||
<script src="../../src/pixi/filters/SepiaFilter.js"></script>
|
||||
<script src="../../src/pixi/filters/BlurXFilter.js"></script>
|
||||
<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>
|
||||
|
||||
var renderer = PIXI.autoDetectRenderer(800, 600);
|
||||
|
||||
|
||||
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.PixelateFilter();
|
||||
|
||||
var blur = new PIXI.BlurFilter();
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0xFFFFFF, true);
|
||||
|
||||
stage.interactive = true;
|
||||
|
||||
var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
|
||||
bg.anchor.x = 0.5;
|
||||
bg.anchor.y = 0.5;
|
||||
|
||||
bg.position.x = 800/2;
|
||||
bg.position.y = 600/2;
|
||||
|
||||
|
||||
var colorMatrix = [1,0,0,0,
|
||||
0,1,0,0,
|
||||
0,0,1,0,
|
||||
0,0,0,1];
|
||||
|
||||
|
||||
var mapTexture = new PIXI.RenderTexture(800, 600);
|
||||
|
||||
|
||||
var container = new PIXI.DisplayObjectContainer();
|
||||
container.position.x = 800/2;
|
||||
container.position.y = 600/2;
|
||||
|
||||
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
|
||||
bgFront.anchor.x = 0.5;
|
||||
bgFront.anchor.y = 0.5;
|
||||
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;
|
||||
container.addChild(light2);
|
||||
|
||||
var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
|
||||
light1.anchor.x = 0.5;
|
||||
light1.anchor.y = 0.5;
|
||||
container.addChild(light1);
|
||||
|
||||
var panda = PIXI.Sprite.fromImage("panda.png");
|
||||
panda.anchor.x = 0.5;
|
||||
panda.anchor.y = 0.5;
|
||||
|
||||
|
||||
container.addChild(panda);
|
||||
|
||||
stage.addChild(container);
|
||||
|
||||
// create a renderer instance
|
||||
|
||||
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);
|
||||
|
||||
//container.filterArea = new PIXI.Rectangle(0,0,800, 600);
|
||||
//container.filters = [smart]//f, f2];
|
||||
|
||||
//panda.filters = [f2];
|
||||
panda.filters = [filter]//,f2]
|
||||
var count = 0;
|
||||
var switchy = false;
|
||||
|
||||
stage.click = stage.tap = function()
|
||||
{
|
||||
switchy = !switchy
|
||||
|
||||
if(!switchy)
|
||||
{
|
||||
container.filters = [smart];//
|
||||
// container.filters = [filter]//,blurX, blurY];
|
||||
}
|
||||
else
|
||||
{
|
||||
container.filters = null//.. [filter];
|
||||
// container.filters = null;
|
||||
}
|
||||
|
||||
//PIXI.runList(stage);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Add a pixi Logo!
|
||||
*/
|
||||
var logo = PIXI.Sprite.fromImage("../../logo_small.png");
|
||||
// stage.addChild(logo);
|
||||
|
||||
logo.anchor.x = 1;
|
||||
logo.position.x = 620
|
||||
logo.scale.x = logo.scale.y = 0.5;
|
||||
logo.position.y = 320;
|
||||
logo.interactive = true;
|
||||
logo.buttonMode = true;
|
||||
|
||||
logo.click = logo.tap = function()
|
||||
{
|
||||
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank");
|
||||
}
|
||||
|
||||
var help = new PIXI.Text("Click to turn filters on / off.", {font:"bold 12pt Arial", fill:"white"});
|
||||
help.position.y = 600 - 20;
|
||||
help.position.x = 10;
|
||||
stage.addChild(help);
|
||||
|
||||
//stage.filters = [filter];
|
||||
//stage.addChild(new PIXI.Sprite(mapTexture))
|
||||
|
||||
//PIXI.runList(stage);
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
var position = new PIXI.Point(0, 0);
|
||||
|
||||
var pixelSize = new PIXI.Point(2,2);
|
||||
smart.size = pixelSize;
|
||||
|
||||
function animate() {
|
||||
|
||||
mapTexture.render(panda, position, true);
|
||||
|
||||
|
||||
// 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.1) * 0.4;
|
||||
panda.scale.y = (1 + Math.cos(count * 0.1) * 0.4) //* 0.2;
|
||||
panda.position.x = count;
|
||||
count += 0.1;
|
||||
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;
|
||||
|
||||
f.grey = Math.sin(count)
|
||||
|
||||
renderer.render(stage);
|
||||
// f.renderTex();
|
||||
// f.render();
|
||||
|
||||
requestAnimFrame( animate );
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
|
|
@ -30,7 +30,7 @@ PIXI.BlurFilter = function()
|
|||
*/
|
||||
Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', {
|
||||
get: function() {
|
||||
return this.blurX.blur;
|
||||
return this.blurXFilter.blur;
|
||||
},
|
||||
set: function(value) {
|
||||
this.blurXFilter.blur = this.blurYFilter.blur = value;
|
||||
|
|
|
|||
51
src/pixi/filters/ColorStepFilter.js
Normal file
51
src/pixi/filters/ColorStepFilter.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* This turns your displayObjects to black and white.
|
||||
* @class GreyFilter
|
||||
* @contructor
|
||||
*/
|
||||
PIXI.ColorStepFilter = function()
|
||||
{
|
||||
PIXI.AbstractFilter.call( this );
|
||||
|
||||
this.passes = [this];
|
||||
|
||||
// set the uniforms
|
||||
this.uniforms = {
|
||||
step: {type: 'f', value: 5},
|
||||
};
|
||||
|
||||
this.fragmentSrc = [
|
||||
"precision mediump float;",
|
||||
"varying vec2 vTextureCoord;",
|
||||
"varying float vColor;",
|
||||
"uniform sampler2D uSampler;",
|
||||
"uniform float step;",
|
||||
"void main(void) {",
|
||||
"vec4 color = texture2D(uSampler, vTextureCoord);",
|
||||
"color = floor(color * step) / step;",
|
||||
"gl_FragColor = color * vColor;",
|
||||
"}"
|
||||
];
|
||||
}
|
||||
|
||||
PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||
PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter;
|
||||
|
||||
/**
|
||||
The number of steps.
|
||||
@property step
|
||||
*/
|
||||
Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', {
|
||||
get: function() {
|
||||
return this.uniforms.step.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.uniforms.step.value = value;
|
||||
}
|
||||
});
|
||||
86
src/pixi/filters/DotScreenFilter.js
Normal file
86
src/pixi/filters/DotScreenFilter.js
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
* original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* This filter applies a pixlate effect making display objects appear "blocky"
|
||||
* @class PixelateFilter
|
||||
* @contructor
|
||||
*/
|
||||
PIXI.DotScreenFilter = function()
|
||||
{
|
||||
PIXI.AbstractFilter.call( this );
|
||||
|
||||
this.passes = [this];
|
||||
|
||||
// set the uniforms
|
||||
this.uniforms = {
|
||||
scale: {type: 'f', value:1},
|
||||
angle: {type: 'f', value:5},
|
||||
dimensions: {type: 'f4', value:[0,0,0,0]}
|
||||
};
|
||||
|
||||
this.fragmentSrc = [
|
||||
"precision mediump float;",
|
||||
"varying vec2 vTextureCoord;",
|
||||
"varying float vColor;",
|
||||
"uniform vec4 dimensions;",
|
||||
"uniform sampler2D uSampler;",
|
||||
|
||||
"uniform float angle;",
|
||||
"uniform float scale;",
|
||||
|
||||
"float pattern() {",
|
||||
"float s = sin(angle), c = cos(angle);",
|
||||
"vec2 tex = vTextureCoord * dimensions.xy;",
|
||||
"vec2 point = vec2(",
|
||||
"c * tex.x - s * tex.y,",
|
||||
"s * tex.x + c * tex.y",
|
||||
") * scale;",
|
||||
"return (sin(point.x) * sin(point.y)) * 4.0;",
|
||||
"}",
|
||||
|
||||
"void main() {",
|
||||
"vec4 color = texture2D(uSampler, vTextureCoord);",
|
||||
"float average = (color.r + color.g + color.b) / 3.0;",
|
||||
"gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);",
|
||||
"}",
|
||||
];
|
||||
}
|
||||
|
||||
PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype );
|
||||
PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter;
|
||||
|
||||
/**
|
||||
*
|
||||
* This describes the the scale
|
||||
* @property scale
|
||||
* @type Number
|
||||
*/
|
||||
Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', {
|
||||
get: function() {
|
||||
return this.uniforms.scale.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.dirty = true;
|
||||
this.uniforms.scale.value = value;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* This radius describes angle
|
||||
* @property angle
|
||||
* @type Number
|
||||
*/
|
||||
Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', {
|
||||
get: function() {
|
||||
return this.uniforms.angle.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.dirty = true;
|
||||
this.uniforms.angle.value = value;
|
||||
}
|
||||
});
|
||||
|
|
@ -16,7 +16,7 @@ PIXI.InvertFilter = function()
|
|||
|
||||
// set the uniforms
|
||||
this.uniforms = {
|
||||
invert: {type: 'f', value: 0},
|
||||
invert: {type: 'f', value: 1},
|
||||
};
|
||||
|
||||
this.fragmentSrc = [
|
||||
|
|
@ -27,7 +27,7 @@ PIXI.InvertFilter = function()
|
|||
"uniform sampler2D uSampler;",
|
||||
"void main(void) {",
|
||||
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
|
||||
"gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, invert);",
|
||||
"gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);",
|
||||
//"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;",
|
||||
"gl_FragColor = gl_FragColor * vColor;",
|
||||
"}"
|
||||
|
|
|
|||
103
src/pixi/filters/TwistFilter.js
Normal file
103
src/pixi/filters/TwistFilter.js
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* This filter applies a pixlate effect making display objects appear "blocky"
|
||||
* @class PixelateFilter
|
||||
* @contructor
|
||||
*/
|
||||
PIXI.TwistFilter = function()
|
||||
{
|
||||
PIXI.AbstractFilter.call( this );
|
||||
|
||||
this.passes = [this];
|
||||
|
||||
// set the uniforms
|
||||
this.uniforms = {
|
||||
radius: {type: 'f', value:0.5},
|
||||
angle: {type: 'f', value:5},
|
||||
offset: {type: 'f2', value:{x:0.5, y:0.5}},
|
||||
};
|
||||
|
||||
this.fragmentSrc = [
|
||||
"precision mediump float;",
|
||||
"varying vec2 vTextureCoord;",
|
||||
"varying float vColor;",
|
||||
"uniform vec4 dimensions;",
|
||||
"uniform sampler2D uSampler;",
|
||||
|
||||
"uniform float radius;",
|
||||
"uniform float angle;",
|
||||
"uniform vec2 offset;",
|
||||
|
||||
"void main(void) {",
|
||||
"vec2 coord = vTextureCoord - offset;",
|
||||
"float distance = length(coord);",
|
||||
|
||||
"if (distance < radius){",
|
||||
|
||||
"float ratio = (radius - distance) / radius;",
|
||||
"float angleMod = ratio * ratio * angle;",
|
||||
"float s = sin(angleMod);",
|
||||
"float c = cos(angleMod);",
|
||||
"coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);",
|
||||
|
||||
"}",
|
||||
|
||||
"gl_FragColor = texture2D(uSampler, coord+offset);",
|
||||
"}"
|
||||
];
|
||||
}
|
||||
|
||||
PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
|
||||
PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter;
|
||||
|
||||
/**
|
||||
*
|
||||
* This point describes the the offset of the twist
|
||||
* @property size
|
||||
* @type Point
|
||||
*/
|
||||
Object.defineProperty(PIXI.TwistFilter.prototype, 'offset', {
|
||||
get: function() {
|
||||
return this.uniforms.offset.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.dirty = true;
|
||||
this.uniforms.offset.value = value;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* This radius describes size of the twist
|
||||
* @property size
|
||||
* @type Number
|
||||
*/
|
||||
Object.defineProperty(PIXI.TwistFilter.prototype, 'radius', {
|
||||
get: function() {
|
||||
return this.uniforms.radius.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.dirty = true;
|
||||
this.uniforms.radius.value = value;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
*
|
||||
* This radius describes angle of the twist
|
||||
* @property angle
|
||||
* @type Number
|
||||
*/
|
||||
Object.defineProperty(PIXI.TwistFilter.prototype, 'angle', {
|
||||
get: function() {
|
||||
return this.uniforms.angle.value;
|
||||
},
|
||||
set: function(value) {
|
||||
this.dirty = true;
|
||||
this.uniforms.angle.value = value;
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue