d3.js & p5.js: alati za kreativno kodiranje i vizuelizaciju podataka

11.11.2019. / 09:38
Share
 Slika 1: Generativna algoritamska slika; autor: Alban Guerry-Suire
Slika 1: Generativna algoritamska slika; autor: Alban Guerry-Suire
 Slika 1: Generativna algoritamska slika; autor: Alban Guerry-Suire

Programiranje računara uglavnom se smatra egzaktnom disciplinom, koja nema puno dodirnih tačaka sa crtanjem, slikanjem, komponovanjem, pripovedanjem ili pisanjem poezije. S jedne strane imamo programiranje kao akademsku disciplinu koja proučava algoritamske sisteme, s druge – praktično softversko inženjerstvo koje rešava praktične probleme.

Međutim, uprkos svojoj naučnoj i tehničkoj kompleksnosti, programiranje ne mora da bude strogo utilitarno. Sve je više umetnika i dizajnera koji se služe programiranjem u svojoj kreativnoj praksi. Ima i onih kojima je to jedini alat. Kreativno kodiranje tako se i definiše: kao vrsta programiranja čiji cilj nije da se stvori nešto isključivo funkcionalno, nego i ekspresivno. Na preseku između ekspresivnog i funkcionalnog nalaze se transdisciplinarne oblasti poput vizuelizacije podataka, generativne i proceduralne umetnosti, novomedijskog dizajna, kao i oblikovanja video igara i digitalnih interakcija.

Svaki dizajner i umetnik mora dobro da poznaje svoje alate: klasični dizajner olovku,  pismo i štamparsku presu, slikar kičicu i štafelaj, kompozitor notni sistem i muzičke instrumente, pisac sintaksu i gramatiku jezika na kojem piše. Za novomedijskog stvaraoca, alati su digitalni. Tu uglavnom govorimo o tzv. softverskim bibliotekama, paketima programskog koda koji se koriste za razvoj specifičnih programa i aplikacija.

U tekstu koji sledi uporedićemo dve popularne softverske biblioteke za kreativno kodiranje i vizuelizaciju podataka: p5.js i d3.js. Radi se o JavaScript (JS) bibliotekama posvećenim kreiranju vizuelno-medijskih interaktivnih sadržaja za Web browsere.

Napravićemo razliku između rasterske i vektorske grafike (jer ona formuliše i centralnu razliku između ove dve biblioteke). Zatim ćemo pokazati kako da isprogramirate jednostavnu grafiku služeći se obema tehnologijama, da bismo na kraju istakli prednosti i mane obe tehnologije, te vas uputili na literaturu.

Kao razvojno okruženje za pisanje koda možete koristiti šta god vam odgovara: Sublime Text, Atom, WebStorm, ali i običan Notepad.

Slika 2: Vizuelizacija podataka o deportacijama migranata; autorka i dizajnerka: Nadieh Bremmer

Rasteri protiv vektora

Glavna razlika između biblioteka p5.js i d3.js sastoji se u tome da p5.js radi sa rasterskom grafikom, dok je d3.js posvećen vektorskoj grafici. Rasterska grafika barata pojedinačnim pikselima, kvadratnim jedinicama slike na ekranu, a vektorska – geometrijom oblika na slici. Ukoliko ste radili sa paketom Adobe, znate da Photoshop služi za rastersku a Illustrator za vektorsku grafiku.

 

 

Slika 3: Vizuelni prikaz razlike između vektorske (levo) i rasterske grafike (desno)

Oba tipa grafike imaju svoje prednosti i mane. Rasterska grafika (p5.js) omogućuje kreiranje prefinjenih oblika, detalja i finih nijansi. Primera radi, koristi se za algoritamsku obradu fotografija. Manjkavosti rastera uglavnom se tiču fiksiranih dimenzija slike (ukoliko joj promenite veličinu, gubi se originalni kvalitet) i uopšte, nefleksibilnosti. Ovo je naročito važno na modularnom i fluidnom Webu, koji se svakom korisniku prikazuje na ekranu različitih dimenzija.

Vektorska grafika (d3.js) prirodni je saveznik Weba. Koliko god da je uvećate ili smanjite, ostaće ista. Elementi vektorske grafike nisu pikseli nego tačke, linije i drugi geometrijski oblici, koji se lako vezuju za korisničke događaje (events) na Web sajtu (npr. click, scroll ili hover). S druge strane, vektorska grafika grublja je od rasterske i nije sposobna za sofisticiranije vizuelizacije.

Uvod u p5.js

Softverska biblioteka p5.js je eksperimentalna Web laboratorija za digitalne kreativce, zasnovana na rasterskoj grafici. Naslednica je Processinga, programskog jezika i softverskog okruženja osmišljenog specijalno za novomedijske profesionalce, istraživače i autore. Za razliku od Processinga baziranog na programskom jeziku Java, p5.js pisan je u JavaScriptu (ne mešati Javu i JavaScript!), što omogućuje da vaši radovi budu direktno integrisani u Web stranice i tako budu dostupni daleko većoj publici.

 

Slika 4: Grafika generisana uz pomoć tehnologije p5.js; autor: Paul Brown

 

Kako p5.js generiše grafiku pokazaćemo na jednostavnom primeru: nacrtaćemo žuti krug na tamno-sivoj pozadini. Za početak, potreban vam je HTML fajl, koji će predstavljati okvir za vašu grafiku. HTML je osnovni Web format: svaka Web stranica sastoji se iz makar jednog HTML fajla. Za razliku od JavaScripta, HTML nije u strogom smislu programski nego opisni jezik koji sadrži deskripciju strukture i sadržaja sajta.

Osnovni fajl, koji ćete nazvati index.html, sadrži sledeći kod:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <script src="mojP5Kod.js"></script>
  </head>
  <body>
  </body>
</html>

Kôd 1: HTML kôd fajla index.html za p5.js primer

Struktura ovog sajta je jednostavna: imamo zaglavlje (head) i telo sajta (body), kao i reference na dve JavaScript skripte (p5.js i mojP5Kod.js), uz pomoć kojih se generiše grafika. Prva script referenca odnosi se na samu p5.js biblioteku (kôd se podiže sa online servera, otuda je link dugačak), dok je mojP5Kod.js fajl koji sami treba da napravite i stavite u isti folder u kojem se nalazi index.html. Kod je sledeći:

function setup() {
createCanvas(400, 400);
    background(20);
}

function draw() {
    fill(240, 220, 10);
    noStroke();
    ellipse(200, 200, 200, 200);
}

Kôd 2: JS kôd fajla mojP5Kod.js

mojP5Kod.js sadrži dve funkcije, setup() i draw(). Funkcija setup() zadužena je za osnovnu postavku vizuelizacije: kreiranje HTML elementa canvas, unutar kojeg se dešava celokupna rasterska vizuelna postavka. U funkciji draw() crtamo žuti krug, služeći se RGB sistemom boja i p5.js funkcijom za crtanje elipsi uz pomoć koordinatnog sistema vizuelizacije.

Evo kako izgleda konačni HTML kôd stranice, nakon što je sajt pokrenut a JS skripta izgenerisala grafiku u okviru canvas elementa:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <script src="mojP5Kod.js"></script>
  </head>
  <body>

    <canvas id="defaultCanvas0" class="p5Canvas"
    style="width: 400px; height: 400px;" width="400" height="400">
    </canvas>

  </body>
</html>

Kôd 3: Konačni HTML, nakon što je JS skripta dodala canvas u DOM model

Interakcije i animacije kreiraju se uz pomoć funkcije draw(), koja se po defaultu izvršava 60 puta u sekundi (default frame rate iznosi 60). Ukoliko dodamo samo jednu varijablu i poigramo se generatorom nasumičnih (random) brojeva, dobićemo uzdubljiv vizuelni efekat. Aktivirajte sledeći kôd da vidite šta će se desiti:

function draw() {
    let r = random(5, 50);
    fill(240, random(0, 255), r*4);
    noStroke();    
    ellipse(mouseX, mouseY, r, r);
}

Kôd 4: Alternativna funkcija za crtanje u fajlu mojKod.js

Lista primera i radova napravljenih uz pomoć softverske biblioteke p5.js dugačka je i opsežno dokumentovana. Knjige Code+Form in Design, Art, and Architecture i Make: Getting Started with p5.js pružaju detaljniji uvid u mogućnosti ove tehnologije.

Uvod u d3.js

Za razliku od p5.js, koja je prvenstveno namenjena kreativcima koji (još uvek) nisu uhodani programeri, d3.js je tvrda i ozbiljna tehnologija koja od vas očekuje da dobro poznajete JavaScript i DOM model. Osim toga, d3.js je usresređena upravo na vizuelizaciju podataka i bazirana je na vektorima. Dok se p5.js bavi proceduralnom i generanivnom grafikom u opštem smislu, d3.js pruža bogat asortiman konkretnih alata za analizu, vizuelizaciju i integraciju podataka unutar Web okruženja. Sajtovi poput New York Timesa koriste d3.js za svoje interaktivne vizuelizacije.

 

 

Slika 5: Primeri vizuelizacija kreiranih uz pomoć tehnologije d3.js

Kako da uz pomoć ove tehnologije napravimo naš žuti krug na tamnosivoj pozadini? Za početak, kao i u prethodnom slučaju, kreiraćemo index.html:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js"></script>    
  </head>
  <body>
      <script src="mojD3Kod.js"></script>
  </body>
</html>

Kôd 5: HTML kôd fajla index.html za d3.js primer

Za razliku od prethodnog primera, ovde se naša JS skripta, <script src="mojD3Kod.js">, referencira u okviru body taga. To je potrebno zbog toga što d3.js zahteva da se DOM u potpunosti učita pre nego što počnemo da ga punimo grafikom.

Prava razlika između p5.js i d3.js prepoznaje se u JavaScript fajlu mojD3Kod.js:

var grafika = d3.select("body").append("svg")
    .attr("width", 400)
        .attr("height", 400);

grafika.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 400)
    .attr("height", 400)
    .attr("stroke", "none")
    .attr("fill", "rgb(20)");

grafika.append("circle")
    .attr("cx", 200)
    .attr("cy", 200)
    .attr("r", 100)
    .attr("stroke", "none")
    .attr("fill", "rgb(240, 220, 10)");

Kôd 6: JS kôd fajla mojD3Kod.js

Dok p5.js puni HTML canvas, koji za računar (i za browser) predstavlja samo matricu piksela i ništa više, d3.js kreira SVG unutar DOM modela HTML stranice. SVG je vektorska grafika (Scalable Vector Graphics) opisana onako kako se to čini unutar HTML/XML paradigme: uz pomoć hijerarhijski organizovanih elementa i njihovih atributa.

Evo kako izgleda konačni HTML kôd stranice, nakon što je sajt pokrenut a JS skripta izgenerisala SVG grafiku:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js"></script>    
  </head>
  <body>
      <script src="mojD3Kod.js"></script>

    <svg width="400" height="400">
  <rect x="0" y="0" width="400" height="400" stroke="none" fill="rgb(20)">
  </rect>
  <circle cx="200" cy="200" r="100" stroke="none" fill="rgb(240, 220, 10)">
  </circle>
</svg>

  </body>
</html>

Kôd 7: Konačni HTML, nakon što je JS skripta dodala SVG u DOM model

SVG ugrađen u HTML je moćna stvar. SVG elemente sada možemo selektovati i editovati kao bilo koje druge elemente u DOM modelu stranice. Takođe ih možemo animirati i dodavati im tzv. listenere, softverske osluškivače koji reaguju na korisničke događaje (events).

Ukoliko, primera radi, poželimo da animiramo krug onda kad se klikne na njega, dovoljno je da uradimo sledeće:

grafika.append("circle")
    .attr("cx", 200)
    .attr("cy", 200)
    .attr("r", 100)
    .attr("stroke", "none")
    .attr("fill", "rgb(240, 220, 10)")
    .on("click", function() {
        d3.select(this)
        .transition().duration(250)
        .attr("r", 150);
    });

Kôd 8: Kružić koji se povećava na klik mišem

Mane biblioteke d3.js tiču se složenosti: potrebno je puno vremena da se u potpunosti savlada, što odbija mnoge dizajnere. Arhitektura biblioteke je izuzetno elegantna i apstraktna (primera radi, sistem selekcija elemenata), čega je cena obeshrabrujuća kompleksnost. Pa ipak, ukoliko uložite truda i vremena, bićete u stanju da pravite zadivljujuće stvari.

Biblioteka d3.js je sjajno dokumentovana. Primera je bezbroj, a postoje i dobre knjige, poput Interactive Data Visualization for the Web: An Introduction to Designing with D3 i Data Visualization with Python and JavaScript: Scrape, Clean, Explore & Transform Your Data.

Povucimo crtu

Ukoliko ste programer-početnik a na programiranje pre svega gledate kao na još jedan ekspresivni alat za svoju već postojeću kreativnu praksu, p5.js je bolji izbor. Ukoliko ste malo iskusniji, pre svega u radu na Webu i zanimaju vas praktičnije aplikacije i funkcionalna vizuelizacija podataka, slobodno se opredelite za d3.js.

Nećete pogrešiti ni ako ih naučite obe. Ne samo što se koriste za različite stvari, nego i koriste sasvim drugačiju programsko-crtačku logiku i teško ih je pomešati.

Postoje i druge, slične JS biblioteke za kreativno programiranje: three.js, processing.js, paper.js, raphael, anime.js i mnoge druge. Ako ste spremni da eksperimentišete van okvira Internet browsera, istražite i tehnologije poput vvvv, PureData, MaxMSP/Jitter, Unity, OpenFrameworks i Cinder.

Koji god alat da izaberete, imajte na umu da je tehnologija uvek sporedna u odnosu na ideju i koncept, o kakvoj se god tehnologiji radilo: štafelaju i četkici, štamparskom stroju, filmskoj kameri, muzičkom instrumentu ili modernom računaru. Oblik mora prirodno proizići iz ideje. Isključivo ideje ostaju. Kao što je rekao divni Jonathan Harris, jedan od mojih omiljenih digitalnih umetnika: samo se budale zarobe alatima.

(Napomena: kôd za oba primera iz ovog teksta možete preuzeti besplatno sa autorovog servera.)

Ocijenite kvalitet članka