Али Сплитл
Генеративное искусство может быть запугивающей темой – кажется, что есть много математики, и искусство сложно в себе!
Но ему не нужно быть сложно – вы можете построить некоторые действительно классные вещи без степени искусства. Этот пост сломает то, что такое генерирующее искусство, и как вы можете начать создавать свое собственное генеративное искусство.
Во-первых, что такое код искусства?
Код ART – это любое искусство, которое построено с помощью кода. Есть бесконечные примеры на кодепене – например CSS Art Отказ
Что такое генеративное искусство?
Часто генеративное искусство рисует вдохновение от современного искусства, особенно поп-арт, который делает тяжелое использование упорядоченных геометрических узоров.
Однако это очень широкая и богатая категория искусства, созданная с кодом с центральной характеристикой. Генеративное искусство в некотором роде включает в себя самоуправляемую или автономную систему.
Случайность – один тип автономной системы. Включая шанс в кусок кодового искусства, вы получаете разные, совершенно уникальные произведения искусства каждый раз, когда вы запускаете свой скрипт, загрузите вашу страницу или отвечаю на некоторое взаимодействие пользователя.
Есть также более упорядоченные автономные системы. Одним из примеров является фрактал Мандельброта, полученный из обманчиво простого уравнения.
Мы также можем интегрировать как подходы, блюд порядок и хаос!
Работа произведена сотрудничество между компьютером и художником. Некоторые аспекты произведения искусства контролируются кодером, но не все их. Художник контролирует как случайность, так и порядок в данной области.
В некотором смысле, с автономной системой, художник отказывается от контроля над своим искусством, и компьютер делает это для них. Более нечевидная перспектива появляется, когда рассмотрел новый творческий процесс.
Кодер-художник участвует в цикле обратной связи, где они постоянно настраивают систему для получения более желательных и часто более удивительных результатов.
Этот процесс охватывает эксперименты и счастливые несчастные случаи таким образом, чтобы превратить роль художника. Как генеративные артисты, мы используем основы кода, такие как петли, поток управления и специализированные функции. Затем мы смешиваем их часто непредсказуемыми силами, чтобы производить совершенно уникальные результаты, в отличие от чего-либо еще, что существует.
Примеры генеративного искусства
Цветы Кейт Комптона
Сотовые автоматы и край хаоса
Анимированное генеративное искусство в многоцветных по Фил Нэш
Импрессионисты Blobs от Murasaki UMA
Сгенерированное дерево Мириам Надлер
Что идет в кусок генеративного искусства?
- Случайность имеет решающее значение для создания генеративного искусства. Искусство должно отличаться каждый раз, когда вы запускаете сценарий генерации, поэтому случайность обычно является большой частью этого.
- Алгоритмы – Реализация алгоритма визуально может часто генерировать потрясающее искусство, например, бинарное дерево выше.
- Геометрия – Самое покорное искусство включает в себя фигуры, а математика из класса Геометрии средней школы может помочь в некоторых действительно крутых эффектах.
Как вы можете приблизиться к генеративному произведению искусства?
Существует две основные стратегии создания генеративного искусства, хотя большинство из них попадет между двумя стратегиями.
Первый – не иметь никаких приводок и посмотреть, что генерирует компьютер, когда вы играете.
Во-вторых, у вас очень доработанная идея о том, как вы хотите, чтобы искусство было выглядеть так, и случайность немного меняет конечный результат.
Где вы должны начать?
Если вы знаете JavaScript, p5.js это удивительное место для начала. Его цель – «сделать кодирование доступным для художников, дизайнеров, воспитателей и начинающих. «Это обертка на Canvas API , и это упрощает много математики. Он фокусируется на рисунке, но вы также можете сделать звук, видео или веб-камеры взаимодействия с ним, если вы заинтересованы в этих формах искусства!
Быстрое введение в P5
Во-первых, нагрузка в P5 CDN Отказ Затем в вашем файле JavaScript вы добавите две функции, которые будут использоваться в причем в мире P5 Script: Настройка и Нарисуйте Отказ Эти имена необходимы для P5, чтобы позвонить им.
Настройка называется, когда программа запускается. Вы, вероятно, создадите холст, чтобы нарисовать внутри него, используя Createcanvas Функция, и вы можете установить там несколько по умолчанию. Это называется только один раз!
Нарисуйте называется после настройки, и выполняется постоянно, пока вы не звоните NOLOOP , что снова остановит его снова. Вы можете контролировать, сколько раз Нарисуйте работает каждую секунду с Framerate функция.
С генеративным искусством я обычно кладу NOLOOP в Настройка Функция, которая делает Нарисуйте беги только один раз вместо непрерывно.
Вот шаблон стартера P5 на кодепене Отказ
Так как мы так много говорили о важности случайности для генеративного искусства, другая важная функция в P5 – Случайные Отказ Это работает аналогично 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 Функция Вызов в Настройка Функция – Проверьте это!
Цвет
Вы также можете играть с цветом с генеративным искусством, выбирая цвета. Вы можете сделать это математически через значения RGB, или вы можете генерировать цветовую палитру с вашим любимым сборником цвета (мы использовали Это один).
Вы можете установить цветной цвет с цвет функция. Требуется куча различных форматов, таких как названные цвета, RGBAS и шестнадцатеричные коды.
Вы также можете изменить цвет наброска, используя Инсульт . Вы также можете удалить этот контур, используя NoStroke или сделать его другой шириной с веса .
Положить все вместе
Как только у нас есть все эти части на месте, мы можем объединить методы, чтобы построить некоторые действительно прохладные вещи.
Еще одна стратегия: Настроительные учебные пособия
Вы также можете генерировать действительно крутое генеративное искусство, взяв чужую работу и построить его. Например, вот результат учебника по Дэн Шифман :
Вот два настройка его для создания различных эффектов:
Вот Коллекция кодепена с еще больше!
Вы можете следить за учебниками, вилкой кодом или проектами Glitck и создать что-то новое и уникальное. Просто убедитесь, что дайте оригинальный художник какой-то кредит.
Читай
Вот чит-лист со всеми функциональностью P5, которую мы использовали для этого учебника.
Подробнее
Не пропадай
Этот пост был написан с Джеймс Рейчард Отказ Если вы создаете свое собственное искусство, убедитесь, что в твиттере у нас! ( Ali и Джеймс ).
Первоначально опубликовано dev.to .
Оригинал: “https://www.freecodecamp.org/news/an-introduction-to-generative-art-what-it-is-and-how-you-make-it-b0b363b50a70/”