Random и генерация случайных значений

В Paper.js генерация случайных значений играет ключевую роль при создании динамических и интерактивных графических элементов. Библиотека предоставляет встроенные методы для работы с случайностью, что упрощает создание эффектов, анимаций и процедурной графики.

Метод Point.random()

Метод Point.random() возвращает точку с координатами x и y в диапазоне от 0 до 1. Это удобно для нормализованных координат, которые затем можно масштабировать под размеры холста.

let randomPoint = Point.random();
console.log(randomPoint); // Point{x: 0.734, y: 0.421}

Чтобы получить случайную точку внутри холста:

let canvasSize = view.size;
let point = Point.random() * canvasSize;

Здесь view.size — объект Size, содержащий ширину и высоту холста. Умножение Point на Size масштабирует координаты до реальных размеров холста.

Метод Math.random() и его использование

Paper.js напрямую использует стандартный JavaScript Math.random(), возвращающий значение от 0 до 1. Его можно адаптировать для получения случайных чисел в любом диапазоне:

function randomInRange(min, max) {
    return Math.random() * (max - min) + min;
}

let angle = randomInRange(0, 360); // случайный угол в градусах
let radius = randomInRange(50, 150); // случайный радиус

Комбинируя Math.random() с методами Paper.js, можно создавать сложные случайные фигуры, цвета и траектории.

Генерация случайных цветов

Paper.js предоставляет объект Color, который позволяет задавать цвета с компонентами RGB или HSB. Случайные цвета удобно генерировать с помощью Math.random():

let randomColor = new Color(Math.random(), Math.random(), Math.random());

Для более управляемой генерации часто используют HSB-цветовую модель:

let hue = Math.random();        // оттенок от 0 до 1
let saturation = 0.7 + Math.random() * 0.3; // насыщенность от 0.7 до 1
let brightness = 0.5 + Math.random() * 0.5; // яркость от 0.5 до 1
let color = new Color({hue, saturation, brightness});

Такой подход позволяет получать визуально гармоничные случайные цвета без слишком темных или слишком ярких значений.

Случайные векторы и направления

Создание случайных векторов необходимо для генерации анимаций, эффекта движения частиц или хаотичных линий. В Paper.js для этого удобно использовать нормализованные случайные точки:

let vector = Point.random() - [0.5, 0.5]; // диапазон от -0.5 до 0.5
vector = vector.normalize() * randomInRange(5, 15); // нормализуем и масштабируем

normalize() превращает вектор в единичный, а затем его можно умножить на случайную длину, создавая случайное направление и скорость движения объекта.

Генерация случайных фигур

Комбинируя случайные точки, радиусы и цвета, можно создавать разнообразные геометрические объекты. Например, случайные круги:

for (let i = 0; i < 50; i++) {
    let radius = randomInRange(10, 50);
    let position = Point.random() * view.size;
    let circle = new Path.Circle(position, radius);
    circle.fillColor = new Color(Math.random(), Math.random(), Math.random());
}

Такой подход позволяет быстро создавать сцену с большим количеством разнообразных элементов.

Использование случайности в анимации

Paper.js предоставляет view.onFrame, который вызывается каждый кадр. Случайность помогает создавать динамичные движения:

let circles = [];

for (let i = 0; i < 20; i++) {
    let circle = new Path.Circle(Point.random() * view.size, randomInRange(10, 30));
    circle.fillColor = new Color(Math.random(), Math.random(), Math.random());
    circles.push(circle);
}

view.onFr ame = function(event) {
    circles.forEach(circle => {
        circle.position += Point.random() - [0.5, 0.5]; // случайное смещение
    });
}

Каждое обновление кадра добавляет случайное смещение к позиции объектов, создавая эффект хаотичного движения.

Случайные значения для углов и поворотов

Для вращения элементов или создания анимации с разнообразными ориентациями используют случайные углы:

let rotation = randomInRange(0, 360);
let rect = new Path.Rectangle(new Rectangle([100, 100], [50, 50]));
rect.rotate(rotation);

При использовании view.onFrame можно анимировать объекты с постоянными случайными поворотами, создавая более живые сцены.

Множественные уровни случайности

Для сложных эффектов часто комбинируют несколько источников случайности:

  1. Позиция — Point.random() * view.size
  2. Размер — randomInRange(min, max)
  3. Цвет — new Color(Math.random(), Math.random(), Math.random())
  4. Направление — vector = Point.random() - [0.5, 0.5]

Пример генерации частиц с разными параметрами:

let particles = [];

for (let i = 0; i < 100; i++) {
    let p = new Path.Circle({
        center: Point.random() * view.size,
        radius: randomInRange(2, 8),
        fillColor: new Color(Math.random(), Math.random(), Math.random())
    });
    p.velocity = (Point.random() - [0.5, 0.5]) * randomInRange(1, 5);
    particles.push(p);
}

view.onFr ame = function() {
    particles.forEach(p => p.position += p.velocity);
}

Этот шаблон создает динамическую сцену с движущимися случайными частицами, демонстрируя всю силу генерации случайных значений в Paper.js.

Оглавление