​

function setup() {

    createCanvas(600, 600);

    noStroke();

}

​

function draw() {

    background("#0E525B"); // Clear the canvas and set background to white

​

    // Draw the radial gradient at the mouse position

    drawGradient(mouseX, mouseY);

​

    // Update and draw the grid of dots

    updateCanvas(mouseX, mouseY);

}

​

function drawGradient(x, y) {

    let radius = 130; // Radius of the gradient

    let innerColor = color('#0E525B');

    let outerColor = color('#0E525B');

​

    for (let r = radius; r > 0; --r) {

        let inter = map(r, 0, radius, 0, 1);

        let c = lerpColor(innerColor, outerColor, inter);

        fill(c);

        ellipse(x, y, r * 2, r * 2);

    }

}

​

function mousePressed() {

    isDragging = true;

}

​

function mouseReleased() {

    isDragging = false;

}

​

function updateCanvas(mouseX, mouseY) {

    const gridCount = 20;

    const dotDistance = width / gridCount;

​

    for (let i = 0; i < gridCount; i++) {

        for (let j = 0; j < gridCount; j++) {

            let x = i * dotDistance + dotDistance / 2;

            let y = j * dotDistance + dotDistance / 2;

            let distance = dist(x, y, mouseX, mouseY);

            let radius = 5;

            fill(255); // Color of the dots

​

            if (distance < 50) {

                radius *= isDragging ? 4 : 2.5;

              fill('#A7F28A'); // Color of the dots

            } else if (distance < 80) {

                radius *= isDragging ? 4 : 2.5 ;

              fill('#A7F28A'); // Color of the dots

            }

            ellipse(x, y, radius * 1.5, radius * 1.5);

        }

    }

}

​