diff --git a/Examples/AdvancedEffects/src/Slideshow.js b/Examples/AdvancedEffects/src/Slideshow.js
index f37d893ce3d49e12b388c2c766bb5d76334b3fec..98d995c12bc61029d55416bda75adb4ee8a81e23 100644
--- a/Examples/AdvancedEffects/src/Slideshow.js
+++ b/Examples/AdvancedEffects/src/Slideshow.js
@@ -1,4 +1,5 @@
const React = require("react-native");
+const { View, Text, StyleSheet } = React;
const GL = require("gl-react-native");
const TransitionGenerator = require("./TransitionGenerator");
const Transition = require("./Transition");
@@ -11,9 +12,10 @@ class Slideshow extends React.Component {
this._currentTransition = -1;
}
render () {
- const { duration, width, height, time, images } = this.props;
+ const { transitionDuration, pauseDuration, width, height, time, images } = this.props;
+ const duration = transitionDuration + pauseDuration;
const slide = time / duration;
- let transitionProgress = slide % 1;
+ let transitionProgress = Math.min(1, (duration/transitionDuration) * (slide % 1));
let transitionFrom = images[Math.floor(slide) % images.length];
let transitionTo = images[Math.floor(slide+1) % images.length];
@@ -21,49 +23,54 @@ class Slideshow extends React.Component {
if (currentTransition !== this._currentTransition) {
this._currentTransition = currentTransition;
const { name, uniforms } = TransitionGenerator.random();
+ console.log(name);
+ this._name = name;
this._shader = shaders[name];
this._uniforms = uniforms;
}
+ const transitionName = this._name;
const transitionShader = this._shader;
const transitionUniforms = this._uniforms;
- /*
- switch (Math.floor(slide/4) % 3) {
- case 0:
- transitionShader = shaders.transitionRandomSquares;
- const w = 3 * (1 + Math.floor(slide % 8));
- transitionUniforms = {
- size: [w, w * 2 / 3],
- smoothness: 0.5
- };
- break;
- case 1:
- transitionShader = shaders.transitionDirectionalWipe;
- transitionUniforms = {
- direction: [Math.cos(time/2), Math.sin(time/2)],
- smoothness: 0.5
- };
- break;
- case 2:
- transitionShader = shaders.transitionWind;
- transitionUniforms = {
- size: 0.2
- };
- break;
- }
- */
-
- return ;
+ return
+
+
+ {transitionName}
+ (GLSL.io)
+
+ ;
}
}
+const styles = StyleSheet.create({
+ root: {
+ position: "relative"
+ },
+ legend: {
+ position: "absolute",
+ bottom: 5,
+ right: 4,
+ backgroundColor: "transparent",
+ flexDirection: "row"
+ },
+ textName: {
+ color: "#fff",
+ fontWeight: "bold",
+ },
+ textInfo: {
+ color: "#fff",
+ marginLeft: 8,
+ opacity: 0.5
+ }
+});
+
module.exports = Slideshow;
diff --git a/Examples/AdvancedEffects/src/TransitionGenerator.js b/Examples/AdvancedEffects/src/TransitionGenerator.js
index 5a3c320b9b380e19ad021acaebb63e1c1693f6bb..8b6b6d01a26f7a4b811abf5726aa6e15af605884 100644
--- a/Examples/AdvancedEffects/src/TransitionGenerator.js
+++ b/Examples/AdvancedEffects/src/TransitionGenerator.js
@@ -12,8 +12,6 @@ const transitions = [
return { strength: 0.5 * Math.random() };
} ],
"glitch displace",
- "crosshatch",
- "PageCurl",
[ "Mosaic", function () {
const dx = Math.round(Math.random() * 6 - 3), dy = Math.round(Math.random() * 6 - 3);
if (dx===0 && dy===0) dy = -1;
@@ -38,23 +36,12 @@ const transitions = [
} ],
"Star Wipe",
"pinwheel",
- [ "Slide", function () {
- const choices = [
- { translateX: 0, translateY: -1 },
- { translateX: 0, translateY: 1 },
- { translateX: -1, translateY: 0 },
- { translateX: 1, translateY: 0 }
- ];
- return choices[Math.floor(choices.length * Math.random())];
- } ],
"SimpleFlip",
"TilesScanline",
"Dreamy",
"Swirl",
"HSVfade",
- [ "burn", function () {
- return { color: [0,0,0].map(Math.random) };
- } ],
+ "burn",
"Radial",
[ "ripple", function () {
return {
@@ -74,7 +61,7 @@ const transitions = [
return { flashIntensity: 4 * Math.random() };
} ],
[ "randomsquares", function () {
- const size = Math.round(4 + 30 * Math.random());
+ const size = Math.round(4 + 20 * Math.random());
return {
size: [ size, size ],
smoothness: Math.random()
@@ -96,10 +83,7 @@ const transitions = [
} ],
"circleopen",
[ "wind", function () {
- return { size: 0.5 * Math.random() };
- } ],
- [ "fadecolor", function () {
- return { color: [0,0,0].map(Math.random) };
+ return { size: 0.1+0.2 * Math.random() };
} ]
].map(function (obj) {
let name, genUniforms;
diff --git a/Examples/AdvancedEffects/src/index.js b/Examples/AdvancedEffects/src/index.js
index b5e1622d1034186171fbdbbd86e42aba5250a4e2..6e1f78b324efe81a05f34b1912d5cd5f98b69b2a 100644
--- a/Examples/AdvancedEffects/src/index.js
+++ b/Examples/AdvancedEffects/src/index.js
@@ -81,7 +81,8 @@ class AdvancedEffects extends React.Component {
width={viewportW}
height={transitionH}
images={images.slice(2)}
- duration={3}
+ pauseDuration={0.5}
+ transitionDuration={1.5}
/>