creating a dynamic uniform for shader

[cdaein]

Hi,
thank you for the great work.
I see that I can use dynamic sketch props such as time as a uniform,
but is there a way that I can create my own dynamic uniform that updates every frame?

What I ultimately want to do is to create array uniforms that update in the sketch and send them to the fragment shader that will update each frame.

I appreciate any help you might be able to give.

Below is a simple example code:

const canvasSketch = require("canvas-sketch");
const createShader = require("canvas-sketch-util/shader");
const glsl = require("glslify");

// Setup our sketch
const settings = {
  dimensions: [800, 800],
  context: "webgl",
  animate: true,
  duration: 3,
  fps: 30,
};

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

  varying vec2 vUv;
  uniform float sizes[3];

  float sdCircle( vec2 p, float r ) {
    return length(p) - r;
  }

  void main () {
    vec2 p = vec2(vUv);
    p.y = 1.0 - p.y;
    
    vec3 col = vec3(0.1);

    for (int i = 0; i < 3; i++) {
      float circ = sdCircle(p - vec2(0.25 + float(i)/4., 0.5), sizes[i] * 0.1);
      circ = 1.0 - smoothstep(0.0, 0.05, circ);
      col += circ;
    }

    gl_FragColor = vec4(col, 1.);
  }
`);

// Your sketch, which simply returns the shader
const sketch = ({ gl, playhead }) => {
  let sizes = [0.2, 0.5, 0.8];

  // Q: how to update array values each frame and send as uniforms?
  sizes = sizes.map((el) => Math.sin(el + playhead));

  // regl does not take array uniforms at once, so this is a workaround..
  const uniforms = {};
  for (let i = 0; i < sizes.length; i++) {
    uniforms[`sizes[${i}]`] = sizes[i];
  }

  return createShader({
    gl,
    frag,
    uniforms: {
      ...uniforms,
    },
  });
};

canvasSketch(sketch, settings);