better content for the demo

Examples/AdvancedEffects/iOS/Images.xcassets/Image.imageset/Contents.json

+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x",
+      "filename" : "Image-2.jpg"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x",
+      "filename" : "Image-1.jpg"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x",
+      "filename" : "Image.jpg"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file

Examples/AdvancedEffects/package.json

@@ -6,7 +6,7 @@
     "start": "node_modules/react-native/packager/packager.sh"
   },
   "dependencies": {
-    "gl-react-native": "0.0.x",
+    "gl-react-native": "../..",
     "glsl-transitions": "^2015.8.17",
     "react-native": "^0.9.0"
   },

Examples/AdvancedEffects/src/Slideshow.js

@@ -23,7 +23,6 @@ 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;

Examples/AdvancedEffects/src/Vignette.js

@@ -24,13 +24,12 @@ vec2 lookup (vec2 offset, float amp2) {
 void main() {
   float dist = distance(uv, finger);
   float amp2 = pow(1.0 - dist, 2.0);
-  float colorSeparation = 0.1 * amp2;
-  float a = atan(uv.y-finger.y, uv.x-finger.x);
-  vec2 delta = vec2(cos(a), sin(a));
+  float colorSeparation = 0.02 * mix(amp2, 1.0, 0.5);
+  vec2 orientation = vec2(1.0, 0.0);
   gl_FragColor = vec4(
     vec3(
-    texture2D(texture, lookup(colorSeparation * delta, amp2)).r,
-    texture2D(texture, lookup(-colorSeparation * delta, amp2)).g,
+    texture2D(texture, lookup(colorSeparation * orientation, amp2)).r,
+    texture2D(texture, lookup(-colorSeparation * orientation, amp2)).g,
     texture2D(texture, lookup(vec2(0.0), amp2)).b),
     1.0-min(0.95, pow(1.8 * distance(uv, finger), 4.0) + 0.5 * pow(distance(fract(50.0 * uv.y), 0.5), 2.0)));
 }
@@ -54,7 +53,7 @@ class Vignette extends React.Component {
   }
 
   render () {
-    const { width, height, time, i, source } = this.props;
+    const { width, height, time, source } = this.props;
     const { finger } = this.state;
     return <GL.View
       onStartShouldSetResponder={() => true}
@@ -65,9 +64,9 @@ class Vignette extends React.Component {
       opaque={false}
       uniforms={{
         time: time,
-        freq: 10 + 2 * Math.sin(0.7*time + i),
+        freq: 10 + 2 * Math.sin(0.7*time),
         texture: source,
-        amp: 0.05 + Math.max(0, 0.03*i*Math.cos(time + 2*i)),
+        amp: 0.05 + Math.max(0, 0.03*Math.cos(time)),
         moving: 0,
         finger: finger
       }}

Examples/AdvancedEffects/src/index.js

@@ -18,9 +18,10 @@ class AdvancedEffects extends React.Component {
     this.state = {
       time: 0.02,
       frames: 1,
+      embeddedImage: require("image!Image"),
       images:
        //"MQtLWbD,N8a9CkZ,adCmISK,AedZQ4N,y9qRJR3,brzKTYZ,NSyk07l,EaZiWfn,I1KZdnl,DoQBdzT,slIt2Ww,DA12puU,IYLdRFW,oqmO4Po,T6NaLyI,6XAPrAY,thYzbif,4qmqo3o,8xT2J96,ZCa2pWq,loQfDN2,oabfA68,uOXqDRY,MyyS4vK,fhNYTX4"
-        "ljVkFzQ,ljVkFzQ,qM9BHCy,F7NKlQF,rYcweR7,IE8T6UX,3On9QEu"
+        "wxqlQkh,G2Whuq3,0bUSEBX,giP58XN,iKdXwVm,IvpoR40,zJIxPEo,CKlmtPs,fnMylHI,vGXYiYy,MnOB9Le,YqsZKgc,0BJobQo,Otbz312"
           .split(",")
           .map(id => ({ uri: `http://imgur.com/${id}.jpg` }))
     };
@@ -40,7 +41,7 @@ class AdvancedEffects extends React.Component {
   }
 
   render () {
-    const {time, frames, images} = this.state;
+    const {time, frames, images, embeddedImage} = this.state;
 
     const nbVignettes = 1;
     const imgW = Math.floor(viewportW/nbVignettes);
@@ -64,17 +65,12 @@ class AdvancedEffects extends React.Component {
           height={introH}
         />
 
-        <View style={{ flex: 1, flexWrap: "wrap", flexDirection: "row" }}>
-        {images.slice(0, nbVignettes).map((source, i) =>
-          <Vignette key={i}
+        <Vignette
           time={time}
           width={imgW}
           height={imgH}
-            i={i}
-            source={source}
+          source={embeddedImage}
         />
-        )}
-        </View>
 
         <Slideshow
           time={time}