Shadertoy着色器未在p5js中编译

我一直在尝试导入一些我想在p5.js中使用的漂亮的shadertoy代码。

https://www.shadertoy.com/view/wtGyRz如果有人想看这里，这里是shadertoy代码。

我相信我已经将所有内容都更改为WEBGL的正确格式，但是它始终会出现编译错误，而且我不确定原因。我对WEBGL相对较新，并且使用着色器，因此非常感谢您的帮助。

所以这是我的超级简单的js代码：

let theShader;

function preload(){
  
  theShader = loadShader('shader.vert', 'shader.frag');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  noStroke();
}

function draw() {  
  shader(theShader);

  theShader.setUniform("iResolution", [width, height]);
  theShader.setUniform("iFrame", frameCount);
  theShader.setUniform("iMouse", [mouseX, map(mouseY, 0, height, height, 0)]);
  theShader.setUniform("iTime", millis()/1000);

  rect(0,0,width, height);
}

function windowResized(){
  resizeCanvas(windowWidth, windowHeight);
}

和我的顶点着色器：

attribute vec3 aPosition;

attribute vec2 aTexCoord;

void main() {

  vec4 positionVec4 = vec4(aPosition, 1.0);
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;

  gl_Position = positionVec4;
}

最后是错误点，我的片段着色器

#ifdef GL_ES
precision mediump float;
#endif
  
#define width 800.f
#define height 450.f
#define numColors 10
#define numCircles 100

uniform vec2 iResolution;
uniform int iFrame;
uniform vec2 iMouse;
uniform float iTime;


vec3 GetColor(vec2 coord, vec4 circles[numCircles], vec3 colors[numColors], float timeDelay){
    int value = 0;
    float r;
    float xc;
    float yc;
    float d = sqrt((coord[0] - xc)*(coord[0]-xc)+(coord[1]-yc)*(coord[1]-yc));
    for(int i = 0; i < numCircles; i++)
    {
        xc = circles[i][0];
        yc = circles[i][1];
        r = circles[i][2];
        d = sqrt((coord[0] - xc)*(coord[0]-xc)+(coord[1]-yc)*(coord[1]-yc));
        if(d <= r && iTime >= timeDelay * float(i))
        {
            value+= int(circles[i][3]);
        }
    }
    return colors[value % numColors];
}

void main(){
    float timeDelay = 0.05f;
    float timeFactor = 50.f;
    vec3 colors[numColors] = vec3[numColors](vec3(0.976, 0.254, 0.266),vec3(0.952, 0.447, 0.172),vec3(0.972, 0.588, 0.117),\
    vec3(0.976, 0.517, 0.290),vec3(0.976, 0.780, 0.309),vec3(0.564, 0.745, 0.427),vec3(0.262, 0.666, 0.545),\
    vec3(0.301,0.564,0.556),vec3(0.341,0.458,0.564),vec3(0.152,0.490,0.631));
    float timeInt = 0.f;
    int i = 0;
    float xGap = 1.f/11.f;
    float yGap = 1.f/11.f;
    vec4 circles[numCircles];
    for(float y = height * yGap; y < height; y+= height * yGap)
    {
        for (float x = width * xGap; x < width; x += width * xGap)
        {
            circles[i] = vec4(x, y, iTime * timeFactor - timeFactor * timeDelay * float(i),i+1);
            i++;
        }
    }

  vec3 col = GetColor(gl_FragCoord, circles, colors, timeDelay);
  gl_FragColor = vec4(col,1.0);
}

老实说，我不知道为什么它不能编译。对我未经训练的人来说，一切看起来都很好，所以我认为这可能是我不习惯的某种小语法。