# Стильный сайт строительной компании деревянные дома

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Bouncing Balls</title>
    <script src="https://cdn.jsdelivr.net/npm/p5/lib/p5.min.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script>
    let balls = [];

    function setup() {
        createCanvas(windowWidth, windowHeight);
    }

    function draw() {
        background(220);

        for (let ball of balls) {
            ball.move();
            ball.bounce();
            ball.display();
        }
    }

    function mousePressed() {
        const numberOfBalls = Math.floor(random(1, 4)); // Add 1 to 3 balls
        
        for (let i = 0; i < numberOfBalls; i++) {
            balls.push(new Ball(mouseX, mouseY));
        }
    }

    class Ball {
        constructor(x, y) {
            this.position = createVector(x, y);
            this.velocity = createVector(random(-2, 2), random(-2, 2));
            this.radius = 20;
        }

        move() {
            this.position.add(this.velocity);

            for (let other of balls) {
                if (other !== this) {
                    let difference = p5.Vector.sub(this.position, other.position);
                    let distance = difference.mag();

                    if (distance < this.radius * 2) {
                        let overlap = difference.setMag(this.radius * 2 - distance);
                        this.position.add(overlap.mult(0.5));
                        other.position.sub(overlap.mult(0.5));
                    }
                }
            }
        }

        bounce() {
            if (this.position.x < this.radius || this.position.x > width - this.radius) {
                this.velocity.x *= -1;
            }

            if (this.position.y < this.radius || this.position.y > height - this.radius) {
                this.velocity.y *= -1;
            }
        }

        display() {
            fill(173, 216, 230);
            noStroke();
            ellipse(this.position.x, this.position.y, this.radius * 2);
        }
    }
</script>
</body>
</html>
