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

1 thought 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”

  1. At the moment you’re directly using the variable circleText as 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.

    if(!overlapping) {
        circles.push(new Circle(circ1.x, circ1.y, circ1.radius, circleText++));
    }
    

    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.

    let numberofCircles = 6;
    let labels=["0","1","2","a","b","c"];
    

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

        if (!overlapping) {
            circles.push(new Circle(circ1.x, circ1.y, circ1.radius, labels[circleText]));
            circleText++;
        }
    
    Reply

Leave a Comment