From 96898fba26e2626de4cb5f75bbb18aca12dc2247 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= Date: Wed, 19 Aug 2015 23:48:23 +0200 Subject: [PATCH] more examples in simple --- .../src/TransitionGenerator.js | 2 +- Examples/Simple/AnimatedHelloGL.js | 47 ++++++++++++ Examples/Simple/OneFingerResponse.js | 74 +++++++++++++++++++ Examples/Simple/PieProgress.js | 66 +++++++++++++++++ Examples/Simple/index.ios.js | 56 ++++++++++++-- 5 files changed, 236 insertions(+), 9 deletions(-) create mode 100644 Examples/Simple/AnimatedHelloGL.js create mode 100644 Examples/Simple/OneFingerResponse.js create mode 100644 Examples/Simple/PieProgress.js diff --git a/Examples/AdvancedEffects/src/TransitionGenerator.js b/Examples/AdvancedEffects/src/TransitionGenerator.js index c4a8782..ae9e17a 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 0000000..a2f3689 --- /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 0000000..43bd608 --- /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 0000000..8c21603 --- /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 bba0b25..ba6d7ea 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", -- 2.26.2