A generatív művészet megfélemlítő téma lehet - úgy tűnik, sok a matematika, és a művészet önmagában is trükkös!
De ennek nem kell nehéznek lennie - matematika vagy művészeti végzettség nélkül készíthet néhány igazán jó dolgot. Ez a bejegyzés lebontja, hogy mi is a generatív művészet, és hogyan kezdheti el saját generatív művészetének felépítését.
Először is, mi a kódművészet?
A kódrajz bármely olyan művészet, amelyet kód felhasználásával építenek. Végtelen számú példa található a CodePen-re - például CSS art.
Mi az a generatív művészet?
Gyakran a generatív művészet merít ihletet a modern művészetből, különösen a rendezett geometriai mintákat erőteljesen kihasználó pop artból.
Ez azonban egy nagyon széles és gazdag művészeti kategória, amelyet központi jellemzőkkel rendelkező kóddal hoztak létre. A generatív művészet valamilyen módon magában foglal egy önálló vagy autonóm rendszert.
A véletlenszerűség az autonóm rendszerek egyik típusa. Azáltal, hogy a véletlenszerű elemeket belefoglalja egy kóddarabba, egy másik, teljesen egyedi műalkotást kap minden alkalommal, amikor futtatja a szkriptet, betölti az oldalt vagy válaszol valamilyen felhasználói interakcióra.
Vannak rendezettebb autonóm rendszerek is. Ilyen például Mandelbrot-féle Fractal, amely megtévesztően egyszerű egyenletből származik.
Integrálhatjuk mindkét megközelítést, összekeverve a rendet és a káoszt!
A grafika a számítógép és a művész együttműködésévé válik. A grafika bizonyos aspektusait a kódoló vezérli, de nem mindegyiket. A művész a véletlenszerűséget és a sorrendet egyaránt kontrollálja.
Bizonyos értelemben autonóm rendszerrel a művész feladja művészetük felett az irányítást, és a számítógép megteszi helyettük. Árnyaltabb perspektíva merül fel, ha új kreatív folyamatot fontolgatnak.
A kódoló-művész visszacsatolási hurkot folytat, ahol folyamatosan módosítanak egy rendszert, hogy kívánatosabb és gyakran meglepőbb eredményeket érjenek el.
Ez a folyamat olyan kísérleteket és boldog baleseteket ölel fel, amelyek átalakítják a művész szerepét. Generatív művészként a kód alapjait használjuk, mint például a hurkok, az irányítási folyamat és a speciális funkciók. Ezután gyakran kiszámíthatatlan erőkkel keverjük össze őket, hogy teljesen egyedi eredményeket hozzunk létre, ellentétben a létező másokkal.
Példák a generatív művészetre
Kate Compton virágai
Cellular Automata and the Edge of Chaos
Animált generatív művészet több színben, Phil Nash
Murasaki Uma impresszionista foltjai
Miriam Nadler által generált fa
Mi kerül egy generatív művészet darabjába?
- A véletlenszerűség döntő fontosságú a generatív művészet létrehozásában. A művészetnek minden egyes alkalommal másnak kell lennie, amikor a generációs szkriptet futtatja, ezért a véletlenszerűség általában ennek nagy része.
- Algoritmusok - Egy algoritmus vizuális megvalósítása gyakran félelmetes művészetet generálhat, például a fenti bináris fát.
- Geometria - A legtöbb generatív művészet magában foglalja a formákat, és a matematika a középiskolai geometriai órákból nagyon jó hatásokat segíthet.
Hogyan lehet megközelíteni egy generatív műalkotást?
A generatív művészet létrehozásának két fő stratégiája van, bár a legtöbb a két stratégia közé esik.
Az első az, hogy ne tartson szem előtt semmilyen eredményt, és nézze meg, mit generál a számítógép a játék közben.
A második az, hogy van egy nagyon végleges elképzelése arról, hogy mit szeretne a művészet kinézni, és a véletlenszerűség csak kis mértékben változtatja meg a végeredményt.
Hol kell kezdeni?
Ha ismeri a JavaScript-et, a p5.js egy fantasztikus hely a kezdéshez. Célja, hogy „hozzáférhetővé tegye a kódolást művészek, tervezők, oktatók és kezdők számára”. Ez egy burkoló a Canvas API-n, és sokat egyszerűsít a matematikában. A rajzra összpontosít, de hang-, video- vagy webkamera-interakciót is végezhet vele, ha érdekli ezeket a művészeti formákat!
Gyors bevezetés a P5-be
Először töltse be a p5 CDN-t. Ezután a JavaScript fájljában két olyan funkciót fog hozzáadni, amelyek nagyjából a valaha volt p5 szkriptben lesznek használva: setupés draw. Ezek a nevek szükségesek ahhoz, hogy a p5 felhívja őket.
setupa program indulásakor hívódik meg. Valószínűleg létrehoz egy vásznat, amelyre a createCanvasfunkció segítségével rá lehet rajzolni , és ott beállíthat néhány alapértelmezést. Csak egyszer hívják!
drawa telepítés után hívják meg, és folyamatosan végrehajtják, amíg nem hívja noLoop, ami megakadályozza, hogy újra elinduljon. A funkcióval szabályozhatja, hogy drawmásodpercenként hányszor futjon frameRate.
A generatív művészettel általában azt noLoopa setupfunkciót teszem be , amely drawfolyamatosan csak egyszer futtatható.
Itt egy p5 indító sablon a CodePen-en.
Mivel annyit beszéltünk a véletlenszerűség fontosságáról a generatív művészet számára, a p5 másik fontos funkciója random. A JavaScriptéhez hasonlóan működik, Math.randomde beállíthat egy tartományt a számokhoz, hogy ne kelljen annyi matematikát végeznie, hogy a számot hasznos formátumba hozza.
p5 Vonalak
A p5.js fájlban így hozhat létre sort:
line(startX, startY, endX, endY)Ezután véletlenszerűen generálhat egy csomó sort, és létrehozhat egy ilyen generatív művészeti darabot, mint ez:
Még az igazán egyszerű szkriptek is remek műalkotásokat generálhatnak!
p5 Alakzatok
P5 formájú alakzatokat is létrehozhat, például köröket, háromszögeket és négyzeteket.
Íme egy példa néhány alakzat létrehozására a p5 segítségével:
// circle ellipse(xCoordinate, yCoordinate, width, height) // square rect(xCoordinate, yCoordinate, width, height) // triangle triangle(xCoordinate1, yCoordinate1, x2, y2, x3, y3)Ezután létrehozhatunk még néhány alakzatot, hogy valami szórakoztatóbbat építsünk fel!
p5 Mozgás
Mozgást adhatunk a rajzainkhoz, ha eltávolítjuk a noLoopfüggvényhívást a setupfüggvényből - ezt ellenőrizze!
Szín
A színnel véletlenszerűen választva generatív művészettel is játszhat. Ezt matematikailag megteheti RGB-értékeken keresztül, vagy létrehozhat egy színpalettát a kedvenc színválasztójával (mi ezt használtuk).
A kitöltési színt a colorfunkcióval állíthatja be. Egy csomó különböző formátumra van szükség, például nevezett színekre, RGBA-kra és hexadecimális kódokra.
A vázlat színét a gombbal is megváltoztathatja stroke. A körvonalat eltávolíthatja a gombbal, noStrokevagy más szélességűvé teheti strokeWeight.
Összedobva az egészet
Miután az összes darab a helyén van, kombinálhatjuk a technikákat, hogy igazán jó dolgokat készítsünk.
Egy másik stratégia: oktatóanyagok módosítása
Akkor is generálhat igazán klassz generatív művészetet, ha valaki más munkáját elveszi és abból épít. Például itt van Dan Shiffman oktatóprogramjának eredménye:
Itt van két csípés, hogy különböző effektusokat hozzunk létre:
Itt egy Codepen kollekció, még több!
Kövesse oktatóanyagokat, fork CodePenseket vagy Glitch projekteket, és létrehozhat valami újat és egyedit. Csak feltétlenül adjon némi elismerést az eredeti művésznek.
Puska
Itt van egy csalólap az összes P5 funkcióval, amelyet ehhez az oktatóanyaghoz használtunk.
Olvass tovább
- Generatív művészet
- Kódoló vonat
- Tim Holman beszéde
Maradj kapcsolatban
Ezt a bejegyzést James Reicharddal közösen írták. Ha saját művészeti alkotást készít, feltétlenül küldje el nekünk tweeteléssel! (Ali és James).
Eredetileg a dev.to.