better demo

Examples/AdvancedEffects/src/Slideshow.js

 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 <Transition
-      width={width}
-      height={height}
-      progress={transitionProgress}
-      from={transitionFrom}
-      to={transitionTo}
-      shader={transitionShader}
-      uniforms={transitionUniforms}
-    />;
+    return <View style={styles.root}>
+      <Transition
+        width={width}
+        height={height}
+        progress={transitionProgress}
+        from={transitionFrom}
+        to={transitionTo}
+        shader={transitionShader}
+        uniforms={transitionUniforms}
+      />
+    <View style={styles.legend}>
+        <Text style={styles.textName}>{transitionName}</Text>
+        <Text style={styles.textInfo}>(GLSL.io)</Text>
+      </View>
+    </View>;
   }
 }
 
+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;

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;

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}
         />
 
       </View>