If you want to use pixels[] you will have to switch to P2D,P3D or JAVA2D. I find that OPENGL is very bad when it comes to using the pixel array

1. Ball [] cont;
   float n=0.00f;
   float q=0.03f;
   int num=1;
   float dens;
   float nnn;
   int nn;
   
   void setup() {
     size(700,700,P2D);
     loadPixels();
     cont=new Ball[num];
     for (int index = 0; index < num; index++) {
       cont[index]=new Ball(10/((25.5f)*(index+1)),100,100,15);
     }
   
   }
   
   void draw() {
     background(250);
     n=n+0.1f;
     for (int index = 0; index < num; index++){
       cont[index].update();
     }
    
     loadPixels();
   
     for (int _x = 0; _x < width; _x++) {
       for (int _y = 0; _y < height; _y++) {
         dens = 0;
         for (int res = 0; res <num; res++) {
           dens +=cont[res].dim/(sqrt(sq(_x - cont[res].bx) + sq(_y - cont[res].by)));
         }
         nn=(int)((dens)*(150));
         // nnn=50*( noise(_x*q,_y*q,n));
   
         int c=color(nn,(nn)*0.8f,(nn)*0.5f);
         pixels[_y*width+_x] =c;
   
       }
     }
     updatePixels();
    
   }
   
   class Ball {
     int bx,by;
     int difX,difY;
     int dim;
     float xSpeed,ySpeed,ndelay;
   
     Ball(float d,int initX,int initY,int magnitude){
       ndelay=d;
       bx=initX;
       by=initY;
       difX=0;
       difY=0;
       xSpeed=0.00f;
       ySpeed=0.00f;
       dim=magnitude;
   
     }
     void update (){
       difX=mouseX-bx;
       difY=mouseY-by;
       xSpeed+=difX*ndelay;
       ySpeed+=difY*ndelay;
       xSpeed*=.9f;
       ySpeed*=.9f;
       bx+=xSpeed;
       by+=ySpeed;
   
     }
   }

Other solution if you want to use the basic renderer, you can use a PImage. However, for whatever reason, it is slower than using the direct pixel []

1. Ball [] cont;
   float n=0.00f;
   float q=0.03f;
   int num=1;
   float dens;
   float nnn;
   int nn;
   PImage a;
   void setup() {
     size(700,700);
   a=createImage(width,height,ARGB);
     cont=new Ball[num];
     for (int index = 0; index < num; index++) {
       cont[index]=new Ball(10/((25.5f)*(index+1)),100,100,15);
     }
   
   }
   
   void draw() {
     background(250);
     n=n+0.1f;
     for (int index = 0; index < num; index++){
       cont[index].update();
     }
    
     a.loadPixels();
   
     for (int _x = 0; _x < width; _x++) {
       for (int _y = 0; _y < height; _y++) {
         dens = 0;
         for (int res = 0; res <num; res++) {
           dens +=cont[res].dim/(sqrt(sq(_x - cont[res].bx) + sq(_y - cont[res].by)));
         }
         nn=(int)((dens)*(150));
         // nnn=50*( noise(_x*q,_y*q,n));
   
         int c=color(nn,(nn)*0.8f,(nn)*0.5f);
         a.pixels[_y*width+_x] =c;
   
       }
     }
     a.updatePixels();
    image(a,0,0);
   }
   
   class Ball {
     int bx,by;
     int difX,difY;
     int dim;
     float xSpeed,ySpeed,ndelay;
   
     Ball(float d,int initX,int initY,int magnitude){
       ndelay=d;
       bx=initX;
       by=initY;
       difX=0;
       difY=0;
       xSpeed=0.00f;
       ySpeed=0.00f;
       dim=magnitude;
   
     }
     void update (){
       difX=mouseX-bx;
       difY=mouseY-by;
       xSpeed+=difX*ndelay;
       ySpeed+=difY*ndelay;
       xSpeed*=.9f;
       ySpeed*=.9f;
       bx+=xSpeed;
       by+=ySpeed;
   
     }
   }

I remixed a little to get the image below. I combine both methods.

1. Ball [] cont;
   float n=0.00f;
   float q=0.03f;
   int num=2;
   float dens;
   float nnn;
   PImage b;
   int nn;
   PVector [] cc = new PVector [num];
   float [] R = {.25,.75};
   float [] G = {.25,.75};
   float [] B = {.25,.75};
   float [] A = {.25,.75};
   
   color mixeC (color a,color b){
   color retval = 0;
    
   //  for (int i=0;i<a.pixels.length;i++){
      color c = a;
     color d = b;
    
    float rr1  = c>>16&255;
     float rr2  = d>>16&255;
    
     float gg1 = c>>8&255;
     float gg2 = d>>8&255;
    
     float bb1 = c&255;
     float bb2 = d&255;
     retval=color((rr1*R[0]+rr2*R[1]),(gg1*G[0]+gg2*G[1]),(bb1*B[0]+bb2*B[1]));
    
      
    // }
    
    return retval;
   }
   PImage a;
   void setup() {
     size(255,255,P3D);
     a= createImage(width,height,ARGB);
      b= createImage(width,height,ARGB);
     loadPixels();
     cont=new Ball[num];
     for (int index = 0; index < num; index++) {
       cont[index]=new Ball(10/((25.5f)*(index+1)),100,100,15);
     }
   for (int i =0;i<num;i++){
    cc[i]=new PVector (
   random(40)+random(40)+random(40)+random(40)+random(40),
   random(40)+random(40)+random(40)+random(40)+random(40),
   random(40)+random(40)+random(40)+random(40)+random(40));
   }
   }
   float rr;
   float gg;
   float bb;
   float aa;
   void draw() {
    // background(250);
    image(b,0,0);
     n=n+0.1f;
     for (int index = 0; index < num; index++){
       cont[index].update();
     }
    
     //loadPixels();
   
     for (int _x = 0; _x < width; _x++) {
       for (int _y = 0; _y < height; _y++) {
         dens = 0;
         rr = width-_x;
         gg= _y;
         bb=height-_y;
         for (int res = 0; res <num; res++) {
           dens +=cont[res].dim/(sqrt(sq(_x - cont[res].bx) + sq(_y - cont[res].by)));
              rr+=cc[res].x/dens/2-5;
              gg+=cc[res].y/dens/2-5;
              bb+=cc[res].z/dens/2-5;
             
         }
         nn=(int)((dens)*(150));
         // nnn=50*( noise(_x*q,_y*q,n));
   
         int c=color(nn,(nn)*0.8f,(nn)*0.5f);
        
        
     
          color p = color(255-rr,255-gg,255-bb,255-((rr+gg+bb)/3));
          int pos =_y*width+_x;
          a.pixels[pos]=p;
         pixels[pos] =c;
         //blendColor(c,p,BLEND);
         //blendColor(c,p,BLEND);
   
       }
     }
     a.blend(b,0,0,width,height,0,0,width,height,ADD);
     image(a,0,0);
    
    // updatePixels();
    b.copy(g,0,0,width,height,0,0,width+1,height+1);
   // b.get(0,0,width,height);
   }
   
   class Ball {
     int bx,by;
     int difX,difY;
     int dim;
     float xSpeed,ySpeed,ndelay;
   
     Ball(float d,int initX,int initY,int magnitude){
       ndelay=d;
       bx=initX;
       by=initY;
       difX=0;
       difY=0;
       xSpeed=0.00f;
       ySpeed=0.00f;
       dim=magnitude;
   
     }
     void update (){
       difX=mouseX-bx;
       difY=mouseY-by;
       xSpeed+=difX*ndelay;
       ySpeed+=difY*ndelay;
       xSpeed*=.9f;
       ySpeed*=.9f;
       bx+=xSpeed;
       by+=ySpeed;
   
     }
   }
   

Hi , Owaunz, the effect looks nice, i have 2 questions, how can i control speed of the fade out ?

Other thing i notice is that the effect runs very slow if i make my window bigger, it just works smooth with small windows as: size(255, 255)
So i was wondering is it possible to achieve this kind of effect but with big windows?   lets say (800, 800)


thanks


S.

I smile because I have the same dilemma with the framerate. Pixels [] is really slow when the sketch size increases. One way that I have found that works is to use PImage at say 255 x 255 and then resize it. The only drawback is that you have to either shrink it back to 255 x 255 or recreate it. You gain and lose framerate either way.

Check out this sketch I did
Original - Storm Cloud v1
http://openprocessing.org/visuals/?visualID=6527

Enlargened- Stormspan
http://openprocessing.org/visuals/?visualID=10304

Another way to speed it up without resizing the image each frame is to limit the sq root functions to a radius of the focal point(s). This reduces the amount if calculation. Instead of each pixel ( a lot of which are unused) it just focuses around where the points are.

As for the fadeout you can try playing around with the alpha channel to get the desired results.