Стильный сайт строительной компании деревянные дома
<!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>