# Does anyonw know how to create Bouncy Bubbles with multiple colors?

**URL:** <https://discourse.processing.org/t/does-anyonw-know-how-to-create-bouncy-bubbles-with-multiple-colors/39686>\
**Category:** Beginners\
**Tags:** homework\
**Created:** [November 13, 2022, 6:28am UTC](https://discourse.processing.org/t/does-anyonw-know-how-to-create-bouncy-bubbles-with-multiple-colors/39686 "2022-11-13T06:28:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![learningprocessing23](https://avatars.discourse-cdn.com/v4/letter/l/41988e/32.png) [@learningprocessing23](https://discourse.processing.org/u/learningprocessing23)\
**Post date:** [November 13, 2022, 6:28am UTC](https://discourse.processing.org/t/does-anyonw-know-how-to-create-bouncy-bubbles-with-multiple-colors/39686/1 "2022-11-13T06:28:27Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hello! I saw the Bouncy Balls from [Processing Org Example](https://processing.org/examples/bouncybubbles.html), and I want to create multiple colors of bubbles. However, when I tried to use random(), the bubble will all change into the same random color. Does anyone know how to create bubbles that each one of them has different colors? For example, one red bubble, one blue bubble, one yellow bubble,etc.  
Here are the codes from the example,

```auto
/**
 * Bouncy Bubbles  
 * based on code from Keith Peters. 
 * 
 * Multiple-object collision.
 */
 
 
int numBalls = 12;
float spring = 0.05;
float gravity = 0.03;
float friction = -0.9;
Ball[] balls = new Ball[numBalls];

void setup() {
  size(640, 360);
  for (int i = 0; i < numBalls; i++) {
    balls[i] = new Ball(random(width), random(height), random(30, 70), i, balls);
  }
  noStroke();
  fill(255, 204);
}

void draw() {
  background(0);
  for (Ball ball : balls) {
    ball.collide();
    ball.move();
    ball.display();  
  }
}

class Ball {
  
  float x, y;
  float diameter;
  float vx = 0;
  float vy = 0;
  int id;
  Ball[] others;
 
  Ball(float xin, float yin, float din, int idin, Ball[] oin) {
    x = xin;
    y = yin;
    diameter = din;
    id = idin;
    others = oin;
  } 
  
  void collide() {
    for (int i = id + 1; i < numBalls; i++) {
      float dx = others[i].x - x;
      float dy = others[i].y - y;
      float distance = sqrt(dx*dx + dy*dy);
      float minDist = others[i].diameter/2 + diameter/2;
      if (distance < minDist) { 
        float angle = atan2(dy, dx);
        float targetX = x + cos(angle) * minDist;
        float targetY = y + sin(angle) * minDist;
        float ax = (targetX - others[i].x) * spring;
        float ay = (targetY - others[i].y) * spring;
        vx -= ax;
        vy -= ay;
        others[i].vx += ax;
        others[i].vy += ay;
      }
    }   
  }
  
  void move() {
    vy += gravity;
    x += vx;
    y += vy;
    if (x + diameter/2 > width) {
      x = width - diameter/2;
      vx *= friction; 
    }
    else if (x - diameter/2 < 0) {
      x = diameter/2;
      vx *= friction;
    }
    if (y + diameter/2 > height) {
      y = height - diameter/2;
      vy *= friction; 
    } 
    else if (y - diameter/2 < 0) {
      y = diameter/2;
      vy *= friction;
    }
  }
  
  void display() {
    ellipse(x, y, diameter, diameter);
  }
}

```

Thank you! 🙂

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [November 13, 2022, 7:00am UTC](https://discourse.processing.org/t/does-anyonw-know-how-to-create-bouncy-bubbles-with-multiple-colors/39686/2 "2022-11-13T07:00:43Z")

</div>

Hi

[![](https://img.youtube.com/vi/8AgJaf8Xjsw/maxresdefault.jpg "Bouncing Balls in Proccessing") ](https://www.youtube.com/watch?v=8AgJaf8Xjsw&t=29s)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [November 13, 2022, 7:11am UTC](https://discourse.processing.org/t/does-anyonw-know-how-to-create-bouncy-bubbles-with-multiple-colors/39686/3 "2022-11-13T07:11:01Z")

</div>

Hi

```auto
/**
 * Bouncy Bubbles  
 * based on code from Keith Peters. 
 * 
 * Multiple-object collision.
 */
 
 
int numBalls = 12;
float spring = 0.05;
float gravity = 0.03;
float friction = -0.9;
Ball[] balls = new Ball[numBalls];

void setup() {
  size(640, 360);
  for (int i = 0; i < numBalls; i++) {
    balls[i] = new Ball(random(width), random(height), random(30, 70), i, balls);
  }
  noStroke();
  fill(255, 204);
}

void draw() {
  background(0);
  for (Ball ball : balls) {
    ball.collide();
    ball.move();
    ball.display();  
  }
}

class Ball {
  
  float x, y;
  float diameter;
  float vx = 0;
  float vy = 0;
  int id;
  Ball[] others;
 
  Ball(float xin, float yin, float din, int idin, Ball[] oin) {
    x = xin;
    y = yin;
    diameter = din;
    id = idin;
    others = oin;
  } 
  
  void collide() {
    for (int i = id + 1; i < numBalls; i++) {
      float dx = others[i].x - x;
      float dy = others[i].y - y;
      float distance = sqrt(dx*dx + dy*dy);
      float minDist = others[i].diameter/2 + diameter/2;
      if (distance < minDist) { 
        float angle = atan2(dy, dx);
        float targetX = x + cos(angle) * minDist;
        float targetY = y + sin(angle) * minDist;
        float ax = (targetX - others[i].x) * spring;
        float ay = (targetY - others[i].y) * spring;
        vx -= ax;
        vy -= ay;
        others[i].vx += ax;
        others[i].vy += ay;
      }
    }   
  }
  
  void move() {
    vy += gravity;
    x += vx;
    y += vy;
    if (x + diameter/2 > width) {
      x = width - diameter/2;
      vx *= friction; 
    }
    else if (x - diameter/2 < 0) {
      x = diameter/2;
      vx *= friction;
    }
    if (y + diameter/2 > height) {
      y = height - diameter/2;
      vy *= friction; 
    } 
    else if (y - diameter/2 < 0) {
      y = diameter/2;
      vy *= friction;
    }
  }
  
  void display() {
  
  
  float r = random(256);
      float g = random(256);
      float b = random(256);
  
  fill(r,g,b);
    ellipse(x, y, diameter, diameter);
  }
}

```

---

<div class="post-metadata">

**Author:** ![learningprocessing23](https://avatars.discourse-cdn.com/v4/letter/l/41988e/32.png) [@learningprocessing23](https://discourse.processing.org/u/learningprocessing23)\
**Post date:** [November 13, 2022, 8:07am UTC](https://discourse.processing.org/t/does-anyonw-know-how-to-create-bouncy-bubbles-with-multiple-colors/39686/4 "2022-11-13T08:07:34Z")

</div>

Thank you so much!

This is exactly what I need!!  
Many thanks 😄