From 333e382a93570b24442ed4c04186ad48559db322 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <renaudeau.gaetan@gmail.com>
Date: Tue, 16 Feb 2016 09:47:32 +0100
Subject: [PATCH] examples use gl-react-blur

---
 example/src/Simple/Blur.js   | 13 ----------
 example/src/Simple/Blur1D.js | 47 ---------------------------------
 example/src/Simple/index.js  | 13 ++++------
 example/src/Tests/Blur.js    | 50 ------------------------------------
 example/src/Tests/Blur1D.js  | 48 ----------------------------------
 example/src/Tests/index.js   |  2 +-
 6 files changed, 6 insertions(+), 167 deletions(-)
 delete mode 100644 example/src/Simple/Blur.js
 delete mode 100644 example/src/Simple/Blur1D.js
 delete mode 100644 example/src/Tests/Blur.js
 delete mode 100644 example/src/Tests/Blur1D.js

diff --git a/example/src/Simple/Blur.js b/example/src/Simple/Blur.js
deleted file mode 100644
index 0f3ae20..0000000
--- a/example/src/Simple/Blur.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const GL = require("gl-react");
-const React = require("react");
-const Blur1D = require("./Blur1D");
-
-module.exports = GL.createComponent(({ width, height, factor, children }) =>
-    <Blur1D width={width} height={height} direction={[ factor, 0 ]}>
-      <Blur1D width={width} height={height} direction={[ 0, factor ]}>
-        {children}
-      </Blur1D>
-    </Blur1D>
-, {
-  displayName: "Blur"
-});
diff --git a/example/src/Simple/Blur1D.js b/example/src/Simple/Blur1D.js
deleted file mode 100644
index 85e85b0..0000000
--- a/example/src/Simple/Blur1D.js
+++ /dev/null
@@ -1,47 +0,0 @@
-const GL = require("gl-react");
-const React = require("react");
-
-const shaders = GL.Shaders.create({
-  blur1D: {
-    frag: `
-precision highp float;
-varying vec2 uv;
-uniform sampler2D t;
-uniform vec2 direction;
-uniform vec2 resolution;
-
-// from https://github.com/Jam3/glsl-fast-gaussian-blur
-vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
-  vec4 color = vec4(0.0);
-  vec2 off1 = vec2(1.3846153846) * direction;
-  vec2 off2 = vec2(3.2307692308) * direction;
-  color += texture2D(image, uv) * 0.2270270270;
-  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
-  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
-  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
-  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
-  return color;
-}
-
-void main () {
-  gl_FragColor = blur9(t, uv, resolution, direction);
-}
-    `
-  }
-});
-
-module.exports = GL.createComponent(
-  ({ width, height, direction, children }) =>
-    <GL.Node
-      shader={shaders.blur1D}
-      width={width}
-      height={height}
-      uniforms={{
-        direction,
-        resolution: [ width, height ]
-      }}>
-      <GL.Uniform name="t">{children}</GL.Uniform>
-    </GL.Node>
-, {
-  displayName: "Blur1D"
-});
diff --git a/example/src/Simple/index.js b/example/src/Simple/index.js
index c7fc7aa..29f9d22 100644
--- a/example/src/Simple/index.js
+++ b/example/src/Simple/index.js
@@ -28,7 +28,7 @@ const HueRotate = require("./HueRotate");
 const PieProgress = require("./PieProgress");
 const OneFingerResponse = require("./OneFingerResponse");
 const AnimatedHelloGL = require("./AnimatedHelloGL");
-const Blur = require("./Blur");
+const {Blur} = require("gl-react-blur");
 const Button = require("./Button");
 
 class Demo extends Component {
@@ -206,7 +206,7 @@ class Simple extends Component {
             </TouchableOpacity>
             <View pointerEvents="box-none" style={{ position: "absolute", top: 0, left: 0, backgroundColor: "transparent" }}>
               <Surface width={256} height={180} opaque={false} eventsThrough>
-                <PieProgress progress={progress} width={256} height={180} />
+                <PieProgress progress={progress} />
               </Surface>
             </View>
           </View>
@@ -230,9 +230,9 @@ class Simple extends Component {
           />
         </Demo>
 
-        <Demo id={7} current={current} title="7. Blur (2-pass)">
+        <Demo id={7} current={current} title="7. Blur">
           <Surface preload width={256} height={180}>
-            <Blur width={256} height={180} factor={factor + 1}>
+            <Blur factor={factor * 2} passes={4}>
               http://i.imgur.com/3On9QEu.jpg
             </Blur>
           </Surface>
@@ -249,10 +249,7 @@ class Simple extends Component {
             eventsThrough
             visibleContent>
             <HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
-              <Blur
-                width={256}
-                height={160}
-                factor={factor}>
+              <Blur factor={factor}>
                 <View style={{ width: 256, height: 160, padding: 10, backgroundColor: "#f9f9f9" }}>
                   <Slider
                     style={{ height: 80 }}
diff --git a/example/src/Tests/Blur.js b/example/src/Tests/Blur.js
deleted file mode 100644
index 8433c9c..0000000
--- a/example/src/Tests/Blur.js
+++ /dev/null
@@ -1,50 +0,0 @@
-const GL = require("gl-react");
-const React = require("react");
-const {
-  PropTypes
-} = React;
-const Blur1D = require("./Blur1D");
-
-const NORM = Math.sqrt(2)/2;
-
-function directionForPass (p, factor, total) {
-  const f = factor * p / total;
-  switch (p%4) {
-  case 0: return [f,0];
-  case 1: return [0,f];
-  case 2: return [f*NORM,f*NORM];
-  case 3: return [f*NORM,-f*NORM];
-  }
-  return p%2 ? [f,0] : [0,f];
-}
-
-/** Usages:
- - Small blur:
- <Blur factor={0.5} passes={2} width={w} height={h}>{url}</Blur>
- - Medium blur:
- <Blur factor={2} passes={4} width={w} height={h}>{url}</Blur>
- - Powerful blur:
- <Blur factor={20} passes={6} width={w} height={h}>{url}</Blur>
- */
-
-module.exports = GL.createComponent(
-  ({ width, height, factor, children, passes }) => {
-    const rec = p => p <= 0 ? children :
-    <Blur1D width={width} height={height} direction={directionForPass(p, factor, passes)}>
-      {rec(p-1)}
-    </Blur1D>;
-    return rec(passes);
-  },
-  {
-    displayName: "Blur",
-    defaultProps: {
-      passes: 2
-    },
-    propTypes: {
-      width: PropTypes.number,
-      height: PropTypes.number,
-      factor: PropTypes.number.isRequired,
-      children: PropTypes.any.isRequired,
-      passes: PropTypes.number
-    }
-  });
diff --git a/example/src/Tests/Blur1D.js b/example/src/Tests/Blur1D.js
deleted file mode 100644
index b9adbfe..0000000
--- a/example/src/Tests/Blur1D.js
+++ /dev/null
@@ -1,48 +0,0 @@
-const GL = require("gl-react");
-const React = require("react");
-const {
-  PropTypes
-} = React;
-
-const shaders = GL.Shaders.create({
-  blur1D: {
-    frag: `
-precision highp float;
-varying vec2 uv;
-uniform sampler2D t;
-uniform vec2 resolution;
-uniform vec2 direction;
-// Credits: https://github.com/Jam3/glsl-fast-gaussian-blur
-vec4 blur9 (sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
-  vec4 color = vec4(0.0);
-  vec2 off1 = vec2(1.3846153846) * direction;
-  vec2 off2 = vec2(3.2307692308) * direction;
-  color += texture2D(image, uv) * 0.2270270270;
-  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
-  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
-  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
-  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
-  return color;
-}
-void main () {
-  gl_FragColor = blur9(t, uv, resolution, direction);
-}
-    `
-  }
-});
-
-module.exports = GL.createComponent(
-  ({ width, height, direction, children }) =>
-    <GL.Node
-      shader={shaders.blur1D}
-      width={width}
-      height={height}
-      uniforms={{
-        direction,
-        resolution: [ width, height ]
-      }}>
-      <GL.Uniform name="t">{children}</GL.Uniform>
-    </GL.Node>
-, {
-  displayName: "Blur1D"
-});
diff --git a/example/src/Tests/index.js b/example/src/Tests/index.js
index c2a44f4..35321df 100644
--- a/example/src/Tests/index.js
+++ b/example/src/Tests/index.js
@@ -6,7 +6,7 @@ const {
   Image,
 } = React;
 const { Surface } = require("gl-react-native");
-const Blur = require("./Blur");
+const {Blur} = require("gl-react-blur");
 const Add = require("./Add");
 const Multiply = require("./Multiply");
 const Layer = require("./Layer");
-- 
2.26.2