How to use the gl-react.createComponent function in gl-react

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});
      }

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,
    // }

vec3 bbTexel = texture2D(inputImageTexture2, uv).rgb;

 texel.r = texture2D(inputImageTexture3, vec2(bbTexel.r, texel.r)).r;
 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;

 */

export default GL.createComponent(
    ({inputImageTexture, ...rest}) =>
        ,
    {displayName: "hudson"}
);

const GL = require("gl-react");
const React = require("react");
const glslify = require("glslify");

const shaders = GL.Shaders.create({
  layer: {
    frag: glslify(`${__dirname}/layer.frag`)
  }
});

module.exports = GL.createComponent(
  ({ children, ...rest }) => {
    if (!children || children.length !== 2) throw new Error("You must provide 2 children to Layer");
    const [t1, t2] = children;
    return ;
  },
  {
    displayName: "Layer"
  }
);

p *= vec2(0.5,1.5) + 0.8*vec2(0.5,-0.5);

  float a = atan(p.x,p.y)/3.141593;
  float r = length(p);

  float h = abs(a);
  float d = (13.0*h - 22.0*h*h + 10.0*h*h*h)/(6.0-5.0*h);

  float f = step(r,d) * pow(1.0-r/d,0.25);
  gl_FragColor = vec4(mix(vec3(0.0), color, f), 1.0);
}
    `
  }
});

module.exports = GL.createComponent(
  ({ color }) => ,
  {
    displayName: "Heart",
    propTypes: {
      color: PropTypes.array.isRequired
    }
  });

const GL = require("gl-react");
const React = require("react");
const glslify = require("glslify");

const shaders = GL.Shaders.create({
  hueRotate: {
    frag: glslify(`${__dirname}/hueRotate.frag`)
  }
});

module.exports = GL.createComponent(
  ({ width, height, hue, children: tex }) =>
  ,
  { displayName: "HueRotate"});

const shaders = GL.Shaders.create({
  TransparentNonPremultiplied: {
    frag: `
precision highp float;

varying vec2 uv;
uniform sampler2D t;

void main () {
  gl_FragColor = vec4(texture2D(t, uv).rgb, 0.0);
}
`
  }
});

module.exports = GL.createComponent(
  ({ children: t, ...rest }) =>
  ,
{ displayName: "TransparentNonPremultiplied" });

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 }) =>
    
      {children}
    
, {
  displayName: "Blur1D"
});

precision highp float;
varying vec2 uv;
uniform sampler2D t;
uniform vec4 crop;
vec2 invert (vec2 p) {${""}
  return vec2(p.x, 1.0-p.y);
}
void main () {
  vec2 p = invert(invert(uv) * crop.zw + crop.xy);
  gl_FragColor =
    texture2D(t, p);
}`
  }
})

export default GL.createComponent(({
    width,
    height,
    source,
    size,
    move,
    rows,
    cols,
    position,
  }) => {
    const { width: imageWidth, height: imageHeight } = size
    const viewportRatio = width / height
    const imageRatio = imageWidth / imageHeight
    const ratio = Math.max(viewportRatio, imageRatio)

    var canvasSize = [
      (viewportRatio / ratio) * imageWidth,

texel = mix(texture2D(inputImageTexture5, lookup).rgb, texel, .5);

        lookup.x = texel.r;
        texel.r = texture2D(inputImageTexture6, lookup).r;
        lookup.x = texel.g;
        texel.g = texture2D(inputImageTexture6, lookup).g;
        lookup.x = texel.b;
        texel.b = texture2D(inputImageTexture6, lookup).b;

        gl_FragColor = vec4(texel, 1.0);

      }`
  }
});

module.exports = GL.createComponent(
  ({ children: inputImageTexture }) => {
    return 
  },
  {
    displayName: "Brannan",
    propTypes: {