Hi!
If you want a smooth water with some waves, use the sinus-function to acheive height and then set the colors depending on the height.
In short, pass an uniform value which is time to your vertex shader, and do something like this (I am not using any reference or testing when writing this so just think of it as pseudo code):

////////// vertex shader:
uniform float time;
attribute vec4 position;
const float heightAmplitude = 2.0;
varying vec4 vColor;

main(){
float extraHeight = sin(time+position.z)* sin(time*0.5+32.3+position.y);
gl_Position = vec4(position.x, position.y+heightAmplitude*extraHeight, position.z, position.w);
vColor = vec4(0.0, 0.0, 0.5+0.5*extraHeight, 0.5+0.5*extraHeight);
}

/////////// fragment shader:
varying vec4 vColor;
main(){
gl_FragColor = vColor;
}

//////////////////////////////////////////////////////////////////////////////////////////////////
This example pseudo code (will not compile) should create some sort of smooth noise for you. The color is set in the vertex shader to increase performance.

First thought: Blur.
Second thought: Is there a reason you need to render circles, and not, e.g., additively- (or otherwise-) blended sprites? That'd automatically give you smoothness.

Change your "grid of circles" into a texture, one texel per circle.

Then in your shader to get the bands of color, sample the texture and use the round() shader intrinsic creatively. round() takes a number and rounds it to the nearest integer. Since the value of the texture sample will be between 0 and 1, that's not exactly useful. But if you multiply up the sample, say by 10, then the range is from 0 to 10. Then pass that through round(), and the result will be a whole integer between 0 and 10. Then divide that by 10 to get back down to 0 to 1, except the result will be quantized to 10 possible levels, so you will get that banding "artifact". This is the same technique that's used to do cel shading.