что это такое и как вы это делаете

chto eto takoe i kak vy eto delaete

автор Али Шпитель

0*JPekOSiNoJpvFeDP
Фрактал Мандельброта вытекает из обманчиво простого уравнения

Генеративное искусство может быть страшной темой — кажется, здесь много математики, а искусство само по себе сложное!

Но это не должно быть сложным – вы можете создать какие-то действительно крутые вещи без диплома по математике или искусству. В этой публикации будет рассмотрено, что такое генеративное искусство и как вы можете приступить к созданию собственного генеративного искусства.

Во-первых, что такое искусство кода?

Искусство кода – это любое искусство, созданное с помощью кода. У CodePen есть нескончаемые примеры — к примеру, CSS art.

Что такое генеративное искусство?

Часто генеративное искусство черпает вдохновение в современном искусстве, особенно в поп-арте, интенсивно использующем упорядоченные геометрические узоры.

Однако это очень широкая и богатая категория искусства, созданная с помощью кода с центральной характеристикой. Генеративное искусство определенным образом включает в себя самоуправляемую или автономную систему.

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

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

Мы также можем интегрировать оба подхода, объединяя порядок и хаос!

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

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

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

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

Примеры генеративного искусства

Цветы Кейт Комптон

Клеточные автоматы и край хаоса

Анимационное генеративное искусство в многоцветном исполнении от Фила Нэша

Капли импрессионистов Мурасаки Умы

Создано дерево Мириам Надлер

Что входит в произведение генеративного искусства?

  • Случайность имеет решающее значение для создания генеративного искусства. Искусство должно отличаться каждый раз, когда вы запускаете сценарий поколения, поэтому случайность обычно является большой частью этого.
  • Алгоритмы — Визуальная реализация алгоритма часто может создать удивительное искусство, например двоичное дерево выше.
  • Геометрия — Большинство генеративного искусства включают формы, а математика из класса геометрии в старшей школе может помочь создать некоторые действительно крутые эффекты.

Как можно подойти к генеративному произведению искусства?

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

Первый – не думать о результатах и ​​смотреть, что генерирует компьютер, когда вы играете.

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

С чего начать?

Если вы знаете JavaScript, p5.js – отличное место для начала. Его цель – «сделать кодировку доступной для художников, дизайнеров, преподавателей и начинающих». Это обертка Canvas API, и это упрощает большую часть математики. Он сосредоточен на рисовании, но вы также можете взаимодействовать со звуком, видео или веб-камерой, если вас интересуют эти виды искусства!

Быстрый ввод в P5

Сначала загрузите CDN p5. Затем в свой файл JavaScript вы добавите две функции, которые будут использоваться почти в любом скрипте p5: setup и draw. Эти имена необходимы для того, чтобы p5 их называл.

setup вызывается при запуске программы. Вы, вероятно, создадите полотно для рисования на нем с помощью createCanvas функцию, и вы можете установить некоторые значения по умолчанию. Вызывается только один раз!

draw вызывается после установки и выполняется постоянно, пока вы не позвоните по телефону noLoop, что остановит его работу Вы можете контролировать, сколько раз draw пробегает каждую секунду с frameRate функция.

С генеративным искусством я обычно ставлю noLoop в setup функция, которая делает draw запускать только один раз, а не непрерывно.

Вот исходный шаблон p5 на CodePen.

Поскольку мы много говорили о важности случайности для генеративного искусства, еще одной важной функцией в p5 является random. Он работает подобно JavaScript Math.random но вы можете установить диапазон для чисел, так что вам не нужно было делать столько математики, чтобы получить число в полезном формате.

p5 Линии

Вы можете создать строку в p5.js так:

line(startX, startY, endX, endY)

Затем вы можете случайным образом сгенерировать кучу линий и создать простое произведение генеративного искусства, как это:

Даже очень простые сценарии могут создать крутые произведения искусства!

p5 Фигуры

Вы также можете создавать фигуры с помощью p5 – например, круги, треугольники и квадраты.

Вот пример создания некоторых фигур с помощью p5:

// circle ellipse(xCoordinate, yCoordinate, width, height) 
// square rect(xCoordinate, yCoordinate, width, height) 
// triangle triangle(xCoordinate1, yCoordinate1, x2, y2, x3, y3)

Тогда мы можем создать еще несколько фигур, чтобы создать что-нибудь веселее!

p5 Движение

Мы можем добавить движение к нашим рисункам, удалив noLoop вызов функции в setup функция – проверьте это!

Цвет

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

Вы можете установить цвет заливки с помощью color функция. Он занимает кучу различных форматов, таких как именованные цвета, RGBA и шестнадцатеричные коды.

Вы также можете изменить цвет контура с помощью stroke. Вы также можете удалить этот контур с помощью noStroke или изменить ширину с помощью strokeWeight.

Соединив все это вместе

После того, как у нас все эти части, мы можем объединить методы, чтобы создать какие-то действительно крутые вещи.

Другая стратегия: учебники по настройке

Вы также можете создать действительно крутые генеративные искусства, взяв чужую работу и создав ее. Например, вот результат урока Дэна Шиффмана:

Вот две его настройки для создания разных эффектов:

Вот коллекция Codepen с еще больше!

Вы можете следить за учебниками, расширять проекты CodePens или Glitch и создавать что-нибудь новое и уникальное. Просто не забудьте отдать должное оригинальному исполнителю.

Шпаргалку

Вот шпаргалка со всеми функциями P5, используемыми для этого учебника.

0*hFfffK_1TdH8MOJf

Подробнее

Поддерживать связь

Этот пост был написан в соавторстве с Джеймсом Райчардом. Если вы создаете собственное искусство, не забудьте опубликовать его у нас в Twitter! (Али и Джеймс).

Первоначально опубликовано на dev.to.

Добавить комментарий

Ваш адрес email не будет опубликован.