В этом разделе мы собираемся построить шаг за шагом один из моих предыдущих экспериментов. Это небольшая программа, написанная на ванильном JavaScript и использующая Canvas API. Полная программа доступна в конце статьи.
Настроить рабочее место
Перво-наперво, HTML-страница.
Далее холст и контекст. Устанавливаем ширину и высоту холста. Также мы создаем две переменные для центра холста, которые нам пригодятся в дальнейшем. Наконец, мы адаптируем холст со значением devicePixelRatio.
А теперь давайте нарисуем что-нибудь на этом свежем холсте.
Основная функция
Мы хотим нарисовать линии внутри круга.
Линия состоит из двух точек с координатами x и y. Эти две точки должны находиться по периметру круга.
Мы генерируем случайную альфу между 0 и 2π. Math.cos(a) и Math.sin(a) дали нам числа от -1 до 1, мы умножаем их на радиус r круга и смещаем все это для центрирования с помощью cx и cy.
Хорошо, теперь у нас есть линия, но, возможно, мы можем взять немного больше и тоже их нарисовать. Мы создадим функцию drawLines({ r: 125, x: cx, y: cy }), которая будет принимать радиус, x и y круга в качестве параметров.
Для начала давайте начнем с 50 строк. Мы их генерируем и рисуем.
Как видите, для каждой строки создается свой lineWidth. Это дает более динамичный результат на выходе.
Рисование 50 линий внутри круга дает отличный результат, но, возможно, мы сможем нарисовать более одного круга.
Итак, давайте пройдемся от границы холста к центру. У нас был небольшой отступ, чтобы освободить немного места для нашего рисунка.
В то же время нам нужно обновить нашу функцию, закрасив круг белым цветом. Это очистит предыдущие линии, нарисованные ранее.
Вот и все, главный эффект здесь!
Корректировки и детали
Количество строк
Во-первых, что-то идет не так, это то, что количество линий одинаково независимо от радиуса круга. Мы можем легко это исправить, вычислив количество линий по радиусу. Поскольку n должно быть целым числом, мы округляем его.
Мы также создаем объект mode, который содержит различные параметры вывода, здесь коэффициент количества строк.
Обводка круга
Мы можем нарисовать обводку каждого круга. Или только половину круга. Или никогда не рисуйте штрихи. Если вы установите mode.stroke на 0, обводка круга никогда не будет нарисована, а если вы установите его на 1, она всегда будет рисоваться. Этот параметр также может быть рандомизирован с Math.random() или rng(0, 1).
Вариация рисунка
Вместо того, чтобы генерировать строки полностью случайным образом, мы можем это контролировать. Вдохновленные преобразованием Бокса-Мюллера, мы можем написать функцию, которая будет генерировать случайное число с центром на значении. Я называю это nrng для обычного генератора случайных чисел. Он принимает в качестве параметров центр c и амплитуду a. При генерации строк (строки с 11 по 13 в следующей сущности) мы проверяем mode.lines boolean и генерируем альфа-канал на основе переменной, сгенерированной ранее в функции.
Цвета
Немного цветов, чтобы прояснить эти результаты, могло бы быть неплохо!
Я выбрал дуэт цветов, которые я собрал в код, чтобы завершить его.
Я надеюсь, что эта разбивка была для вас полезной и даст вам идеи. Поиграйте с кодом и настройте параметры, чтобы создать свою собственную версию.
Как и было обещано, вот полный алгоритм.
