radius = 50,

    strength = 100000,

    bubbleSize = 90; // Fixed size for all bubbles

​

let perticle_num = 0; // Initial particle number is 0

​

let random_values = [];

let bg_images = []; // Array to store background images

let mask;

​

let physics, anchor;

let buttonClickCounts = []; // Array to store click counts for each button

​

function preload() {

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

        let imgPath = "image" + (i + 1) + ".png"; // Update path if necessary

        bg_images[i] = loadImage(imgPath, 

            () => console.log("Loaded " + imgPath), // Success callback

            () => console.error("Failed to load " + imgPath) // Error callback

        );

    }

}

​

function setup() {

    createCanvas(windowWidth, windowHeight);

  // Disable touch scroll and zoom

    let canvas = document.querySelector('canvas');

    canvas.style.touchAction = 'none';

    canvas.style.msTouchAction = 'none';

    physics = new Physics();

    anchor = physics.makeParticle(mass, width / 2, height / 2);

    anchor.makeFixed();

    physics.play();

    // create mask

    mask = createGraphics(512, 512);

    mask.fill(0);

    mask.ellipse(mask.width / 2, mask.height / 2, 512);

    for (let i = 0; i < bg_images.length; i++) {

        if (bg_images[i]) { // Check if the image is loaded

            bg_images[i].mask(mask);

        }

    }

​

    imageMode(CENTER);

    // Create 10 buttons with different names and initialize click counts

    createButtons();

}

​

function draw() {

    drawGradientBackground();

    if (mouseIsPressed) {

        anchor.position.x = mouseX;

        anchor.position.y = mouseY;

    }

    physics.update();

    checkCollision();

    fill(100);

    ellipse(anchor.position.x, anchor.position.y, radius);

​

    noFill();

    for (let i = 1; i < physics.particles.length; i++) {

        let px = physics.particles[i].position.x;

        let py = physics.particles[i].position.y;

        let img = physics.particles[i].image;

        let aspectRatio = img.width / img.height;

        let drawWidth, drawHeight;

        if (aspectRatio > 1) {

            drawWidth = bubbleSize;

            drawHeight = bubbleSize / aspectRatio;

        } else {

            drawWidth = bubbleSize * aspectRatio;

            drawHeight = bubbleSize;

        }

        tint(255); // Ensure the tint is set to normal

        image(img, px, py, drawWidth, drawHeight); // Draw with correct aspect ratio

        ellipse(px, py, bubbleSize); // Draw bubble border

    }

}

​

// Function to draw a vertical gradient background

function drawGradientBackground() {

    let color1 = color(232, 189, 138); // Orange

    let color2 = color(46, 76, 255); // Blue

    for (let y = 0; y < height; y++) {

        let inter = map(y, 0, height, 0, 1);

        let c = lerpColor(color1, color2, inter);

        stroke(c);

        line(0, y, width, y);

    }

}

​

// https://jonobr1.com/Physics

function checkCollision() {

    for (let i = 0, l = physics.particles.length; i < l; i++) {

        // iterate through each other particle

        for (let j = i + 1; j < l; j++) {

            let a = physics.particles[i];

            let b = physics.particles[j];

            let d = a.distanceTo(b);

​

            // Collision for same mass particles

            // http://en.wikipedia.org/wiki/Elastic_collision

            let diameter = bubbleSize; // Use fixed size

​

            if (d <= diameter) {

                let v = a.velocity.clone();

                a.velocity.copy(b.velocity).multiplyScalar(0.75);

                b.velocity.copy(v).multiplyScalar(0.75);

​

                if (d < diameter) {

                    // Force particles to be tangential.

                    // i.e: No sphere is ever within another sphere.

​

                    let makeup = (diameter - d) / 2;

                    let angle = Math.atan2(

                        b.position.y - a.position.y,

                        b.position.x - a.position.x

                    );

​

                    b.position.x += makeup * Math.cos(angle);

                    b.position.y += makeup * Math.sin(angle);

​

                    angle += Math.PI;

​

                    if (i > 0) {

                        a.position.x += makeup * Math.cos(angle);

                        a.position.y += makeup * Math.sin(angle);

                    }

                }

            }

        }

    }

}

​

function createButtons() {

    let buttonNames = ['water', 'money', 'passport', 'phone', 'laptop',

                       'food', 'pills', 'cigarettes', 'clothes', 'toothbrush'];

​

    let buttonWidth = 100;

    let buttonHeight = 30;

    let horizontalSpacing = 20;

    let verticalSpacing = 10;

​

    let totalWidth = 5 * buttonWidth + 4 * horizontalSpacing;

    let startX = (windowWidth - totalWidth) / 2;

    let startY = 20;

​

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

        buttonClickCounts[i] = 0; // Initialize click counts

        let button = createButton(buttonNames[i] + ': ' + buttonClickCounts[i]);

        let x = startX + (i % 5) * (buttonWidth + horizontalSpacing);

        let y = startY + Math.floor(i / 5) * (buttonHeight + verticalSpacing);

        button.position(x, y);

        button.size(buttonWidth, buttonHeight);

        // Apply CSS-like styling directly in JavaScript

        button.style('background-color', '#000'); // Set background color to black

        button.style('color', '#fff'); // Set text color to white

        button.style('border-radius', '10px'); // Set border-radius for rounded corners

        button.style('font-family', 'Source Sans Pro, sans-serif');

        button.style('font-weight', '200'); // Extralight

        button.style('text-align', 'center');

        button.mousePressed(() => displayBubble(i, button));

    }

}

​

function displayBubble(index, button) {

    let x = random(0, width);

    let y = random(0, height);

    let particle = physics.makeParticle(mass, x, y);

    random_values.push(bubbleSize);

    physics.particles.push(particle);

​

    // Calculate the image index based on click count

    let imageIndex = (index * 5) + (buttonClickCounts[index] % 5);

    particle.image = bg_images[imageIndex]; // Assign the image corresponding to the button and click count

    particle.size = bubbleSize;

​

    physics.makeAttraction(anchor, particle, strength, width);

​

    // Update click count and button label

    buttonClickCounts[index]++;

    button.html(button.html().split(':')[0] + ': ' + buttonClickCounts[index]);

}

​

​

​

​

​

​

​