Skip to content

Commit 7c0dd54

Browse files
PixelsCommanderPixelsCommander
committed
Merge pull request #41 from PixelsCommander/demo-ff-safari-fix
Demo ff safari fix
2 parents 6908c94 + a0f56c0 commit 7c0dd54

File tree

1 file changed

+90
-88
lines changed

1 file changed

+90
-88
lines changed

‎page/js/effects.js‎

Lines changed: 90 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,156 @@
1-
var slider = document.getElementsByTagName('html-gl')[1];
1+
window.addEventListener('DOMContentLoaded', function(){
2+
var slider = document.getElementsByTagName('html-gl')[1];
23

3-
var renderer = window.HTMLGL.renderer;
4+
var renderer = window.HTMLGL.renderer;
45

5-
var filtersSwitchs = [true, false, false, false, false, false, false, false, false, false, false];
6+
var filtersSwitchs = [true, false, false, false, false, false, false, false, false, false, false];
67

7-
var gui = new dat.GUI({});
8+
var gui = new dat.GUI({});
89

9-
var displacementTexture = PIXI.Texture.fromImage("assets/img/displacement_map.jpg");
10-
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
10+
var displacementTexture = PIXI.Texture.fromImage("assets/img/displacement_map.jpg");
11+
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
1112

12-
var displacementFolder = gui.addFolder('Displacement');
13-
displacementFolder.add(filtersSwitchs, '0').name("apply");
14-
displacementFolder.add(displacementFilter.scale, 'x', 1, 200).name("scaleX");
15-
displacementFolder.add(displacementFilter.scale, 'y', 1, 200).name("scaleY");
13+
var displacementFolder = gui.addFolder('Displacement');
14+
displacementFolder.add(filtersSwitchs, '0').name("apply");
15+
displacementFolder.add(displacementFilter.scale, 'x', 1, 200).name("scaleX");
16+
displacementFolder.add(displacementFilter.scale, 'y', 1, 200).name("scaleY");
1617

17-
var blurFilter = new PIXI.BlurFilter();
18+
var blurFilter = new PIXI.BlurFilter();
1819

19-
var blurFolder = gui.addFolder('Blur');
20-
blurFolder.add(filtersSwitchs, '1').name("apply");
21-
blurFolder.add(blurFilter, 'blurX', 0, 32).name("blurX");
22-
blurFolder.add(blurFilter, 'blurY', 0, 32).name("blurY");
20+
var blurFolder = gui.addFolder('Blur');
21+
blurFolder.add(filtersSwitchs, '1').name("apply");
22+
blurFolder.add(blurFilter, 'blurX', 0, 32).name("blurX");
23+
blurFolder.add(blurFilter, 'blurY', 0, 32).name("blurY");
2324

2425
////
2526

26-
var pixelateFilter = new PIXI.PixelateFilter();
27+
var pixelateFilter = new PIXI.PixelateFilter();
2728

28-
var pixelateFolder = gui.addFolder('Pixelate');
29-
pixelateFolder.add(filtersSwitchs, '2').name("apply");
30-
pixelateFolder.add(pixelateFilter.size, 'x', 1, 32).name("PixelSizeX");
31-
pixelateFolder.add(pixelateFilter.size, 'y', 1, 32).name("PixelSizeY");
29+
var pixelateFolder = gui.addFolder('Pixelate');
30+
pixelateFolder.add(filtersSwitchs, '2').name("apply");
31+
pixelateFolder.add(pixelateFilter.size, 'x', 1, 32).name("PixelSizeX");
32+
pixelateFolder.add(pixelateFilter.size, 'y', 1, 32).name("PixelSizeY");
3233

3334
////
3435

35-
var invertFilter = new PIXI.InvertFilter();
36+
var invertFilter = new PIXI.InvertFilter();
3637

37-
var invertFolder = gui.addFolder('Invert');
38-
invertFolder.add(filtersSwitchs, '3').name("apply");
39-
invertFolder.add(invertFilter, 'invert', 0, 1).name("Invert");
38+
var invertFolder = gui.addFolder('Invert');
39+
invertFolder.add(filtersSwitchs, '3').name("apply");
40+
invertFolder.add(invertFilter, 'invert', 0, 1).name("Invert");
4041

4142
////
4243

43-
var grayFilter = new PIXI.GrayFilter();
44+
var grayFilter = new PIXI.GrayFilter();
4445

45-
var grayFolder = gui.addFolder('Gray');
46-
grayFolder.add(filtersSwitchs, '4').name("apply");
47-
grayFolder.add(grayFilter, 'gray', 0, 1).name("Gray");
46+
var grayFolder = gui.addFolder('Gray');
47+
grayFolder.add(filtersSwitchs, '4').name("apply");
48+
grayFolder.add(grayFilter, 'gray', 0, 1).name("Gray");
4849

4950
////
5051

51-
var sepiaFilter = new PIXI.SepiaFilter();
52+
var sepiaFilter = new PIXI.SepiaFilter();
5253

53-
var sepiaFolder = gui.addFolder('Sepia');
54-
sepiaFolder.add(filtersSwitchs, '5').name("apply");
55-
sepiaFolder.add(sepiaFilter, 'sepia', 0, 1).name("Sepia");
54+
var sepiaFolder = gui.addFolder('Sepia');
55+
sepiaFolder.add(filtersSwitchs, '5').name("apply");
56+
sepiaFolder.add(sepiaFilter, 'sepia', 0, 1).name("Sepia");
5657

5758
////
5859

59-
var twistFilter = new PIXI.TwistFilter();
60+
var twistFilter = new PIXI.TwistFilter();
6061

61-
var twistFolder = gui.addFolder('Twist');
62-
twistFolder.add(filtersSwitchs, '6').name("apply");
63-
twistFolder.add(twistFilter, 'angle', 0, 10).name("Angle");
64-
twistFolder.add(twistFilter, 'radius', 0, 1).name("Radius");
62+
var twistFolder = gui.addFolder('Twist');
63+
twistFolder.add(filtersSwitchs, '6').name("apply");
64+
twistFolder.add(twistFilter, 'angle', 0, 10).name("Angle");
65+
twistFolder.add(twistFilter, 'radius', 0, 1).name("Radius");
6566

66-
twistFolder.add(twistFilter.offset, 'x', 0, 1).name("offset.x");;
67-
twistFolder.add(twistFilter.offset, 'y', 0, 1).name("offset.y");;
67+
twistFolder.add(twistFilter.offset, 'x', 0, 1).name("offset.x");;
68+
twistFolder.add(twistFilter.offset, 'y', 0, 1).name("offset.y");;
6869

6970
////
7071

71-
var dotScreenFilter = new PIXI.DotScreenFilter();
72+
var dotScreenFilter = new PIXI.DotScreenFilter();
7273

73-
var dotScreenFolder = gui.addFolder('DotScreen');
74-
dotScreenFolder.add(filtersSwitchs, '7').name("apply");
75-
dotScreenFolder.add(dotScreenFilter, 'angle', 0, 10);
76-
dotScreenFolder.add(dotScreenFilter, 'scale', 0, 1);
74+
var dotScreenFolder = gui.addFolder('DotScreen');
75+
dotScreenFolder.add(filtersSwitchs, '7').name("apply");
76+
dotScreenFolder.add(dotScreenFilter, 'angle', 0, 10);
77+
dotScreenFolder.add(dotScreenFilter, 'scale', 0, 1);
7778

7879
////
7980

80-
var colorStepFilter = new PIXI.ColorStepFilter();
81+
var colorStepFilter = new PIXI.ColorStepFilter();
8182

82-
var colorStepFolder = gui.addFolder('ColorStep');
83-
colorStepFolder.add(filtersSwitchs, '8').name("apply");
83+
var colorStepFolder = gui.addFolder('ColorStep');
84+
colorStepFolder.add(filtersSwitchs, '8').name("apply");
8485

85-
colorStepFolder.add(colorStepFilter, 'step', 1, 100);
86-
colorStepFolder.add(colorStepFilter, 'step', 1, 100);
86+
colorStepFolder.add(colorStepFilter, 'step', 1, 100);
87+
colorStepFolder.add(colorStepFilter, 'step', 1, 100);
8788

8889
////
8990

90-
var crossHatchFilter = new PIXI.CrossHatchFilter();
91+
var crossHatchFilter = new PIXI.CrossHatchFilter();
9192

92-
var crossHatchFolder = gui.addFolder('CrossHatch');
93-
crossHatchFolder.add(filtersSwitchs, '9').name("apply");
93+
var crossHatchFolder = gui.addFolder('CrossHatch');
94+
crossHatchFolder.add(filtersSwitchs, '9').name("apply");
9495

95-
var rgbSplitterFilter = new PIXI.RGBSplitFilter();
96+
var rgbSplitterFilter = new PIXI.RGBSplitFilter();
9697

97-
var rgbSplitFolder = gui.addFolder('RGB Splitter');
98-
rgbSplitFolder.add(filtersSwitchs, '10').name("apply");
98+
var rgbSplitFolder = gui.addFolder('RGB Splitter');
99+
rgbSplitFolder.add(filtersSwitchs, '10').name("apply");
99100

100101

101-
var filterCollection = [displacementFilter, blurFilter, pixelateFilter, invertFilter, grayFilter, sepiaFilter, twistFilter, dotScreenFilter, colorStepFilter, crossHatchFilter, rgbSplitterFilter];
102+
var filterCollection = [displacementFilter, blurFilter, pixelateFilter, invertFilter, grayFilter, sepiaFilter, twistFilter, dotScreenFilter, colorStepFilter, crossHatchFilter, rgbSplitterFilter];
102103

103104
// create an new instance of a pixi stage
104-
var stage = window.HTMLGL.stage;
105+
var stage = window.HTMLGL.stage;
105106

106-
var pondContainer = slider.sprite;
107+
var pondContainer = slider.sprite;
107108
//stage.addChild(pondContainer);
108109

109-
stage.interactive = true;
110+
stage.interactive = true;
110111

111-
var padding = 100;
112-
var bounds = new PIXI.Rectangle(-padding, -padding, window.HTMLGL.renderer.width + padding * 2, window.HTMLGL.renderer.height + padding * 2)
112+
var padding = 100;
113+
var bounds = new PIXI.Rectangle(-padding, -padding, window.HTMLGL.renderer.width + padding * 2, window.HTMLGL.renderer.height + padding * 2)
113114

114-
var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("assets/img/zeldaWaves.png"), window.HTMLGL.renderer.width, window.HTMLGL.renderer.height);
115-
overlay.alpha = 0.1//0.2
116-
pondContainer.addChild(overlay);
115+
var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("assets/img/zeldaWaves.png"), window.HTMLGL.renderer.width, window.HTMLGL.renderer.height);
116+
overlay.alpha = 0.1//0.2
117+
pondContainer.addChild(overlay);
117118

118-
displacementFilter.scale.x = 50;
119-
displacementFilter.scale.y = 50;
119+
displacementFilter.scale.x = 50;
120+
displacementFilter.scale.y = 50;
120121

121-
var count = 0;
122-
var switchy = false;
122+
var count = 0;
123+
var switchy = false;
123124

124-
function animate() {
125+
function animate() {
125126

126-
if (window.HTMLGL.scrollY > 1000) {
127-
count += 0.1;
127+
if (window.HTMLGL.scrollY > 1000) {
128+
count += 0.1;
128129

129-
var blurAmount = Math.cos(count) ;
130-
var blurAmount2 = Math.sin(count * 0.8) ;
130+
var blurAmount = Math.cos(count) ;
131+
var blurAmount2 = Math.sin(count * 0.8) ;
131132

132-
var filtersToApply = [];
133+
var filtersToApply = [];
133134

134-
filtersSwitchs[0] ? overlay.visible = true : overlay.visible = false;
135+
filtersSwitchs[0] ? overlay.visible = true : overlay.visible = false;
135136

136-
for (var i = 0; i < filterCollection.length; i++) {
137-
if(filtersSwitchs[i])filtersToApply.push(filterCollection[i]);
138-
};
137+
for (var i = 0; i < filterCollection.length; i++) {
138+
if(filtersSwitchs[i])filtersToApply.push(filterCollection[i]);
139+
};
139140

140-
pondContainer.filters = filtersToApply.length > 0 ? filtersToApply : null;
141+
pondContainer.filters = filtersToApply.length > 0 ? filtersToApply : null;
141142

142-
displacementFilter.offset.x = count * 10//blurAmount * 40;
143-
displacementFilter.offset.y = count * 10
143+
displacementFilter.offset.x = count * 10//blurAmount * 40;
144+
displacementFilter.offset.y = count * 10
144145

145-
overlay.tilePosition.x = count * -10//blurAmount * 40;
146-
overlay.tilePosition.y = count * -10
146+
overlay.tilePosition.x = count * -10//blurAmount * 40;
147+
overlay.tilePosition.y = count * -10
147148

148-
renderer.render(stage);
149+
renderer.render(stage);
150+
}
151+
requestAnimFrame( animate );
149152
}
150-
requestAnimFrame( animate );
151-
}
152153

153-
renderer.render(stage);
154-
requestAnimFrame( animate );
154+
renderer.render(stage);
155+
requestAnimFrame( animate );
156+
});

0 commit comments

Comments
 (0)