En introduktion til Generative Art: hvad det er, og hvordan man laver det

Generativ kunst kan være et skræmmende emne - det ser ud til, at der er meget matematik involveret, og kunst er vanskelig i sig selv!

Men det behøver ikke være svært - du kan bygge nogle rigtig seje ting uden en matematik- eller kunstgrad. Dette indlæg vil opdele, hvad generativ kunst endda er, og hvordan du kan komme i gang med at opbygge din egen generative kunst.

For det første, hvad er kodekunst?

Kodekunst er enhver kunst, der er bygget ved hjælp af kode. Der er uendelige eksempler på CodePen - for eksempel CSS art.

Hvad er generativ kunst?

Ofte henter generativ kunst inspiration fra moderne kunst, især popkunst, der gør tung brug af ordnede geometriske mønstre.

Det er dog en meget bred og rig kategori af kunst oprettet med kode med en central egenskab. Generativ kunst inkorporerer et selvstyret eller autonomt system på en eller anden måde.

Tilfældighed er en type autonomt system. Ved at inkorporere tilfældigheder i et stykke kodekunst får du et andet, helt unikt kunstværk hver gang du kører dit script, indlæser din side eller svarer på brugerinteraktion.

Der er også mere ordnede autonome systemer. Et eksempel er Mandelbrots Fractal, afledt af en vildledende simpel ligning.

Vi kan også integrere begge tilgange, blande orden og kaos!

Kunstværket bliver et samarbejde mellem computeren og kunstneren. Nogle aspekter af kunstværket styres af koderen, men ikke alle. Kunstneren styrer både tilfældigheden og rækkefølgen i kunsten.

På en måde med et autonomt system opgiver kunstneren kontrol over deres kunst, og computeren gør det for dem. Et mere nuanceret perspektiv opstår, når en ny kreativ proces overvejes.

Koder-kunstneren deltager i en feedback-loop, hvor de konstant tilpasser et system for at producere mere ønskelige og ofte mere overraskende resultater.

Denne proces omfatter eksperimenter og glade ulykker på en måde, der omformer kunstnerens rolle. Som generative kunstnere bruger vi kodebasics som sløjfer, kontrolflow og specialfunktioner. Vi blander dem derefter med ofte uforudsigelige kræfter for at producere helt unikke resultater i modsætning til noget andet, der eksisterer.

Eksempler på generativ kunst

Kate Comptons blomster

Cellular Automata og Edge of Chaos

Animeret generativ kunst i flerfarvet af Phil Nash

Impressionistblobs af Murasaki Uma

Genereret træ af Miriam Nadler

Hvad går der ind i et stykke generativ kunst?

  • Tilfældighed er afgørende for at skabe generativ kunst. Kunsten skal være forskellig hver gang du kører generation scriptet, så tilfældighed er normalt en stor del af det.
  • Algoritmer - Implementering af en algoritme visuelt kan ofte generere fantastisk kunst, for eksempel det binære træ ovenfor.
  • Geometri - Mest generative kunst indeholder figurer, og matematikken fra gymnasiet geometrisk klasse kan hjælpe med nogle virkelig seje effekter.

Hvordan kan du nærme dig et generativt kunstværk?

Der er to hovedstrategier til at skabe generativ kunst, selvom de fleste vil falde mellem de to strategier.

Den første er at have ingen resultater i tankerne og se, hvad computeren genererer, når du spiller rundt.

Det andet er, at du har en meget afsluttet idé om, hvordan du vil have kunsten til at se ud, og tilfældigheden ændrer kun slutresultatet lidt.

Hvor skal du starte?

Hvis du kender JavaScript, er p5.js et fantastisk sted at starte. Målet er at "gøre kodning tilgængelig for kunstnere, designere, undervisere og begyndere." Det er en indpakning på Canvas API, og det forenkler meget af matematikken. Det fokuserer på tegning, men du kan også interagere med lyd, video eller webcam med det, hvis du er interesseret i disse kunstformer!

En hurtig introduktion til P5

Indlæs først p5 CDN. Derefter tilføjer du i din JavaScript-fil to funktioner, der vil blive brugt i stort set nogensinde p5-script: setupog draw. Disse navne er nødvendige for at p5 kan kalde dem.

setupkaldes, når programmet starter. Du opretter sandsynligvis et lærred til at trække på i det ved hjælp af createCanvasfunktionen, og du kan angive nogle standardindstillinger der. Det kaldes kun én gang!

drawkaldes efter installation og udføres konstant, indtil du ringer noLoop, hvilket forhindrer den i at køre igen. Du kan kontrollere, hvor mange gange der drawkører hvert sekund med frameRatefunktionen.

Med generativ kunst lægger jeg normalt noLoopi setupfunktionen, som drawkun får løb en gang i stedet for kontinuerligt.

Her er en p5 startskabelon på CodePen.

Da vi har talt så meget om tilfældighedens betydning for generativ kunst, er en anden vigtig funktion i p5 random. Det fungerer på samme måde som JavaScript, Math.randommen du kan indstille et interval for tallene, så du ikke behøver at gøre så meget matematik for at få nummeret til et nyttigt format.

p5 Linjer

Du kan oprette en linje i p5.js som denne:

line(startX, startY, endX, endY)

Derefter kan du tilfældigt generere en masse linjer og oprette et simpelt stykke generativ kunst som denne:

Selv virkelig enkle scripts kan generere seje kunstværker!

p5 Former

Du kan også oprette figurer med p5-lignende cirkler, trekanter og firkanter.

Her er et eksempel på oprettelse af nogle figurer med p5:

// circle ellipse(xCoordinate, yCoordinate, width, height) 
// square rect(xCoordinate, yCoordinate, width, height) 
// triangle triangle(xCoordinate1, yCoordinate1, x2, y2, x3, y3)

Derefter kan vi skabe nogle flere former for at bygge noget mere sjovt!

p5 Bevægelse

Vi kan tilføje bevægelse til vores tegninger ved at fjerne noLoopfunktionsopkaldet i setupfunktionen - tjek dette!

Farve

Du kan også lege med farve med generativ kunst ved tilfældigt at vælge farver. Du kan gøre dette matematisk gennem RGB-værdier, eller du kan generere en farvepalet med din yndlingsfarvevælger (vi har brugt denne).

Du kan indstille fyldfarven med colorfunktionen. Det kræver en masse forskellige formater, som navngivne farver, RGBA'er og hex-koder.

Du kan også ændre farven på konturen ved hjælp af stroke. Du kan også fjerne konturen ved hjælp af noStrokeeller gøre den til en anden bredde med strokeWeight.

Samler det hele

Når vi har alle disse stykker på plads, kan vi kombinere teknikkerne til at bygge nogle rigtig seje ting.

En anden strategi: Tweaking Tutorials

Du kan også generere rigtig cool generativ kunst ved at tage en andens arbejde og bygge af det. For eksempel er her resultatet af en tutorial af Dan Shiffman:

Her er to justeringer af det for at skabe forskellige effekter:

Her er en Codepen-samling med endnu mere!

Du kan følge tutorials, forkode CodePens eller Glitch-projekter og oprette noget nyt og unikt. Bare sørg for at give den originale kunstner også en kredit.

Snydeark

Her er et snydeark med al den P5-funktionalitet, vi brugte til denne vejledning.

Læs mere

  • Generativ kunst
  • Kodningstog
  • Tal af Tim Holman

Hold kontakten

Dette indlæg blev skrevet med James Reichard. Hvis du opretter din egen kunst, skal du sørge for at Tweet den på os! (Ali og James).

Oprindeligt udgivet på dev.to.