How to use gl-react - 10 common examples

float g = color * colorMult.y;
          	float b = sin( color + time / 2.0 ) * colorMult.x;

          	gl_FragColor = vec4(r, g, b, 1.0 );

          }`
      }
    });
    const Blobby = GL.createComponent(
      ({ time, resolution, depth, rate }) =>
      
     );
    const Sinewave = GL.createComponent(
       ({ time, resolution, colorMult, coeffx, coeffy, coeffz }) =>
       
      );
    
    // TODO: 
    // Listen to sketch window events to toggle `isEditor`
    const handleClickProcessing = event => {
      const ctx = this;
      if(!ctx.state.isEditor) {
        console.log("Interpreting Editor");
        store.dispatch(startProcessing("localhost:3001"));
        ctx.setState({isEditor: true});
      }

} else if (f) {
      draw = true;
      drawPosition = [size[0] * Math.random(), 0];
      drawRadius = 4;
      drawElement = 2;
      console.log(drawElement, drawPosition, drawPosition);
    }

    return (
      
    );
  }
}

import isAnimated from "gl-react/src/isAnimated";
import makeSurface from "./makeSurface";
import GLCanvas from "./GLCanvas";
import {NativeModules, View, Animated, Image} from "react-native";
import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";

const {RNGLContext} = NativeModules;
invariant(RNGLContext,
`gl-react-native: the native module is not available.
Make sure you have properly configured it.
See README install instructions.

NativeModules.RNGLContext is %s`, RNGLContext);

// Hook Shaders to RNGLContext
Shaders.setImplementation({
  add: (id, shader) =>
  new Promise((resolve, reject) =>
    RNGLContext.addShader(id, shader, (error, result) => {
      if (error) reject(error);
      else resolve(result);
    })),
  remove: id => RNGLContext.removeShader(id)
});

if (__DEV__) {
  runtime.decorateVDOMContent = vdom => {
    if (vdom && vdom.type === Image && !vdom.props.glReactUseImage) {
      console.warn(
`gl-react: Found a ReactNative.Image element. This is not performant. Try one of these:
- pass-in directly the image URL in your uniforms.
- use gl-react-image which implements the same Image API directly in OpenGL. https://github.com/gre/gl-react-image

//@flow
import React, { Component } from "react";
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-dom";
import {Motion, spring} from "react-motion";

const shaders = Shaders.create({
  Heart: { // inspired from http://glslsandbox.com/e#29521.0
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform sampler2D image;
uniform vec3 color;
uniform float over, toggle;
void main() {
  float scale = 1.0 - 0.1 * over - 0.8 * toggle;
  vec2 offset = vec2(0.0, -0.3 - 0.1 * over - 0.7 * toggle);
  vec2 p = scale * (2.0 * uv - 1.0 + offset);
  float a = atan(p.x, p.y) / ${Math.PI/* \o/ */};
  float r = length(p);
  float h = abs(a);
  float d = (13.0*h - 22.0*h*h + 10.0*h*h*h - 0.3 * (1.0-over))/(6.0-5.0*h);
  float f = step(r,d) * pow(max(1.0-r/d, 0.0),0.25);

//@flow
import React from "react";
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-native";
import timeLoop from "../../HOC/timeLoop";

const shaders = Shaders.create({
  squareTunnel: {
// from https://en.wikipedia.org/wiki/Shadertoy
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform float iGlobalTime;
void main() {
  vec2 p = 2.0 * uv - vec2(1.0);
  float a = atan(p.y,p.x);
  float r = pow( pow(p.x*p.x,4.0) + pow(p.y*p.y,4.0), 1.0/8.0 );
  vec2 uv = vec2( 1.0/r + 0.2*iGlobalTime, a );
  float f = cos(12.0*uv.x)*cos(6.0*uv.y);
  vec3 col = 0.5 + 0.5*sin( 3.1416*f + vec3(0.0,0.5,1.0) );
  col = col*r;
  gl_FragColor = vec4( col, 1.0 );
}` }

}
    };
    handle = raf(loop);

    return () => raf.cancel(handle);
  }, [onFrame]);

  return (
    
      <video>
    </video>
  );
};

// Our example will simply split R G B channels of the video.
const shaders = Shaders.create({
  SplitColor: {
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform sampler2D children;
void main () {
  float y = uv.y * 3.0;
  vec4 c = texture2D(children, vec2(uv.x, mod(y, 1.0)));
  gl_FragColor = vec4(
    c.r * step(2.0, y) * step(y, 3.0),
    c.g * step(1.0, y) * step(y, 2.0),
    c.b * step(0.0, y) * step(y, 1.0),
    1.0);
}`
  }
  //^NB perf: in fragment shader paradigm, we want to avoid code branch (if / for)

texel.g = texture2D(inputImageTexture3, vec2(bbTexel.g, texel.g)).g;
        texel.b = texture2D(inputImageTexture3, vec2(bbTexel.b, texel.b)).b;

        vec4 mapped;
        mapped.r = texture2D(inputImageTexture4, vec2(texel.r, .16666)).r;
        mapped.g = texture2D(inputImageTexture4, vec2(texel.g, .5)).g;
        mapped.b = texture2D(inputImageTexture4, vec2(texel.b, .83333)).b;
        mapped.a = 1.0;

        gl_FragColor = mapped;

      }`
  }
});

module.exports = GL.createComponent(
  ({ inputImageTexture }) => {
    return 
  },
  {
    displayName: "Amaro",
    // propTypes: {
    //   children: PropTypes.any.isRequired,
    // }

}
});

// This implements a blur on a single direction (x or y axis for instance)
// connectSize will inject for us the width/height from context if not provided
export const Blur1D = connectSize(
  ({ children: t, direction, width, height }) => (
    
  )
);

// BlurXY is a basic blur that apply Blur1D on Y and then on X
export const BlurXY = connectSize(({ factor, children }) => (
  
    {children}
  
));

export default class Example extends Component {
  render() {
    const { factor, width } = this.props;
    return (
      
        
          {{ uri: "https://i.imgur.com/iPKTONG.jpg" }}
        
      
    );
  }

function directionForPass(p, factor, total) {
  const f = factor * 2 * Math.ceil(p / 2) / total;
  switch ((p - 1) % 4) { // alternate horizontal, vertical and 2 diagonals
    case 0:
      return [f, 0];
    case 1:
      return [0, f];
    case 2:
      return [f * NORM, f * NORM];
    case 3:
      return [f * NORM, -f * NORM];
  }
}

export default connectSize(
  class Blur extends Component {
    props: {
      factor: number,
      children?: any,
      passes: number,
      width: any,
      height: any,
      pixelRatio: number,
    };

    static defaultProps = {
      passes: 2,
    };

    render() {
      const {

}
});

// Same concept than Blur1D except it takes one more prop:
// a map texture that tells the blur intensity for a given position.
export const BlurV1D = connectSize(
  ({ children: t, direction, map, width, height }) => (
    
  )
);

// And its N-pass version
export const BlurV = connectSize(({ children, factor, map, passes }) => {
  const rec = pass =>
    pass <= 0
      ? children
      : 
          {rec(pass - 1)}
        ;
  return rec(passes);
});

export default class Example extends Component {
  render() {
    const { factor, passes, map } = this.props;
    return (
      
        
          https://i.imgur.com/NjbLHx2.jpg