de Ali Spittel

O introducere în Arta Generativă: ce este și cum o faci

O introducere in arta generativa ce este si cum o
Fractala lui Mandelbrot este derivată dintr-o ecuație înșelător de simplă

Arta generativă poate fi un subiect intimidant – se pare că există o mulțime de matematică implicată, iar arta este dificilă în sine!

Dar, nu trebuie să fie dificil – puteți construi niște lucruri foarte interesante fără o diplomă în matematică sau artă. Această postare va descrie ce este chiar arta generativă și cum puteți începe să vă construiți propria artă generativă.

În primul rând, ce este codul art?

Codul este orice artă care este construită folosind codul. Există exemple nesfârșite pe CodePen – de exemplu CSS art.

Ce este arta generativă?

Adesea, arta generativă se inspiră din arta modernă, în special de arta pop care folosește intens modelele geometrice ordonate.

Cu toate acestea, este o categorie foarte largă și bogată de artă creată cu cod cu o caracteristică centrală. Arta generativă încorporează într-un fel un sistem autoguvernat sau autonom.

Randomness este un tip de sistem autonom. Încorporând șansa într-o piesă de cod, veți obține o piesă de artă diferită, complet unică, de fiecare dată când rulați scriptul, încărcați pagina sau răspundeți la o anumită interacțiune cu utilizatorul.

Există, de asemenea, sisteme autonome mai ordonate. Un exemplu este Fractala lui Mandelbrot, derivată dintr-o ecuație înșelător de simplă.

De asemenea, putem integra ambele abordări, amestecând ordinea și haosul!

Opera de artă devine o colaborare între computer și artist. Unele aspecte ale operei de artă sunt controlate de coder, dar nu toate. Artistul controlează atât întâmplarea, cât și ordinea în artă.

Într-un fel, cu un sistem autonom, artistul renunță la controlul asupra artei lor, iar computerul o face pentru ei. O perspectivă mai nuanțată apare atunci când se are în vedere un nou proces creativ.

Coder-artistul se angajează într-o buclă de feedback în care modifică în mod constant un sistem pentru a produce rezultate mai dorite și deseori mai surprinzătoare.

Acest proces îmbrățișează experimentarea și accidentele fericite într-un mod care remodelează rolul artistului. Ca artiști generativi, folosim elementele de bază ale codului precum buclele, fluxul de control și funcțiile specializate. Apoi le amestecăm cu forțe adesea imprevizibile, pentru a produce rezultate complet unice, spre deosebire de orice altceva care există.

Exemple de artă generativă

Flori ale lui Kate Compton

Automatele celulare și marginea haosului

Arta generativă animată în culori multiple de Phil Nash

Impressionists Blobs de Murasaki Uma

Arborele generat de Miriam Nadler

Ce intră într-o piesă de artă generativă?

  • Aleatoriu este crucial pentru crearea artei generative. Arta ar trebui să fie diferită de fiecare dată când rulați scriptul de generație, așa că aleatoritatea este de obicei o mare parte din aceasta.
  • Algoritmi – Implementarea vizuală a unui algoritm poate genera deseori o artă minunată, de exemplu, arborele binar de mai sus.
  • Geometrie – Majoritatea artei generative încorporează forme, iar matematica din clasa de geometrie a liceului poate ajuta la unele efecte foarte interesante.

Cum poți aborda o piesă de artă generativă?

Există două strategii principale pentru crearea artei generative, deși cele mai multe se vor încadra între cele două strategii.

Primul este să nu ai rezultate în minte și să vezi ce generează computerul pe măsură ce te joci.

Al doilea este că aveți o idee foarte finalizată despre cum doriți să arate arta, iar aleatoria schimbă doar rezultatul final.

De unde ar trebui să începi?

Dacă știți JavaScript, p5.js este un loc minunat pentru a începe. Scopul său este de a „face codificarea accesibilă pentru artiști, designeri, educatori și începători”. Este un înveliș pe API Canvas, și simplifică o mulțime de matematică. Se concentrează pe desen, dar puteți face interacțiuni de sunet, video sau webcam cu acesta, dacă sunteți interesat de aceste forme de artă!

O introducere rapidă la P5

În primul rând, încărcați în p5 CDN. Apoi, în fișierul dvs. JavaScript, veți adăuga două funcții care vor fi utilizate în scriptul p5: setup și draw. Aceste nume sunt necesare pentru ca p5 să le apeleze.

setup este apelat la pornirea programului. Probabil că veți crea o pânză pe care să o desenați folosind createCanvas funcție și puteți seta unele valori implicite acolo. Se numește o singură dată!

draw se apelează după configurare și se execută constant până când sună noLoop, ceea ce îl va opri din nou să ruleze. Puteți controla de câte ori draw rulează în fiecare secundă cu frameRate funcţie.

Cu arta generativă, am pus de obicei noLoop în setup funcție, ceea ce face draw rulați o singură dată în loc să continuați.

Iată un șablon de pornire p5 pe CodePen.

Deoarece am vorbit atât de multe despre importanța aleatoriei pentru arta generativă, o altă funcție importantă în p5 este random. Funcționează similar cu JavaScript Math.random dar puteți seta o gamă pentru numere, astfel încât să nu trebuie să faceți atât de multă matematică pentru a obține numărul într-un format util.

p5 Linii

Puteți crea o linie în p5.js astfel:

line(startX, startY, endX, endY)

Apoi, puteți genera aleatoriu o grămadă de linii și puteți crea o piesă simplă de artă generativă ca aceasta:

Chiar și scripturile foarte simple pot genera piese de artă grozave!

p5 Forme

De asemenea, puteți crea forme cu p5 – cum ar fi cercuri, triunghiuri și pătrate.

Iată un exemplu de creare a unor forme cu p5:

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

Apoi, putem crea mai multe forme pentru a construi ceva mai distractiv!

p5 Mișcarea

Putem adăuga mișcare desenelor noastre prin eliminarea noLoop apel funcție în setup funcție – verificați acest lucru!

Culoare

De asemenea, vă puteți juca cu culoarea cu arta generativă alegând culori la întâmplare. Puteți face acest lucru matematic prin valorile RGB sau puteți genera o paletă de culori cu selectorul de culori preferat (am folosit acest unu).

Puteți seta culoarea de umplere cu color funcţie. Este nevoie de o grămadă de formate diferite, cum ar fi culorile denumite, RGBA-urile și codurile hex.

De asemenea, puteți schimba culoarea conturului folosind stroke. Puteți, de asemenea, să eliminați schița utilizând noStroke sau faceți o lățime diferită cu strokeWeight.

Punând totul împreună

Odată ce avem toate aceste piese la locul lor, putem combina tehnicile pentru a construi niște lucruri foarte interesante.

O altă strategie: Tweaking Tutoriale

De asemenea, puteți genera arta generativă foarte interesantă luând munca altcuiva și construind din ea. De exemplu, iată rezultatul unui tutorial realizat de Dan Shiffman:

Iată două modificări ale acestuia pentru a crea efecte diferite:

Iată o colecție Codepen cu și mai multe!

Puteți să urmăriți tutoriale, să codificați proiectele CodePens sau Glitch și să creați ceva nou și unic. Asigurați-vă că acordați și artistului original un credit.

Foaie de cheats

Iată o foaie de trișare cu toate funcționalitățile P5 pe care le-am folosit pentru acest tutorial.

1612069207 987 O introducere in arta generativa ce este si cum o

Citeste mai mult

Păstrăm legătura

Această postare a fost scrisă împreună cu James Reichard. Dacă vă creați propria artă, asigurați-vă că o trimiteți la Tweet! (Ali și James).

Publicat inițial la dev.to.