Вступ до генеративного мистецтва: що це таке, і як ви це робите

Генеративне мистецтво може бути лякаючою темою - здається, тут задіяно багато математики, а мистецтво хитро само по собі!

Але це не повинно бути складно - ви можете створити якісь справді круті речі без математики чи мистецтва. Ця публікація розкриє, що таке генеративне мистецтво, і як можна розпочати будувати власне генеративне мистецтво.

По-перше, що таке мистецтво коду?

Кодове мистецтво - це будь-яке мистецтво, побудоване за допомогою коду. На CodePen є безліч прикладів - наприклад, CSS art.

Що таке генеративне мистецтво?

Часто генеративне мистецтво черпає натхнення в сучасному мистецтві, особливо в поп-арті, який активно використовує впорядковані геометричні візерунки.

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

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

Є також більш упорядковані автономні системи. Одним із прикладів є фрактал Мандельброта, отриманий з оманливо простого рівняння.

Ми також можемо інтегрувати обидва підходи, поєднуючи порядок і хаос!

Ілюстрація стає спільною роботою комп’ютера та художника. Деякі аспекти ілюстрацій контролюються кодером, але не всіма з них. Художник контролює як випадковість, так і порядок у мистецтві.

Певним чином, за допомогою автономної системи художник відмовляється від контролю над своїм мистецтвом, а комп’ютер робить це за них. Більш тонка перспектива з’являється, коли розглядається новий творчий процес.

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

Цей процес охоплює експерименти та щасливі випадки таким чином, щоб змінити роль художника. Як генеративні художники, ми використовуємо основи коду, такі як цикли, керування потоком та спеціалізовані функції. Потім ми поєднуємо їх з часто непередбачуваними силами, щоб отримати абсолютно унікальні результати, на відміну від будь-чого іншого, що існує.

Приклади генеративного мистецтва

Квіти Кейт Комптон

Клітинні автомати та край хаосу

Анімоване генеративне мистецтво у багатоколірному режимі Філа Неша

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

Створене дерево Міріам Надлер

Що входить у твір генеративного мистецтва?

  • Випадковість має вирішальне значення для створення генеративного мистецтва. Мистецтво повинно бути різним кожного разу, коли ви запускаєте сценарій генерації, тому випадковість, як правило, велика частина цього.
  • Алгоритми - Візуальна реалізація алгоритму часто може створити неймовірне мистецтво, наприклад, бінарне дерево вище.
  • Геометрія - більшість генеративних мистецтв включають фігури, а математика з класу геометрії середньої школи може допомогти в деяких справді крутих ефектах.

Як можна підійти до твору генеративного мистецтва?

Існує дві основні стратегії створення генеративного мистецтва, хоча більшість із них попадаються між собою.

Перший - не мати на увазі жодних результатів і бачити, що комп’ютер генерує під час гри.

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

З чого почати?

Якщо ви знаєте JavaScript, p5.js - це чудове місце для початку. Його мета - "зробити кодування доступним для художників, дизайнерів, освітян та початківців". Це обгортка API Canvas, яка спрощує значну частину математики. Він зосереджений на малюванні, але ви також можете взаємодіяти з ним із звуком, відео чи веб-камерою, якщо вас цікавлять ці види мистецтва!

Короткий вступ до P5

Спочатку завантажте в CD5 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, які ми використовували для цього підручника.

Читати далі

  • Генеративна артистичність
  • Поїзд кодування
  • Розмова Тіма Холмана

Підтримувати зв'язок

Ця публікація була написана спільно з Джеймсом Рейчардом. Якщо ви створюєте своє власне мистецтво, обов’язково пишіть його нам! (Алі та Джеймс).

Спочатку опубліковано на dev.to.