Эй, передовые хорьки! Для тех, кто хочет поэкспериментировать с генеративным искусством, эта плиточная стена — один из самых простых способов начать работу. Хотя это кажется сложным, идея и код очень просты и идеально подходят для генеративных джуниоров. Я разместил ссылку на CodePen в конце этой статьи, если вы хотите поиграть с кнопкой.

Подписывайтесь на меня, чтобы получать больше руководств по генеративному и CSS-арту и розыгрышей подарков в Твиттере @sanja_kaz

Оглавление:

  1. HTML
  2. CSS
  3. JavaScript

РАЗБИВКА HTML — генеративные плитки

HTML содержит контейнер <div id="tilesWall">, <p> и <button>. Затем JavaScript продолжает генерировать 100 <divs> внутри <div id="tilesWall"> .

<figure>
   <div id="tilesWall"></div>
   <figcaption></figcaption>
</figure>
<button>Generate New Tiles</button>

Если вам интересно, почему я генерирую их с помощью JavaScript, а не просто жестко кодирую 100 <divs> в HTML, то это потому, что в будущем я хотел иметь возможность динамически изменять количество генерируемых плиток. В будущем я хотел бы добавить поле ввода, где вы могли бы решить, сколько плиток вы хотите видеть. К счастью, это приложение небольшое, поэтому производительность не сильно снижается, но об этом стоит упомянуть.

РАЗБИВКА CSS — генеративные плитки

Контейнеру <div id="tilesWall"> присваивается display: grid;, а всем тайлам внутри него присваивается фиксированная ширина и высота. Последняя часть CSS, которая придает этим плиткам их замечательную красоту, — фоновые градиенты. JavaScript дает каждой плитке предопределенный класс CSS, и этот класс определяет фон. Ниже приведены классы CSS, определяющие каждый внешний вид.

Треугольники используют классический линейный градиент фона.

Круги генерируются с радиальными градиентами. Самый маленький из них — классический пример кругового градиента, а остальные — тот же круг, но увеличенный в два раза, с другим расположением.

Очевидно, что при объединении каждый из них создает красивые узоры, которые мы видели в качестве конечного результата.

Если вы обратите пристальное внимание, вы заметите, что некоторые плитки имеют монохромный фон. Это связано с тем, что JavaScript выбирает цвета случайным образом из массива вариантов, но не имеет возможности проверить, был ли уже выбран цвет для этой плитки. Я решил не исправлять это, потому что однотонная плитка добавляет визуальной магии композиции.

И если вы внимательно посмотрите, то увидите, что некоторые плитки образуют форму сердца:

РАЗБИВКА JAVASCRIPT — генеративные плитки

Код JavaScript делится на:

  1. Основная функция generateTiles().
  2. Многоразовая (вспомогательная) функция: generateRandomNumber(min,max). Эта функция вызывается через generateTiles(). В идеале он должен быть в отдельном файле utils.js для лучшего повторного использования. Однако бесплатная версия CodePen не позволяет мне иметь несколько файлов.

Вот весь код JavaScript на случай, если вы захотите сначала его проверить. В противном случае не стесняйтесь переходить к пошаговому объяснению.

Функция generateTiles() вызывается при загрузке страницы, нажатии кнопки и контейнера тайлов (строки кода 47–53). Первое, что делает эта функция, — сбрасывает HTML, чтобы не было конфликта между старыми и новыми плитками. На следующем шаге сохраняются параметры цветовой палитры и массивы классов CSS. Эти два элемента имеют решающее значение, так как JavaScript определяет стиль каждого квадрата, выбираемого из них.

На следующем шаге JavaScript выбирает один из вариантов цветовой палитры, чтобы использовать его для следующего набора плиток. Затем он начинает генерировать каждую из 100 плиток одну за другой. В каждом цикле он добавляет случайный цвет из палитры и добавляет имя класса к каждому квадрату. Важно отметить, что поскольку цвета здесь выбираются динамически, я обновляю фон класса CSS напрямую с помощью JavaScript, а не из жестко запрограммированного CSS (строки кода 31–43).

Надеюсь, мне удалось упростить код и сделать его более понятным для вас. С любыми дополнительными вопросами или предложениями я доступен в Твиттере, где я регулярно публикую интерфейсный, веб3 и генеративный арт-контент. Если ты добрый самаритянин, то тоже можешь угостить меня кофе. Наконец, у меня также есть веб-сайт, на котором я рассказываю о своих более сложных генеративных арт-проектах.

Подпишитесь на меня, чтобы получать больше руководств по генеративному и CSS-искусству в Твиттере @sanja_kaz

Вот ссылка CodePen, если вы хотите поиграть с кнопкой Создать новые плитки.

Спасибо за прочтение!