Windows style dynamic drawing

I am trying to create a grid of circles and using my mouse cursor as an attraction point to control the size and color of the circles. The wavey movement of circles is created by changing the circle rotation angle based on the distance between the mouse cursor and the center of the circles.

//Jason Jiang
//Section E

//Setting variables 
var d = 40;
var size = d/2;
var h = 0;
var s = 0;
var a = 0;
function setup() {
    createCanvas(640, 450);
    angleMode(DEGREES);
    colorMode(HSB);
    
}

function draw() {
    background(0);
    fill(255);
    noStroke();
    //Create Grid of circles using loop
    for (var x = d/2 - d; x < width + d; x = x+d){
        for (var y = d/2 - d; y < height + d; y = y+d){
        var dis = dist(x, y, mouseX, mouseY);
        
        //Change Circle size according to distance
        
        //Remap distance to circle center to angle
        size = map(dis, 0, (width^2+height^2)^0.5, 30, 1);

        //Change Circle color according to distance
        
        //Remap distance to circle center to color value
        h = map(dis, 0, (width^2+height^2)^0.5, 0, 255);
        s = map(dis, 0, (width^2+height^2)^0.5, 50, 100);
        fill(h, s, 100);
        

        //Change circle rotation according to distance

        //Remap distance to circle center to angle
        let a = map(dis, 0, (width^2+height^2)^0.5, 0, 360);
            push();
            translate(x, y);
            rotate(a);
            circle(10, 10, size);
            pop();
        }
    }    
}