Penta-Symmetric Fractal in WebGL

\n \n\n\n\nStep 2: Initialize WebGL in JavaScript\n\nIn your fractal.js file, set up the WebGL context:\n\nconst canvas = document.getElementById(\"glCanvas\");\nconst gl = canvas.getContext(\"webgl\");\n\nif (!gl) {\n console.error(\"WebGL not supported\");\n}\n\nStep 3: Define the Fractal Shader Program\n\nFragment Shader (GLSL)\n\nTo implement the Penta-Component Fourier synthesis with Julia set dynamics, we'll start by defining the fragment shader. The shader code below will generate Julia set fractals and apply fivefold symmetry across the Mandelbulb-like structure.\n\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\n\nconst int ITERATIONS = 8; // Number of iterations for fractal detail\nconst float PI = 3.14159265359;\n\n// Helper functions for complex numbers\nvec2 complexMult(vec2 a, vec2 b) {\n return vec2(a.x * b.x - a.y * b.y, a.x * b.y + a.y * b.x);\n}\n\nvec2 complexPow(vec2 z, float power) {\n float r = length(z);\n float theta = atan(z.y, z.x);\n r = pow(r, power);\n theta *= power;\n return vec2(r * cos(theta), r * sin(theta));\n}\n\n// Main Julia set function with fivefold symmetry\nfloat julia(vec2 z, vec2 c, float angle) {\n float value = 0.0;\n for (int i = 0; i < ITERATIONS; i++) {\n z = complexPow(z, 2.0) + c;\n \n // Apply fivefold symmetry\n float theta = atan(z.y, z.x);\n theta = mod(theta + angle, 2.0 * PI / 5.0);\n z = length(z) * vec2(cos(theta), sin(theta));\n\n if (length(z) > 4.0) break; // Escape condition\n value += 1.0;\n }\n return value;\n}\n\n// Mapping Mandelbulb structure in 3D space\nvec3 mandelbulb(vec3 p) {\n float power = 5.0;\n float r = length(p);\n float theta = atan(p.y, p.x);\n float phi = acos(p.z / r);\n\n r = pow(r, power);\n theta *= power;\n phi *= power;\n\n return vec3(r * sin(phi) * cos(theta), r * sin(phi) * sin(theta), r * cos(phi));\n}\n\n// Main Fragment Shader\nvoid main() {\n vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;\n \n // Base Julia seed and symmetry angle\n vec2 c = vec2(0.355, 0.355); // Constant for Julia set dynamics\n float angle = mod(u_time, 2.0 * PI / 5.0); // Rotate angle with time for dynamic symmetry\n\n float fractalValue = julia(uv, c, angle);\n float colorValue = fractalValue / float(ITERATIONS);\n \n // Coloring based on fractal escape rate\n gl_FragColor = vec4(vec3(colorValue, colorValue * 0.5, colorValue * 0.8), 1.0);\n}\n\nVertex Shader\n\nattribute vec4 a_position;\nvoid main() {\n gl_Position = a_position;\n}\n\nStep 4: JavaScript to Compile and Link Shaders\n\nThis part of the code will compile the GLSL shaders and set up the WebGL program.\n\nfunction createShader(gl, type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n console.error(gl.getShaderInfoLog(shader));\n gl.deleteShader(shader);\n return null;\n }\n return shader;\n}\n\nfunction createProgram(gl, vertexShader, fragmentShader) {\n const program = gl.createProgram();\n gl.attachShader(program, vertexShader);\n gl.attachShader(program, fragmentShader);\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n console.error(gl.getProgramInfoLog(program));\n gl.deleteProgram(program);\n return null;\n }\n return program;\n}\n\n// Vertex shader source code\nconst vertexShaderSource = `\nattribute vec4 a_position;\nvoid main() {\n gl_Position = a_position;\n}\n`;\n\n// Fragment shader source code (add from previous section)\nconst fragmentShaderSource = `precision highp float;\n...\n`;\n\n// Compile and link the shaders\nconst vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);\nconst fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);\nconst program = createProgram(gl, vertexShader, fragmentShader);\n\ngl.useProgram(program);\n\n// Set up geometry (a simple square covering the canvas)\nconst positionBuffer = gl.createBuffer();\ngl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\nconst positions = [\n -1, -1,\n 1, -1,\n -1, 1,\n 1, 1,\n];\ngl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);\n\nconst positionLocation = gl.getAttribLocation(program, \"a_position\");\ngl.enableVertexAttribArray(positionLocation);\ngl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);\n\nStep 5: Set Uniforms and Render Loop\n\nThis JavaScript code will set up the uniforms and create a render loop.\n\n// Locate and set uniform locations\nconst resolutionLocation = gl.getUniformLocation(program, \"u_resolution\");\nconst timeLocation = gl.getUniformLocation(program, \"u_time\");\n\nfunction render(time) {\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);\n gl.uniform1f(timeLocation, time * 0.001);\n\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n\n requestAnimationFrame(render);\n}\n\nrequestAnimationFrame(render);\n\nFinal Notes\n\nThis shader setup produces a Julia set-based fractal with fivefold symmetry and dynamic animation. For more complexity, adjustments can be made by further manipulating the mandelbulb function or adding more iterations and layers to the shader program. Real-time rendering of fractal patterns like Mandelbulbs requires high performance, so optimizing and testing on different devices might be necessary.","url","link_url","/p/u33qedlxmvh0a3_12y94","versioned_link_url","/p/u33qedlxmvh0a3_12y94/1","yapping","page_description","This webpage showcases a WebGL application that generates visually stunning fractals using shader programming. The interactive canvas renders a Julias…","cursor","eyJpZCI6InUzM3FlZGx4bXZoMGEzXzEyeTk0In0","token","included",[],"about",{"_170":-5},"parent","routes/browser/layout","actionData","errors"]

WebGL Fractal Symmetry