Додаток: Дизайн створінь

Цей посібник від Занни Марш, яка створила всі ілюстрації, які ви бачите у цій книзі.

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

Хоча з p5.js можна легко малювати фігури та лінії, для ескізів дизайнів я рекомендую використовувати папір і олівець. Працюючи безпосередньо на папері, ви можете зосередитися на своєму проєкті й швидко оцінити та порівняти ітерації. Вам не потрібно буде перемикатися між візуальним мисленням і друкуванням коду. Спершу розробіть своє створіння на папері, а потім відтворіть його у коді!

Художники-мультиплікатори Грег Стамп і Девід Ласкі припускають, що майже все можна намалювати за допомогою лише дев’яти інгредієнтів. Перші шість вважаються основними, а останні три — додатковими:

• Квадрат, коло, трикутник
• Прямокутник, видовжений овал, високий трикутник
• Криві лінії, прямі лінії та точки

Почніть із малювання цих дев’яти інгредієнтів на папері (див. малюнок A.1). Легко, правда?

Тепер ви можете почати об’єднувати ці візуальні елементи, щоб скласти своє створіння. Ваше створіння житиме в уявному просторі полотна p5.js, тому вам не потрібно створювати “справжню” істоту. Ви можете винайти щось абсолютно нове!

Ось дизайн-схема, знайома жителям планети Земля:

• Тіло
• Пари плавників, крил, рук або ніг

Будь-яка з шести основних форм може стати тілом персонажа. На малюнку A.2 можна побачити надзвичайно простий приклад, який відповідає цій пораді.

Ви можете зберегти свій дизайн простим і зупинитися на цьому! Але перш ніж почати відтворювати свій малюнок у коді, подумайте про перспективу або вигляд, який ви матимете у своїй екосистемі. Ви дивитеся на сцену згори, ніби вдивляєтеся у ставок? Чи ви дивитеся збоку, через луг або у ліс? (Подумайте про відеогру, з оглядом зверху вниз або навпаки з бічним оглядом.)

Просторова орієнтація вашого створіння також важлива, особливо тому, що ви будете переміщати його по сцені. На малюнку A.2 дві криві лінії представляють лапки чи вусики? Більшість істот рухаються головою вперед. Але де в цьому прикладі голова? Щоб краще прояснити просторову орієнтацію вашого створіння, можна повторно використати основні й додаткові форми та намалювати елементи, такі як рот, очі, ніс, вуха, хвіст, вусики та ріжки, як показано на малюнку A.3.

Чи вам до вподоби утворені замальовки? Вони ідеальні? Ну, можливо, ні. Але не стирайте свою роботу, навіть якщо вона вам не подобається. Вам знадобляться усі ваші малюнки як точки даних, на які ви зможете посилатися під час ітерації покращення свого персонажа. Думайте про створений дизайн як про процес упорядкування візуальних елементів і спостереження за тим, які вони викликають у вас відчуття — як ви реагуєте на них і що вони вам підказують.

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

Спробуйте змінити такі елементи, як показано на малюнку A.4:

• Розмір і округлість або ширину тіла
• Довжину, форму або кількість ніг чи крил, а також кут і відстань між ними

Може бути корисним подумати про знайоме середовище — наприклад, луг, дно озера або тінисту верхівку тропічного дерева. Які властивості можуть стати в пригоді у цих середовищах? Великі очі? Великі крила? Довге, вузьке тіло? Округла форма, що підстрибує? Камуфляжний візерунок для маскування?

Коли ви малюєте ескіз, ви можете виявити, що форма вашої істоти передбачає певну поведінку чи відчуття — те, що ви можете проявити у коді. Може ваше створіння стрибає навколо, повзає або повільно дрейфує? У нього великий рот, щоб ковтати великі шматочки їжі, чи маленький рот для кусання? Чи має він величезні очі для пошуку смаколиків, як показано на малюнку A.5, чи для виявлення хижаків у пошуках перекусу? Нехай ваші малюнки надихають ваш код і навпаки.

Коли ви будете готові створювати своїх істот у коді, такі функції як translate(), rotate(), push() та pop() стануть вашими друзями, оскільки всі риси вашого персонажа розташовані одна відносно одної та відносно тіла. Пам’ятайте, що ООП може заощадити ваш час і проблеми. Таким чином ви зможете швидко перевикористовувати й змінювати відповідні замальовки.

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

• Як і багато хто з нас, ви, можливо, любили малювати в дитинстві, але покинули це, коли ваші навички не відповідали вашому баченню. Сприймайте ці малюнки як експерименти! Коли ви досліджуєте немає правильного чи неправильного. Знизьте ставки, малюючи на уривках паперу.
• Якщо ви відчуваєте напругу ще до початку, розслабтеся, намалювавши каракулі або спіралі. Це як розтяжка перед тренуванням — художники теж роблять розминку!
• На сьогодні доступні чудові цифрові інструменти для малювання, але будьте обережні щодо легкого стирання та нескінченних “скасувань” для своїх замальовок. Якщо ви витиратимете все, що вам не подобається, то у вас не буде можливості для порівняння і змоги за допомогою цього навчитися.

Отже, візьміть ручку та папір, почніть малювати та готуйтеся до зустрічі зі своїми створіннями!