En introduksjon til Generative Art: hva det er, og hvordan du lager det

Generativ kunst kan være et skremmende tema - det virker som det er mye matte involvert, og kunst er vanskelig i seg selv!

Men det trenger ikke være vanskelig - du kan bygge noen virkelig kule ting uten matematikk eller kunst. Dette innlegget vil bryte ned hva generativ kunst til og med er, og hvordan du kan komme i gang med å bygge din egen generative kunst.

For det første, hva er kodekunst?

Kodekunst er hvilken som helst kunst som er bygget ved hjelp av kode. Det er uendelige eksempler på CodePen - for eksempel CSS-kunst.

Hva er generativ kunst?

Ofte henter generativ kunst inspirasjon fra moderne kunst, spesielt popkunst som bruker tungt ordnede geometriske mønstre.

Imidlertid er det en veldig bred og rik kunstkategori opprettet med kode med en sentral egenskap. Generativ kunst inkorporerer et selvstyrt eller autonomt system på en eller annen måte.

Tilfeldighet er en type autonomt system. Ved å inkorporere tilfeldigheter i et stykke kodekunst, får du et annet, helt unikt kunstverk hver gang du kjører skriptet, laster inn siden din eller svarer på brukerinteraksjon.

Det er også mer ordnede autonome systemer. Et eksempel er Mandelbrots Fractal, avledet fra en villedende enkel ligning.

Vi kan også integrere begge tilnærminger, blande orden og kaos!

Kunstverket blir et samarbeid mellom datamaskinen og kunstneren. Noen aspekter av kunstverket styres av koderen, men ikke alle. Kunstneren styrer både tilfeldigheten og rekkefølgen i kunsten.

På en måte, med et autonomt system, gir kunstneren kontrollen over kunsten sin, og datamaskinen gjør det for dem. Et mer nyansert perspektiv dukker opp når en ny kreativ prosess vurderes.

Koder-artisten engasjerer seg i en tilbakemeldingsløkke der de hele tiden tilpasser et system for å gi mer ønskelige og ofte mer overraskende resultater.

Denne prosessen omfatter eksperimentering og lykkelige ulykker på en måte som omformer kunstnerens rolle. Som generative artister bruker vi kodegrunnleggende som sløyfer, kontrollflyt og spesialfunksjoner. Vi blander dem deretter med ofte uforutsigbare krefter, for å gi helt unike resultater i motsetning til alt annet som eksisterer.

Eksempler på generativ kunst

Kate Comptons blomster

Cellular Automata and the Edge of Chaos

Animert generativ kunst i flerfarger av Phil Nash

Impresjonistiske klatter av Murasaki Uma

Generated Tree av Miriam Nadler

Hva går inn i et stykke generativ kunst?

  • Tilfeldighet er avgjørende for å skape generativ kunst. Kunsten skal være annerledes hver gang du kjører generasjonsskriptet, så tilfeldighet er vanligvis en stor del av det.
  • Algoritmer - Å implementere en algoritme visuelt kan ofte generere fantastisk kunst, for eksempel det binære treet ovenfor.
  • Geometri - Mest generative kunst inneholder former, og matematikken fra videregående geometriklasse kan hjelpe noen veldig kule effekter.

Hvordan kan du nærme deg et generativt kunstverk?

Det er to hovedstrategier for å skape generativ kunst, selv om de fleste vil falle mellom de to strategiene.

Den første er å ikke ha noen resultater i tankene og se hva datamaskinen genererer når du spiller.

Det andre er at du har en veldig ferdig ide om hvordan du vil at kunsten skal se ut, og tilfeldigheten endrer bare sluttresultatet litt.

Hvor skal du begynne?

Hvis du kjenner JavaScript, er p5.js et fantastisk sted å starte. Målet er å "gjøre koding tilgjengelig for kunstnere, designere, lærere og nybegynnere." Det er en innpakning på Canvas API, og det forenkler mye matematikk. Det fokuserer på tegning, men du kan også gjøre lyd-, video- eller webkamerainteraksjon med det hvis du er interessert i disse kunstformene!

En rask introduksjon til P5

Last først inn p5 CDN. Så, i JavaScript-filen, vil du legge til to funksjoner som vil bli brukt i stort sett noen gang p5-skript: setupog draw. Disse navnene er nødvendige for at p5 skal kalle dem.

setupkalles når programmet starter. Du vil sannsynligvis lage et lerret å tegne på i det ved hjelp av createCanvasfunksjonen, og du kan angi noen standardinnstillinger der. Det kalles bare en gang!

drawkalles etter oppsett, og utføres kontinuerlig til du ringer noLoop, noe som forhindrer at den kjører igjen. Du kan kontrollere hvor mange ganger som drawgår hvert sekund med frameRatefunksjonen.

Med generativ kunst setter jeg vanligvis noLoopinn setupfunksjonen, som gjør at drawbare løper en gang i stedet for kontinuerlig.

Her er en p5 startmal på CodePen.

Siden vi har snakket så mye om viktigheten av tilfeldighet for generativ kunst, er en annen viktig funksjon i p5 random. Det fungerer på samme måte som JavaScript, Math.randommen du kan angi et område for tallene slik at du ikke trenger å gjøre så mye matematikk for å få tallet til et nyttig format.

p5 Linjer

Du kan opprette en linje i p5.js slik:

line(startX, startY, endX, endY)

Deretter kan du tilfeldig generere en haug med linjer og lage et enkelt stykke generativ kunst som dette:

Selv veldig enkle skript kan generere kule kunstverk!

p5 Former

Du kan også lage former med p5-lignende sirkler, trekanter og firkanter.

Her er et eksempel på å lage noen former med p5:

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

Deretter kan vi lage noen flere former for å bygge noe morsommere!

p5 Bevegelse

Vi kan legge til bevegelse i tegningene våre ved å fjerne noLoopfunksjonssamtalen i setupfunksjonen - sjekk dette!

Farge

Du kan også leke med farger med generativ kunst ved å tilfeldig velge farger. Du kan gjøre dette matematisk gjennom RGB-verdier, eller du kan generere en fargepalett med favorittfargevelgeren din (vi har brukt denne).

Du kan stille inn fyllfarge med colorfunksjonen. Det tar en rekke forskjellige formater, som navngitte farger, RGBAer og heksekoder.

Du kan også endre fargen på omrisset ved hjelp av stroke. Du kan også fjerne konturen ved å bruke noStrokeeller gjøre den til en annen bredde med strokeWeight.

Sette alt sammen

Når vi har fått alle disse bitene på plass, kan vi kombinere teknikkene for å bygge noen virkelig kule ting.

En annen strategi: Tweaking Tutorials

Du kan også generere veldig kult generativ kunst ved å ta andres verk og bygge av det. For eksempel, her er resultatet av en veiledning av Dan Shiffman:

Her er to justeringer av det for å skape forskjellige effekter:

Her er en Codepen-samling med enda mer!

Du kan følge opplæringsprogrammer, forkode CodePens eller Glitch-prosjekter og lage noe nytt og unikt. Bare sørg for å gi den originale artisten også æren.

Cheatsheet

Her er et jukseark med all P5-funksjonaliteten vi brukte til denne opplæringen.

Les mer

  • Generativ kunst
  • Kodetog
  • Snakk av Tim Holman

Hold kontakten

Dette innlegget ble skrevet med James Reichard. Hvis du lager din egen kunst, må du sørge for å Tweet den på oss! (Ali og James).

Opprinnelig publisert på dev.to.