Simple web GLSL using canvas-sketch

canvas-sketch-shaders.js

import canvasSketch from "canvas-sketch";
import createShader from "canvas-sketch-util/shader";
import glsl from "glslify";

// Note that you need to install `glslify` and `canvas-sketch-util`
// separately from `canvas-sketch`

// Configuration
const width = 8,
  height = 6,
  pixelsPerInch = 300;

const resolution = [width * pixelsPerInch, height * pixelsPerInch];

const settings = {
  context: "webgl",
  dimensions: [width, height],
  units: "in",
  animate: true,
  pixelsPerInch: pixelsPerInch,
};

// glsl code
const frag = glsl`
  #ifdef GL_ES
  precision mediump float;
  #endif

	uniform float time;
	uniform vec2 resolution;

  void main() {
    float normalizedX = gl_FragCoord.x / resolution.x;
    float normalizedY = gl_FragCoord.y / resolution.y;

    float xCycle = sin(normalizedX + time);
    float yCycle = cos(normalizedY + time);

    gl_FragColor = vec4(xCycle, yCycle, 1.0, 1.0);
  }
`;

// Drawing
// Uniforms are passed to your shaders here in the `uniforms` parameter.
const sketch = ({ gl }) => {
  return createShader({
    gl,
    frag,
    uniforms: {
      time: ({ time }) => time,
      resolution: resolution,
    },
  });
};

canvasSketch(sketch, settings);