# How to change colors between circles when overlapping?

**URL:** <https://discourse.processing.org/t/how-to-change-colors-between-circles-when-overlapping/17716>\
**Category:** Coding Questions\
**Created:** [February 11, 2020, 5:05am UTC](https://discourse.processing.org/t/how-to-change-colors-between-circles-when-overlapping/17716 "2020-02-11T05:05:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kandrews](https://avatars.discourse-cdn.com/v4/letter/k/8dc957/32.png) [@kandrews](https://discourse.processing.org/u/kandrews)\
**Post date:** [February 11, 2020, 5:05am UTC](https://discourse.processing.org/t/how-to-change-colors-between-circles-when-overlapping/17716/1 "2020-02-11T05:05:07Z")

</div>

```auto
Circle [] circles = new Circle [10];

class Circle
{
  float x;
  float y;
  float speed;
  float diam;
  color c;
  boolean valid;
 
  final int MAX_COLOR = 255;
  final int MIN_X = 50, MAX_X = 750;
  final int MIN_Y = -300, MAX_Y = -100;
  final int MIN_SPEED = 1, MAX_SPEED = 2;
  final int MIN_DIAM = 70, MAX_DIAM = 110;
 
  Circle()
  {
    fallingSky();
  }
 
  void fallingSky() {
    valid = true;
    c = color(random(255), random(255), random(255));
    x = random(MIN_X, MAX_X); 
    y = random(MIN_Y, MAX_Y);
    speed = random(MIN_SPEED, MAX_SPEED);
    diam = random(MIN_DIAM, MAX_DIAM);
  }
 
  void update() {
    if (!valid) {
      fallingSky();
      return;
    }
    move();
    draw_ellipse();
  }
  void draw_ellipse()
  {
    fill(c);
    ellipse (x, y, diam, diam);
  }
 
  void move()
  {
    if (y-diam <= height)
    {
      y += speed;
    } else if (y-diam > height )
    {
      valid = false;
      
    }
  }
 
  boolean click(int mx, int my) {
    float dX = x - mx;
    float dY = y - my;
    if (sqrt(sq(dX) + sq(dY)) < diam/2 ) {
      return true;
    } else {
      return false;
    }
  }
}
 
 
void setup() {
  size (1000, 600);
  for (int i = 0; i < circles.length; i++)
  {
    circles[i] = new Circle();
  }
}
 
 
void draw() {
  background(100, 100);
  for (int i = 0; i < circles.length; i++) {
    circles[i].update();
    
  }
}
  
void mousePressed()
{
  for (Circle s : circles )
  {
    if (s.click(mouseX, mouseY))
    {
      s.valid = false;
      break;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![kandrews](https://avatars.discourse-cdn.com/v4/letter/k/8dc957/32.png) [@kandrews](https://discourse.processing.org/u/kandrews)\
**Post date:** [February 11, 2020, 5:08am UTC](https://discourse.processing.org/t/how-to-change-colors-between-circles-when-overlapping/17716/2 "2020-02-11T05:08:17Z")

</div>

my code has random colored circles, and random attributes. For my project, I’m trying to make it when more than 1 circle overlaps, then the color of the circle change. I’m stuck on how I should approach this. Any ideas???

---

<div class="post-metadata">

**Author:** ![black](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/black/32/477_2.png) [@black](https://discourse.processing.org/u/black)\
**Post date:** [February 11, 2020, 3:17pm UTC](https://discourse.processing.org/t/how-to-change-colors-between-circles-when-overlapping/17716/3 "2020-02-11T15:17:40Z")

</div>

```auto
Circle [] circles = new Circle [10];

class Circle
{
  float x;
  float y;
  float speed;
  float diam;
  color c;
  boolean valid;

  final int MAX_COLOR = 255;
  final int MIN_X = 50, MAX_X = 750;
  final int MIN_Y = -300, MAX_Y = -100;
  final int MIN_SPEED = 1, MAX_SPEED = 2;
  final int MIN_DIAM = 70, MAX_DIAM = 110;

  Circle()
  {
    fallingSky();
  }

  void fallingSky() {
    valid = true;
    c = color(random(255), random(255), random(255));
    x = random(MIN_X, MAX_X);
    y = random(MIN_Y, MAX_Y);
    speed = random(MIN_SPEED, MAX_SPEED);
    diam = random(MIN_DIAM, MAX_DIAM);
  }

  void update() {
    if (!valid) {
      fallingSky();
      return;
    }
    move();
    draw_ellipse();
  }
  void draw_ellipse()
  { 
    fill(c);
    noStroke();
    ellipse (x, y, diam, diam);
  }

  void move()
  {
    if (y-diam <= height)
    {
      y += speed;
    } else if (y-diam > height )
    {
      valid = false;
    }
  }

  boolean click(int mx, int my) {
    float dX = x - mx;
    float dY = y - my;
    if (sqrt(sq(dX) + sq(dY)) < diam/2 ) {
      return true;
    } else {
      return false;
    }
  }
}

void setup() {
  size (1000, 600);
  for (int i = 0; i < circles.length; i++)
  {
    circles[i] = new Circle();
  }
}

void draw() {
  background(100, 100);
  for (int i = 0; i < circles.length; i++) {
    circles[i].update();
  }
      stroke(10);
  for (int i = 0; i < circles.length; i++) {
    for (int j = 0; j < circles.length; j++) {
      if(dist(circles[i].x,circles[i].y,circles[j].x,circles[j].y)<100){
         circles[j].c = color(0,0,255);
         line(circles[i].x,circles[i].y,circles[j].x,circles[j].y);
      }else circles[i].c = color(255);
    }
  }
}

void mousePressed()
{
  for (Circle s : circles )
  {
    if (s.click(mouseX, mouseY))
    {
      s.valid = false;
      break;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 17, 2020, 4:15pm UTC](https://discourse.processing.org/t/how-to-change-colors-between-circles-when-overlapping/17716/4 "2020-02-17T16:15:51Z")

</div>

> [@kandrews](#):
>
> when more than 1 circle overlaps

One method for checking is circle-circle collision detection. Here is example code with a demo:

> **[Collision Detection](http://www.jeffreythompson.org/collision-detection/circle-circle.php)**
>
> An online book about collision detection using Processing.

Another option is to use a height map, but this is more involved.