I have an array of circles and want 3 circles to display letters for instance a, b, c. and the other half to display numbers in the middle of the circles. I have the numbers displaying in all circles currently. I tried adding another circle in my class Circle but then the added circles were colliding. Is there a way to only split my array into half with numbers and half with letters? Here is my code:

```
let circleText = 0;
class Circle {
constructor (x, y, radius, text) {
this.x = x;
this.y = y;
this.radius = radius;
this.text = text;
}
draw() {
//circle with numbers
context.beginPath();
context.strokeStyle = this.color
context.fillStyle = 'black';
context.textAlign = "center"
context.textBaseline = "middle"
context.font = "20px Arial";
context.fillText(this.text, this.x,this.y)
context.fill();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
context.stroke();
context.closePath();
//draw mouse
context.beginPath();
context.arc(mouse.x, mouse.y, 12, 0, Math.PI *2, true);
context.fillStyle ='gold';
context.fill();
context.closePath();
}
```

}

function init() {

circles = [];

```
var radius = 50;
let overlapping = false;
//end of added collision code
let numberofCircles = 6;
//add collision code
let protection = 1000;
let counter = 0;
let randomNumber = function(min, max) {
var result = Math.random() * (max - min) + min
return result
}
while (circles.length < numberofCircles && counter < protection) {
let circ1 = {
radius: radius,
x: randomNumber(radius, (canvas.width - radius)),
y: randomNumber(radius, (canvas.width - radius))
};
overlapping = false;
for(let i = 0; i < circles.length; i++) {
let previousCircle = circles[i];
let dx = circ1.x - previousCircle.x;
let dy = circ1.y - previousCircle.y;
let distance = Math.sqrt(dx*dx + dy*dy);
if(distance < (circ1.radius + previousCircle.radius + 10)) {
//they are colliding
overlapping = true;
break;
}
} //end of nested for loop
if(!overlapping) {
circles.push(new Circle(circ1.x, circ1.y, circ1.radius, circleText++));
}
}
```

}

function animate() {

requestAnimationFrame(animate);

```
context.clearRect(0, 0, canvas.width, canvas.height);
for(let j = 0; j < circles.length; j++) {
circles[j].draw();
}
}
```

At the moment you’re directly using the variable

circleTextas the label for all of your circles.So each time a new Circle is instantiated, it gets whatever value circleText has at that very moment.

What you can do is create an array the size of circles you want to have and use it to store the labels for each circle.

Now you just need to modify the instantiation a little and you’re good to go: