# How to change a circle's colour when the mouse hovers it?

**URL:** <https://discourse.processing.org/t/how-to-change-a-circles-colour-when-the-mouse-hovers-it/18192>\
**Category:** Coding Questions\
**Created:** [February 27, 2020, 5:46pm UTC](https://discourse.processing.org/t/how-to-change-a-circles-colour-when-the-mouse-hovers-it/18192 "2020-02-27T17:46:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cesca](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@cesca](https://discourse.processing.org/u/cesca)\
**Post date:** [February 27, 2020, 5:46pm UTC](https://discourse.processing.org/t/how-to-change-a-circles-colour-when-the-mouse-hovers-it/18192/1 "2020-02-27T17:46:34Z")

</div>

New to Processing. I know I’m supposed to check if the distance from the mouse to the circle is less than the radius, but I don’t know how to write the code for that or where to place it. This code below is just an adapted version I copied from a Daniel Shiffman tutorial.

```auto
var circles = [];

 setup = () => {
    createCanvas(2120, 1225);
 }
     
draw = () => {
    
    for (var c = 0; c < 2100; c++) {
        var circle = {
        x: random(width),
        y: random (height),
        r: random (80, 10)  
        };
        

        
        
        var overlap = false;
        
        var protection = 0;
        
        for (var j = 0; j < circles.length; j++){
            var other = circles[j];
            var d = dist(circle.x,circle.y, other.x, other.y);
            if (d < circle.r + other.r){
            overlap = true;
            }
        }
        
        if (!overlap) {
        circles.push(circle);
        }
        
        protection++;
        if (protection > 10000) {
            break;
        }
    }
    
    
    for (var i = 0; i < circles.length; i++){
        fill(255,255,255);
        strokeWeight(2);
        ellipse(circles[i].x, circles[i].y, circles[i].r*2, circles[i].r*2);
        
                
        }
    
    
   
    }

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [February 27, 2020, 6:31pm UTC](https://discourse.processing.org/t/how-to-change-a-circles-colour-when-the-mouse-hovers-it/18192/2 "2020-02-27T18:31:09Z")

</div>

> [@How do I integrate dist() into my current code?](https://discourse.processing.org/t/how-do-i-integrate-dist-into-my-current-code/11313):
>
> Below is a simple program I am trying to build up. When the Ball object and Donut object intersect I would like: 1/ the ball to turn red 2/ the donut to turn blue 3/ the background to be a random color When there is no intersection of objects return to noFill and background to (255). I have currently placed pseudocode that i have commented out in the area I believe the actual code would appear. However, as a beginner I am struggling with how to integrate. Any guidance is most appreciated.…

**Click on link above to view thread.** Solution – syntax and placement – and importantly an explanation appears in the posts from @Chrisir

---

<div class="post-metadata">

**Author:** ![ctrembla](https://avatars.discourse-cdn.com/v4/letter/c/aeb1de/32.png) [@ctrembla](https://discourse.processing.org/u/ctrembla)\
**Post date:** [February 28, 2020, 5:34am UTC](https://discourse.processing.org/t/how-to-change-a-circles-colour-when-the-mouse-hovers-it/18192/3 "2020-02-28T05:34:49Z")

</div>

question why don’t you just use a class object for circle?  
I think this code will help with what you want to do.

in sketch.js

```auto
var circles = [];

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(220);
  for (var i = 0; i < circles.length; i++){
    circles[i].check();
    circles[i].show();
  }
}

function mousePressed(){
  var c = new Circle();
  circles.push(c);
}

```

in circle.js

```auto
class Circle{// this creates a class
  constructor() {
    this.x = random(width);
    this.y = random (height);
    this.r = random (80, 10) ;
    var overlap = false;
  }
  
  check(){
    var d = dist(this.x,this.y,mouseX,mouseY);
    if (d < this.r){this.overlap = true;}
    else {this.overlap = false;}
  }
  
  show(){
    fill(255,0,0);
    if (this.overlap){fill(0,255,0);}
    ellipse(this.x,this.y,this.r);
  }
}

```

in index.html

```auto
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="circles.js"></script>
  </body>
</html>

```

if need me to explain it just ask

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 28, 2020, 10:59am UTC](https://discourse.processing.org/t/how-to-change-a-circles-colour-when-the-mouse-hovers-it/18192/4 "2020-02-28T10:59:40Z")

</div>

> **[r/processing - How to change a circle’s colour when the mouse hovers it?](https://www.reddit.com/r/processing/comments/fafwr2/how_to_change_a_circles_colour_when_the_mouse/)**
>
> 9 votes and 8 comments so far on Reddit