Круги на черном поле

Опубликовано 19 апреля, 2024 - 11:13 пользователем Верменич Михаил

В данной сцене создается иллюзия движения. Достигается это за счет следующей части кода:

for (let i = 0; i < 2; i++) { // каждый круг состоит из двух полукругов
    //...
    let margin = Math.random() * Math.PI; // Случайный сдвиг, от которого и рисуются оба полукруга
    ctx.arc(x, y, rad, margin + Math.PI * i, margin + Math.PI * (i + 1), false); 
    // Каждый полукруг имеет свой цвет
    ctx.fillStyle = "#" + Math.floor(Math.random() * 16777215).toString(16);
    //...
}

В каждом объекте Ball при создании записывается значение circles, которое означает количество вложенных кругов:

this.circles = Math.floor(Math.random() * 20)

Отрисовываются они следующим образом:

for (let i = this.circles; i > 1; i--) {
  // Для каждого вложенного круга вызывается функция его отрисовки
  // Радиус вложенного круга зависит от его номера
  circleRad(this.x, this.y, this.radius * i / this.circles);
}

Изменение параметров

Скорость:

const speedX = (Math.random() - 0.5) * 1;
const speedY = (Math.random() - 0.5) * 1;

Количество кругов:

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