Hi, I'm currently learning processing and I have a problem about coloring the particle. I want to make each circle has gradient color from white to other colors hving a white color at the center. Since I can't figure out the codde, i decided to fake it using multiple layered circles. But, now each circle got stroke surrounding, and it doesn't blend well.
My goal of visual is like this...even though it's pretty far to achieve.
http://www2u.biglobe.ne.jp/~macopism/noct/data/

here is my code.
class Particle{
 float x, y;
 float vx, vy;
 float vx1, vy1;
 float radius;
 float gravity = 0.1;
 Particle(int xpos, int ypos, float velx, float vely, float r) {
   x = xpos;
   y = ypos;
   vx = velx;
   vy = vely;
   radius = r;
 }
 void update(){
   vy = vy + gravity;
   y += vy;
   x += vx;
 }
 void update2(){
   vy = vy + gravity;
   y += vy*6;
   x += vx;
 }
 void display() {
   fill (9, 1, 17, 30);
   ellipse (x, y, radius*2.2, radius*2.2);
   fill (23, 6, 41, 50);
   ellipse (x, y, radius*2, radius*2);
  fill (35, 12, 59, 70);
   ellipse (x, y, radius*1.8, radius*1.8);
   fill (54, 25, 83, 90);
   ellipse (x, y, radius*1.6, radius*1.6);
   fill(72, 42, 103);
   ellipse (x, y, radius*1.4, radius*1.4);
   fill(100, 69, 132);
   ellipse (x, y, radius*1.2, radius*1.2);
   fill(121, 94, 150);
   ellipse (x, y, radius*1, radius*1);
   fill(152, 129, 175);
   ellipse (x, y, radius*0.8, radius*0.8);
   fill(196, 180, 212);
   ellipse (x, y, radius*0.6, radius*0.6);
   fill(255, 255, 255);
   ellipse (x, y, radius*0.4, radius*0.4);
}
}
class GenParticle extends Particle {
  float originX, originY;
 
  GenParticle(int xIn, int yIn, float vxIn, float vyIn, float r, float ox, float oy) {
    super(xIn, yIn, vxIn, vyIn, r);
    originX = ox;
    originY = oy;
  }
  void regenerate(){
    if ((x> width+radius) || (x < -radius) || (y > height+radius) || (y < -radius)) {
      x = originX;
      y = originY;
      vx = random(-1.0, 1.0);
      vy = random(-2.0, -2.0);
    }
  }
  void regenerate2(){
    if ((x> width+radius) || (x < -radius) || (y > height+radius) || (y < -radius)) {
      x = originX;
      y = originY;
      vx = random(-1.0, 1.0);
      vy = random(-2.0, -2.0);
    }
}
}
int numParticles = 50;
GenParticle[] p = new GenParticle[numParticles];
GenParticle[] p2 = new GenParticle[numParticles];
void setup() {
 size (600, 600);
 frameRate (50);
 colorMode(RGB);
 noStroke();
 smooth();
 for (int i = 0; i < p.length; i++) {
   float velX = random(-1, 1);
   float velY = -i;
   p[i] = new GenParticle(width/2, 5*height/6, velX, velY, 5.0, width/2, 5*height/6);
   p2[i] = new GenParticle(width/2, 5*height/6, velX, velY, 6.0, width/2, 5*height/6);
 }
}

void draw() {
fill(0, 0, 0, 60);
rect(0, 0, width, height);
 for (int i=0; i < p.length; i++) {  
 p[i].update();
 p[i].regenerate();
 p[i].display();
 }
 for (int i=0; i < 10; i++) {
   fill(35, 245, 255, 60-i);
 p2[i].update2();
 p2[i].regenerate2();
 p2[i].display();
 }
}

Does anyone know nicer way to make nice gradient circles? I would greatly appriciate your suggestion.

I don't think you want to use the radial gradient.

You must draw all the corresponding layers of the particles together to get the blended border effect I think you are going for. Here is one of my particle programs that implements this.

Also, get rid of the stroke with noStroke() either in draw() or setup().