This is my julia.frag

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 pos;

const float MAX_ITEARTIONS = 1000.0;

float calculateEscapeRadius(float power, vec2 c) {
    // Compute the magnitude of the complex constant c
    float magnitudeC = length(c);

    // Set an initial guess for R
    float R = pow(magnitudeC, 1.0 / power) + 1.0; 

    // Iterate to find the correct escape radius
    while (pow(R, power) - R < magnitudeC) {
        R += 0.1;  // Increment R to meet the condition
    }

    return R;
}


float iterateSet(vec2 z0, vec2 c, float n, float R) {
    float zx = z0.x;
    float zy = z0.y;

    for ( float i = 0.0; i < MAX_ITEARTIONS; i++) { 
        // exit condition
        if(zx * zx + zy * zy > pow(R,2.0)) {
            return i + 1.0 - log(log(zx * zx + zy * zy)) / log(n);
        }
        float xtmp = pow((zx * zx + zy * zy),n / 2.0) * cos(n * atan(zy, zx)) + c.x;
        zy = pow((zx * zx + zy * zy),n / 2.0) * sin(n * atan(zy, zx)) + c.y;
        zx = xtmp;
    }

    return 1.0;
}

void main(){

    vec2 z = pos;
    vec2 c = vec2(0.355, 0.355);  // Example complex constant
    float power = 2.0;                // Degree of the function z^n + c
    float R = calculateEscapeRadius(power, c);
    float zx0 = 2.0 * R * (z.x - 0.5); 
    float zy0 = 2.0 * R * (z.y - 0.5);

    float i = iterateSet(vec2(zx0, zy0), c, power, R);

    gl_FragColor = vec4(i/MAX_ITEARTIONS, i/MAX_ITEARTIONS, i/MAX_ITEARTIONS, 1.0);
}

julia.vert

attribute vec3 aPosition;
attribute vec2 aTexCoord;

varying vec2 pos;

void main() {
    pos = aTexCoord;

    vec4 position = vec4(aPosition, 1.0);
    position.xy = position.xy * 2.0 - 1.0;
    gl_Position = position;
}

sketch.js

let julia;

// load the shader
function preload() {
  // Load the shaders
  julia = loadShader("julia.vert", "julia.frag");
}

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

  // initialize the shader
  shader(julia);
}

function draw() {
  // Give the shader a surface to draw on
  rect(-width / 2, -height / 2, width, height);
}

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

What I’ve Tried:

Shader Compilation Checks: Added error checking for shader compilation but found no obvious errors.

WebGL Context Initialization: Confirmed that the WebGL context is created correctly.

Shader Activation: Ensured the shader is active before drawing with rect().

Problem:

Despite these checks, the error persists, preventing the shader from being used in the WebGL program. What could be causing the shader to fail in this context? How can I further debug or resolve this issue?

it just gives this ambigious error the whole time

Uncaught TypeError: Failed to execute 'useProgram' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLProgram'.
    at o.value (p5.min.js:2:998442)
    at o.value (p5.min.js:2:996492)
    at s.value (p5.min.js:2:983345)
    at a.default.RendererGL.drawBuffers (p5.min.js:2:898165)
    at S.default.RendererGL.rect (p5.min.js:2:755846)
    at l.default._renderRect (p5.min.js:2:525825)
    at l.default.rect (p5.min.js:2:525322)
    at draw (sketch.js:18:3)
    at e.default.redraw (p5.min.js:2:545491)
    at l.default.resizeCanvas (p5.min.js:2:518532)