#ifdef GL_ES
precision mediump float;
#endif
varying vec2 pos;
const float MAX_ITERATIONS = 2000.0;
uniform vec2 u_resolution;
uniform float u_time;
uniform float ca;
uniform float cb;
uniform vec2 u_bounds;
uniform vec2 u_aspectRatio;
uniform sampler2D colorMap;
uniform int power;
uniform float zoom;
struct Complex {
float real;
float imag;
};
// Function to perform complex multiplication
Complex complexMultiply(Complex a, Complex b) {
Complex result;
result.real = a.real * b.real - a.imag * b.imag;
result.imag = a.real * b.imag + a.imag * b.real;
return result;
}
// Complex complexPower(Complex a, int n) {
// Complex result;
// result.real = 1.0;
// result.imag = 0.0;
// Complex base = a;
// for (int i = 0; i < n; i++) {
// result = complexMultiply(result, base);
// }
// return result;
// }
// Function to perform complex addition
Complex complexAdd(Complex a, Complex b) {
Complex result;
result.real = a.real + b.real;
result.imag = a.imag + b.imag;
return result;
}
// Function to calculate the magnitude of a complex number
float complexMagnitude(Complex a) {
return sqrt(a.real * a.real + a.imag * a.imag);
}
float iterations = 0.0;
float iterateSet(Complex z0, Complex c, int n) {
Complex oldZ = z0;
// iterate for max iterations
for(float i = 0.0; i < MAX_ITERATIONS; i++) {
// exit condition
// if the magnitude of the complex number is greater than 2, return the number of iterations
if (complexMagnitude(oldZ) > 4.0) {
break;
}
// calculate the real and imaginary parts of the complex number
Complex newZ = complexAdd(complexMultiply(oldZ, oldZ), c);
oldZ = newZ;
iterations++;
}
// color binding
if(iterations == MAX_ITERATIONS) {
return 0.0;
} else {
float abs_z = complexMagnitude(oldZ);
return iterations + 1.0 - log(log(abs_z))/log(float(n));
}
}
void main(){
vec2 z = pos * 2.0 - 1.0; // Convert from [0,1] to [-1,1]
z.x *= u_aspectRatio.x;
z.y *= u_aspectRatio.y;
// add zoom
z.x *= zoom;
z.y *= zoom;
// Apply bounds
z = z * (u_bounds.y - u_bounds.x) / 2.0 + (u_bounds.x + u_bounds.y) / 2.0;
Complex c = Complex(ca, cb);
int power = power; // Degree of the function z^n + c
Complex z0 = Complex(z.x,z.y);
float i = iterateSet(z0, c, power);
// Modify the hue to be more interesting with time-based effects
float hue = mod(sqrt(i) + u_time * 0.1, 1.0); // Adjust hue with time
float sat = 0.5 + 0.5 * sin(u_time * 0.5); // Vary saturation over time
float bright = 1.0 - min(i / MAX_ITERATIONS, 1.0); // Brightness based on iteration
// Refined color effect
// float normalizedI = i / MAX_ITERATIONS; // Normalize iterations
// float hue = mod(sqrt(normalizedI) * 2.0 + u_time * 0.1, 1.0); // Enhanced hue with time
// float sat = 0.7 + 0.3 * sin(u_time * 0.7); // More pronounced saturation variation
// float bright = 0.8 - 0.6 * normalizedI; // Improved brightness based on iteration
// Create a more dynamic color effect
gl_FragColor = vec4(hue, sat, bright, 1.0);
}
As you can here I am visualizing a Julia set but while i am taking the power as input.
In the line here, Complex newZ = complexAdd(complexMultiply(oldZ, oldZ), c);
I got to call a square on the oldZ (Complex number).
I am using the function to get complex number of power n but that exact lines are making the difference in the shader it doesn’t work and produces the error. if for a power n i just multiply oldZ n times it works perfectly fine but can’t make a function to do it for me as the error comes up.
`
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)
This works ``` if(n == 2) {
oldZ = complexAdd(squaredZ, c);
} else if (n == 3) {
oldZ = complexAdd(cubedZ, c);
} else if (n == 4) {
oldZ = complexAdd(complexMultiply(oldZ, cubedZ), c);
} else {
oldZ = complexAdd(complexMultiply(complexMultiply(oldZ, cubedZ), oldZ), c);
}. ``` but this doesn't Complex complexPower(Complex a, int n) { Complex result;
result.real = 1.0;
result.imag = 0.0;
Complex base = a;
for (int i = 0; i < n; i++) {
result = complexMultiply(result, base);
}
return result;
} ```
I tried making a recursive function to get the value when given an exponential power but that broke the code and after removing and re pasting each line of the code, it was the complexPower function which broke it.
So I changed it to for loop and it just keeps breaking the code, I comment the function and it’s works neatly and add it then get the error that my glsl can’t access useProgram.
I want to have a power function but don’t know why this keeps happening and how to make a function that works in this scenario.
My working laptop details are :
name : Apple Macbook Air
chip : Apple M1
memory : 8GB
macOS : 14.5 (23F79)
I am using p5.js with VScode and redering in the chrome browser by processing the script file in an html page.