# Wrong item in array is being edited (I think), p5.js. Help!

**URL:** <https://discourse.processing.org/t/wrong-item-in-array-is-being-edited-i-think-p5-js-help/2275>\
**Category:** Coding Questions\
**Created:** [August 1, 2018, 5:59pm UTC](https://discourse.processing.org/t/wrong-item-in-array-is-being-edited-i-think-p5-js-help/2275 "2018-08-01T17:59:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![will821](https://avatars.discourse-cdn.com/v4/letter/w/90ced4/32.png) [@will821](https://discourse.processing.org/u/will821)\
**Post date:** [August 1, 2018, 5:59pm UTC](https://discourse.processing.org/t/wrong-item-in-array-is-being-edited-i-think-p5-js-help/2275/1 "2018-08-01T17:59:18Z")

</div>

Hi there,  
I’m trying to make an array of objects which will change fill when the mouse is inside the object. I have got it to work when it was a single object but now there are multiple there is a bug which is filling a different object to which is being hovered over by the mouse. I have tried to test intersecting in a few different places but it doesn’t make a difference. I’m new at programming and sorry if this is a very obvious mistake! Thanks in advance!

```auto
let balls = [] //making an array for Ball(s)

function setup() {
	createCanvas(600, 400);
	for (let i = 0; i <5; i ++) { //Making n number of Balls
		let tempX = 30 + (100 * i); //Giving x and y for starting point of Ball
		let tempY = 200;
		let b = new Ball(tempX, tempY);
		balls.push(b);
	}

}

function draw() {
	background(100);
	for (let i = 0; i < balls.length; i ++){
		balls[i].intersects(mouseX, mouseY)
		balls[i].show(); //mouse X and Y position
	}

}
class Ball { //Making ball using tempX and tempY from setup
	constructor(tempX, tempY) {
		this.r = 20; //radius
		this.x = tempX;
		this.y = tempY;
		this.colour = (255, 0, 0); //starting colour is red
	}
	//testing the distance from the mouse x,y to the ball x,y to see if
	//mouse is inside, comparing to this.r which is the radius of ball
	intersects(mx, my) {
		let d = dist(mx, my, this.x, this.y);
		if (d < this.r) {
			this.colour = 255; //change colour if mouse is inside
		}else {
			this.colour = 0 //change colour to 0 if mouse outside
		}
	}

	show() {
		noStroke();
		ellipse(this.x, this.y, this.r * 2);
		fill(this.colour);
	}
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [August 1, 2018, 6:01pm UTC](https://discourse.processing.org/t/wrong-item-in-array-is-being-edited-i-think-p5-js-help/2275/2 "2018-08-01T18:01:33Z")

</div>

```auto
		ellipse(this.x, this.y, this.r * 2);
		fill(this.colour);

```

These two lines are round the wrong way. You need to set the fill color BEFORE you draw the ellipse!

It’s like painting. Pick the color of paint, then paint a thing. You don’t paint something and then pick the color of paint!

---

<div class="post-metadata">

**Author:** ![will821](https://avatars.discourse-cdn.com/v4/letter/w/90ced4/32.png) [@will821](https://discourse.processing.org/u/will821)\
**Post date:** [August 1, 2018, 6:04pm UTC](https://discourse.processing.org/t/wrong-item-in-array-is-being-edited-i-think-p5-js-help/2275/3 "2018-08-01T18:04:30Z")

</div>

Of course!  
Thank you very much!