I'm not sure how to use a Vector Image, but a simple way out that just came to mind would be to check a bounding box around every ball for white pixels and then see if the dist() is less than the radius... Not a fully developed idea yet, but I thought I might suggest it. I might come back with a better suggestion.

I would probably create an ArrayList and add a PVector to the list for every collision, then run a check to see if any of the collisions are with balls.

1. //ballX = ball x position
2. //ballY = ball y position
3. //ballRadius = ball radius
4. //ballCOunt = number of balls
5. //balls = Array of balls
6. //Initialize list of collisions
7. ArrayList collisions = new ArrayList();
8. //Create a bounding box around ball
9. for(int x = ballX - ballRadius; x < ballX + ballRadius; x ++) {
10.   for(int y = ballY - ballRadius; y < ballY + ballRadius; y ++) {
11.     //Check if pixel color = white
12.     if(get(x, y) == color(255)) {
13.       //Check if the distance is less than the radius
14.       if(dist(x, y, ballX, ballY) < ballRadius) {
15.         //If the case, add (x, y) to list
16.         collisions.add(new PVector(x, y));
17.       }
18.     }
19.   }
20. }
21. //Check to ensure that balls are not the collisions
22. //You could also change the color of the balls
23. for(int a = 0; a < collisions.size(); a ++) {
24.   for(int i = 0; i < ballCount; i ++) {
25.     if(dist(collisions.get(a).x, collisions.get(a).y, balls[i].x, balls[y].y) < balls[i].ballRadius) {
26.       collisions.remove(a);
27.     }
28.   }
29. }
30. //You now have an ArrayList of collisions

This obviously cannot be tested, and is not yet foolproof;
I hope that this will give you enough idea

I did something like this last year. Here is the stripped down code.

Main program

1. ArrayList <Ball> balls = new ArrayList <Ball> ();
2. float maxspeed = 4;
3. PFont font;
4. 
   
5. void setup() {
6.   size(1280,720);
7.   smooth();
8.   font = createFont("Sans Serif",40,true);
9.   textFont(font);
10.   textSize(300);
11.   textAlign(CENTER,CENTER);
12.   noStroke();
13. }
14. 
    
15. void draw() {
16.   background(0);
17.   fill(255);
18.   text("Talent is",width/2,height/2-75);
19.   fill(255,180);
20.   for (Ball b : balls) { b.run(); }
21. }
22. 
    
23. void mouseDragged() {
24.   PVector loc = new PVector(mouseX,mouseY);
25.   PVector speed = new PVector(random(-maxspeed,maxspeed),random(-maxspeed,maxspeed));
26.   while (abs(speed.x) < 1) { speed.x *= 2; }
27.   while (abs(speed.y) < 1) { speed.y *= 2; }
28.   balls.add(new Ball(loc,speed));
29. }
30. 
    
31. void keyPressed() {
32.   if (key == ' ') { balls.clear(); }
33. }

Ball class

1. class Ball {
2.   PVector loc;
3.   PVector speed;
4.   float radius,halfradius;
5. 
   
6.   Ball(PVector loc, PVector speed) {
7.     this.loc = loc;
8.     this.speed = speed;
9.     radius = random(3,30);
10.     halfradius = radius/2;
11.   }
12. 
    
13.   void run() {
14.     wallBounce();
15.     textBounce();
16.     update();
17.   }
18. 
    
19.   void wallBounce() {
20.     if (loc.x < halfradius || loc.x > width-halfradius)  { speed.x = -speed.x; }
21.     if (loc.y < halfradius || loc.y > height-halfradius) { speed.y = -speed.y; }
22.   }
23. 
    
24.   void textBounce() {
25.     if (speed.x > 0) {
26.       color pixelright = get(int(loc.x+halfradius),int(loc.y));
27.       if (brightness(pixelright) == 255) { speed.x = -speed.x; }
28.     } else {
29.       color pixelleft = get(int(loc.x-halfradius),int(loc.y));
30.       if (brightness(pixelleft) == 255) { speed.x = -speed.x; }
31.     }
32.     if (speed.y < 0) {
33.       color pixelup = get(int(loc.x),int(loc.y-halfradius));
34.       if (brightness(pixelup) == 255) { speed.y = -speed.y; }
35.     } else {
36.       color pixeldown = get(int(loc.x),int(loc.y+halfradius));
37.       if (brightness(pixeldown) == 255) { speed.y = -speed.y; }
38.     }
39.   }
40. 
    
41.   void update() {
42.     loc.add(speed);
43.     ellipse(loc.x,loc.y, radius,radius);
44.   }
45. }

Does anybody has an idea how to speed things up, the pixel-getcolor script is working but it takes a lot of my speed...when I have 4-5 bubbles it works okay but I want it to work with 100 of them... the screen size is also a problem. When I use 1024x768 it's very slow...when I go tot 400x300 it's okay but this is not the size I want to use of this projection.

The pixels[] Array is an alternative, but I'm not sure if it's faster.

What do you mean by slow?

Of course optimization is always possible, but I get the following speeds...

1000 balls @ 45 fps
2000 balls @ 25 fps

...which seems quite reasonable.

The real cost is in the function...

1. ellipse(loc.x,loc.y, radius,radius);

...not in the textBounce gets or other things. Try running without the ellipse and you will see that no matter how many invisible balls, there is no slowdown (even though all the other functions still run). I've tried to replace ellipse using an image, a strokeWeight point, setting the pixel array direcly or using off-screen rendering, but none are substantially faster. So the only route to really optimize then seems to be native opengl calls.

All right, I changed the sketch to apply opengl textured particles. With a resolution of 1280 x 720 I get the following fps:

16.000 balls @ 60 fps
40.000 balls @ 24 fps

Here is the code, which already automatically creates the input image with the drawEllipse function.

Main program

1. import processing.opengl.*;
2. import javax.media.opengl.*;
3. import com.sun.opengl.util.texture.*;
4. PGraphicsOpenGL pgl;
5. GL gl;
6. Texture glParticle;
7. 
   
8. ArrayList <Ball> balls = new ArrayList <Ball> ();
9. float maxspeed = 4;
10. float maxRadius = 50;
11. PGraphics myEllipse;
12. PGraphics myText;
13. PFont font;
14. 
    
15. void setup() {
16.   size(1280,720,OPENGL);
17.   drawEllipse(maxRadius);
18.   drawText();
19.   initGL();
20. }
21. 
    
22. void draw() {
23.   image(myText,0,0);
24. 
    
25.   pgl.beginGL();
26.   glParticle.bind();
27.   glParticle.enable();
28.   for (Ball b : balls) { b.run(); }
29.   glParticle.disable();
30.   pgl.endGL();
31.  
32.   println(balls.size() + " @ " + int(frameRate));
33. }
34. 
    
35. void drawEllipse(float dim) {
36.   myEllipse = createGraphics(int(dim+6),int(dim+6),JAVA2D);
37.   myEllipse.beginDraw();
38.   myEllipse.smooth();
39.   myEllipse.noStroke();
40.   myEllipse.fill(255,180);
41.   myEllipse.ellipse(dim/2+3,dim/2+3,dim,dim);
42.   myEllipse.endDraw();
43.   myEllipse.save("data/ellipse.png");
44. }
45. 
    
46. void drawText() {
47.   font = createFont("Sans Serif",40,true);
48.   myText = createGraphics(width,height,JAVA2D);
49.   myText.textFont(font);
50.   myText.textSize(300);
51.   myText.beginDraw();
52.   myText.background(0);
53.   myText.text("Talent is",70,height/2+70);
54.   myText.endDraw();
55. }
56. 
    
57. void initGL() {
58.   pgl = (PGraphicsOpenGL)g;
59.   gl = pgl.gl;
60.   gl.setSwapInterval(1);
61.   pgl.beginGL();
62.   gl.glNewList(1, GL.GL_COMPILE);
63.   gl.glBegin(GL.GL_POLYGON);
64.   gl.glTexCoord2f(0, 0); gl.glVertex2f(-.5, -.5);
65.   gl.glTexCoord2f(1, 0); gl.glVertex2f(.5, -.5);
66.   gl.glTexCoord2f(1, 1); gl.glVertex2f(.5, .5);
67.   gl.glTexCoord2f(0, 1); gl.glVertex2f(-.5, .5);
68.   gl.glEnd();
69.   gl.glEndList();
70.   pgl.endGL();
71.   try { glParticle = TextureIO.newTexture(new File(dataPath("ellipse.png")), true); }
72.   catch (IOException e) { println("Trouble!"); exit(); }
73. }
74. 
    
75. void mouseClicked() {
76.   for (int i=0; i<500; i++) {
77.     PVector loc = new PVector(mouseX,mouseY);
78.     PVector speed = new PVector(random(-maxspeed,maxspeed),random(-maxspeed,maxspeed));
79.     while (abs(speed.x) < 1) { speed.x *= 2; }
80.     while (abs(speed.y) < 1) { speed.y *= 2; }
81.     balls.add(new Ball(loc,speed));
82.   }
83. }
84. 
    
85. void keyPressed() {
86.   if (key == ' ') { balls.clear(); }
87. }

Ball class

1. class Ball {
2.   PVector loc;
3.   PVector speed;
4.   float radius,halfradius;
5. 
   
6.   Ball(PVector loc, PVector speed) {
7.     this.loc = loc;
8.     this.speed = speed;
9.     radius = random(3,maxRadius);
10.     halfradius = radius/2;
11.   }
12. 
    
13.   void run() {
14.     wallBounce();
15.     textBounce();
16.     update();
17.   }
18. 
    
19.   void wallBounce() {
20.     if (loc.x < halfradius || loc.x > width-halfradius)  { speed.x = -speed.x; }
21.     if (loc.y < halfradius || loc.y > height-halfradius) { speed.y = -speed.y; }
22.   }
23. 
    
24.   void textBounce() {
25.     if (speed.x > 0) {
26.       color pixelright = myText.get(int(loc.x+halfradius),int(loc.y));
27.       if (brightness(pixelright) == 255) { speed.x = -speed.x; }
28.     } else {
29.       color pixelleft = myText.get(int(loc.x-halfradius),int(loc.y));
30.       if (brightness(pixelleft) == 255) { speed.x = -speed.x; }
31.     }
32.     if (speed.y < 0) {
33.       color pixelup = myText.get(int(loc.x),int(loc.y-halfradius));
34.       if (brightness(pixelup) == 255) { speed.y = -speed.y; }
35.     } else {
36.       color pixeldown = myText.get(int(loc.x),int(loc.y+halfradius));
37.       if (brightness(pixeldown) == 255) { speed.y = -speed.y; }
38.     }
39.   }
40. 
    
41.   void update() {
42.     loc.add(speed);
43.     gl.glPushMatrix();
44.     gl.glTranslatef(loc.x, loc.y,0);
45.     gl.glScalef(radius,radius,0);
46.     gl.glCallList(1);
47.     gl.glPopMatrix();
48.   }
49. }

First of all, it's not wise to optimize while you're still changing things. Create something that is program-wise finished, then look for ways to optimize it (for example by porting some stuff to native opengl as in the case above). There are always more ways than one of doing things. Find the one that works for your project. Only in this case the 1 fps with relatively little instances seems a bit weird, so it might be fruitful to find out what's going on there.

Second, no it's not sensible for a beginner to go deep into opengl. The advantage is speed, but as mentioned in that warning, things can degenerate into a confusing mess real soon. Stick with regular code as long as possible.

Third, with regard to the opengl framerate, afaik many of these opengl calls run on the gpu (instead of the cpu as normal processing) which is what makes them so much faster. So it's not the computer as such, but the videocard + drivers that's determining the speed. The speed will therefore differ much more between computers than normal processing code, depending on the videocard one has.

Hi,
The cost of get() function is high, I've tried to use pixels[].
The below code is slower than OpenGL, but the speed was enough.

1. ArrayList <Ball> balls = new ArrayList <Ball> ();
2. float maxspeed = 4;
3. PFont font;
4. PGraphics pg;
5. int pgwh;
6. void setup() {
7.   size(1280,720);
8.   smooth();
9.   font = createFont("Sans Serif",40,true);
10.   textFont(font);
11.   textSize(300);
12.   textAlign(CENTER,CENTER);
13.   noStroke();
14.   pg=createGraphics(width,height,JAVA2D);
15.   pg.beginDraw();
16.   pg.smooth();
17.   pg.textFont(font);
18.   pg.textSize(300);
19.   pg.textAlign(CENTER,CENTER);
20.   pg.background(0);
21.   pg.fill(255);
22.   pg.text("Talent is",width/2,height/2-75);
23.   pg.endDraw();
24.   pg.loadPixels();
25.   pgwh=pg.width*pg.height;
26. }
27. void draw() {
28.   background(0);
29.   fill(255);
30.   text("Talent is",width/2,height/2-75);
31.   fill(255,180);
32.   for (Ball b : balls) { b.run(); }
33. }
34. void mouseDragged() {
35.   PVector loc = new PVector(mouseX,mouseY);
36.   PVector speed = new PVector(random(-maxspeed,maxspeed),random(-maxspeed,maxspeed));
37.   while (abs(speed.x) < 1) { speed.x *= 2; }
38.   while (abs(speed.y) < 1) { speed.y *= 2; }
39.   balls.add(new Ball(loc,speed));
40. }
41. void keyPressed() {
42.   if (key == ' ') { balls.clear(); }
43. }
44. class Ball {
45.   PVector loc;
46.   PVector speed;
47.   float radius,halfradius;
48.   int i;
49.   Ball(PVector loc, PVector speed) {
50.     this.loc = loc;
51.     this.speed = speed;
52.     radius = random(3,30);
53.     halfradius = radius/2;
54.   }
55.   void run() {
56.     wallBounce();
57.     textBounce();
58.     update();
59.   }
60.   void wallBounce() {
61.     if (loc.x < halfradius || loc.x > width-halfradius)  { speed.x = -speed.x; }
62.     if (loc.y < halfradius || loc.y > height-halfradius) { speed.y = -speed.y; }
63.   }
64.   void textBounce() {
65.     if (speed.x > 0) {
66.       i=int(loc.x+halfradius)+int(loc.y)*pg.width;
67.       if(i>=0 && i<pgwh){
68.         color pixelright = pg.pixels[i];
69.         if (brightness(pixelright) == 255) { speed.x = -speed.x; }
70.       }
71.     } else {
72.       i=int(loc.x-halfradius)+int(loc.y)*pg.width;
73.       if(i>=0 && i<pgwh){
74.         color pixelleft = pg.pixels[i];
75.         if (brightness(pixelleft) == 255) { speed.x = -speed.x; }
76.       }
77.     }
78.     if (speed.y < 0) {
79.       i=int(loc.x)+int(loc.y-halfradius)*pg.width;
80.       if(i>=0 && i<pgwh){
81.         color pixelup = pg.pixels[i];
82.         if (brightness(pixelup) == 255) { speed.y = -speed.y; }
83.       }
84.     } else {
85.       i=int(loc.x)+int(loc.y+halfradius)*pg.width;
86.       if(i>=0 && i<pgwh){
87.         color pixeldown = pg.pixels[i];
88.         if (brightness(pixeldown) == 255) { speed.y = -speed.y; }
89.       }
90.     }
91.   }
92.   void update() {
93.     loc.add(speed);
94.     ellipse(loc.x,loc.y, radius,radius);
95.   }
96. }

While in some cases using the pixel array is indeed faster than get, in this case I see no difference. I expected also there would be a speed improvement, but my own attempt with the pixel array came to this same conclusion. With your code I get:

1000 balls @ 45 fps
2000 balls @ 25 fps

...which is exactly the same speed as I get with the first code posted.