float b7 = blob(st, pos7, size7); float b8 = blob(st, pos8, size8); // Mix colors with transparency for overlapping vec3 color = vec3(0.0); // Add each blob with alpha blending vec4 result = vec4(0.0, 0.0, 0.0, 1.0); // Apply colors with transparency result.rgb = mix(result.rgb, color1, b1 * 0.6); result.rgb = mix(result.rgb, color2, b2 * 0.6); result.rgb = mix(result.rgb, color3, b3 * 0.6); result.rgb = mix(result.rgb, color4, b4 * 0.6); result.rgb = mix(result.rgb, color5, b5 * 0.6); result.rgb = mix(result.rgb, color6, b6 * 0.6); result.rgb = mix(result.rgb, color7, b7 * 0.6); result.rgb = mix(result.rgb, color8, b8 * 0.6); gl_FragColor = result; } `; // Initialize shader program function initShaderProgram(gl, vsSource, fsSource) { const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); const shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram)); return null; } return shaderProgram; } // Create shader function loadShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } // Initialize the shader program const shaderProgram = initShaderProgram(gl, vsSource, fsSource); // Get attribute and uniform locations const programInfo = { program: shaderProgram, attribLocations: { vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'), }, uniformLocations: { resolution: gl.getUniformLocation(shaderProgram, 'uResolution'), time: gl.getUniformLocation(shaderProgram, 'uTime'), }, }; // Initialize buffers function initBuffers(gl) { const positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // Create a square (two triangles) that covers the entire canvas const positions = [ -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); return { position: positionBuffer, }; } const buffers = initBuffers(gl); // Draw the scene function drawScene(gl, programInfo, buffers, timestamp) { gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); // Set up position attribute { const numComponents = 2; const type = gl.FLOAT; const normalize = false; const stride = 0; const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position); gl.vertexAttribPointer( programInfo.attribLocations.vertexPosition, numComponents, type, normalize, stride, offset); gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); } // Use the shader program gl.useProgram(programInfo.program); // Set the uniforms gl.uniform2f(programInfo.uniformLocations.resolution, canvas.width, canvas.height); gl.uniform1f(programInfo.uniformLocations.time, timestamp * 0.001); // Draw const offset = 0; const vertexCount = 4; gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); // Request the next frame requestAnimationFrame(function(timestamp) { drawScene(gl, programInfo, buffers, timestamp); }); } // Start the animation loop requestAnimationFrame(function(timestamp) { drawScene(gl, programInfo, buffers, timestamp); });