Садржај
Увод
Увод
Како рачунари цртају?
Основни појмови
Први цртеж, први програм
Дигиталне боје
Уметност по рецепту
Цртање по инструкцијама
Цигла по цигла
Десило се случајно
Насумичности
Облици из природе
Случајни цртежи
Како смо направили илустрацију Рекурзивни Баухаус
Плочице са шарама
Трушеове плочице
Програмирање плочица
Запиши ми шта да урадим
Уметност Вере Молнар
Насумични ход
Илустрација - насумични ход
Визуелни ритам таласа и ветра
Перлинов шум
Дигитално треперење
Илустрација Таласи и сунце
Шум у више димензија
Бесконачни облаци
Вијугање Безијеових крива
Честице које се крећу
Системи честица и физичке симулације
Како изгледа време?
Алгоритамски сат и визуелизација времена
Секундара од пиксела
Илустрација Софтверски часовник
Ти си овде
Алгоритамске мапе и уметничка картографија
Дигитални глобус
Карта земљотреса
Таласање
Експлозија синуса
Лисажуове криве
Крај?
Да ли је ово крај?
Евалуација
Евалуација курса

Бесконачни облаци

Да ли знаш да се апстрактне графике и фотореалистичне 3Д слике могу креирати применом Перлиновог шума?

Погледај наредне слике.

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/OnlineNastava/algoritamska_umetnost/perlin_eyes.png

Слика 1. Слободно лиценцирана алгоритамска графика, аутор: Stinging Eyes, 2009.

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/OnlineNastava/algoritamska_umetnost/66_perlin.png

Слика 2. Слободно лиценцирана алгоритамска графика, аутор: Џејсон Сивард (Jared Tarbell), 2013.

У претходној лекцији сазнао/ла си шта је то Перлинов шум и како да га користиш за програмирање својих дигиталних цртежа и анимација. Сада знаш како Перлинов шум подражава облике и процесе у природи, попут ватре, воде, ветра и планинских венаца. У овој лекцији бавићемо се сложенијим облицима Перлиновог шума, онима који немају само једну, него две или три димензије.

На тај начин могу се креирати поменуте апстрактне графике (Слика 1), али и фотореалистичне 3Д слике које подсећају на праве фотографије (Слика 2).

Ту је и неколико наших примера, које смо направили уз помоћ п5.јс:

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/OnlineNastava/algoritamska_umetnost/petlja_8.3.png

Најједноставнији пример дводимензионалног Перлиновог шума је алгоритам за генерисање процедуралних облака. За разлику од примера из прошле лекције, у овом случају потребно је да се вредности Перлиновог шума генеришу на основу два параметра, јер се облаци (онако како их видимо са Земље) простиру у две димензије: по \(x\) и по \(y\)- оси.

Хајде да видимо како се то програмира у систему п5.јс, уз помоћ функције noise(), која у овом случају прима два аргумента.

Обрати пажњу на променљиву \(c\). Њена вредност генерише се за сваки појединачни пиксел, сваку појединачну тачку на дигиталном платну. Вредност добијамо тако што функцији за шум проследимо два аргумента (један за \(x\), други за \(y\) осу), и то множимо са 255 (јер количина сиве боје узима вредности у опсегу између 0 и 255, где је 0 црна а 255 бела).

Затим цртамо један квадрат са основицом step, који представља једну тачку наше графике (ако је скрипт блокиран зато што се извршава предуго, повећај вредност константе step, или смањи платно).

Шта би требало да измениш у коду ако желиш да уместо сивих добијеш облаке у боји,? Сива боја је математички описана бројем између 0 и 255. Са колико бројева описујемо јарке боје, попут црвене или љубичасте? Можемо ли повезати Перлинов шум са РГБ системом боја? Можемо ли сваки од ових бројева (Р, Г и Б) генерисати уз помоћ функције за Перлинов шум?

Математика Перлиновог шума

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/OnlineNastava/algoritamska_umetnost/petlja_7.2.png

Перлинов шум теоријски може да се дефинише као функција било којег броја променљивих. У претходној лекцији смо га користили као функцију једне променљиве, а сада као функцију две променљиве. Како можемо да израчунмао вредности Перлинове функције?

Да бисмо што једноставније одговорили на ово питање, потребан је мали увод.

Замсли да си на равној, али стрмој ливади у тачки \((x_0, y_0)\), на висини \(h_0\) (слика 3). Црвена стрелица је јединични вектор \(\overrightarrow{v}\) смера најстрмијег успона. Нека је висинска разлика између крајева црвене стрелице једнака \(\Delta h\). Питање је како да одредимо висину у произвољној тачки \((x, y)\)?

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/OnlineNastava/algoritamska_umetnost/tehnicke_ilustracije25.jpg

Слика 3

Означимо са \(l\) растојање између тачака \((x_0, y_0)\) и \((x, y)\), а са \(\alpha\) угао између два смера означена стрелицама. Није тешко извести формулу да је висина у тачки \((x, y)\) једнака \(h = h_0 + \Delta h \cdot l \cos \alpha\). Такође, користећи адиционе формуле (конкретно, формулу за косинус разлике углова), може се извести и формула \(l \cos \alpha = (x-x_0) v_x + (y-y_0) v_y\), где су \(v_x, v_y\) дужине компоненти вектора \(\overrightarrow{v}\). Спајањем ове две формуле, коначно се добија \(h = h_0 + \Delta h \cdot ((x-x_0) v_x + (y-y_0) v_y)\).

Приметимо да висина \(h\) у тачки \((x, y)\) може да буде и једнака, па и мања од \(h_0\). Н апример, ако је угао \(\alpha\) прав, тачке \((x_0, y_0)\) и \((x, y)\) су на истој висини, а ако је угао туп, тачка \((x, y)\) је нижа од тачке \((x_0, y_0)\) тј. \(h < h_0\).

Вратимо се сада рачунању Перлинове функције. Вредности функције замишљамо као висине на неравном терену, на коме се нагиб мења потпуно неправилно. Увешћемо решетку, која се састоји од тачака \(P_{ij}\), које формирају мрежу квадрата. Терен иницијализујемо тако што у тачкама решетке насумично бирамо висине и јединичне векторе најстрмијег успона у околини тачке. Када изаберемо те почетне елементе, помоћу њих треба да дефинишено вредности функције (тј. висине) за све остале тачке, тако да се добије глатка површ. Посматрајмо произвољну тачку \(P(x, y)\) чију висину желимо да дефинишемо. Нека су \(P_{00}, P_{01}, P_{10}, P_{11}\) четири њој најближе тачке решетке, које формирају квадрат (слика 4). .

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/OnlineNastava/algoritamska_umetnost/tehnicke_ilustracije24.jpg

Слика 4

Уведимо сличне ознаке као у уводном проблему: нека је \(h_{00}\) висина у тачки \(P_{00}\), нека је \(\overrightarrow{v_{00}}\) јединични вектор најстрмијег нагиба у \(P_{00}\) (то је црвена стрелица из тачке \(P_{00}\)), нека се дуж овог вектора постиже висинска разлика \(\Delta h_{00}\), нека је \(l_{00}\) дужина дужи \(P_{00}P\) и нека је \(\alpha_{00}\) угао између вектора \(\overrightarrow{v_{00}}\) и \(\overrightarrow{P_{00}P}\). На исти начин уводимо све ове ознаке и за тачке \(P_{01}, P_{10}, P_{11}\).

Ако бисмо сада висину тачке \(P\) израчунали, на пример, само на основу тачке \(P_{01}\) (као у уводном проблему), та висина би била \(f_{01} = h_{01} + \Delta h_{01} \cdot l_{01} \cos \alpha_{01} = h_{01} + \Delta h_{01} \cdot ((x-x_0)v_{01x}+(y-y_1)v_{01y})\). Слично можемо да задамо висину тачке \(P\) и преко остале три тачке и добијемо вредности \(f_{00}, f_{10}, f_{11}\). Коначну вредност \(f\) ћемо да изразимо у облику

\(f = k_{00} \cdot f_{00} + k_{01} \cdot f_{01} + k_{10} \cdot f_{10} + k_{11} \cdot f_{11}\),

где је још потребно погодно изабрати коефицијенте \(k_{00}, k_{01}, k_{10}, k_{11}\), тако да се добије глатка површ. Да би то постигао, Перлин је изворно користио функцију \(\phi(t) = 3t^2-2t^3\) дефинисану на интервалу \([0, 1]\), а која се по потреби може додефинисати тако да је једнака нули лево, а јединици десно од интервала \([0, 1]\).

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/OnlineNastava/algoritamska_umetnost/tehnicke_ilustracije26.jpg

Слика 5: функција \(\phi(t)\)

Дефинисањем

\(\begin{align} \\ k_{00} = \phi(x_1-x) \phi(y_1-y) \\ k_{01} = \phi(x_1-x) \phi(y-y_0) \\ k_{10} = \phi(x-x_0) \phi(y_1-y) \\ k_{11} = \phi(x-x_0) \phi(y-y_0) \\ \end{align}\)

добијамо коефицијенте са свим потребним особинама. На пример, што је тачка \(P\) ближе тачки \(P_{01}\), то је коефицијент \(k_{01}\) ближи јединици и обрнуто, што је тачка \(P\) даље од тачке \(P_{01}\), то је коефицијент \(k_{01}\) ближи нули. Исто важи и за остале коефицијенте и остале тачке. Захваљујући томе, висине се глатко мењају унутар квадрата. Чак и када тачка \(P\) пређе у суседни квадрат, вредности фунцкције се глатко настављају. Перлин је заиста заслужио сва признања која је добио. Ово није само примена математике у уметности, ово је и уметност у примењивању математике!

На слици 6 је приказано како се постепено може израчунати вредност функције Перлиновог шума као фунцкције две променљиве. Висине су представљене променом боје од црвене до зелене.

https://petljamediastorage.blob.core.windows.net/root/Media/Default/Kursevi/OnlineNastava/algoritamska_umetnost/68_perlin.png

Слика 6

На сликама у првом реду је у сваком квадрату примењена само по једна од четири функције \(f_{00}, f_{01}, f_{10}, f_{11}\). У другом реду су сабране по две од ових функција, а у трећем су сабране све четири и добијена је коначна функција перлиновог шума.

    Q-40: За креирање апстрактне графике и фотореалистичних слика користимо функцију noise(), која:

  • има два аргумента
  • Тачно!
  • нема аргумената
  • Нетачно.
  • има један аргумент
  • Нетачно.

    Q-41: Колико се параметара користи код примене Перлиновог шума за генерисање процедуралних облака?

  • 0
  • Нетачно. Код Перлиновог шума нам је потребан бар један параметар.
  • 1
  • Нетачно. Облаке не можемо видети као једнодимензионе објекте.
  • 2
  • Тачно.
  • 3
  • Нетачно. Није нам потребан трећи параметар иако су облаци тродимензиони јер ми на небу видимо њихову дводимензиону пројекцију.
Претходна лекција
Следећа лекција
A- A+
Тема
Темa

Prijavi problem


Obeleži sve kategorije koje odgovaraju problemu

Još detalja - opišite nam problem


Uspešno ste prijavili problem!
Status problema i sve dodatne informacije možete pratiti klikom na link.
Nažalost nismo trenutno u mogućnosti da obradimo vaš zahtev.
Molimo vas da pokušate kasnije.