How to split array of circles in javascript using canvas to display numbers in half the circles and letters in the other half of circles

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();
    }
}

12 thoughts on “How to split array of circles in javascript using canvas to display numbers in half the circles and letters in the other half of circles”

Leave a Comment