Tiling si Mind Coalescence

Tiling si Mind Coalescence

Au trecut cinci ani de când JetBrains a implementat pentru prima dată tehnologii de calcul în grafica sa de branding. La început, pasionații noștri generativi de artă lucrau în echipe separate, răspândite în întreaga companie. Dar, în cele din urmă, s-au reunit și au format o echipă cunoscută în mod colectiv drept Inițiativa Artei Computaționale. De atunci, generarea de artă a devenit o parte semnificativă a procesului nostru de proiectare. Am experimentat cu o mulțime de algoritmi și tehnologii diferite, am jucat cu constelații cosmice și metaboli fluide și am încercat chiar algoritmul Voronoi și rețelele neuronale.

Anul acesta am dezvoltat un nou generator de grafică numit Tiler. Așa cum ați putea deja să ghiciți din numele său, se bazează pe o grilă de plăci distribuite aleatoriu. Plăcile formează o imagine asemănătoare unui model, care este unică la fiecare reîncărcare a paginii.

În Tiler, toate plăcile sunt grupate în seturi în funcție de stilul lor și de formele pe care le conțin. Aceste plăci au fost dezvoltate manual de către designerii noștri grafici. Ca experiment, am implementat o abordare colaborativă care a combinat expresia artistică individuală cu un algoritm de plăcuțe de calcul. A fost distractiv și captivant să priviți plăcile discrete monocrome transformându-se într-o piesă de artă unificată și vie, cu puterea codului. În același timp, fiecare placă reflectă viziunea artistică a persoanei care a proiectat-o: unele plăci sunt geometrice și complexe, unele sunt mai minimaliste, altele sunt destul de curbate și organice.

În interfața Tiler, puteți selecta Tile și încercați diferite seturi de plăci, limitați diversitatea plăcilor în Aleatoriu, apoi amestecați plăcile de pe planșă sau reîmprospătați plăcile din setul de plăci selectat.

Culoarea

După cum ați observat, nu există nicio dependență între forma unei țigle și culoarea acesteia, deoarece există doi algoritmi diferiți responsabili de colorare. În mod implicit, fiecare țiglă este umplută individual și fără griji pentru culoarea vecinilor săi. Aici atribuim o culoare aleatorie fiecărei țigle și nimic altceva. Dar dacă doriți un rezultat mai lin, puteți selecta Aleatoriu și puteți activa în schimb o umplere cu gradient. Această opțiune utilizează algoritmul de zgomot Perlin pentru a realiza tranziții de culoare grațioase. De asemenea, puteți afecta dimensiunea modelului de gradient și să-l scalați de la larg la oarecum granulat utilizând controlul dimensiunii de gradient.

Dacă simțiți că ai nevoie de mai multă culoare, nu ezita să schimbi fundalul în secțiunea Culoare și să selectezi una dintre cele trei culori disponibile. De asemenea, îi puteți controla saturația și luminozitatea jucându-vă cu parametrii de culoare Mix și Base.

Mărimea

În afară de culoare, dimensiunea plăcilor este o altă caracteristică crucială care poate schimba complet opera de artă. Dacă deschideți panoul Mărimi, puteți modifica dimensiunea unei celule întregi de dale, puteți scala forma din interiorul acestuia sau puteți modifica ambele controale. Vă încurajăm să experimentați valori mai mari pentru dimensiunea formei – rezultatele vă pot surprinde!

Schimbarea unui singur țile

Deci, toți parametrii menționați mai sus afectează toate plăcile dintr-o grilă. Cu toate acestea, s-ar putea să vă întrebați: „Ce se întâmplă dacă vreau doar să modific acea singură țiglă?”. Ei bine, puteți face acest lucru cu ușurință făcând clic pe țiglă specifică. În mod implicit, țigla va fi înlocuită cu alta din același set de plăci. Când ajungeți la ultima țiglă dintr-un set, veți reveni la țigla inițială și veți începe din nou. Alternativ, puteți seta un alt parametru pe care să îl modificați în acțiunea Click și selectați Rotire sau Modificare opacitate. Acum, data viitoare când faceți clic pe țiglă, aceasta se va roti sau va deveni mai mult sau mai puțin opacă.

Salvarea unui artwork

Există o funcție specială care vă ajută dacă simțiți că doriți să salvați opera de artă după ce ați terminat de lucrat la ea. După ce ați reglat totul după cum doriți, puteți face clic pe Creați URL, care va salva toate presetările curente și va afișa adresa URL a piesei în bara de adrese. Acum, dacă deschideți adresa URL respectivă într-o altă filă, Tiler va genera acea imagine exactă pe care ați creat-o.

Există, de asemenea, o opțiune care vă permite să descărcați pur și simplu imaginea. Generatorul se bazează pe grafică vectorială, astfel încât să puteți exporta imaginea ca fișier SVG.

Animaţie

La fel ca la generatoarele noastre anterioare, Tiler are un mod de animație. În prezent, este încă o caracteristică experimentală, dar o puteți încerca deja făcând clic pe Animați în secțiunea Animație. Animația durează un număr aleatoriu de secunde între zero și Durată. Folosind butoanele, puteți controla această valoare și setați o valoare maximă pentru întârzierea dintre fiecare pas de animație din controlul Întârziere.

Detalii tehnice

Tilerul este construit cu JavaScript pur și folosește SVG.js pentru a reda grafica. Am fost ambivalenți în ceea ce privește utilizarea JavaScript la început, dar sa dovedit a fi cu adevărat minunat pentru dezvoltarea unui sistem de placare pe web. A fost o experiență fascinantă să explorezi JavaScript așa cum este atunci când creezi imagini generative complexe.

Structura generatorului în sine este destul de simplă: există un obiect grilă, care descrie întregul sistem de plăci și un obiect placă, care stochează informații specifice unei singure plăci. În primul rând, Tiler creează o instanță a unui obiect grilă și îi transmite toți parametrii impliciți. Apoi creează câteva matrice cu date aleatorii pentru culori, distribuția plăcilor și rotația. În cele din urmă, Tiler inițializează mai multe obiecte de tile. Fiecare dintre ele are o metodă specială de redare care redă un tile vectorial colorat atribuit obiectului.

Cu toate acestea, redarea graficelor utilizând API-ul SVG DOM nativ poate fi destul de dificilă, deoarece este destul de greu de citit și întreținut. Astfel, am decis să folosim SVG.js pentru a rezolva această problemă. Această bibliotecă oferă o sintaxă minimalistă și prietenoasă, astfel încât să vă puteți păstra codul în ordine și să vă gândiți la lucrările dvs. de artă, nu la sintaxă.

Interfața Tiler este alimentată de noua noastră bibliotecă UI: Tron GUI, care este construită cu limbajul Elm și este pe deplin compatibilă cu JavaScript. Deci, dacă sunteți pasionați de tablourile de bord futuriste, vă încurajăm să îl implementați în aplicațiile dvs.!

Contact

    Etiam magna arcu, ullamcorper ut pulvinar et, ornare sit amet ligula. Aliquam vitae bibendum lorem. Cras id dui lectus. Pellentesque nec felis tristique urna lacinia sollicitudin ac ac ex. Maecenas mattis faucibus condimentum. Curabitur imperdiet felis at est posuere bibendum. Sed quis nulla tellus.

    ADDRESS

    63739 street lorem ipsum City, Country

    PHONE

    +12 (0) 345 678 9

    EMAIL

    info@company.com

    Cart