1) right now when a small circle hits the outer "container" which is another circle, it will bounce if, which is what I want. But i'm only changing the velocity, which means that they circle bounces right back off and heads in the same directions. I would like to do something more "realistic" and have it bounce of at an angle, but I'm struggling with the match behind this.

2) Sometimes when the small circles collide, they stick together. this especially happens when you click in the same space that a circle is moving through. Each click adds a new circle. How do I get them not to stick together?

I've gotten some of my sketches to load in the browser without any editing. But the code here doesn't seem to work. Anyone know why?

2. int area = 440; //colums * rows, yields number of dots
3. Dot dots[] = new Dot[area];
4. int radius, diameter;
5. int cols, rows;
6. int index;
7. 
   
8. void setup() {
9.   size(968, 220);
10.   smooth();
11.   fill(255);
12.   background(200);
13. 
    
14.   diameter = height/10;
15. 
    
16.   cols = width/diameter;
17.   rows = 10;
18.   radius = diameter/2;
19. 
    
20.   //setup grid
21.   for(int i = 0; i < cols; i++) {
22. 
    
23.     for(int j = 0; j < rows; j++) {
24. 
    
25.       int x = i*diameter;
26.       int y = j*diameter;
27.       dots[index] = new Dot(x+radius,y+radius,diameter, index);
28.       index++;
29.     }
30.   }
31.   
32.   initial();
33. }
34. 
    
35. void draw() 
36. {
37.   background(0);
38. 
    
39.   for(int i = 0; i < area; i++) {
40.     dots[i].reDraw();
41.   }
42. }
43. 
    
44. void initial() {
45.   /*
46.   String[] init = loadStrings("coord.txt");
47. 
    
48.   for(int i = 0; i < init.length; i++) {
49.     int tIndex = int(init[i]);
50.     dots[tIndex].switcher();
51.   }
52.   */
53. }
54. 
    
55. void mousePressed() {
56.   for(int i = 0; i < area; i++) {
57.     dots[i].mouseTest();
58.   }
59. }
60. 
    
61. class Dot {
62.   int x, y, dia;
63.   boolean filled = false;
64.   int index; //holds the index value of the encapsulating array
65. 
    
66.   Dot(int x1, int y1, int dim, int in) {
67.     x = x1;
68.     y = y1;
69.     dia = dim;
70.     index = in;
71. 
    
72.     fill(0,0);
73.     stroke(255);
74.     ellipse(x, y, dia, dia);
75.   }
76. 
    
77.   void mouseTest() {
78.     //test to see if the circle has been clicked
79.     if(mouseX >= (x - dia/2) && mouseX <= (x + dia/2) 
80.       && mouseY >= (y - dia/2) && mouseY <= (y + dia/2)) {
81.       switcher();
82.       println(index);
83.     }
84.   } 
85. 
    
86.   void switcher() {
87.     if (filled == false) {
88. 
    
89.       filled = true;
90.     } 
91.     else if(filled == true) {
92. 
    
93.       filled = false;
94.     }
95.   }
96. 
    
97.   void reDraw() {
98.     if (filled == true) {
99. 
    
100.       fill(255, 255);
101.       noStroke();
102.       ellipse(x, y, dia, dia);
103.     } 
104.     else if(filled == false) {
105. 
     
106.       fill(255,0);
107.       stroke(255);
108.       ellipse(x, y, dia, dia);
109.     }
110.   }
111. }

I'm having trouble with the math. For example, I want a circle in the middle, and each time the program is run another circle is drawn touching the first circle. I don't want to just change the x value or the y value, so i'm thinking i have to specify the angle or something.

Can anyone help get me started?

i want the fill to decrease by 1 each time that the mouse presses the circle. but I'm getting to many messages when the mouse is clicked because the speed of draw()

Maybe there is a quick fix that I can't think of?

2. int count = 0;
3. float gridsize;
4. float diameter;
5. float centerX, centerY;
6. int currentFill;
7. 
   
8. void setup() {
9.   size(500, 500);
10.   background(0);
11.   smooth();
12.   noStroke();
13. 
    
14.   diameter = width/3;
15.   centerX = width/2;
16.   centerY = height/2;
17.   currentFill = 255;
18. }
19. 
    
20. void draw() {
21.   fill(currentFill);
22.   ellipse(centerX, centerY, diameter, diameter);
23.   mouseTest();
24. }
25. 
    
26. void mouseTest() {
27.   if(mousePressed == true && mouseX >= (centerX - diameter/2) && mouseX <= (centerX + diameter/2) 
28.     && mouseY >= (centerY - diameter/2) && mouseY <= (centerY + diameter/2)) {
29.     currentFill = currentFill - 1;
30.     println(currentFill);
31.   }
32. }

I've been trying to debug why this is happening and haven't had success yet. I would really appreciate if someone can help out and see my error.

When you run the code, if you click inside the large circle a small circle is drawn.

2. int radius, diameter; 
3. int count, numCirc, circSize;
4. 
   
5. int centerX, centerY;
6. 
   
7. //boolean inside = false;
8. 
   
9. Circ[] colliz;
10. 
    
11. void setup(){
12.   size(500, 500);
13.   background(0);
14.   
15.   //set up the circular boundary
16.   diameter = width-100;
17.   radius = diameter/2;
18.   centerX = width/2;
19.   centerY = height/2;
20.   
21.   circSize = 10;
22.   
23.   count = 0;
24.   numCirc = 100;
25.   
26.   colliz = new Circ[numCirc];
27.   
28.   for (int i = 0; i < numCirc; i++){
29.     colliz[i] = new Circ();
30.   }
31.   //x = width/2;
32.   //y = height/2;
33.   //radius = width/2;
34.   
35.   //debug boundary
36.   fill(255);
37.   ellipse(centerX, centerY, diameter, diameter);
38.  
39.  
40. 
    
41. }
42. 
    
43. 
    
44. void draw(){
45.   
46.   background(0);
47.   
48.   fill(200);
49.   ellipse(centerX, centerY, diameter, diameter);
50.   
51.   for(int i = 0; i < count; i++){
52.     colliz[i].move();
53.     colliz[i].inside();
54.   //cycle through the array, call isIn for each index
55.   }
56. }
57. 
    
58. void mousePressed(){
59.   //when mouse is pressed start a circ at the mouseX, mouseY
60.   colliz[count].start(mouseX, mouseY, circSize, radius);
61.   count++;
62. }
63. 
    
64. class Circ{
65.   int x, y; //hold the current x and y for each circ object
66.   int mX, mY;
67.   int xOrigin = width/2;
68.   int yOrigin = height/2;
69.   
70.   int cDiameter, cRadius;
71.   int directionX = 1;
72.   int directionY = 1;
73.   int speed = 3;
74.   
75.   boolean isIn = true;
76.   boolean isOn = false;
77.   
78.   void start(int startX, int startY, int dia, int bounds){ 
79.     x = startX;
80.     y = startY;
81.     cRadius = bounds;
82.     cDiameter = dia;
83.     
84.     fill(255);
85.     ellipse(x, y, cDiameter, cDiameter);
86.     move();
87.   }
88.   void inside(){
89.     //x = sx;
90.     //y = sy;
91. 
    
92.     
93.     if ((sq(x - xOrigin) + sq(y - yOrigin)) <= sq(cRadius)){
94.       isIn = true;
95.     } else {
96.       isIn = false;
97.     }
98.     //println(isIn);
99.     //return isIn;
100.   }
101.   
102.   void directionShift(){
103.     //if the ball hits boundary, change direction *-1
104.     
105.     float xDist = abs(x - radius);
106.     float yDist = abs(y - radius);
107.     
108.     println("xDist:"+ xDist);
109.     println("yDist:"+ yDist);
110.     
111.     if(xDist > yDist){
112.       directionX *= -1;
113.       println("x direction change");
114.     } else if(yDist > xDist){
115.       directionY *= -1;
116.       println("y direction change");
117.     } else {
118.       println("else!");
119.       directionX *= -1;
120.       directionY *= -1;
121.     }
122.   }
123.     
124.   void move(){
125.     inside();
126.     
127.     if(isIn == false){
128.       directionShift();
129.       }
130.       
131.       x = x + (speed * directionX);
132.       y = y + (speed * directionY);
133.       
134.       fill(255);
135.       ellipse(x, y, cDiameter, cDiameter);      
136.     
137.   }
138.   //write a function to check for collisions, 
139.   //call directionShift when a collision happens
140. }
141. 
     

Right now they are just bouncing back and forth. When they hit the wall I want them to bounce off at an angle.

Method 1, I tried to check whether it was the x or y value that was out of bounds first, to just the x or the y direction. But that caused weird behavior, especially when it was definately the y value that was out of bounds.

Maybe the answer is to use Pvector like in the circleCollision example sketch?

If you can help greatly appreciated!

Full Code

Right now I have the opposite happening in my patch, as the mouse gets closer the fill gets closer to 0.

I think that map offers a solution, but i can't get it to work. 

Below is the code that i'm working with. Please help if you can.