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",