more examples in simple

Examples/AdvancedEffects/src/TransitionGenerator.js

@@ -13,7 +13,7 @@ const transitions = [
   } ],
   "glitch displace",
   [ "Mosaic", function () {
-    const dx = Math.round(Math.random() * 6 - 3), dy = Math.round(Math.random() * 6 - 3);
+    let dx = Math.round(Math.random() * 6 - 3), dy = Math.round(Math.random() * 6 - 3);
     if (dx===0 && dy===0) dy = -1;
     return { endx: dx, endy: dy };
   } ],

Examples/Simple/AnimatedHelloGL.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  helloGL: {
+    frag: `
+precision highp float;
+varying vec2 uv;
+
+uniform float value;
+
+void main () {
+  gl_FragColor = vec4(uv.x, uv.y, value, 1.0);
+}
+    `
+  }
+});
+
+class HelloGL extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      value: 0
+    };
+  }
+  componentDidMount () {
+    const loop = time => {
+      requestAnimationFrame(loop);
+      this.setState({
+        value: (1 + Math.cos(time / 1000)) / 2 // cycle between 0 and 1
+      });
+    };
+    requestAnimationFrame(loop);
+  }
+  render () {
+    const { width, height } = this.props;
+    const { value } = this.state;
+    return <GL.View
+      shader={shaders.helloGL}
+      width={width}
+      height={height}
+      uniforms={{ value }}
+    />;
+  }
+}
+
+module.exports = HelloGL;

Examples/Simple/OneFingerResponse.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  pieProgress: {
+    frag: `
+precision mediump float;
+varying vec2 uv;
+
+uniform float pressed;
+uniform vec2 position;
+
+void main () {
+  float dist = pow(1.0 - distance(position, uv), 4.0);
+  float edgeDistX = pow(1.0 - distance(position.x, uv.x), 24.0);
+  float edgeDistY = pow(1.0 - distance(position.y, uv.y), 24.0);
+  gl_FragColor = pressed * vec4(0.8 * dist + edgeDistX, 0.7 * dist + edgeDistY, 0.6 * dist, 1.0);
+}
+    `
+  }
+});
+
+class PieProgress extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      pressed: 0,
+      position: [ 0, 0 ]
+    };
+    this.onTouchStart = this.onTouchStart.bind(this);
+    this.onTouchEnd = this.onTouchEnd.bind(this);
+    this.onTouchMove = this.onTouchMove.bind(this);
+  }
+  onTouchStart (evt) {
+    this.setState({
+      pressed: 1
+    });
+    this.onTouchMove(evt);
+  }
+  onTouchMove (evt) {
+    const { width, height } = this.props;
+    const { locationX, locationY } = evt.nativeEvent;
+    this.setState({
+      position: [
+        Math.max(0, Math.min(locationX/width, 1)),
+        Math.max(0, Math.min(1-locationY/height, 1))
+      ]
+    });
+  }
+  onTouchEnd () {
+    this.setState({
+      pressed: 0
+    });
+  }
+  render () {
+    const { width, height } = this.props;
+    const { pressed, position } = this.state;
+    return <GL.View
+      onStartShouldSetResponderCapture={() => true}
+      onMoveShouldSetResponderCapture={() => true}
+      onResponderTerminationRequest={() => false}
+      onResponderGrant={this.onTouchStart}
+      onResponderMove={this.onTouchMove}
+      onResponderRelease={this.onTouchEnd}
+      onResponderTerminate={this.onTouchEnd}
+      width={width}
+      height={height}
+      shader={shaders.pieProgress}
+      uniforms={{ pressed, position }}
+    />;
+  }
+}
+
+module.exports = PieProgress;

Examples/Simple/PieProgress.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  pieProgress: {
+    frag: `
+precision mediump float;
+varying vec2 uv;
+
+uniform vec4 colorInside, colorOutside;
+uniform float radius;
+uniform float progress;
+uniform vec2 dim;
+
+const vec2 center = vec2(0.5);
+const float PI = acos(-1.0);
+
+void main () {
+  vec2 norm = dim / min(dim.x, dim.y);
+  vec2 p = uv * norm - (norm-1.0)/2.0;
+  vec2 delta = p - center;
+  float inside =
+    step(length(delta), radius) *
+    step((PI + atan(delta.y, -delta.x)) / (2.0 * PI), progress);
+  gl_FragColor = mix(
+    colorOutside,
+    colorInside,
+    inside
+  );
+}
+    `
+  }
+});
+
+class PieProgress extends React.Component {
+  render () {
+    const {
+      width,
+      height,
+      progress,
+      colorInside,
+      colorOutside,
+      radius
+    } = this.props;
+    return <GL.View
+      width={width}
+      height={height}
+      shader={shaders.pieProgress}
+      opaque={false}
+      uniforms={{
+        dim: [ width, height ],
+        progress,
+        colorInside,
+        colorOutside,
+        radius
+      }}
+    />;
+  }
+}
+PieProgress.defaultProps = {
+  colorInside: [0, 0, 0, 0],
+  colorOutside: [0, 0, 0, 0.5],
+  radius: 0.4
+};
+
+module.exports = PieProgress;

Examples/Simple/index.ios.js

@@ -13,6 +13,9 @@ const {
 const HelloGL = require("./HelloGL");
 const Saturation = require("./Saturation");
 const HueRotate = require("./HueRotate");
+const PieProgress = require("./PieProgress");
+const OneFingerResponse = require("./OneFingerResponse");
+const AnimatedHelloGL = require("./AnimatedHelloGL");
 
 class Simple extends React.Component {
   constructor (props) {
@@ -20,6 +23,7 @@ class Simple extends React.Component {
     this.state = {
       saturationFactor: 1,
       hue: 0,
+      progress: 0.2,
       text: "and I will return leading the pack"
     };
   }
@@ -29,7 +33,8 @@ class Simple extends React.Component {
     const {
       saturationFactor,
       hue,
-      text
+      text,
+      progress
     } = this.state;
 
     return <ScrollView style={styles.container}>
@@ -43,7 +48,7 @@ class Simple extends React.Component {
           <HelloGL width={256} height={171} />
         </View>
 
-        <Text style={styles.demoTitle}>2. Saturation on an Image</Text>
+        <Text style={styles.demoTitle}>2. Saturate an Image</Text>
         <View style={styles.demo}>
           <Saturation
             width={256}
@@ -52,13 +57,12 @@ class Simple extends React.Component {
             image={{ uri: "http://i.imgur.com/iPKTONG.jpg" }}
           />
         <SliderIOS
-          value={saturationFactor}
           maximumValue={8}
           onValueChange={saturationFactor => this.setState({ saturationFactor })}
         />
         </View>
 
-        <Text style={styles.demoTitle}>3. Hue Rotation on Text + Image</Text>
+        <Text style={styles.demoTitle}>3. Hue Rotate on Text+Image</Text>
         <View style={styles.demo}>
           <HueRotate
             width={256}
@@ -69,7 +73,6 @@ class Simple extends React.Component {
             <Text style={styles.demoText2}>{text}</Text>
           </HueRotate>
           <SliderIOS
-            value={hue}
             maximumValue={2 * Math.PI}
             onValueChange={hue => this.setState({ hue })}
           />
@@ -80,6 +83,34 @@ class Simple extends React.Component {
           />
         </View>
 
+        <Text style={styles.demoTitle}>4. Progress Indicator</Text>
+        <View style={styles.demo}>
+          <PieProgress
+            width={256}
+            height={180}
+            progress={progress}
+          />
+          <SliderIOS
+            onValueChange={progress => this.setState({ progress })}
+          />
+        </View>
+
+        <Text style={styles.demoTitle}>5. Touch Responsive</Text>
+        <View style={styles.demo}>
+          <OneFingerResponse
+            width={256}
+            height={180}
+          />
+        </View>
+
+        <Text style={styles.demoTitle}>6. Animation</Text>
+        <View style={styles.demo}>
+          <AnimatedHelloGL
+            width={256}
+            height={180}
+          />
+        </View>
+
       </View>
     </ScrollView>;
   }
@@ -100,12 +131,21 @@ const styles = StyleSheet.create({
   demos: {
     flex: 1,
     justifyContent: "center",
-    alignItems: "center",
+    marginLeft: 40,
+    width: 276,
+    marginBottom: 40,
   },
   demoTitle: {
+    marginBottom: 16,
+    fontStyle: "italic",
+    alignSelf: "flex-start",
+    color: "#999",
+    fontWeight: "300",
     fontSize: 20,
-    margin: 5,
-    fontStyle: "italic"
+  },
+  demo: {
+    marginBottom: 64,
+    marginLeft: 20,
   },
   demoText1: {
     position: "absolute",