World = Matter.World,

    Bodies = Matter.Bodies,

    Events = Matter.Events;

​

let engine;

let world;

let circles = []; // Holds objects with body and color for circles

let bouncingParticles = []; // Holds Matter.js bodies for bouncing particles

​

function setup() {

    createCanvas(800, 600);

    engine = Engine.create();

    world = engine.world;

    engine.world.gravity.y = 0;

​

    let options = { isStatic: true, restitution: 1.0 };

    World.add(world, [

        Bodies.rectangle(width / 2, 0, width, 50, options),

        Bodies.rectangle(width / 2, height, width, 50, options),

        Bodies.rectangle(0, height / 2, 50, height, options),

        Bodies.rectangle(width, height / 2, 50, height, options)

    ]);

​

    // Initial circle and bouncing particle

    addCircle();

    addBouncingParticle();

​

    // Periodically add new circles and bouncing particles

    setInterval(() => {

        addCircle();

        addBouncingParticle();

    }, 1000);

}

​

function draw() {

    background(0);

    Engine.update(engine);

​

    // Draw circles with a glowing effect

    circles.forEach(circleObj => {

        let ctx = drawingContext;

        ctx.shadowBlur = 20;

        ctx.shadowColor = circleObj.color;

        fill(circleObj.color);

        noStroke();

        ellipse(circleObj.body.position.x, circleObj.body.position.y, circleObj.body.circleRadius * 2);

        ctx.shadowBlur = 0;

    });

​

    // Draw bouncing particles

    bouncingParticles.forEach(particle => {

        fill(255); // White color for bouncing particles

        noStroke();

        ellipse(particle.position.x, particle.position.y, particle.circleRadius * 2);

    });

}

​

function mouseClicked() {

    addCircle(mouseX, mouseY);

}

​

function addCircle(x = random(width), y = random(height)) {

    let radius = random(10, 50);

    let circle = Bodies.circle(x, y, radius, {

        restitution: 0.9,

        friction: 0.05,

        frictionAir: 0.001,

    });

    let color = getRandomColor();

    circles.push({ body: circle, color: color });

    World.add(world, circle);

    // Apply an initial random force to simulate drifting galaxies

    Matter.Body.applyForce(circle, circle.position, {x: random(-0.05, 0.05), y: random(-0.05, 0.05)});

}

​

function addBouncingParticle() {

    let radius = adjustParticleSize(); // Adjust size based on screen crowdedness

    let particle = Bodies.circle(random(width), random(height), radius, {

        restitution: 0.9,

        friction: 0.05,

        frictionAir: 0.001,

        density: 0.001,

    });

    World.add(world, particle);

    bouncingParticles.push(particle);

}

​

function adjustParticleSize() {

    // Reduce particle size as the screen gets more crowded

    let baseSize = 5; // Base size for particles

    let adjustmentFactor = Math.max(1, circles.length + bouncingParticles.length / 50); // Adjust based on the number of objects

    return baseSize / adjustmentFactor; // Smaller as more objects are added

}

​

function getRandomColor() {

    let letters = '0123456789ABCDEF';

    let color = '#';

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

        color += letters[Math.floor(Math.random() * 16)];

    }

    return color;

}

​