Въведение в генеративното изкуство: какво е то и как го правите

Генеративното изкуство може да бъде плашеща тема - изглежда, че има много математика, а изкуството е сложно само по себе си!

Но това не трябва да бъде трудно - можете да изградите някои наистина страхотни неща без математика или художествена степен. Тази публикация ще разбере какво е генеративното изкуство и как можете да започнете да изграждате собствено генеративно изкуство.

Първо, какво е кодово изкуство?

Кодовото изкуство е всяко изкуство, което е изградено с помощта на код. В CodePen има безброй примери - например CSS art.

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

Често генеративното изкуство черпи вдъхновение от съвременното изкуство, особено поп изкуството, което често използва подредени геометрични модели.

Това обаче е много широка и богата категория изкуство, създадено с код с централна характеристика. Генеративното изкуство включва по някакъв начин самоуправляема или автономна система.

Случайността е един вид автономна система. Чрез включване на случайността в произведение на кодовото изкуство получавате различно, напълно уникално произведение на изкуството всеки път, когато стартирате скрипта си, заредите страницата си или отговорите на някакво взаимодействие с потребителя.

Съществуват и по-подредени автономни системи. Един пример е фракталът на Манделброт, получен от измамно просто уравнение.

Можем да интегрираме и двата подхода, смесване на ред и хаос!

Произведението се превръща в сътрудничество между компютъра и художника. Някои аспекти на произведението на изкуството се контролират от кодера, но не всички от тях. Художникът контролира както случайността, така и реда в изкуството.

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

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

Този процес обхваща експерименти и щастливи инциденти по начин, който преоформя ролята на художника. Като генеративни артисти, ние използваме основите на кода като контури, контрол на потока и специализирани функции. След това ги смесваме с често непредсказуеми сили, за да се получат напълно уникални резултати, за разлика от всичко друго, което съществува.

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

Цветята на Кейт Комптън

Клетъчни автомати и ръбът на хаоса

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

Импресионисти Blobs от Мурасаки Ума

Генерирано дърво от Miriam Nadler

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

  • Случайността е от решаващо значение за създаването на генеративно изкуство. Изкуството трябва да е различно всеки път, когато стартирате скрипта за генериране, така че случайността обикновено е голяма част от това.
  • Алгоритми - Прилагането на алгоритъм визуално често може да генерира страхотно изкуство, например двоичното дърво по-горе.
  • Геометрия - Повечето генеративни изкуства включват фигури, а математиката от класа по геометрия в гимназията може да помогне за някои наистина страхотни ефекти.

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

Има две основни стратегии за създаване на генеративно изкуство, въпреки че повечето ще попаднат между двете стратегии.

Първият е да нямате предвид резултати и да видите какво генерира компютърът, докато играете.

Второто е, че имате много фина идея за това как искате да изглежда изкуството и произволността само леко променя крайния резултат.

Къде трябва да започнете?

Ако знаете JavaScript, p5.js е страхотно място за започване. Целта му е „да направи кодирането достъпно за художници, дизайнери, преподаватели и начинаещи“. Това е обвивка на Canvas API и опростява голяма част от математиката. Той се фокусира върху рисуването, но можете също да правите взаимодействие със звук, видео или уеб камера с него, ако се интересувате от тези форми на изкуство!

Кратко въведение в P5

Първо, заредете в p5 CDN. След това във вашия 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.