WebGL shapes disappearing - webgl

Question

image3 Image1 When im rendering using requestAnimationFrame , Sometimes it generates only 1 circle or a big circle and small circles where both these circles need to have same radius.As you can see i am increasing the radius of circles during the requireanimationframe.if i have a r value of greater than 1 it renders the background circle and other small circles.if the r value is much smaller it doesnt render the background and renders an animated circle
var vertexShaderText =
[
'uniform vec2 u_resolution;',
'',
'attribute vec2 a_position;',
'',
'void main()',
'{',
'',
'vec2 clipspace = a_position / u_resolution * 2.0 -1.0 ;',
'',
'gl_Position = vec4(clipspace *vec2(2.5,-1.3) , 0, 1);',
'}'
].join("\n");
var fragmentShaderText =
[
'precision mediump float;',
'',
'void main(void)',
'{',
'',
'gl_FragColor = vec4(0.75, 0.85, 0.8, 0.85);',
'',
'}'
].join("\n");
var fragmentShaderText0 =
[
'precision mediump float;',
'',
'void main(void)',
'{',
'',
'gl_FragColor = vec4(1.0,0.0,0.0,0.85);',
'',
'}'
].join("\n");
var fragmentShaderText1 =
[
'precision mediump float;',
'',
'void main(void)',
'{',
'',
'gl_FragColor = vec4(0.0,1.0,0.0,1.0);',
'',
'}'
].join("\n");
var fragmentShaderText2 =
[
'precision mediump float;',
'',
'void main(void)',
'{',
'',
'gl_FragColor = vec4(0.0,0.0,1.0,1.0);',
'',
'}'
].join("\n");
var fragmentShaderText3 =
[
'precision mediump float;',
'',
'void main(void)',
'{',
'',
'gl_FragColor = vec4(0.5,0.0,0.0,1.0);',
'',
'}'
].join("\n");
var fragmentShaderText4 =
[
'precision mediump float;',
'',
'void main(void)',
'{',
'',
'gl_FragColor = vec4(0.0,0.5,0.0,1.0);',
'',
'}'
].join("\n");
var fragmentShaderText5 =
[
'precision mediump float;',
'',
'void main(void)',
'{',
'',
'gl_FragColor = vec4(0.0,0.0,0.5,1.0);',
'',
'}'
].join("\n");
var fragmentShaderText6 =
[
'precision mediump float;',
'',
'void main(void)',
'{',
'',
'gl_FragColor = vec4(0.2,0.0,0.0,1.0);',
'',
'}'
].join("\n");
var fragmentShaderText7 =
[
'precision mediump float;',
'',
'void main(void)',
'{',
'',
'gl_FragColor = vec4(0.0,0.2,0.0,1.0);',
'',
'}'
].join("\n");
var fragmentShaderText8 =
[
'precision mediump float;',
'',
'void main(void)',
'{',
'',
'gl_FragColor = vec4(0.0,0.0,0.2,1.0);',
'',
'}'
].join("\n");
var fragmentShaderText9 =
[
'precision mediump float;',
'',
'void main(void)',
'{',
'',
'gl_FragColor = vec4(0.2,0.2,0.0,1.0);',
'',
'}'
].join("\n");
var uni = function(){
var canvas = document.getElementById("game-surface");
var gl = canvas.getContext("webgl");
console.log("This is working");
var vertextShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertextShader,vertexShaderText);
gl.shaderSource(fragmentShader,fragmentShaderText);
gl.compileShader(vertextShader);
gl.compileShader(fragmentShader);
if(!gl.getShaderParameter(vertextShader,gl.COMPILE_STATUS)){
console.error("Error with vertexshader",gl.getShaderInfoLog(vertextShader));
return;
}
if(!gl.getShaderParameter(fragmentShader,gl.COMPILE_STATUS)){
console.error("Error with fragmentShader",gl.getShaderInfoLog(fragmentShader));
return;
}
var program =gl.createProgram();
gl.attachShader(program,vertextShader);
gl.attachShader(program,fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
if(!gl.getProgramParameter(program,gl.LINK_STATUS)){
console.error("Error linking program",gl.getProgramInfoLog(program));
return;
}
gl.validateProgram(program);
if(!gl.getProgramParameter(program,gl.VALIDATE_STATUS)){
console.error("Error validating",gl.getProgramInfoLog(program));
}
var circle = {x: 150, y:75, r: 45};
var ATTRIBUTES = 2;
var numFans =32;
var degreePerFan = (2* Math.PI) / numFans;
var vertexData = [circle.x, circle.y];
for(var i = 0; i <=numFans; i++) {
var index = ATTRIBUTES * i + 2; // there is already 2 items in array
var angle = degreePerFan * (i+1000);
vertexData[index] = circle.x + Math.cos(angle) * circle.r;
vertexData[index + 1] = circle.y + Math.sin(angle) * circle.r;
}
var randomNumber = Math.floor(Math.random()*64);
var vertexDataTyped = new Float32Array(vertexData);
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexDataTyped, gl.STATIC_DRAW);
var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
gl.enableVertexAttribArray(positionLocation);
var positionLocation = gl.getAttribLocation(program, "a_position");
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
gl.drawArrays(gl.TRIANGLE_FAN, 0, vertexData.length/ATTRIBUTES);
/////
var randomBacteria = Math.floor(Math.random()*10)+1;
console.log(randomBacteria);
for(var k = 0;k <randomBacteria;k++){
var b_colors = this["fragmentShaderText"+k];
gl.shaderSource(fragmentShader,b_colors);
gl.compileShader(fragmentShader);
var program1 =gl.createProgram();
gl.attachShader(program1,vertextShader);
gl.attachShader(program1,fragmentShader);
gl.linkProgram(program1);
gl.useProgram(program1);
var randomEven = Math.floor(Math.random()*67/2)*2;
var check = vertexData[randomEven];
if(check == 150){
var randomEven = null;
}
var bacteria = {x: vertexData[randomEven], y:vertexData[randomEven+1], r:1};
var ATTRIBUTES = 2;
var numFans =64;
var degreePerFan = (2*Math.PI) / numFans;
var bacteria_vertexData = [bacteria.x, bacteria.y];
function growth(){
if(bacteria.r<10){
requestAnimationFrame(growth);
for(var a=0;a<randomBacteria;a++){
bacteria.r += 1;
for(var i = 0; i <= numFans; i++) {
var index = ATTRIBUTES * i +2; // there is already 2 items in array
var angle = degreePerFan * (i);
bacteria_vertexData[index] = bacteria.x - Math.cos(angle) * bacteria.r;
bacteria_vertexData[index + 1] = bacteria.y - Math.sin(angle) * bacteria.r;
}
var bacteria_vertexDataTyped1 = new Float32Array(bacteria_vertexData);
console.log(bacteria_vertexData);
var bacteria_buffer1 = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bacteria_buffer1);
gl.bufferData(gl.ARRAY_BUFFER, bacteria_vertexDataTyped1, gl.DYNAMIC_DRAW);
var program1 =gl.createProgram();
gl.attachShader(program1,vertextShader);
gl.attachShader(program1,fragmentShader);
gl.linkProgram(program1);
gl.useProgram(program1);
var bacteria_resolutionLocation = gl.getUniformLocation(program1, "u_resolution");
gl.uniform2f(bacteria_resolutionLocation, canvas.width, canvas.height);
var bacteria_positionLocation = gl.getAttribLocation(program1, "a_position");
gl.enableVertexAttribArray(bacteria_positionLocation);
gl.vertexAttribPointer(bacteria_positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
gl.drawArrays(gl.TRIANGLE_FAN, 0, bacteria_vertexData.length/ATTRIBUTES);
}
}
}
growth();
}
};