diff --git a/Examples/AdvancedEffects/src/TransitionGenerator.js b/Examples/AdvancedEffects/src/TransitionGenerator.js
index c4a8782c15773a4b7c8cc25586ca67f321648c3d..ae9e17a118ba91b1e3d4da9751191ae0ba6962c0 100644
--- a/Examples/AdvancedEffects/src/TransitionGenerator.js
+++ b/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 };
} ],
diff --git a/Examples/Simple/AnimatedHelloGL.js b/Examples/Simple/AnimatedHelloGL.js
new file mode 100644
index 0000000000000000000000000000000000000000..a2f368990d8aae84a376e0ed99e455253d94c3a6
--- /dev/null
+++ b/Examples/Simple/AnimatedHelloGL.js
@@ -0,0 +1,47 @@
+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 ;
+ }
+}
+
+module.exports = HelloGL;
diff --git a/Examples/Simple/OneFingerResponse.js b/Examples/Simple/OneFingerResponse.js
new file mode 100644
index 0000000000000000000000000000000000000000..43bd608bd567d8f22ed9b214b772d07fa4980bbe
--- /dev/null
+++ b/Examples/Simple/OneFingerResponse.js
@@ -0,0 +1,74 @@
+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 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;
diff --git a/Examples/Simple/PieProgress.js b/Examples/Simple/PieProgress.js
new file mode 100644
index 0000000000000000000000000000000000000000..8c21603be08a736701cbd03b16c4f80561ab8057
--- /dev/null
+++ b/Examples/Simple/PieProgress.js
@@ -0,0 +1,66 @@
+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 ;
+ }
+}
+PieProgress.defaultProps = {
+ colorInside: [0, 0, 0, 0],
+ colorOutside: [0, 0, 0, 0.5],
+ radius: 0.4
+};
+
+module.exports = PieProgress;
diff --git a/Examples/Simple/index.ios.js b/Examples/Simple/index.ios.js
index bba0b258892f5a961c63713ff0c274e0a6341561..ba6d7ea4c40f4fafdfa8fe70be77dbf571305afd 100644
--- a/Examples/Simple/index.ios.js
+++ b/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
@@ -43,7 +48,7 @@ class Simple extends React.Component {
- 2. Saturation on an Image
+ 2. Saturate an Image
this.setState({ saturationFactor })}
/>
- 3. Hue Rotation on Text + Image
+ 3. Hue Rotate on Text+Image
{text}
this.setState({ hue })}
/>
@@ -80,6 +83,34 @@ class Simple extends React.Component {
/>
+ 4. Progress Indicator
+
+
+ this.setState({ progress })}
+ />
+
+
+ 5. Touch Responsive
+
+
+
+
+ 6. Animation
+
+
+
+
;
}
@@ -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",