WEBGL applying animation to only specific objects among others

The objective of this work is to produce a big white circle in the center of the Canvas. Then on the circumference of the big circle, there will be 10 small circles of different colors. These 10 small circles will keep increasing in size.

My current work will cause the big white circle to increase in size too. How should I fix the size of the big white circle?

The only difference between draw_circle() and draw_growing_circle is that the later one has gl.uniform1f(u_SizeChange, currentSize); in the function.

I think it might be caused by how I initialize the VSHADER but I have no idea how to change it.

ps. In my codes, I only tried 2 small circles.

Thanks

var VSHADER_SOURCE =
'attribute vec4 a_Position;n' +
'uniform float u_SizeChange;n' +
'void main() {n' +
'  gl_Position.x = u_SizeChange * a_Position.x;n' +
'  gl_Position.y = u_SizeChange * a_Position.y;n' +
'  gl_Position.z = u_SizeChange * a_Position.z;n' +
'  gl_Position.w = 1.0;n' +
'}n';

var FSHADER_SOURCE =
'precision mediump float;n' +
'uniform vec4 u_FragColor;n' +
'void main() {n' +
'  gl_FragColor = u_FragColor;n' +
'}n';

// Growing rate (size change/second)
var GROWING_RATE = 0.1;

function main() {
  // Retrieve <canvas> element
  var canvas = document.getElementById('webgl');

  // Get the rendering context for WebGL
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for  WebGL');
    return;
  }

  // Initialize shaders
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }


  // Specify the color for clearing <canvas>
  console.log('run');
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  
  // Get storage location of u_SizeChange

    var u_SizeChange = gl.getUniformLocation(gl.program, 'u_SizeChange');
    if (!u_SizeChange) { 
      console.log('Failed to get the storage location of u_SizeChange');
      return;
    }

  // Current size
  var currentSize = 1.0;
  var cx = 0;
  var cy = 0;
  var r = 200;

  // Start drawing

  var tick = function() {
 
    currentSize = animate(currentSize);  // Update the size
    // draw(gl, n,currentSize, u_SizeChange);   // Draw the square
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    draw_circle(gl, 0, 0, r/400,[1.0,1.0,1.0,1.0]); // Draw the Disk
    draw_growing_circle(gl, cx+r*Math.sin(10)/400, cy+r*Math.cos(10)/400, 20/400,[Math.random(),Math.random(),Math.random(),1],currentSize, u_SizeChange); //Draw the bacteria
    draw_growing_circle(gl, cx+r*Math.sin(20)/400, cy+r*Math.cos(20)/400, 20/400,[Math.random(),Math.random(),Math.random(),1],currentSize, u_SizeChange);
    requestAnimationFrame(tick, canvas); // Request that the browser calls tick
  };
  tick();
}

var g_last = Date.now();
function animate(size) {
  // Calculate the elapsed time
  var now = Date.now();
  var elapsed = now - g_last;
  g_last = now;
  // Update the current size (adjusted by the elapsed time)
  var newSize = size + (GROWING_RATE * elapsed) / 100.0;
  return newSize;
}


function draw_growing_circle(gl, x, y, r, color,currentSize,u_SizeChange){

  //Define the geometry and store it in buffer objects
  //Represent a circle disk through 360 trangles
  n = 3*360; // number of total vertices
  var vertices = [];
  for (var i = 1; i <= 360; i++) {
  vertices.push(x);
  vertices.push(y);
  vertices.push(x+r*Math.sin(i-1));
  vertices.push(y+r*Math.cos(i-1));
  vertices.push(x+r*Math.sin(i));
  vertices.push(y+r*Math.cos(i));
  }
      
  // Create a new buffer object
  var vertex_buffer = gl.createBuffer();
   
  // Bind an empty array buffer to it
  gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
   
  // Pass the vertices data to the buffer
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
   
  //Get the attribute location
  var coord = gl.getAttribLocation(gl.program, "a_Position");
   
  if(coord < 0) {
  console.log('Failed to get the storage location of coord');
  return -1;
  }
   
  // Get the storage location of u_FragColor
  var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
  if (!u_FragColor) {
  console.log('Failed to get the storage location of u_FragColor');
  return;
  }
    
  //point an attribute to the currently bound VBO
  gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
  //Enable the attribute
  gl.enableVertexAttribArray(coord);
  //Drawing the required object (triangle)

  // Enable the depth test
  gl.enable(gl.DEPTH_TEST); 
  // Draw the triangles
   
  // Pass the color of a point to u_FragColor variable
  var rgba = color;
  gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3]);
  gl.uniform1f(u_SizeChange, currentSize);

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
   
  // Unbind the buffer
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  }