{"size": 1265, "ext": "js", "max_stars_repo_path": "shader/app.js", "max_stars_repo_name": "eaviles/nodejs-creative-coding", "max_stars_repo_stars_event_min_datetime": "2020-08-01T15:39:04.000Z", "max_stars_repo_stars_event_max_datetime": "2020-08-01T15:39:04.000Z", "max_issues_repo_path": "shader/app.js", "max_issues_repo_name": "eaviles/nodejs-creative-coding", "max_issues_repo_issues_event_min_datetime": "2022-01-27T16:12:51.000Z", "max_issues_repo_issues_event_max_datetime": "2022-01-27T16:12:51.000Z", "max_forks_repo_path": "shader/app.js", "max_forks_repo_name": "eaviles/nodejs-creative-coding", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 24.3269230769, "max_line_length": 70, "alphanum_fraction": 0.6221343874}
const canvasSketch = require('canvas-sketch');
const createShader = require('canvas-sketch-util/shader');
const glsl = require('glslify');

// Setup our sketch
const settings = {
  context: 'webgl',
  animate: true
};

// Your glsl code
const frag = glsl(`
  precision highp float;

  uniform float time;
  uniform float aspect;
  varying vec2 vUv;

  void main () {
    vec3 colorA = 0.2 + sin(time) + vec3(1.0, 0.0, 0.0);
    vec3 colorB = 0.2 + cos(time) + vec3(0.0, 0.0, 1.0);

    vec2 center = vUv - 0.5;
    center.x *= aspect;
    float dist = length(center);

    vec3 color = mix(colorA, colorB, vUv.x + vUv.y * sin(time * 2.0));
    float alpha = smoothstep(0.5, 0.5 - 0.001, dist * 1.75);
    gl_FragColor = vec4(color, alpha);
  }
`);

// Your sketch, which simply returns the shader
const sketch = ({ gl }) => {
  // Create the shader and return it
  return createShader({
    clearColor: false,
    // Pass along WebGL context
    gl,
    // Specify fragment and/or vertex shader strings
    frag,
    // Specify additional uniforms to pass down to the shaders
    uniforms: {
      // Expose props from canvas-sketch
      time: ({ time }) => time,
      aspect: ({ height, width }) => width / height
    }
  });
};

canvasSketch(sketch, settings);
